/* Reference: Royal Blue Vietnamese Water-Quality Dashboard, 06/10/2026. Presentation only. Monitoring values, timestamps and rules remain API-driven. */ :root body#royal-blue-app.royal-blue-interface { --rb-blue:#0862ff; --rb-ink:#061b70; --rb-text:#173eae; --rb-muted:#5976bd; --teal:#0862ff; --teal-dark:#064ee0; --ink:#061b70; --muted:#5976bd; --bg:#edf5ff; --white:#fff; --font-family:'Be Vietnam Pro', 'Segoe UI', sans-serif; --sidebar-width:200px; --card-radius:9px; font-family:var(--font-family); color:var(--rb-ink); background:#edf5ff; } :root body#royal-blue-app.royal-blue-interface .workspace {background:linear-gradient(115deg,#f2f7ff,#eaf4ff);} :root body#royal-blue-app.royal-blue-interface #content {padding:18px 18px 14px;max-width:1700px;margin:auto;} :root body#royal-blue-app.royal-blue-interface .sidebar {background:#fff;border-right:1px solid #deebff;box-shadow:none;color:var(--rb-text);} :root body#royal-blue-app.royal-blue-interface .brand {padding:19px 12px 22px;gap:9px;} :root body#royal-blue-app.royal-blue-interface #brand-name {color:var(--rb-ink);font-size:14px;font-weight:800;letter-spacing:-.3px;} :root body#royal-blue-app.royal-blue-interface #brand-subtitle {color:var(--rb-muted);font-size:11px;margin-top:4px;} :root body#royal-blue-app.royal-blue-interface #brand-logo {color:#0877ff;} :root body#royal-blue-app.royal-blue-interface #navigation {padding:0 10px;} :root body#royal-blue-app.royal-blue-interface #navigation a {color:var(--rb-text);font-size:13px;font-weight:500;border:0;border-radius:8px;margin:2px 0;min-height:44px;padding:10px;gap:12px;background:transparent;box-shadow:none;} :root body#royal-blue-app.royal-blue-interface #navigation a.active {background:#e8f2ff;color:var(--rb-blue);font-weight:700;box-shadow:none;} :root body#royal-blue-app.royal-blue-interface #navigation a.active::before {display:none;} :root body#royal-blue-app.royal-blue-interface #navigation a svg {width:23px;height:23px;color:#0862ff;} :root body#royal-blue-app.royal-blue-interface #navigation a[href='#alerts'] svg {color:#ff2836;} :root body#royal-blue-app.royal-blue-interface #navigation a:is([href='#manual'],[href='#scenarios']) svg {color:#8b18ff;} :root body#royal-blue-app.royal-blue-interface #navigation a[href='#thresholds'] svg {color:#1643b0;} :root body#royal-blue-app.royal-blue-interface .ob-nav-label {display:none;} :root body#royal-blue-app.royal-blue-interface .ob-sidebar-note {display:none;} :root body#royal-blue-app.royal-blue-interface .sidebar-bottom {display:none;} :root body#royal-blue-app.royal-blue-interface .rb-sidebar-account {margin-top:auto;padding:14px 10px;border-top:1px solid #dce9ff;} :root body#royal-blue-app.royal-blue-interface .rb-sidebar-account .account {display:flex;gap:8px;width:100%;padding:8px 0;color:var(--rb-ink);background:transparent;border:0;font-size:12px;} :root body#royal-blue-app.royal-blue-interface .avatar {background:#deecff;color:var(--rb-blue);} :root body#royal-blue-app.royal-blue-interface .topbar {height:54px;min-height:54px;padding:8px 18px;border-bottom:1px solid #d5e5ff;background:#f7fbff;box-shadow:none;} :root body#royal-blue-app.royal-blue-interface #breadcrumb {color:#294db5;font-size:12px;} :root body#royal-blue-app.royal-blue-interface .topbar-right {gap:16px;} :root body#royal-blue-app.royal-blue-interface .notification-button {color:#2143b9;} .rb-clock {font-size:12px;white-space:nowrap;color:#4b6ab6;} .rb-top-export {display:inline-flex;align-items:center;gap:7px;background:#0862ff;color:white;padding:9px 14px;font-size:12px;font-weight:600;border-radius:6px;text-decoration:none;white-space:nowrap;} .rb-top-export:hover {background:#064ee0;} :root body#royal-blue-app.royal-blue-interface .btn:not(.secondary):not(.danger) {background:#0862ff;border-color:#0862ff;color:white;box-shadow:none;} :root body#royal-blue-app.royal-blue-interface .ob-page-heading {margin:0 0 15px;padding:0;align-items:center;} :root body#royal-blue-app.royal-blue-interface .ob-page-heading h1 {font-size:29px;font-weight:800;color:var(--rb-ink);line-height:1.35;letter-spacing:-.8px;margin:0 0 4px;} :root body#royal-blue-app.royal-blue-interface .ob-page-heading p {color:var(--rb-text);font-size:14px;margin:0;} :root body#royal-blue-app.royal-blue-interface .ob-heading-actions {display:none;} :root body#royal-blue-app.royal-blue-interface .rb-summary {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 12px;} :root body#royal-blue-app.royal-blue-interface .rb-summary .ob-stat {display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto;gap:6px 12px;position:relative;padding:13px 12px 10px;min-height:108px;border:1px solid #d4e5ff;border-radius:8px;background:#fff;box-shadow:none;overflow:hidden;} :root body#royal-blue-app.royal-blue-interface .rb-summary .ob-stat::before {display:none;} .rb-kpi-icon {display:grid;place-items:center;width:44px;height:44px;background:#e4efff;border-radius:8px;color:#0862ff;} .rb-kpi-content {display:flex;flex-direction:column;gap:1px;min-width:0;} .rb-kpi-label {font-size:12px;color:#092c89;font-weight:600;line-height:1.5;} .rb-kpi-value {font-size:36px;line-height:1.12;letter-spacing:-1px;color:#061b70;font-weight:800;} .rb-kpi-value small {font-size:24px;margin-left:3px;color:#0862ff;} .rb-kpi-caption {grid-column:1/-1;font-size:10px;color:#5876bd;line-height:1.5;margin:0;padding-right:18px;} .rb-kpi-link {position:absolute;right:9px;bottom:9px;color:#0862ff;border:0;background:none;padding:2px;display:flex;} :root body#royal-blue-app.royal-blue-interface .rb-summary .ob-kpi-fresh .rb-kpi-icon {background:#e2f7ff;} :root body#royal-blue-app.royal-blue-interface .rb-summary .ob-kpi-attention[data-has-attention=true] {border-color:#ffac26;background:#fffaf1;} .ob-kpi-attention .rb-kpi-icon {color:#ff8b00;background:#fff0d4;} .ob-kpi-attention .rb-kpi-label {color:#d85d00;} .ob-kpi-pending .rb-kpi-icon {color:#092c89;} :root body#royal-blue-app.royal-blue-interface .ob-network {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:5px;border:1px solid #e0ecff;border-radius:8px;background:#fff;margin-bottom:12px;} :root body#royal-blue-app.royal-blue-interface .ob-network .ob-section-heading {grid-column:2;grid-row:1;margin:0;} :root body#royal-blue-app.royal-blue-interface .ob-network .ob-section-heading h2 {display:none;} :root body#royal-blue-app.royal-blue-interface .ob-network .ob-station-tabs {grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:0;border:0;background:transparent;overflow:auto;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-station {height:36px;min-height:36px;min-width:65px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #e1edff;border-radius:6px;background:#f4f8ff;color:#173eae;padding:7px 10px;box-shadow:none;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-station.selected {background:#0862ff;color:#fff;border-color:#0862ff;box-shadow:0 2px 6px #0862ff20;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-station::before {display:none;} :root body#royal-blue-app.royal-blue-interface .ob-network :is(.sa-source-icon,.sa-identity small,.sa-selected-check) {display:none;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-top {display:contents;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-identity strong {color:inherit;font-size:12px;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-bottom {display:block;padding:0;background:none;border:0;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-status-chip {display:block;width:10px;height:10px;min-width:0;border-radius:50%;padding:0;font-size:0;background:var(--sa-color);box-shadow:none;border:1px solid #ffffffa0;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-status-chip b {display:none;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-priority {height:34px;border:1px solid #ff3540;border-radius:6px;background:#fff;color:#f02030;padding:6px 9px;font-size:11px;gap:5px;white-space:nowrap;} :root body#royal-blue-app.royal-blue-interface .ob-route-disclosure {grid-column:1/-1;justify-self:end;font-size:11px;} :root body#royal-blue-app.royal-blue-interface .ob-route-disclosure:not([open]) {position:absolute;clip-path:inset(50%);height:1px;width:1px;overflow:hidden;} :root body#royal-blue-app.royal-blue-interface .ob-route-disclosure:focus-within {position:static;clip-path:none;width:auto;height:auto;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-workspace-columns {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start;gap:12px;margin-bottom:12px;} :root body#royal-blue-app.royal-blue-interface .ob-workspace-column {gap:12px;} :root body#royal-blue-app.royal-blue-interface .ob-overview :is(.station-instrument,.analysis-trend,.data-context,.fleet-comparison) {padding:13px;border:1px solid #dceaff;border-radius:9px;background:#fff;box-shadow:none;} :root body#royal-blue-app.royal-blue-interface .ob-overview :is(h2,h3) {color:#061b70;font-size:18px;line-height:1.4;font-weight:750;letter-spacing:-.45px;margin:0;} :root body#royal-blue-app.royal-blue-interface .ob-overview :is(.analysis-heading,.rb-station-heading) h2 {display:flex;align-items:center;gap:9px;} .rb-station-heading {display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px;} :root body#royal-blue-app.royal-blue-interface .rb-station-heading h2 {flex:1;min-width:180px;font-size:16px;} .rb-station-heading .badge {font-size:10px;white-space:nowrap;background:#e6f0ff;color:#0862ff;border:1px solid #cce0ff;border-radius:16px;padding:4px 9px;} :root body#royal-blue-app.royal-blue-interface .rb-station-heading .ob-change-station {margin:0;} :root body#royal-blue-app.royal-blue-interface .ob-measurement-header {display:block;padding:0;margin:0;border:0;} :root body#royal-blue-app.royal-blue-interface .station-instrument .hydro-hero {margin:0 0 10px;padding:11px 12px;border:1px solid #ffd48c;border-radius:7px;background:#fff8ec;color:#bf6200;display:block;} :root body#royal-blue-app.royal-blue-interface .station-instrument .hydro-hero::before {display:none;} :root body#royal-blue-app.royal-blue-interface .station-instrument .hydro-hero.level-0 {border-color:#b7d7ff;background:#f0f7ff;} :root body#royal-blue-app.royal-blue-interface .station-instrument .hydro-hero:is(.level-2,.level-3,.level-4) {border-color:#ffb2ba;background:#fff1f3;} :root body#royal-blue-app.royal-blue-interface .station-instrument .hydro-hero.level-null {border-color:#d5dfef;background:#f3f6fb;} :root body#royal-blue-app.royal-blue-interface .station-instrument .hydro-hero .badge {background:transparent;font-size:13px;border:0;padding:0;box-shadow:none;} :root body#royal-blue-app.royal-blue-interface .station-instrument .hydro-hero p {font-size:11px;color:#4269b3;margin:5px 0 0;} :root body#royal-blue-app.royal-blue-interface .station-instrument .hydro-hero :is(.hydro-eyebrow,.hydro-hero-meta,.hydro-hero>a) {display:none;} :root body#royal-blue-app.royal-blue-interface .station-instrument .ir-reference-banner {margin:0 0 10px;background:#e7f2ff;border-color:#d0e3ff;border-radius:6px;padding:9px 10px;color:#0862ff;} :root body#royal-blue-app.royal-blue-interface .station-instrument .ir-reference-banner strong {font-size:12px;color:#092578;} :root body#royal-blue-app.royal-blue-interface .station-instrument .ir-reference-banner span {font-size:10px;color:#5475bc;} :root body#royal-blue-app.royal-blue-interface .station-instrument .ir-reading-guide {display:none;} :root body#royal-blue-app.royal-blue-interface .ob-overview .instrument-readings {gap:6px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .instrument-readings>.metric.instrument-reading {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:10px 9px;border:1px solid #e2edff;border-radius:7px;background:linear-gradient(110deg,#fff,#fbfdff);min-height:77px;box-shadow:none;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-name {font-size:12px;color:#092578;gap:7px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-name strong {font-weight:650;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-icon {width:30px;height:30px;border-radius:6px;background:#e5f0ff;color:#0862ff;} :root body#royal-blue-app.royal-blue-interface [data-parameter=NH4] .ir-icon {color:#9024e8;background:#f1e8ff;} :root body#royal-blue-app.royal-blue-interface [data-parameter=PH] .ir-icon {color:#009c91;background:#e2f6ef;} :root body#royal-blue-app.royal-blue-interface [data-parameter=TEMP] .ir-icon {color:#ff1836;background:#ffeaf0;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-value {font-size:27px;font-weight:800;color:#061b70;margin:2px 0 0 37px;line-height:1.2;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-value>span {font-size:11px;color:#183eac;font-weight:500;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-source {display:none;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-quality {font-size:10px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-scale-heading {margin-bottom:5px;gap:2px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-scale-heading>span {font-size:9px;color:#6480bb;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-scale-heading>strong {font-size:10px;color:#193c9f;font-weight:600;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-status {color:#00a27e;font-size:10px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-status-neutral {color:#6380b6;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-evidence>summary {font-size:9px;color:#5471b0;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-gauge :is(.reading-ticks,.standard-gauge-ticks) {font-size:9px;color:#6380b6;height:12px;margin-top:3px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .standard-gauge-pointer {background:#063ca8;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-extra-readings {margin-top:7px;font-size:11px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-measurement-footer {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0 0;margin-top:7px;border-top:1px solid #e5edfc;} :root body#royal-blue-app.royal-blue-interface .ob-overview .instrument-provenance {display:block;font-size:10px;color:#234ba6;} :root body#royal-blue-app.royal-blue-interface .ob-overview .instrument-provenance>span {display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:10px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .instrument-provenance strong {font-size:10px;font-weight:500;} :root body#royal-blue-app.royal-blue-interface .ob-overview .instrument-detail {font-size:11px;padding:7px 10px;white-space:nowrap;border-radius:5px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .rb-coverage-card h2,.rb-source-card h2 {display:flex;align-items:center;gap:10px;} .rb-coverage-card h2 svg,.rb-source-card h2 svg {color:#0862ff;} .rb-coverage-value {display:flex;align-items:center;gap:20px;margin:8px 0 5px;} .rb-coverage-value>strong {font-size:44px;line-height:1;color:#0862ff;font-weight:800;letter-spacing:-1px;} .rb-coverage-value small {font-size:29px;margin-left:4px;} .rb-coverage-value>span {font-size:12px;color:#123991;line-height:1.6;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-data-progress {height:10px;background:#e6efff;border-radius:10px;margin:6px 0 0;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-data-progress i {background:#0862ff;border-radius:10px;} .rb-missing-note {font-size:11px;color:#6076aa;margin:6px 0;} .rb-reference-details>summary {display:flex;align-items:center;justify-content:space-between;gap:9px;cursor:pointer;list-style:none;margin:8px 0 0 36px;color:#0862ff;} .rb-reference-details>summary::-webkit-details-marker {display:none;} .rb-reference-details>summary strong {display:block;font-size:12px;color:#0a287a;} .rb-reference-details>summary span {display:block;font-size:10px;line-height:1.6;color:#6380bc;margin-top:3px;} .rb-reference-details[open]>summary {margin-bottom:12px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .analysis-heading {margin-bottom:8px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .analysis-heading p {font-size:12px;color:#2149aa;margin:3px 0 0;} :root body#royal-blue-app.royal-blue-interface .ob-overview .chart-quick-label {display:none;} :root body#royal-blue-app.royal-blue-interface .ob-overview .chart-parameters {gap:5px;margin:10px 0 8px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .chart-parameters button {padding:7px 5px;border:1px solid #e0ebff;border-radius:6px;background:#f5f9ff;color:var(--chart-accent);font-size:10px;gap:5px;min-height:32px;box-shadow:none;} :root body#royal-blue-app.royal-blue-interface .ob-overview .chart-parameters button[aria-pressed=true] {background:#0862ff;border-color:#0862ff;color:white;} :root body#royal-blue-app.royal-blue-interface .ob-overview .chart-parameters button>span {display:none;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-chart-stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;border:0;margin:0;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-chart-stats>div {display:block;padding:10px 12px;border:0;border-radius:6px;background:#ddf8f3;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-chart-stats>div:nth-child(2) {background:#e3f0ff;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-chart-stats>div:nth-child(3) {background:#eee2ff;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-chart-stats span {font-size:11px;color:#2645a4;display:block;margin-bottom:4px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-chart-stats strong {font-size:23px;color:#061b70;line-height:1.25;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-chart-stats small {font-size:11px;color:#2447a9;margin-left:3px;font-weight:400;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-chart-stats>div:nth-child(3) :is(strong,span) {color:#6a19b4;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-chart-sample-note {font-size:10px;color:#6882b6;margin:6px 0 0;} :root body#royal-blue-app.royal-blue-interface .ob-overview .chart text {fill:#254bac;} :root body#royal-blue-app.royal-blue-interface .ob-overview .chart-interaction-hint {font-size:10px;color:#6480b6;} :root body#royal-blue-app.royal-blue-interface .ob-overview .chart-legend {font-size:10px;color:#5376b9;} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison {margin-bottom:0;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-count-pill {font-size:10px;padding:7px 9px;color:#4b70bc;background:#f0f6ff;border-radius:5px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison table {font-size:11px;border:1px solid #e0ebff;border-radius:7px;overflow:hidden;} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison th {font-size:10px;color:#254baa;background:#eff6ff;padding:8px 10px;border-color:#e0ebff;} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison td {font-size:11px;color:#2449a4;padding:7px 10px;border-color:#edf2ff;} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison tr:hover td {background:#f2f7ff;} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison .badge {font-size:10px;border-radius:6px;padding:4px 8px;white-space:nowrap;} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison .table-footer {display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#6480b6;font-size:10px;padding-top:12px;} .fleet-comparison .table-footer>span:first-child {display:flex;align-items:center;gap:8px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .river-observatory-map {border:0;padding:0;background:none;box-shadow:none;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map.water-alert-map {position:relative;padding:13px;border:1px solid #dceaff;border-radius:9px;background:#fff;box-shadow:none;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .river-header {margin:0 0 8px;padding:0;border:0;align-items:center;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .river-header h3 {font-size:17px;color:#061b70;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .river-instruction {font-size:18px;font-weight:750;letter-spacing:-.4px;color:#061b70;display:flex;align-items:center;gap:9px;text-transform:none;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .river-header h3 {font-size:12px;font-weight:500;color:#224cae;margin:3px 0 0 31px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .river-header p {font-size:10px;color:#6680b6;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-actions {display:none;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-situation {display:flex;position:absolute;right:13px;top:13px;width:auto;padding:6px 8px;gap:5px;border:1px solid #ffd694;border-radius:6px;background:#fff8ed;box-shadow:none;color:#eb7900;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-situation>div:first-of-type {min-width:0;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-situation strong {font-size:10px;font-weight:600;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-situation-symbol {width:17px;height:17px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-situation :is(p,.gis-status-counts) {display:none;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .gis-control-row {border:0;padding:0;margin:8px 0;background:none;display:block;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .gis-basemap-switch {background:none;gap:4px;padding:0;border:0;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .gis-basemap-switch button {padding:5px 10px;font-size:10px;color:#1946b3;border:1px solid #dfebff;border-radius:18px;background:#f3f8ff;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .gis-basemap-switch button[aria-pressed=true] {background:#0862ff;color:white;border-color:#0862ff;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .gis-layer-toolbar {display:none;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .river-canvas {height:440px;border:1px solid #d9e8fd;border-radius:7px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map #geographic-map {height:440px!important;background:#e9f5f9;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-level-legend {padding:10px 2px 0;gap:9px;display:flex;flex-wrap:wrap;border:0;background:none;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-level-legend>span {font-size:9px;color:#4464b3;display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-level-legend>span::before {content:'';width:11px;height:11px;border-radius:50%;background:var(--point-color);} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-level-legend :is(svg,b) {display:none;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .river-footer {font-size:10px;padding:8px 0 0;border:0;gap:8px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .gis-map-notes {font-size:10px;margin-top:7px;color:#5c78b3;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .gis-coordinate-panel {font-size:10px;padding:6px 8px;margin:7px 0 0;background:#f4f8ff;border-color:#e0ebff;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .gis-coordinate-panel :is(strong,span,small) {font-size:10px;} :root body#royal-blue-app.royal-blue-interface .ob-overview [data-station-alert='0'],:root body#royal-blue-app.royal-blue-interface :is(.ob-overview,.shared-observatory-map) [data-alert-level='0'] {--sa-color:#0862ff!important;--point-color:#0862ff!important;} :root body#royal-blue-app.royal-blue-interface .ob-overview [data-station-alert='1'],:root body#royal-blue-app.royal-blue-interface :is(.ob-overview,.shared-observatory-map) [data-alert-level='1'] {--sa-color:#ffb421!important;--point-color:#ffb421!important;} :root body#royal-blue-app.royal-blue-interface .ob-overview [data-station-alert='2'],:root body#royal-blue-app.royal-blue-interface :is(.ob-overview,.shared-observatory-map) [data-alert-level='2'] {--sa-color:#ff382c!important;--point-color:#ff382c!important;} :root body#royal-blue-app.royal-blue-interface .ob-overview [data-station-alert='unknown'],:root body#royal-blue-app.royal-blue-interface :is(.ob-overview,.shared-observatory-map) [data-alert-level='unknown'] {--sa-color:#809acd!important;--point-color:#809acd!important;} :root body#royal-blue-app.royal-blue-interface .badge.level-0 {color:#0862ff;background:#e8f1ff;border-color:#cde0ff;} :root body#royal-blue-app.royal-blue-interface .badge.level-1 {color:#d87500;background:#fff5e3;border-color:#ffd69b;} :root body#royal-blue-app.royal-blue-interface .badge.level-2 {color:#f12635;background:#fff0f2;border-color:#ffbfc5;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-pin-label {border-color:#bdd8ff;background:#fffffff2;color:#092c89;} :root body#royal-blue-app.royal-blue-interface footer {color:#6783ba;font-size:10px;background:transparent;border-top:0;} :root body#royal-blue-app.royal-blue-interface :is(button,a,summary,input,select):focus-visible {outline:3px solid #8cb9ff;outline-offset:3px;} @media(min-width:1000px) { :root body#royal-blue-app.royal-blue-interface:not(.community-view) .sidebar {display:flex;transform:none;visibility:visible;width:200px;} :root body#royal-blue-app.royal-blue-interface:not(.community-view) .workspace {margin-left:200px;width:calc(100% - 200px);} :root body#royal-blue-app.royal-blue-interface:not(.community-view) .mobile-menu {display:none;} :root body#royal-blue-app.royal-blue-interface:not(.community-view) .topbar #account-button {display:none;} } @media(max-width:999px) { :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-workspace-columns {grid-template-columns:1fr;} :root body#royal-blue-app.royal-blue-interface .workspace {margin-left:0;width:100%;} :root body#royal-blue-app.royal-blue-interface .rb-summary .ob-stat {gap:6px 8px;padding:11px 9px;} :root body#royal-blue-app.royal-blue-interface .topbar .rb-clock {display:none;} :root body#royal-blue-app.royal-blue-interface .ob-overview .station-instrument .instrument-readings>.metric {grid-template-columns:minmax(0,1fr) minmax(0,1fr);} } @media(max-width:600px) { :root body#royal-blue-app.royal-blue-interface #content {padding:14px 10px;} :root body#royal-blue-app.royal-blue-interface .topbar {padding:8px 10px;} :root body#royal-blue-app.royal-blue-interface .topbar-right {gap:8px;} :root body#royal-blue-app.royal-blue-interface .topbar .rb-top-export {font-size:10px;padding:8px;} :root body#royal-blue-app.royal-blue-interface .topbar .account-name {display:none;} :root body#royal-blue-app.royal-blue-interface .ob-page-heading h1 {font-size:23px;} :root body#royal-blue-app.royal-blue-interface .ob-page-heading p {font-size:12px;} :root body#royal-blue-app.royal-blue-interface .rb-summary {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} :root body#royal-blue-app.royal-blue-interface .rb-summary .ob-stat {min-height:100px;} .rb-kpi-value {font-size:31px;}.rb-kpi-label {font-size:11px;} :root body#royal-blue-app.royal-blue-interface .ob-network {display:flex;flex-wrap:wrap;gap:6px;} :root body#royal-blue-app.royal-blue-interface .ob-network .ob-station-tabs {order:1;width:100%;} :root body#royal-blue-app.royal-blue-interface .ob-network .ob-section-heading {order:2;margin-left:auto;} :root body#royal-blue-app.royal-blue-interface .ob-overview :is(.station-instrument,.analysis-trend,.data-context,.fleet-comparison) {padding:11px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map.water-alert-map {padding:10px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-situation {right:10px;top:12px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .river-canvas {height:340px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map #geographic-map {height:340px!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .river-instruction {font-size:15px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-chart-stats>div {padding:9px 7px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-chart-stats strong {font-size:20px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-chart-stats small {font-size:9px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .chart-parameters {grid-template-columns:repeat(3,minmax(0,1fr));} :root body#royal-blue-app.royal-blue-interface .ob-overview .instrument-readings>.metric.instrument-reading {grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:7px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .metric.instrument-reading>.ir-identity {display:block;grid-column:1;grid-row:1;} :root body#royal-blue-app.royal-blue-interface .ob-overview .metric.instrument-reading>.ir-comparison {grid-column:2;grid-row:1;border:0;padding:0;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-name {font-size:11px;gap:5px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-value {font-size:24px;margin-left:35px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-scale-heading>span {font-size:8px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-scale-heading>strong {font-size:9px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .instrument-provenance>span {font-size:9px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .instrument-detail {padding:7px;font-size:10px;} .rb-coverage-value {gap:12px;}.rb-coverage-value>span {font-size:11px;} } :root body#royal-blue-app.royal-blue-interface #navigation a {color:#173eae!important;} :root body#royal-blue-app.royal-blue-interface #navigation a.active {color:#0862ff!important;} :root body#royal-blue-app.royal-blue-interface :is(.river-instruction,.river-header p,.geographic-legend,.gis-map-notes summary,#breadcrumb) {color:#244baa!important;} :root body#royal-blue-app.royal-blue-interface .gis-basemap-switch button {color:#214bac!important;} :root body#royal-blue-app.royal-blue-interface .gis-basemap-switch button[aria-pressed=true] {color:#fff!important;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-workspace-columns {grid-template-areas:none;} :root body#royal-blue-app.royal-blue-interface .ob-workspace-column {display:flex;flex-direction:column;} :root body#royal-blue-app.royal-blue-interface .ob-overview :is(#ob-map,.station-instrument,.analysis-trend,.data-context) {grid-area:auto;} :root body#royal-blue-app.royal-blue-interface .ob-overview .chart svg text {fill:#244baa!important;} :root body#royal-blue-app.royal-blue-interface .ob-overview .instrument-reading .ir-value {color:#061b70!important;} :root body#royal-blue-app.royal-blue-interface .ob-overview .instrument-reading .ir-value>span {color:#244baa!important;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-chart-stats>div strong {color:#061b70!important;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-chart-stats>div:nth-child(3) strong {color:#6a19b4!important;} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison th {color:#244baa!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .gis-map-notes {font-size:10px!important;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-chart-sample-note {font-size:10px!important;} :root body#royal-blue-app.royal-blue-interface .sidebar {padding:0;} :root body#royal-blue-app.royal-blue-interface .brand {width:100%;box-sizing:border-box;} :root body#royal-blue-app.royal-blue-interface .brand>span:last-child {flex:1;min-width:0;} :root body#royal-blue-app.royal-blue-interface #brand-name {font-size:13px;white-space:nowrap;} :root body#royal-blue-app.royal-blue-interface #brand-subtitle {white-space:nowrap;} :root body#royal-blue-app.royal-blue-interface #navigation {width:100%;box-sizing:border-box;} :root body#royal-blue-app.royal-blue-interface #navigation a {gap:10px;min-height:43px;font-size:12px;padding:9px 8px;} :root body#royal-blue-app.royal-blue-interface #navigation a svg {padding:0;background:none;border-radius:0;flex-shrink:0;width:23px;height:23px;box-shadow:none;} :root body#royal-blue-app.royal-blue-interface .rb-support {padding-top:8px;} :root body#royal-blue-app.royal-blue-interface .rb-support>summary {font-size:10px;color:#6983b8;padding:8px;cursor:pointer;} :root body#royal-blue-app.royal-blue-interface .rb-summary .ob-stat {border-top-width:1px;} :root body#royal-blue-app.royal-blue-interface .rb-summary .ob-kpi-network {border-top-color:#d4e5ff;} :root body#royal-blue-app.royal-blue-interface .rb-summary .ob-kpi-fresh {border-top-color:#d4e5ff;} :root body#royal-blue-app.royal-blue-interface .rb-summary .ob-kpi-attention[data-has-attention=true] {border-top-color:#ffac26;} :root body#royal-blue-app.royal-blue-interface .rb-summary .ob-kpi-pending {border-top-color:#d4e5ff;} :root body#royal-blue-app.royal-blue-interface .ob-page-heading p {color:#173eae!important;} :root body#royal-blue-app.royal-blue-interface .rb-station-heading .badge {font-size:9px;color:#0862ff;background:#e6f0ff;border:1px solid #cce0ff;border-radius:14px;padding:4px 7px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .instrument-readings>.metric.instrument-reading {grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:7px;padding:9px 7px;min-height:81px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-scale-heading {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px;align-items:start;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-scale-heading>span {font-size:8px;line-height:1.4;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-scale-heading>strong {font-size:9px;line-height:1.4;white-space:nowrap;} :root body#royal-blue-app.royal-blue-interface .ob-overview .gauge-unconfigured .ir-scale-heading {display:block;text-align:right;} :root body#royal-blue-app.royal-blue-interface .ob-overview .gauge-unconfigured .ir-scale-heading>span {display:none;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-gauge :is(.standard-gauge-visual,.reading-visual) {margin:7px 0 0;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-result {display:block;position:relative;margin-top:3px;padding-right:12px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-status {display:inline-flex;font-size:9px;line-height:1.4;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-evidence {position:static;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-evidence>summary {position:absolute;right:0;top:0;font-size:0;gap:0;padding:4px 0;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-evidence>summary::after {width:5px;height:5px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-evidence[open] {margin-top:5px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .reading-ticks>span:not(:first-child):not(:last-child), :root body#royal-blue-app.royal-blue-interface .ob-overview .standard-gauge-ticks>span:not(:first-child):not(:last-child) {display:none;} :root body#royal-blue-app.royal-blue-interface .ob-overview .analysis-trend {min-height:0;} :root body#royal-blue-app.royal-blue-interface .ob-overview .hydro-hero.level-1 {background:#fff8ec;border-color:#ffd48c;} :root body#royal-blue-app.royal-blue-interface .ob-overview .hydro-hero.level-1 .badge {color:#d87500!important;} :root body#royal-blue-app.royal-blue-interface .ob-overview .map-situation {background:#fff8ed!important;color:#d87500!important;border-color:#ffd694!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-style-night .map-pin-label {background:#14294a;border-color:#6085b7;} @media(max-width:600px) { :root body#royal-blue-app.royal-blue-interface .brand {padding-top:20px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .instrument-readings>.metric.instrument-reading {grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-scale-heading {display:flex;} } @media(prefers-reduced-motion:reduce) {body#royal-blue-app.royal-blue-interface * {scroll-behavior:auto!important;}} /* Replace legacy !important presentation rules at the final cascade boundary. */ :root body#royal-blue-app.royal-blue-interface .rb-summary .ob-stat {border-top:1px solid #d4e5ff!important;background:#fff!important;} :root body#royal-blue-app.royal-blue-interface .rb-summary .ob-kpi-attention[data-has-attention=true] {border-color:#ffac26!important;background:#fffaf1!important;} :root body#royal-blue-app.royal-blue-interface .ob-overview .hydro-hero.level-1 {background:#fff8ec!important;border-color:#ffd48c!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .river-header p {display:none;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-situation {padding:6px 8px!important;margin:0;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-level-legend>span {min-height:0;line-height:1.4;flex:0 0 auto;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .gis-location-bar {padding:5px 7px;margin:6px 0 0;min-height:0;gap:5px;font-size:9px;background:#f5f9ff;border:1px solid #e2edff;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .gis-location-bar :is(span,strong,small) {font-size:9px;line-height:1.4;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .geographic-legend {gap:5px;line-height:1.4;font-size:9px!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .geographic-legend>span {font-size:9px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .gis-map-notes {padding:6px 0 0;min-height:0;line-height:1.4!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .gis-map-notes>summary {font-size:9px;line-height:1.4;min-height:0;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-name {font-size:11px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-value {font-size:25px;gap:3px;margin-left:35px;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ir-value>span {font-size:10px;} /* Availability and provenance share a card; they do not imply water compliance. */ :root body#royal-blue-app.royal-blue-interface .rb-data-basis h2 {display:flex;align-items:center;gap:9px;} :root body#royal-blue-app.royal-blue-interface .rb-data-basis h2 svg {color:#0862ff;} :root body#royal-blue-app.royal-blue-interface .rb-data-availability {display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:13px 0 5px;color:#173eae;} :root body#royal-blue-app.royal-blue-interface .rb-data-availability>span {font-size:13px;font-weight:600;} :root body#royal-blue-app.royal-blue-interface .rb-data-availability>strong {font-size:22px;color:#061b70;} :root body#royal-blue-app.royal-blue-interface .rb-data-availability small {font-size:11px;font-weight:500;} :root body#royal-blue-app.royal-blue-interface .rb-data-usable {font-size:10px;line-height:1.6;color:#5974ad;margin:0 0 10px;} :root body#royal-blue-app.royal-blue-interface .rb-data-issues {padding:9px 10px;background:#f5f8ff;border:1px solid #e1eaff;border-radius:6px;} :root body#royal-blue-app.royal-blue-interface .rb-data-clear {font-size:11px;line-height:1.6;margin:0;color:#3c5d9c;} :root body#royal-blue-app.royal-blue-interface .rb-data-status {display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 5px;font-size:11px;line-height:1.7;margin:3px 0;} :root body#royal-blue-app.royal-blue-interface .rb-data-status>strong {font-weight:600;color:#244a9c;} :root body#royal-blue-app.royal-blue-interface .rb-data-status>span {min-width:0;} :root body#royal-blue-app.royal-blue-interface [data-data-status] strong {color:#a05910;} :root body#royal-blue-app.royal-blue-interface [data-data-status=invalid] strong {color:#bd263e;} :root body#royal-blue-app.royal-blue-interface .rb-data-parameter {display:inline;border:0;background:none;color:#174db8;font:inherit;text-align:left;padding:1px 0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#b8cced;cursor:pointer;} :root body#royal-blue-app.royal-blue-interface .rb-data-parameter:hover {color:#0862ff;text-decoration-color:#0862ff;} :root body#royal-blue-app.royal-blue-interface .rb-data-separator {color:#5974ad;} :root body#royal-blue-app.royal-blue-interface .rb-data-basis h3 {font-size:12px;font-weight:650;margin:0 0 6px;letter-spacing:0;} :root body#royal-blue-app.royal-blue-interface .rb-data-sources {padding:12px 0 9px;} :root body#royal-blue-app.royal-blue-interface .rb-data-sources>p {font-size:11px;color:#5974ad;} :root body#royal-blue-app.royal-blue-interface .rb-data-time {display:flex;gap:7px;align-items:flex-start;padding:9px 0;border-top:1px solid #e5edfc;font-size:10px;line-height:1.6;color:#4d68a5;} :root body#royal-blue-app.royal-blue-interface .rb-data-time svg {flex-shrink:0;margin-top:2px;} :root body#royal-blue-app.royal-blue-interface .rb-data-time strong {font-weight:600;} :root body#royal-blue-app.royal-blue-interface .rb-manual-times {display:grid;gap:3px;margin:0 0 9px 22px;font-size:10px;line-height:1.5;color:#5974ad;} :root body#royal-blue-app.royal-blue-interface .rb-data-reference {padding-top:11px;border-top:1px solid #e5edfc;} :root body#royal-blue-app.royal-blue-interface .rb-data-reference h3 {display:flex;align-items:center;gap:7px;} :root body#royal-blue-app.royal-blue-interface .rb-data-reference .rb-reference-details>summary {margin-left:0;padding:8px 10px;background:#f1f7ff;border:1px solid #dceaff;border-radius:6px;} :root body#royal-blue-app.royal-blue-interface .rb-reference-action {color:#1758bd;font-weight:600;margin-top:5px;} :root body#royal-blue-app.royal-blue-interface .instrument-reading:focus {outline:3px solid #8cb9ff;outline-offset:2px;} /* Selected chart controls keep the parameter color on a pale surface. */ :root body#royal-blue-app.royal-blue-interface .ob-overview .chart-parameters button { background:#f6f9ff;color:var(--chart-accent);border:1px solid #dce7fa;min-height:36px; } :root body#royal-blue-app.royal-blue-interface .ob-overview .chart-parameters button[aria-pressed=true] { background:color-mix(in srgb,var(--chart-accent) 10%,white);color:var(--chart-accent)!important; border-color:var(--chart-accent);box-shadow:inset 0 -3px var(--chart-accent);font-weight:750; } :root body#royal-blue-app.royal-blue-interface .ob-overview .chart-parameters button :is(svg,strong) {color:inherit!important;opacity:1;} :root body#royal-blue-app.royal-blue-interface .ob-overview .chart-parameters button svg {width:17px;height:17px;padding:0;flex-shrink:0;} /* Plain colored dots, as in the supplied reference; no miniature status chips. */ :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-level-legend { display:flex;flex-wrap:wrap;gap:9px 16px;padding:11px 2px 2px; } :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-level-legend>span { background:transparent!important;border:0!important;border-radius:0;padding:0;min-height:18px; color:#3656a4!important;font-size:11px;font-weight:500;line-height:1.5;gap:7px; } :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-level-legend>span::before { width:14px;height:14px;flex-shrink:0;background:var(--point-color);box-shadow:none; } /* Compact map dots preserve the geographic hit area and accessible status labels. */ :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .gis-beacon>.beacon-core { width:20px;height:20px;inset:11px;border:2px solid #fff!important; background:var(--point-color)!important;border-radius:50%;box-shadow:0 0 0 1px var(--point-color)!important; } :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .gis-beacon>.beacon-core svg {display:none;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .gis-beacon.selected>.beacon-core { width:25px;height:25px;inset:8.5px;background:#0862ff!important; box-shadow:0 0 0 2px #fff,0 0 0 4px #0862ff!important; } :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-pin-label { width:auto;min-width:40px;padding:3px 7px;border:1px solid #a4c7ff;border-radius:5px; background:#fff;color:#092c89;box-shadow:0 1px 4px #194a8d15; } :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-pin-label>strong {font-size:12px;line-height:1.4;color:#092c89;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-pin-label strong em {display:none;} /* Severity is animated separately from the blue selection state. */ :root body#royal-blue-app.royal-blue-interface .ob-network .sa-station:is([data-station-alert='2'],[data-station-alert='3'],[data-station-alert='4']) { border-color:var(--sa-color);box-shadow:inset 0 -2px var(--sa-color); } :root body#royal-blue-app.royal-blue-interface .ob-network .sa-station:is([data-station-alert='2'],[data-station-alert='3'],[data-station-alert='4']) .sa-status-chip { animation:rb-station-alert 1.8s ease-out infinite; } :root body#royal-blue-app.royal-blue-interface .ob-network .sa-priority {animation:rb-priority-alert 2.4s ease-in-out infinite;} @keyframes rb-station-alert {0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sa-color) 45%,transparent)}60%{box-shadow:0 0 0 5px transparent}} @keyframes rb-priority-alert {0%,100%{box-shadow:0 0 0 0 #ff354000}50%{box-shadow:0 0 0 3px #ff35401c}} @media(prefers-reduced-motion:reduce) { :root body#royal-blue-app.royal-blue-interface .ob-network :is(.sa-status-chip,.sa-priority) {animation:none!important;} } /* Map review: compact controls, landscape river view and local evidence. */ :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-situation {display:none!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .river-header {margin-bottom:4px!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .gis-control-row {margin:4px 0 8px!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .gis-basemap-switch {display:flex!important;flex-wrap:wrap;gap:5px!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map :is(.river-canvas,#geographic-map) {height:320px!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .river-footer .geographic-legend {display:none!important;} :root body#royal-blue-app.royal-blue-interface .hero-pending-basis {margin-top:8px;font-size:11px;line-height:1.6;} :root body#royal-blue-app.royal-blue-interface .hero-pending-basis summary {cursor:pointer;color:#1754bc!important;font-weight:600;} :root body#royal-blue-app.royal-blue-interface .hero-pending-basis>div {padding:8px 10px;margin-top:6px;border:1px solid #d6e5ff;border-radius:6px;background:#fff;color:#244477;} :root body#royal-blue-app.royal-blue-interface .hero-pending-basis :is(p,li) {font-size:11px!important;color:#244477!important;} :root body#royal-blue-app.royal-blue-interface .hero-pending-basis ul {padding-left:18px;margin:6px 0;} /* Station picker: selection uses blue outline; severity keeps its own readable label. */ :root body#royal-blue-app.royal-blue-interface .ob-network {display:block!important;padding:12px 14px!important;border-radius:12px!important;background:#fff!important;} :root body#royal-blue-app.royal-blue-interface .ob-network .ob-section-heading {display:flex!important;justify-content:space-between;align-items:center;margin:0 0 9px!important;} :root body#royal-blue-app.royal-blue-interface .ob-network .ob-section-heading h2 {display:block!important;font-size:13px!important;color:#263653!important;} .rb-station-hint {color:#67758b;font-size:11px;} :root body#royal-blue-app.royal-blue-interface .ob-network .ob-station-tabs {gap:8px!important;overflow:visible!important;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-station {position:relative;height:auto!important;min-height:78px!important;padding:10px 12px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:space-between!important;gap:8px!important;border:1px solid #e1e6ed!important;border-radius:9px!important;background:#fff!important;color:#263653!important;box-shadow:none!important;transition:border-color .15s,background .15s;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-station:hover {background:#f6f8fc!important;border-color:#b7c8df!important;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-station.selected {background:#f0f5ff!important;border:2px solid #2563eb!important;padding:9px 11px!important;box-shadow:none!important;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-top {display:flex!important;width:100%;align-items:center;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-identity strong {font-size:13px!important;color:#24344f!important;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-identity small {display:block!important;font-size:10px!important;color:#6b788e!important;margin-top:2px;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-bottom {position:static!important;display:block!important;width:auto!important;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-status-chip {display:inline-flex!important;align-items:center;gap:5px;width:auto!important;height:auto!important;min-width:0!important;padding:3px 7px!important;border:0!important;border-radius:5px!important;background:#eff3f8!important;color:#52647b!important;font-size:10px!important;line-height:1.3!important;animation:none!important;box-shadow:none!important;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-status-chip::before {content:'';width:6px;height:6px;border-radius:50%;background:currentColor;} :root body#royal-blue-app.royal-blue-interface .ob-network [data-station-alert='1'] .sa-status-chip {background:#fff3df!important;color:#95600d!important;} :root body#royal-blue-app.royal-blue-interface .ob-network :is([data-station-alert='2'],[data-station-alert='3'],[data-station-alert='4']) .sa-status-chip {background:#ffebeb!important;color:#bd3039!important;} :root body#royal-blue-app.royal-blue-interface .ob-network [data-station-alert='0'] .sa-status-chip {background:#e9f4ee!important;color:#28774d!important;} :root body#royal-blue-app.royal-blue-interface .ob-network .sa-selected-check {display:block!important;position:absolute;top:10px;right:10px;background:none!important;color:#2563eb!important;font-size:13px;} .live-update-notice {border:1px solid #bfdbfe;border-radius:7px;padding:7px 10px;background:#eff6ff;color:#1d4ed8;font:inherit;font-size:11px;cursor:pointer;} .live-update-notice[hidden] {display:none!important;} @media(max-width:600px){:root body#royal-blue-app.royal-blue-interface .ob-network .ob-station-tabs {grid-template-columns:repeat(3,minmax(0,1fr))!important;} .rb-station-hint {display:none;} .live-update-notice {position:fixed;right:12px;bottom:16px;z-index:1100;box-shadow:0 3px 15px #162b4520;}} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-distance-label {display:block!important;font-size:10px!important;font-weight:500;line-height:1.5;color:#536683!important;white-space:nowrap;margin-top:1px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-distance-caption {font-size:10px!important;color:#5b708d!important;line-height:1.5;margin:7px 0 0;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .gis-detail-distance {font-size:12px!important;font-weight:600;color:#25528a!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-style-night .map-distance-label {color:#c4d6ef!important;} .gis-sea-name {pointer-events:none!important;background:none!important;border:0!important;text-align:center;} .gis-sea-name span {display:block;white-space:nowrap;font-size:15px;font-weight:600;letter-spacing:1px;color:#397692;text-shadow:0 1px 2px #ffffffb0;} .gis-style-night .gis-sea-name span {color:#9bd1ec;text-shadow:0 1px 3px #061d35;} /* Stretch both desktop columns; let the map absorb the height difference. */ @media(min-width:1000px){ :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-workspace-columns {align-items:stretch!important;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-spatial-column #ob-map {flex:1;display:flex;flex-direction:column;min-height:0;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-spatial-column .analysis-trend {flex:none;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map.water-alert-map {flex:1;display:flex!important;flex-direction:column!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-command-grid {flex:1;display:flex!important;flex-direction:column;align-items:stretch!important;min-height:440px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .river-canvas {flex:1;align-self:stretch!important;width:100%!important;height:auto!important;min-height:440px;position:relative;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map #geographic-map {position:absolute;inset:0;height:100%!important;} :root body#royal-blue-app.royal-blue-interface .ob-overview .ob-readings-column>.data-context {flex:1;} } @media(max-width:999px){ :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map :is(.river-canvas,#geographic-map) {height:400px!important;} } @media(min-width:1000px){ :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline {position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:9px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .map-level-legend {flex:none;padding:0!important;gap:7px!important;flex-wrap:nowrap!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .river-footer {flex:none;padding:0!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .map-angle {width:auto!important;gap:4px!important;font-size:9px!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .map-angle input {width:55px!important;flex:none!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .map-angle output {width:27px!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .map-distance-caption {flex:none;display:flex;gap:5px;align-items:center;margin:0!important;white-space:nowrap;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .gis-map-notes {position:static;margin:0!important;padding:0!important;border:0!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .gis-map-notes summary {display:flex;align-items:center;gap:4px;white-space:nowrap;list-style:none;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .gis-map-notes summary svg {width:13px;height:13px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .gis-map-notes[open] {position:absolute;left:0;right:0;bottom:0;z-index:1100;padding:12px!important;background:#fff!important;border:1px solid #cbdcf1!important;border-radius:8px;box-shadow:0 4px 20px #18345825;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .gis-map-notes[open] summary {margin-bottom:8px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-distance-text {display:none;} } @media(min-width:1500px){ :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-distance-text {display:inline;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .map-angle input {width:85px!important;} } @media(min-width:1000px) and (max-width:1199px){ :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-source-text {display:none;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .gis-map-notes[open] .map-footer-source-text {display:inline;} } @media(min-width:1000px) and (max-width:1199px){ :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline {gap:5px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .map-level-legend {gap:5px!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .map-level-legend>span {font-size:8px!important;gap:3px!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .map-level-legend>span::before {width:8px;height:8px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map .map-footer-inline .map-angle input {width:40px!important;} } :root body#royal-blue-app.royal-blue-interface .map-compass.rb-compass {position:absolute;top:12px;right:12px;width:54px;height:54px;display:block;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 10px #23466f20;cursor:pointer;z-index:450;} :root body#royal-blue-app.royal-blue-interface .rb-compass .compass-dial {display:block;width:100%;height:100%;} :root body#royal-blue-app.royal-blue-interface .rb-compass #map-compass-arrow {position:absolute;inset:0;display:block;width:100%;height:100%;transform-origin:center;transition:transform .15s ease;} :root body#royal-blue-app.royal-blue-interface .rb-compass #map-compass-arrow svg {width:100%;height:100%;} :root body#royal-blue-app.royal-blue-interface .rb-compass:hover {box-shadow:0 2px 12px #23466f38;} :root body#royal-blue-app.royal-blue-interface .rb-compass:focus-visible {outline:2px solid #2563eb;outline-offset:3px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;padding-bottom:9px;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar .river-header {flex:1 0 195px;margin:0!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar .gis-control-row {flex:0 1 auto;margin:0 0 0 auto!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar .gis-basemap-toolbar {margin:0;padding:0;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar .gis-basemap-switch {justify-content:flex-end!important;} /* Keep basemap choices at the upper-right, including narrower desktop cards. */ :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar {display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:start!important;gap:10px!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar .river-header {min-width:0;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar .gis-control-row {grid-column:2;grid-row:1;justify-self:end;align-self:start;margin:0!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar .gis-basemap-switch {display:grid!important;grid-template-columns:repeat(2,max-content);gap:4px!important;} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar .gis-basemap-switch button {padding:4px 8px!important;font-size:9px!important;white-space:nowrap;} @media(min-width:1400px){ :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar .gis-basemap-switch {grid-template-columns:repeat(4,max-content);} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar .gis-basemap-switch button {padding:5px 10px!important;font-size:10px!important;} } :root body#royal-blue-app.royal-blue-interface .gis-style-satellite .gis-sea-name span {color:#e4f4ff;text-shadow:0 1px 4px #071f38,0 0 8px #071f38;} @media(min-width:1400px){ :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar .gis-basemap-switch {grid-template-columns:repeat(3,max-content);} } @media(min-width:1700px){ :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar .gis-basemap-switch {grid-template-columns:repeat(5,max-content);} } .map-interface-credit {color:#365572;white-space:normal;} .map-source-credit {display:inline-block;position:relative;margin-left:8px;text-align:left;} .map-source-credit summary {cursor:pointer;color:#456b91;font-size:10px;} .map-source-credit>div {position:absolute;right:0;bottom:22px;width:280px;max-width:70vw;padding:10px;border:1px solid #cfdeed;border-radius:7px;background:#fff;color:#425b77;box-shadow:0 3px 14px #17334f26;line-height:1.5;} :root body#royal-blue-app.royal-blue-interface .workspace>footer .footer-designer {color:#315cad;text-decoration:none;font-size:11px;} :root body#royal-blue-app.royal-blue-interface .workspace>footer .footer-designer:hover {text-decoration:underline;} :root body#royal-blue-app.royal-blue-interface .workspace>footer {flex-wrap:wrap;gap:8px 16px;} .map-source-credit summary {display:inline-flex;align-items:center;list-style:none;font-size:12px;line-height:1;} .map-source-credit summary::-webkit-details-marker {display:none;} .map-source-credit {margin-left:5px;} :root body#royal-blue-app.royal-blue-interface .map-interface-credit {display:inline-block;white-space:nowrap!important;font-size:10px;line-height:1.4;} /* Three colored summaries; station navigation belongs to the map workspace. */ :root body#royal-blue-app.royal-blue-interface .rb-three-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .ob-stat{--card-accent:#245bff;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto 1fr;min-height:144px;padding:18px 18px 14px;gap:10px 14px;border:1px solid #c9daff;border-top:3px solid var(--card-accent);border-radius:12px;background:linear-gradient(125deg,#fff 38%,#eef4ff);box-shadow:0 3px 12px #1e52ad08;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;isolation:isolate} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .ob-stat::after{content:'';position:absolute;width:110px;height:110px;right:-38px;top:-42px;border-radius:50%;background:var(--card-accent);opacity:.055;pointer-events:none;z-index:-1} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .ob-stat:hover,:root body#royal-blue-app.royal-blue-interface .rb-three-summary .ob-stat:focus-within{transform:translateY(-3px);box-shadow:0 9px 24px #1c4caa17;border-color:var(--card-accent)} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .ob-kpi-attention[data-has-attention=true]{--card-accent:#f59a23;border-color:#f5d09c;border-top-color:var(--card-accent);background:linear-gradient(125deg,#fffcf6 35%,#fff0d8)} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .ob-kpi-pending{--card-accent:#089cc0;border-color:#bce4ef;border-top-color:var(--card-accent);background:linear-gradient(125deg,#fff 35%,#eaf8fc)} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .rb-kpi-icon{width:50px;height:50px;border-radius:12px;background:#e2edff;color:#245bff;box-shadow:inset 0 1px 0 #ffffffb3;transition:transform .2s ease} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .ob-stat:hover .rb-kpi-icon{transform:rotate(-5deg)} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .ob-kpi-attention[data-has-attention=true] .rb-kpi-icon{background:#ffe8c0;color:#de7d08} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .ob-kpi-pending .rb-kpi-icon{background:#d9f2f9;color:#0584a6} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .rb-kpi-label{font-size:13px;line-height:1.45} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .rb-kpi-value{font-size:36px;line-height:1.15;margin-top:3px} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .rb-kpi-value small{font-size:12px;font-weight:500;margin-left:7px;color:#57739d;letter-spacing:0} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .rb-kpi-footer{grid-column:1/-1;align-self:end;display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding-right:15px} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .rb-kpi-caption{font-size:11px;line-height:1.55;color:#567099;margin:0;padding:0} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .rb-fresh-pill{display:inline-flex;align-items:center;gap:5px;color:#245bce;background:#e4eeff;border-radius:5px;padding:3px 7px;font-size:11px;text-decoration:none;font-weight:600} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .rb-fresh-pill:hover{text-decoration:underline} :root body#royal-blue-app.royal-blue-interface .rb-three-summary .rb-kpi-link{right:13px;bottom:13px;color:var(--card-accent)} :root body#royal-blue-app.royal-blue-interface .ob-network.rb-station-navigation{padding:13px 16px 0!important;border-radius:11px!important;border:1px solid #d7e4fa!important;margin:0 0 12px!important;box-shadow:0 2px 8px #16448205} :root body#royal-blue-app.royal-blue-interface .rb-station-navigation .ob-section-heading{margin:0 0 8px!important} :root body#royal-blue-app.royal-blue-interface .rb-station-navigation .ob-section-heading h2{font-size:13px!important;color:#153d7f!important} :root body#royal-blue-app.royal-blue-interface .rb-station-navigation .ob-station-tabs{display:flex!important;gap:5px!important;overflow-x:auto!important;margin:0!important} :root body#royal-blue-app.royal-blue-interface .rb-station-navigation .sa-station{flex:1 0 126px;min-width:0;min-height:47px!important;padding:9px 10px!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:9px!important;border:0!important;border-bottom:3px solid transparent!important;border-radius:7px 7px 0 0!important;background:transparent!important;transition:background .18s ease,border-color .18s ease} :root body#royal-blue-app.royal-blue-interface .rb-station-navigation .sa-station:hover{background:#f0f5ff!important} :root body#royal-blue-app.royal-blue-interface .rb-station-navigation .sa-station.selected{border:0!important;border-bottom:3px solid #245bff!important;background:linear-gradient(180deg,#f5f8ff,#eaf0ff)!important;padding:9px 10px!important} :root body#royal-blue-app.royal-blue-interface .rb-station-navigation .sa-top{width:auto!important;gap:6px} :root body#royal-blue-app.royal-blue-interface .rb-station-navigation .sa-identity strong{font-size:12px!important} :root body#royal-blue-app.royal-blue-interface .rb-station-navigation .selected .sa-identity strong{color:#245bff!important} :root body#royal-blue-app.royal-blue-interface .rb-station-navigation .sa-identity small,:root body#royal-blue-app.royal-blue-interface .rb-station-navigation .sa-selected-check{display:none!important} :root body#royal-blue-app.royal-blue-interface .rb-station-navigation .sa-bottom{margin:0!important} :root body#royal-blue-app.royal-blue-interface .rb-station-navigation [data-station-alert='0'] .sa-status-chip{color:#245bce!important;background:#e8efff!important} @media(max-width:700px){:root body#royal-blue-app.royal-blue-interface .rb-three-summary{gap:9px}:root body#royal-blue-app.royal-blue-interface .rb-three-summary .ob-stat{padding:13px 11px;grid-template-columns:1fr;gap:8px}:root body#royal-blue-app.royal-blue-interface .rb-three-summary .rb-kpi-icon{width:36px;height:36px}:root body#royal-blue-app.royal-blue-interface .rb-three-summary .rb-kpi-icon svg{width:22px;height:22px}:root body#royal-blue-app.royal-blue-interface .rb-three-summary .rb-kpi-label{font-size:12px}:root body#royal-blue-app.royal-blue-interface .rb-three-summary .rb-kpi-value{font-size:29px}:root body#royal-blue-app.royal-blue-interface .rb-three-summary .rb-kpi-footer{padding-right:0}:root body#royal-blue-app.royal-blue-interface .rb-three-summary .rb-kpi-link{top:13px;bottom:auto;right:10px}} @media(max-width:440px){:root body#royal-blue-app.royal-blue-interface .rb-three-summary{grid-template-columns:1fr}:root body#royal-blue-app.royal-blue-interface .rb-three-summary .ob-stat{grid-template-columns:42px minmax(0,1fr);min-height:112px}:root body#royal-blue-app.royal-blue-interface .rb-station-navigation .rb-station-hint{display:none}} @media(prefers-reduced-motion:reduce){:root body#royal-blue-app.royal-blue-interface .rb-three-summary .ob-stat,:root body#royal-blue-app.royal-blue-interface .rb-three-summary .rb-kpi-icon,:root body#royal-blue-app.royal-blue-interface .rb-station-navigation .sa-station{transition:none}:root body#royal-blue-app.royal-blue-interface .rb-three-summary .ob-stat:hover,:root body#royal-blue-app.royal-blue-interface .rb-three-summary .ob-stat:focus-within,:root body#royal-blue-app.royal-blue-interface .rb-three-summary .ob-stat:hover .rb-kpi-icon{transform:none}} /* All three summaries and the station picker share one horizontal row. */ :root body#royal-blue-app.royal-blue-interface .rb-overview-row{display:grid;grid-template-columns:repeat(3,minmax(165px,1fr)) minmax(330px,1.65fr);gap:12px;align-items:stretch;margin:0 -4px 12px;padding:4px;overflow-x:auto} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-three-summary{display:contents} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-three-summary .ob-stat{grid-template-columns:38px minmax(0,1fr);min-height:140px;padding:14px 12px;gap:9px 10px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-kpi-icon{width:38px;height:40px;border-radius:10px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-kpi-icon svg{width:23px;height:23px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-kpi-label{font-size:12px;line-height:1.35} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-kpi-value{font-size:32px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-kpi-footer{gap:5px;padding-right:10px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-kpi-caption{font-size:11px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-fresh-pill{font-size:10px;padding:3px 5px;white-space:nowrap} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-station-navigation{margin:0!important;padding:14px 12px 12px!important;border-top:3px solid #245bff!important;background:linear-gradient(135deg,#fff 45%,#f3f6ff)!important;display:flex!important;flex-direction:column;justify-content:space-between;gap:12px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-station-navigation .ob-section-heading{width:100%;margin:0!important;align-items:flex-start;flex-direction:column;gap:5px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-station-hint{font-size:11px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .ob-station-tabs{width:100%;gap:3px!important;overflow:visible!important} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station{flex:1 1 0;min-width:0;min-height:60px!important;flex-direction:column!important;gap:7px!important;padding:8px 3px!important} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station.selected{padding:8px 3px!important} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-status-chip{font-size:10px!important;padding:3px!important;gap:3px!important;white-space:nowrap} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-status-chip::before{width:4px;height:4px} /* Source icons and compact colored station tiles, within the same overview row. */ /* Browser review: readable supporting data, balanced headings and map controls. */ :root body#royal-blue-app.royal-blue-interface #breadcrumb{display:flex;align-items:center;gap:9px;font-size:13px;color:#496386} :root body#royal-blue-app.royal-blue-interface #breadcrumb>svg{color:#245bff;background:#e7efff;box-sizing:content-box;padding:6px;border-radius:8px} :root body#royal-blue-app.royal-blue-interface #breadcrumb strong{color:#153d7f;font-weight:650} .rb-breadcrumb-separator{color:#8092ac;font-size:19px} :root body#royal-blue-app.royal-blue-interface .ob-page-heading{display:flex;align-items:center;gap:16px;flex-wrap:wrap} :root body#royal-blue-app.royal-blue-interface .rb-heading-main{display:flex;align-items:center;gap:13px;flex:1;min-width:280px} .rb-heading-icon{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:15px;color:#245bff;background:linear-gradient(145deg,#fff,#dce9ff);border:1px solid #ccddff;box-shadow:0 4px 12px #245bff0c} :root body#royal-blue-app.royal-blue-interface .rb-heading-main h1{font-size:27px!important;line-height:1.25} :root body#royal-blue-app.royal-blue-interface .rb-heading-status{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid #d5e3f9;border-radius:10px;background:#ffffffb3;color:#476489;font-size:12px} .rb-heading-status>svg{color:#245bff} .rb-heading-status strong{display:block;margin-top:3px;color:#173d77;font-size:13px;font-weight:650} :root body#royal-blue-app.royal-blue-interface .rb-data-basis :is(.rb-data-usable,.rb-data-clear,.rb-data-status,.rb-data-time,.rb-manual-times,.rb-data-sources>p){font-size:12px!important;line-height:1.7!important;color:#405979!important} :root body#royal-blue-app.royal-blue-interface .rb-data-basis h3{font-size:14px!important;color:#153d7f!important} :root body#royal-blue-app.royal-blue-interface .rb-data-basis .rb-data-parameter{color:#184ea8!important;font-weight:500} :root body#royal-blue-app.royal-blue-interface .rb-data-basis .rb-reference-details summary span{font-size:12px!important;color:#405979!important} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison h2{font-size:22px!important} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison :is(.analysis-heading p,.ob-count-pill,.table-footer){font-size:12px!important;color:#405979!important} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison th{font-size:12px!important;font-weight:650!important;line-height:1.5;padding:12px 10px!important;color:#173d77!important;white-space:normal;min-width:75px} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison td{font-size:12px!important;padding:11px 10px!important;color:#25476f!important} :root body#royal-blue-app.royal-blue-interface .chart-legend,:root body#royal-blue-app.royal-blue-interface .chart-interaction-hint{font-size:12px!important;line-height:1.6;color:#405979!important} .chart-time-range{flex-basis:100%} :root body#royal-blue-app.royal-blue-interface .gis-map-notes{display:none!important} .map-quick-rotation{position:absolute;z-index:800;top:76px;right:12px;display:flex;gap:3px;padding:4px;background:#ffffffed;border:1px solid #d5e3f1;border-radius:9px;box-shadow:0 3px 8px #153d7710} .map-quick-rotation button{padding:5px 6px;background:#f2f6ff;border:0;border-radius:5px;color:#2453a4;font-size:11px;cursor:pointer;min-height:28px} .map-quick-rotation button[data-map-turn]{font-size:20px;padding:0 6px} .map-quick-rotation button:hover{background:#dfe9ff;color:#245bff} .map-quick-rotation button:focus-visible{outline:2px solid #245bff;outline-offset:1px} .river-quality-scale>i{position:relative;overflow:hidden;background:var(--quality-base,#a8d5e3)!important;height:8px!important} .river-quality-scale>i::after{content:'';position:absolute;inset:0;background:var(--quality-gradient);opacity:.38} .river-quality-scale>b{background:color-mix(in srgb,#71817f 38%,var(--quality-base,#a8d5e3))!important} @media(max-width:1100px){:root body#royal-blue-app.royal-blue-interface .rb-heading-main h1{font-size:24px!important}.rb-heading-icon{width:44px;height:44px}:root body#royal-blue-app.royal-blue-interface .rb-heading-status{padding:8px 10px}:root body#royal-blue-app.royal-blue-interface .rb-overview-row{grid-template-columns:repeat(3,minmax(140px,1fr)) minmax(330px,1.65fr);gap:9px}:root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-three-summary .ob-stat{grid-template-columns:30px minmax(0,1fr);padding:12px 9px;column-gap:7px}:root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-kpi-icon{width:30px;height:34px}} .rb-kpi-evidence{grid-column:1/-1;align-self:center;min-width:0} .rb-kpi-detail{display:flex;align-items:flex-start;gap:6px;color:#657b99;font-size:10px;line-height:1.5} .rb-kpi-detail>svg{flex:none;margin-top:2px;color:var(--card-accent)} .rb-kpi-detail strong{display:block;font-size:10px;font-weight:600;color:#385779;overflow-wrap:anywhere} .rb-readiness-track{height:4px;margin:7px 0 0 19px;background:#d9eaf0;border-radius:5px;overflow:hidden} .rb-readiness-track i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#20bfd4,#089cc0)} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-three-summary .ob-stat{grid-template-rows:auto 1fr auto;min-height:177px;gap:8px 10px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-station-navigation{gap:9px;padding:12px 12px 10px!important} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .ob-station-tabs{gap:5px!important} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station{--station-accent:#078ca8;--station-tint:#dcf5fa;min-height:87px!important;padding:7px 2px!important;gap:5px!important;border:1px solid #d8e9f2!important;border-bottom:3px solid #b8dce7!important;border-radius:9px!important;background:linear-gradient(160deg,#fff,#eff8fc)!important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station[data-station-source='measured']{--station-accent:#245bff;--station-tint:#e1eaff} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station[data-station-alert='2'],:root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station[data-station-alert='3'],:root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station[data-station-alert='4']{background:linear-gradient(160deg,#fff,#fff1f3)!important;border-color:#f0d3db!important;border-bottom-color:#e99aaa!important} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station .sa-top{display:flex!important;flex-direction:column;gap:4px!important;align-items:center!important} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station .sa-source-icon{display:grid!important;place-items:center;flex:0 0 28px;width:28px;height:28px;border:1px solid #ffffffb3;border-radius:9px;background:var(--station-tint);color:var(--station-accent);box-shadow:0 2px 5px #1c58800a;transition:transform .2s ease,background .2s ease} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-source-icon svg{width:19px;height:19px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-identity strong{line-height:1.25!important;letter-spacing:.1px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station.selected{padding:7px 2px!important;background:linear-gradient(155deg,#f2f6ff,#dee9ff)!important;border:1px solid #91afff!important;border-bottom:3px solid #245bff!important;box-shadow:0 3px 8px #245bff14!important} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station.selected .sa-source-icon{background:linear-gradient(145deg,#4878ff,#245bff);color:#fff;box-shadow:0 3px 7px #245bff30;border-color:#ffffff66} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station:hover{transform:translateY(-2px);border-color:#91afff!important;box-shadow:0 5px 10px #245bff16!important} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station:hover .sa-source-icon{transform:translateY(-1px)} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station:focus-visible{outline:2px solid #245bff;outline-offset:2px} @media(prefers-reduced-motion:reduce){:root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station,:root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-source-icon{transition:none!important;transform:none!important}} /* Responsive controls: one map dock, compact basemaps and readable mobile records. */ :root body#royal-blue-app.royal-blue-interface .map-floating-tools{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:3px;max-width:calc(100% - 24px)} :root body#royal-blue-app.royal-blue-interface .map-floating-tools .map-quick-rotation{position:static;display:flex;gap:2px;padding:0 0 0 4px;margin-left:3px;border:0;border-left:1px solid #dbe5f4;border-radius:0;background:none;box-shadow:none} :root body#royal-blue-app.royal-blue-interface .map-floating-tools button{min-height:34px;white-space:nowrap} .map-basemap-select{display:none} @media(max-width:1200px){ :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar{align-items:center!important} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar .gis-basemap-switch{display:none!important} .map-basemap-select{display:block} .map-basemap-select select{max-width:140px;min-height:38px;padding:7px 28px 7px 10px;border:1px solid #cbdcff;border-radius:9px;color:#184fae;background:#f2f7ff;font:600 12px 'Be Vietnam Pro',sans-serif;cursor:pointer} :root body#royal-blue-app.royal-blue-interface .rb-overview-row{grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:10px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-station-navigation{grid-column:1/-1;padding:12px!important;gap:10px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-station-navigation .ob-section-heading{flex-direction:row;align-items:center} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .ob-station-tabs{gap:8px!important} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station{min-height:80px!important} } @media(max-width:600px){ :root body#royal-blue-app.royal-blue-interface .topbar{gap:8px;flex-wrap:nowrap;min-height:56px} :root body#royal-blue-app.royal-blue-interface #breadcrumb{min-width:0;flex:1;gap:5px;white-space:nowrap;font-size:12px} :root body#royal-blue-app.royal-blue-interface #breadcrumb>span{display:none} :root body#royal-blue-app.royal-blue-interface #breadcrumb>svg{display:none} :root body#royal-blue-app.royal-blue-interface #breadcrumb strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root body#royal-blue-app.royal-blue-interface .topbar-right{flex:none;gap:5px} :root body#royal-blue-app.royal-blue-interface .topbar .rb-top-export{width:34px;height:34px;box-sizing:border-box;display:grid;place-items:center;font-size:0;padding:0} :root body#royal-blue-app.royal-blue-interface .topbar .rb-top-export::before{content:'↓';font-size:23px} :root body#royal-blue-app.royal-blue-interface .rb-heading-main{min-width:0;gap:10px;width:100%;flex-basis:100%} :root body#royal-blue-app.royal-blue-interface .rb-heading-main h1{font-size:21px!important} :root body#royal-blue-app.royal-blue-interface .ob-page-heading{gap:10px} :root body#royal-blue-app.royal-blue-interface .rb-heading-status{padding:7px 10px;gap:7px;display:flex;width:100%;box-sizing:border-box} .rb-heading-status>span{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1} .rb-heading-status strong{margin:0;font-size:12px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row{gap:7px;margin-bottom:12px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-three-summary .ob-stat{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;gap:7px;padding:10px 8px;min-height:0} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-kpi-icon{height:30px;width:30px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-kpi-label{font-size:11px;min-height:30px;display:block} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-kpi-value{font-size:28px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-kpi-value small{font-size:10px;margin-left:3px} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-kpi-footer{padding:0} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-fresh-pill{white-space:normal;line-height:1.5} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-kpi-link{display:none} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .rb-station-hint{display:none} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .ob-station-tabs{gap:5px!important} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-station{min-width:0;min-height:85px!important} :root body#royal-blue-app.royal-blue-interface .rb-overview-row .sa-status-chip{font-size:9px!important;padding:3px 2px!important} :root body#royal-blue-app.royal-blue-interface .map-floating-tools{left:10px;right:10px;bottom:30px;max-width:none} :root body#royal-blue-app.royal-blue-interface .map-floating-tools button{min-height:38px;font-size:11px;padding:5px 7px} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison .table-wrap{overflow:visible} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison table{display:block;width:100%;min-width:0;border:0;border-radius:0;overflow:visible} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison tbody{display:grid;gap:10px} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison tr.click-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;padding:10px 12px;border:1px solid #dbe7fa;border-radius:10px;background:linear-gradient(150deg,#fff,#f5f8ff)} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison td{display:flex;flex-direction:column;align-items:flex-start;white-space:normal!important;padding:7px 0!important;border:0;font-size:15px!important;min-width:0} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison td::before{content:attr(data-label);font-size:11px;color:#536a8c;line-height:1.5;margin-bottom:4px;font-weight:500} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison td:last-child{grid-column:1/-1;border-top:1px solid #e2eaf8;margin-top:5px;flex-direction:row;align-items:center;justify-content:space-between} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison td:first-child strong{font-size:14px;background:#e7efff;color:#245bce} :root body#royal-blue-app.royal-blue-interface .ob-overview .fleet-comparison .badge{font-size:11px} } @media(max-width:380px){:root body#royal-blue-app.royal-blue-interface .map-floating-tools .map-quick-rotation{border-left:0;margin-left:0;padding-left:0;flex-basis:100%;justify-content:center}} :root body#royal-blue-app.royal-blue-interface .rb-station-navigation .ob-section-heading{order:0!important} :root body#royal-blue-app.royal-blue-interface .rb-station-navigation .ob-station-tabs{order:1!important} :root body#royal-blue-app.royal-blue-interface .map-floating-tools{flex-direction:row!important} :root body#royal-blue-app.royal-blue-interface .map-floating-tools .map-quick-rotation{flex-direction:row!important} :root body#royal-blue-app.royal-blue-interface .map-floating-tools button[data-map-turn]{font-size:20px!important;min-width:30px;padding:0 5px} @media(max-width:600px){:root body#royal-blue-app.royal-blue-interface .map-floating-tools{padding:4px!important}:root body#royal-blue-app.royal-blue-interface .map-floating-tools .map-quick-rotation{margin:0;border-left:0;padding:0}} /* Compact layer switches and basemap picker for laptop, tablet and phone. */ @media(max-width:1366px){ :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar{align-items:center!important} :root body#royal-blue-app.royal-blue-interface .shared-observatory-map.gis-beacon-map .map-topbar .gis-basemap-switch{display:none!important} .map-basemap-select{display:block;position:relative} .map-basemap-select select{max-width:150px;min-height:38px;padding:7px 27px 7px 34px;border:1px solid #cbdcff;border-radius:9px;color:#184fae;background:#f2f7ff;font:600 12px 'Be Vietnam Pro',sans-serif;cursor:pointer} } .map-basemap-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:grid;place-items:center;pointer-events:none;color:#245bff} .map-basemap-icon svg{width:17px;height:17px} .quality-label-small{display:none} :root body#royal-blue-app.royal-blue-interface .river-quality-control{padding:6px 7px;border-radius:9px;max-width:calc(100% - 130px)} :root body#royal-blue-app.royal-blue-interface .river-quality-switches{display:grid;grid-template-columns:1fr 1fr;gap:4px} :root body#royal-blue-app.royal-blue-interface .river-quality-switches button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:5px 7px;font-size:11px;white-space:nowrap;border-radius:6px} :root body#royal-blue-app.royal-blue-interface .river-quality-switches button svg{width:15px;height:15px;flex:none} :root body#royal-blue-app.royal-blue-interface .river-quality-switches button[aria-pressed=true]{color:#174eaf;background:#e6efff;border-color:#7ba5ff} :root body#royal-blue-app.royal-blue-interface .river-quality-switches button[aria-pressed=false]{color:#61728a;background:#f5f7fa;border-color:#d5dce6} :root body#royal-blue-app.royal-blue-interface .river-quality-scale{display:flex;gap:4px;font-size:10px;line-height:1.4;justify-content:space-between} :root body#royal-blue-app.royal-blue-interface .river-quality-scale>i{flex:1;min-width:40px;width:60px} @media(max-width:600px){ :root body#royal-blue-app.royal-blue-interface .river-quality-control{left:50px!important;top:10px;width:174px;max-width:calc(100% - 124px);box-sizing:border-box;padding:5px 6px} .quality-label-wide{display:none} .quality-label-small{display:inline} :root body#royal-blue-app.royal-blue-interface .river-quality-switches button{min-height:36px;padding:5px 3px;gap:3px;font-size:10px} :root body#royal-blue-app.royal-blue-interface .river-quality-switches button svg{width:14px;height:14px} :root body#royal-blue-app.royal-blue-interface .river-quality-scale{font-size:9px;gap:3px;margin-top:5px} :root body#royal-blue-app.royal-blue-interface .river-quality-scale>i{min-width:26px;width:35px} :root body#royal-blue-app.royal-blue-interface .river-quality-scale>b{margin-left:0;width:6px;height:6px;flex:none} .map-basemap-select select{padding-left:32px;font-size:12px;min-height:40px} } /* Align the heading icon with the complete title and subtitle block. */ :root body#royal-blue-app.royal-blue-interface .rb-heading-main{align-items:center;gap:14px} :root body#royal-blue-app.royal-blue-interface .rb-heading-icon{width:60px;height:60px;box-sizing:border-box;border-radius:16px} :root body#royal-blue-app.royal-blue-interface .rb-heading-icon svg{width:30px;height:30px} :root body#royal-blue-app.royal-blue-interface .rb-heading-main h1{margin:0!important;line-height:1.2!important} :root body#royal-blue-app.royal-blue-interface .rb-heading-main p{margin:6px 0 0!important;line-height:1.5!important} @media(max-width:1100px){:root body#royal-blue-app.royal-blue-interface .rb-heading-icon{width:56px;height:56px;border-radius:14px}:root body#royal-blue-app.royal-blue-interface .rb-heading-main p{margin-top:5px!important}} @media(max-width:600px){:root body#royal-blue-app.royal-blue-interface .rb-heading-icon{width:48px;height:48px;border-radius:13px}:root body#royal-blue-app.royal-blue-interface .rb-heading-icon svg{width:27px;height:27px}:root body#royal-blue-app.royal-blue-interface .rb-heading-main{gap:12px}} /* Shared heading treatment across operational pages and form sections. */ :root body#royal-blue-app.royal-blue-interface .rb-unified-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 18px;padding:0} :root body#royal-blue-app.royal-blue-interface .rb-unified-heading .rb-heading-main{min-width:0;flex:1 1 360px;align-items:center} :root body#royal-blue-app.royal-blue-interface .rb-unified-heading h1{font-size:27px!important;line-height:1.2!important;font-weight:800;color:var(--rb-ink);letter-spacing:-.6px;margin:0!important} :root body#royal-blue-app.royal-blue-interface .rb-unified-heading p{font-size:14px!important;line-height:1.5!important;color:#173eae!important;margin:6px 0 0!important} :root body#royal-blue-app.royal-blue-interface .rb-unified-heading .head-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;flex:0 1 auto} :root body#royal-blue-app.royal-blue-interface .card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} :root body#royal-blue-app.royal-blue-interface .card-title h2{display:flex;align-items:center;gap:10px;min-width:0;line-height:1.4;margin:0;font-size:17px} :root body#royal-blue-app.royal-blue-interface .rb-form-title-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid #d3e2ff;border-radius:10px;background:linear-gradient(145deg,#f6f9ff,#e2edff);color:#245bff} :root body#royal-blue-app.royal-blue-interface .rb-form-title-icon svg{width:20px;height:20px;margin:0!important} @media(max-width:1100px){:root body#royal-blue-app.royal-blue-interface .rb-unified-heading h1{font-size:24px!important}} @media(max-width:600px){:root body#royal-blue-app.royal-blue-interface .rb-unified-heading{gap:12px}:root body#royal-blue-app.royal-blue-interface .rb-unified-heading .rb-heading-main{flex-basis:100%}:root body#royal-blue-app.royal-blue-interface .rb-unified-heading h1{font-size:21px!important}:root body#royal-blue-app.royal-blue-interface .rb-unified-heading p{font-size:12px!important;margin-top:5px!important}:root body#royal-blue-app.royal-blue-interface .rb-unified-heading .head-actions{width:100%;justify-content:flex-start}:root body#royal-blue-app.royal-blue-interface .card-title h2{font-size:16px}:root body#royal-blue-app.royal-blue-interface .rb-form-title-icon{width:32px;height:32px}} :root body#royal-blue-app.royal-blue-interface .rb-form-title-icon svg{color:#245bff!important} :root body#royal-blue-app.royal-blue-interface .modal-title{display:flex;align-items:center;justify-content:space-between;gap:12px} :root body#royal-blue-app.royal-blue-interface .modal-title h2{display:flex;align-items:center;gap:10px;margin:0;line-height:1.4;min-width:0} :root body#royal-blue-app.royal-blue-interface .modal-title>button{flex:none} /* SVG icons in every basemap option, with an aligned custom dropdown. */ .map-basemap-select{position:relative;z-index:900} .map-basemap-select>summary{display:flex;align-items:center;gap:8px;min-height:38px;box-sizing:border-box;min-width:140px;padding:8px 10px;border:1px solid #cbdcff;border-radius:9px;color:#184fae;background:#f2f7ff;font:600 12px 'Be Vietnam Pro',sans-serif;cursor:pointer;list-style:none} .map-basemap-select>summary::-webkit-details-marker{display:none} .map-basemap-select .map-basemap-icon{position:static;transform:none;display:grid;flex:none} .map-basemap-chevron{margin-left:auto;font-size:17px;line-height:1} .map-basemap-select[open]>summary{border-color:#245bff;box-shadow:0 0 0 2px #245bff1a} .map-basemap-options{position:absolute;right:0;top:calc(100% + 5px);min-width:160px;padding:5px;background:#fff;border:1px solid #d5e3fa;border-radius:10px;box-shadow:0 8px 24px #173d7726;display:grid;gap:3px} :root body#royal-blue-app.royal-blue-interface .map-basemap-options button{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:8px 10px;text-align:left;border:0;border-radius:6px;background:#fff;color:#264f8f;font:500 12px 'Be Vietnam Pro',sans-serif;cursor:pointer} .map-basemap-options button svg{width:18px;height:18px;flex:none} :root body#royal-blue-app.royal-blue-interface .map-basemap-options button[aria-pressed=true]{background:#e6efff;color:#245bff;font-weight:650} :root body#royal-blue-app.royal-blue-interface .map-basemap-options button:hover{background:#f0f5ff} .map-basemap-options button:focus-visible,.map-basemap-select>summary:focus-visible{outline:2px solid #245bff;outline-offset:2px} @media(max-width:600px){.map-basemap-select>summary{min-height:40px;min-width:132px}.map-basemap-options button{min-height:42px}} /* Shared parameter identity; alert and sample quality colors remain semantic. */ :root body#royal-blue-app.royal-blue-interface .rb-data-basis .rb-data-parameter{color:var(--parameter-color)!important;font-weight:600;text-decoration-color:color-mix(in srgb,var(--parameter-color) 40%,transparent)} :root body#royal-blue-app.royal-blue-interface .instrument-reading .ir-icon{color:var(--parameter-color)!important;background:color-mix(in srgb,var(--parameter-color) 12%,white)!important} :root body#royal-blue-app.royal-blue-interface .instrument-reading .ir-name>strong{color:var(--parameter-color)!important} :root body#royal-blue-app.royal-blue-interface .monitor-reading .monitor-reading-trigger{padding:8px 10px;gap:10px} :root body#royal-blue-app.royal-blue-interface .monitor-reading .monitor-reading-name{color:var(--reading-color)} :root body#royal-blue-app.royal-blue-interface .monitor-reading-trigger:hover .monitor-reading-icon{transform:none} .map-basemap-select>summary::after{content:none!important} /* Content-sized basemap button and compact monitoring filters. */ .map-basemap-select>summary{min-width:0;width:max-content;gap:7px;padding:8px 10px;white-space:nowrap} :root body#royal-blue-app.royal-blue-interface .monitor-workspace .monitor-toolbar{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:20px} :root body#royal-blue-app.royal-blue-interface .monitor-toolbar .field>label{display:flex;align-items:center;gap:7px;margin-bottom:7px;line-height:1.4} .monitor-toolbar .field>label>svg{color:#245bff;flex:none} .monitor-station-input{position:relative;display:flex;align-items:center} .monitor-station-input>svg{position:absolute;left:12px;color:#245bff;pointer-events:none;width:18px;height:18px} :root body#royal-blue-app.royal-blue-interface .monitor-station-input>.form-control{padding-left:39px!important} .monitor-toolbar .segments button{display:flex;align-items:center;justify-content:center;gap:5px} @media(max-width:600px){:root body#royal-blue-app.royal-blue-interface .monitor-workspace .monitor-toolbar{grid-template-columns:1fr;gap:14px}.map-basemap-select>summary{min-width:0;width:max-content}} :root body#royal-blue-app.royal-blue-interface .admin-tabs .btn{display:inline-flex;align-items:center;gap:7px;min-height:36px} .admin-tabs .btn>svg{flex:none;color:#245bff}.admin-tabs .btn[aria-pressed=true]>svg{color:inherit} /* Consistent disclosure arrows: CSS geometry avoids font-dependent glyph placement. */ :root body#royal-blue-app.royal-blue-interface .action-menu>summary{display:flex;align-items:center;justify-content:center;gap:9px;list-style:none} :root body#royal-blue-app.royal-blue-interface .action-menu>summary::after{content:'';display:block;flex:0 0 6px;width:6px;height:6px;margin:0 1px 3px 2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);line-height:0} :root body#royal-blue-app.royal-blue-interface .action-menu[open]>summary::after{transform:rotate(225deg);margin-top:4px} :root body#royal-blue-app.royal-blue-interface select.form-control{appearance:none;padding-right:34px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23184fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 11px center!important;background-size:16px 16px!important} :root body#royal-blue-app.royal-blue-interface .report-summary .mini-stat{position:relative;overflow:hidden;padding:18px!important;border-top:3px solid var(--report-accent)!important;background:linear-gradient(145deg,white,color-mix(in srgb,var(--report-accent) 5%,white))!important;box-shadow:0 4px 14px #173c7510;display:flex;flex-direction:column;gap:9px;transition:transform .18s,box-shadow .18s} .report-summary .report-stat-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--report-accent);background:color-mix(in srgb,var(--report-accent) 12%,white)} :root body#royal-blue-app.royal-blue-interface .report-summary .mini-stat>strong{font-size:30px;line-height:1.2;margin:0;color:#102a61} .report-summary strong em{font-size:12px;font-weight:500;font-style:normal;margin-left:6px;color:#536881} .report-summary .mini-stat>small{font-size:11px;color:#536881;line-height:1.5} .report-summary .mini-stat>span:not(.report-stat-icon){min-height:36px;line-height:1.5} @media(hover:hover){.report-summary .mini-stat:hover{transform:translateY(-2px);box-shadow:0 7px 18px #173c751a!important}} @media(max-width:600px){:root body#royal-blue-app.royal-blue-interface .report-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}.report-summary .mini-stat>small{font-size:10px}} @media(prefers-reduced-motion:reduce){.report-summary .mini-stat{transition:none!important;transform:none!important}} /* Selected administration category and readable configuration records. */ :root body#royal-blue-app.royal-blue-interface .admin-tabs .btn[aria-pressed=true]{background:#245bff!important;color:white!important;border-color:#245bff!important;box-shadow:0 3px 9px #245bff35;font-weight:700} :root body#royal-blue-app.royal-blue-interface .admin-tabs .btn[aria-pressed=true]>svg{color:white!important} :root body#royal-blue-app.royal-blue-interface .settings-records{overflow:visible!important;max-height:none!important;border:0!important;background:transparent!important} :root body#royal-blue-app.royal-blue-interface .settings-records table{display:block;width:100%!important;min-width:0!important} .settings-records thead{display:none!important} .settings-records tbody{display:grid;gap:14px} :root body#royal-blue-app.royal-blue-interface .settings-records tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:16px;border:1px solid #ceddF4;border-radius:12px;background:linear-gradient(145deg,#fff,#f7faff)} :root body#royal-blue-app.royal-blue-interface .settings-records td{display:block;min-width:0;padding:0!important;border:0!important;white-space:normal!important} .settings-cell-label{display:block;font-size:12px;font-weight:600;line-height:1.5;margin-bottom:6px;color:#284a76} :root body#royal-blue-app.royal-blue-interface .settings-records :is(input:not([type=checkbox]),select,textarea){box-sizing:border-box;width:100%!important;min-width:0!important;max-width:none!important;font-size:13px!important;min-height:40px} .settings-records td[data-field="name"],.settings-records td[data-field="reference"],.settings-records td[data-field="next_step"],.settings-records td[data-field="replace_with"],.settings-records td[data-field="value"]{grid-column:span 2} .settings-records td[data-field-type="checkbox"]{display:flex!important;align-items:center;gap:10px;min-height:40px} .settings-records td[data-field-type="checkbox"] .settings-cell-label{margin:0} .settings-records .settings-row-actions{grid-column:1/-1;display:flex!important;justify-content:flex-end;gap:12px;border-top:1px solid #deE8f8!important;padding-top:10px!important} @media(max-width:700px){:root body#royal-blue-app.royal-blue-interface .settings-records tr{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px}} @media(max-width:420px){:root body#royal-blue-app.royal-blue-interface .settings-records tr{grid-template-columns:minmax(0,1fr)}.settings-records td{grid-column:1!important}} .settings-cell-label,#settings-form .field>label{display:flex;align-items:center;gap:5px} .settings-cell-label>svg,#settings-form .field>label>svg{flex:none;color:#245bff} :root body#royal-blue-app.royal-blue-interface #settings-form[data-settings-group="parameters"] .settings-records tr{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 10px;padding:12px} #settings-form[data-settings-group="parameters"] .settings-records tbody{gap:10px} :root body#royal-blue-app.royal-blue-interface #settings-form[data-settings-group="parameters"] .settings-records :is(input:not([type=checkbox]),select){min-height:34px;height:34px;padding-top:5px;padding-bottom:5px;font-size:12px!important} #settings-form[data-settings-group="parameters"] .settings-cell-label{font-size:11px;margin-bottom:4px} #settings-form[data-settings-group="parameters"] td[data-field="kind"],#settings-form[data-settings-group="parameters"] td[data-field="display_color"]{grid-column:span 2} :root body#royal-blue-app.royal-blue-interface #settings-form[data-settings-group="parameters"] .settings-row-actions{padding-top:5px!important} @media(max-width:1000px){:root body#royal-blue-app.royal-blue-interface #settings-form[data-settings-group="parameters"] .settings-records tr{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:650px){:root body#royal-blue-app.royal-blue-interface #settings-form[data-settings-group="parameters"] .settings-records tr{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:420px){#settings-form[data-settings-group="parameters"] .settings-records td[data-field="name"],#settings-form[data-settings-group="parameters"] .settings-records td[data-field="kind"],#settings-form[data-settings-group="parameters"] .settings-records td[data-field="display_color"]{grid-column:span 2!important}} /* Laptop administration workspace: content density follows available panel width. */ :root body#royal-blue-app.royal-blue-interface #admin-panel{min-width:0;container-type:inline-size} :root body#royal-blue-app.royal-blue-interface #admin-panel .settings-title{margin-bottom:12px;gap:8px} :root body#royal-blue-app.royal-blue-interface #admin-panel .settings-title>.card-title{margin-bottom:0} :root body#royal-blue-app.royal-blue-interface #settings-form>.form-grid:empty{display:none} :root body#royal-blue-app.royal-blue-interface #admin-panel .settings-array{margin-top:14px;padding-top:14px} :root body#royal-blue-app.royal-blue-interface #admin-panel .settings-records tr{gap:9px 12px;padding:12px} :root body#royal-blue-app.royal-blue-interface #admin-panel .settings-records textarea{height:66px;min-height:66px!important;resize:vertical;line-height:1.5;padding:8px} :root body#royal-blue-app.royal-blue-interface #admin-panel .field>label{font-size:12px;line-height:1.5} :root body#royal-blue-app.royal-blue-interface #admin-panel .form-grid{gap:12px 16px} @media(min-width:1001px) and (max-width:1366px){ :root body#royal-blue-app.royal-blue-interface #content .admin-tabs{gap:5px;padding:6px} :root body#royal-blue-app.royal-blue-interface #content .admin-tabs .btn{padding:6px 9px;min-height:34px;font-size:12px;gap:5px} :root body#royal-blue-app.royal-blue-interface #admin-panel .card{padding:16px} :root body#royal-blue-app.royal-blue-interface #admin-panel .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @container(max-width:1020px){ :root body#royal-blue-app.royal-blue-interface #settings-form[data-settings-group="parameters"] .settings-records tr{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px 9px} :root body#royal-blue-app.royal-blue-interface #admin-panel .settings-cell-label{font-size:11px} } @container(max-width:800px){ :root body#royal-blue-app.royal-blue-interface #settings-form[data-settings-group="parameters"] .settings-records tr{grid-template-columns:repeat(4,minmax(0,1fr))} :root body#royal-blue-app.royal-blue-interface #admin-panel .settings-records tr{grid-template-columns:repeat(2,minmax(0,1fr))} } @container(max-width:480px){ :root body#royal-blue-app.royal-blue-interface #settings-form[data-settings-group="parameters"] .settings-records tr{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Numeric controls fit their values rather than filling the whole form column. */ :root body#royal-blue-app.royal-blue-interface #admin-panel #settings-form input[type=number]{width:var(--numeric-ch,9ch)!important;min-width:7ch!important;max-width:100%!important;font-variant-numeric:tabular-nums;padding-left:9px;padding-right:5px} :root body#royal-blue-app.royal-blue-interface #settings-form>.form-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important} :root body#royal-blue-app.royal-blue-interface #settings-form>.form-grid>.field.full{grid-column:1/-1} @media(max-width:600px){:root body#royal-blue-app.royal-blue-interface #settings-form>.form-grid{grid-template-columns:minmax(0,1fr)!important}}