/* Readability priority: layered important rules outrank legacy unlayered
   important declarations, including compact/mobile typography. */
@layer readability {
  @media(min-width:1101px) and (max-width:1400px) {
    body#royal-blue-app .rb-overview-row .rb-station-navigation .ob-station-tabs {grid-template-columns:repeat(5,minmax(0,1fr)) !important}
    body#royal-blue-app .rb-overview-row .rb-station-navigation .ob-station-tabs .sa-station .sa-status-chip {
      display:block !important;width:10px !important;height:10px !important;min-width:10px !important;
      padding:0 !important;margin:3px auto !important;overflow:hidden;font-size:0 !important;
      line-height:0 !important;border-radius:50% !important;background:#f59e0b !important;
      box-shadow:0 0 0 3px #f59e0b20; border:1px solid #fff !important;
    }
    body#royal-blue-app .rb-overview-row .rb-station-navigation .sa-status-chip::before,
    body#royal-blue-app .rb-overview-row .rb-station-navigation .sa-status-chip b {display:none !important}
    body#royal-blue-app .rb-overview-row .rb-station-navigation [data-station-alert='0'] .sa-status-chip {background:#245bff !important;box-shadow:0 0 0 3px #245bff20}
    body#royal-blue-app .rb-overview-row .rb-station-navigation :is([data-station-alert='2'],[data-station-alert='3'],[data-station-alert='4']) .sa-status-chip {background:#ef4444 !important;box-shadow:0 0 0 3px #ef444420}
    body#royal-blue-app .rb-overview-row .rb-station-navigation [data-station-alert='unknown'] .sa-status-chip {background:#8797ab !important;box-shadow:0 0 0 3px #8797ab20}
  }
  body#royal-blue-app .rb-overview-row .rb-station-navigation .ob-station-tabs {display:grid !important;grid-template-columns:repeat(auto-fit,minmax(78px,1fr)) !important;overflow:visible !important;gap:6px !important}
  body#royal-blue-app .rb-overview-row .rb-station-navigation .ob-station-tabs .sa-station {min-width:0 !important;width:100% !important}
  body#royal-blue-app .staff-entry {max-width:1120px;margin:0 auto;padding:38px 32px;min-height:calc(100vh - 70px);display:flex;flex-direction:column;box-sizing:border-box}
  body#royal-blue-app .staff-entry-brand {display:flex;align-items:center;gap:12px;color:#143a75}
  body#royal-blue-app .staff-entry-brand div {display:grid;gap:2px}
  body#royal-blue-app .staff-entry-brand strong {font-size:16px}
  body#royal-blue-app .staff-entry-brand span {font-size:12px;color:#506580}
  body#royal-blue-app .staff-entry-grid {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:60px;align-items:center;flex:1;padding:50px 0}
  body#royal-blue-app .staff-entry-eyebrow {font-size:11px;color:#2464df;font-weight:600;letter-spacing:1.5px}
  body#royal-blue-app .staff-entry-intro h1 {font-size:36px !important;line-height:1.35;color:#102c68;margin:14px 0 18px;letter-spacing:-1px}
  body#royal-blue-app .staff-entry-intro > p {font-size:15px;line-height:1.8;color:#506580;max-width:490px}
  body#royal-blue-app .staff-entry-features {display:grid;gap:20px;margin-top:30px}
  body#royal-blue-app .staff-entry-features > div {display:flex;gap:12px;align-items:flex-start}
  body#royal-blue-app .staff-entry-features svg {color:#2464df;margin-top:4px;flex:none}
  body#royal-blue-app .staff-entry-features span {display:grid;gap:3px}
  body#royal-blue-app .staff-entry-features strong {font-size:14px;color:#24446c}
  body#royal-blue-app .staff-entry-features small {font-size:12px !important;color:#506580}
  body#royal-blue-app .staff-entry-card {padding:32px;border:1px solid #d9e5f7;border-top:3px solid #2464df;border-radius:18px;background:#fff;box-shadow:0 18px 48px #244e8c10}
  body#royal-blue-app .staff-entry-shield {display:grid;place-items:center;width:60px;height:60px;border-radius:16px;background:#edf4ff;color:#2464df;margin-bottom:22px}
  body#royal-blue-app .staff-entry-card h2 {font-size:22px !important;line-height:1.45;color:#102c68;margin:0 0 12px}
  body#royal-blue-app .staff-entry-card p {font-size:14px;line-height:1.8;color:#506580;margin-bottom:26px}
  body#royal-blue-app .staff-entry-card .btn {display:flex;justify-content:center;width:100%;padding:12px !important;box-sizing:border-box}
  body#royal-blue-app .staff-entry-public {display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:#2464df;margin-top:18px}
  body#royal-blue-app .staff-entry-account-note {display:flex;gap:8px;align-items:flex-start;border-top:1px solid #e4ecf8;padding-top:18px;margin-top:24px;font-size:12px;color:#506580}
  body#royal-blue-app .staff-entry-footer {display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:18px 0;border-top:1px solid #dce7f6;font-size:11px;color:#506580;background:none}
  @media(max-width:760px) {
    body#royal-blue-app .staff-entry {padding:24px 18px}
    body#royal-blue-app .staff-entry-grid {grid-template-columns:1fr;gap:28px;padding:32px 0}
    body#royal-blue-app .staff-entry-intro h1 {font-size:28px !important}
    body#royal-blue-app .staff-entry-card {padding:24px}
  }
  /* Keep the card geometry and decorative ::after intact. The inset adds
     two pixels to the existing one-pixel border without shifting content. */
  body#royal-blue-app .rb-overview-row :is(.ob-kpi-network,.ob-kpi-pending):is(:hover,:focus-within) {
    border-top-color:#245bff !important;
    box-shadow:inset 0 2px 0 #245bff,0 9px 24px #1c4caa17 !important;
  }
  @media(min-width:1101px) and (max-width:1400px) {
    body#royal-blue-app .rb-station-navigation .ob-station-tabs {overflow-x:auto !important;align-items:stretch}
    body#royal-blue-app .rb-station-navigation .ob-station-tabs {gap:5px !important}
    body#royal-blue-app .rb-overview-row .sa-station {min-width:78px !important;padding:7px 3px !important}
    body#royal-blue-app .rb-station-navigation .ob-station-tabs .sa-station .sa-status-chip {white-space:nowrap !important;flex-wrap:nowrap !important;font-size:10px !important;max-width:none !important}
    body#royal-blue-app .rb-overview-row .sa-status-chip {font-size:10px !important;white-space:nowrap !important;line-height:1.5 !important;padding:3px !important;gap:2px !important}
  }
  @media(min-width:1101px) and (max-width:1400px) {
    body#royal-blue-app .instrument-reading .ir-scale-heading {flex-wrap:wrap !important;gap:2px 8px !important}
    body#royal-blue-app .instrument-reading .ir-scale-heading > span {white-space:nowrap !important;font-size:12px !important}
    body#royal-blue-app .instrument-reading .ir-scale-heading > strong {margin-left:auto;white-space:nowrap;font-size:12px !important}
    body#royal-blue-app .instrument-reading .ir-result {gap:4px 6px !important}
    body#royal-blue-app .instrument-reading .ir-status {flex:1 1 auto !important;white-space:nowrap;font-size:12px !important}
    body#royal-blue-app .rb-kpi-footer .rb-kpi-caption {font-size:12px !important;line-height:1.5 !important}
  }
  body#royal-blue-app #modal-root {position:relative !important;z-index:11000 !important;isolation:isolate}
  body#royal-blue-app #modal-root .modal-overlay {z-index:11000 !important}
  body#royal-blue-app .river-canvas {isolation:isolate}
  body#royal-blue-app button.ir-reference-banner {width:100%;text-align:left;cursor:pointer;font:inherit;display:flex;align-items:center;gap:10px}
  body#royal-blue-app .ir-reference-banner > div {flex:1;min-width:0}
  body#royal-blue-app .ir-reference-open {display:flex;align-items:center;color:#2464df !important}
  body#royal-blue-app button.ir-reference-banner:hover {background:#dceaff !important;border-color:#8bb4fa !important}
  body#royal-blue-app button.ir-reference-banner:focus-visible {outline:3px solid #83afff;outline-offset:3px}
  body#royal-blue-app .standard-reference-modal {width:min(820px,calc(100vw - 32px)) !important;max-width:820px !important;padding:24px !important}
  body#royal-blue-app .standard-modal-context {display:flex;align-items:center;flex-wrap:wrap;gap:7px 10px;padding:10px 12px;background:#f5f8fd;border-radius:8px;color:#36516f;font-size:13px !important;margin-bottom:16px}
  body#royal-blue-app .standard-modal-context > span {margin-left:auto;color:#506580}
  body#royal-blue-app .standard-reference-modal .rp-panel {padding:0;background:#fff;min-width:0}
  body#royal-blue-app .standard-reference-modal .rp-standard {padding:16px;background:linear-gradient(135deg,#edf4ff,#f6fbff);border:1px solid #dce7fa;border-radius:12px}
  body#royal-blue-app .standard-reference-modal .rp-standard strong {font-size:17px !important}
  body#royal-blue-app .standard-reference-modal .rp-scope {display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
  body#royal-blue-app .standard-reference-modal .rp-table {width:100%;border-collapse:collapse}
  body#royal-blue-app .standard-reference-modal .rp-table :is(th,td) {padding:12px 10px !important;border-bottom:1px solid #e2eaf6;vertical-align:middle;text-align:left}
  body#royal-blue-app .standard-reference-modal .rp-table thead {background:#f2f7ff}
  body#royal-blue-app .standard-reference-modal .rp-source {margin-top:16px;padding:12px;background:#f7faff;border:1px solid #e0e9f6;border-radius:9px;line-height:1.7}
  @media(max-width:600px) {
    body#royal-blue-app .standard-reference-modal {padding:16px !important}
    body#royal-blue-app .standard-reference-modal .rp-table :is(th,td) {padding:8px 5px !important;font-size:12px !important;overflow-wrap:anywhere}
    body#royal-blue-app .standard-reference-modal .rp-parameter-icon {display:none}
  }
  body#royal-blue-app .map-pin-label .map-distance-label {
    font-size:10px !important;line-height:1.4 !important;letter-spacing:0 !important;
    white-space:nowrap !important;overflow-wrap:normal !important;max-width:none;
  }
  body#royal-blue-app #geographic-map .map-pin-label {
    width:max-content !important;min-width:76px;max-width:none !important;box-sizing:border-box;
  }
  body#royal-blue-app .gis-point-detail {width:min(350px,calc(100% - 24px));border-top-width:3px;background:#fff !important}
  body#royal-blue-app .gis-detail-header {padding:12px 14px !important;background:#f4f8ff}
  body#royal-blue-app .gis-detail-header h4 {font-size:15px !important;line-height:1.45 !important}
  body#royal-blue-app .gis-detail-body {padding:10px 12px !important}
  body#royal-blue-app .gis-point-detail .map-popup-readings {gap:7px !important;margin-top:10px}
  body#royal-blue-app .gis-point-detail .map-popup-readings > .gis-reading-card {
    padding:9px !important;background:color-mix(in srgb,var(--parameter-color) 5%,white) !important;
    border:1px solid color-mix(in srgb,var(--parameter-color) 18%,#e6edf5) !important;border-radius:8px !important;
  }
  body#royal-blue-app .gis-reading-card small {color:var(--parameter-color) !important;font-size:12px !important;line-height:1.45 !important;font-weight:500}
  body#royal-blue-app .gis-reading-value {display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;margin-top:3px}
  body#royal-blue-app .gis-reading-value strong {font-size:21px !important;color:#153b6b !important;line-height:1.4 !important;margin:0 !important}
  body#royal-blue-app .gis-reading-value span {font-size:10px !important;color:#506580 !important;white-space:nowrap}
  body#royal-blue-app .gis-reading-card em {font-size:10px !important;line-height:1.5 !important;margin-top:4px}
  body#royal-blue-app .gis-detail-reference {margin:10px 0 !important;padding:8px 10px !important;border:1px solid #dbe7fa}
  @media(max-width:480px) {body#royal-blue-app .gis-point-detail {width:calc(100% - 16px);max-height:76%}}
  body#royal-blue-app #brand-logo {width:40px !important;height:40px !important;flex:0 0 40px !important;background:none !important;border:0 !important;padding:0 !important;display:grid !important;place-items:center}
  body#royal-blue-app #brand-logo img {width:40px !important;height:40px !important;object-fit:contain !important}
  body#royal-blue-app .project-credit-modal {width:min(780px,calc(100vw - 32px)) !important;max-width:780px !important;padding:24px !important}
  body#royal-blue-app .project-title-card {padding:18px;background:linear-gradient(135deg,#eef5ff,#f6fbff);border:1px solid #dbe8fa;border-radius:12px}
  body#royal-blue-app .project-eyebrow {display:flex;align-items:center;gap:7px;font-size:11px !important;font-weight:600;color:#42638b;letter-spacing:.5px}
  body#royal-blue-app .project-title-card h3 {font-size:16px !important;line-height:1.65 !important;margin:10px 0 0 !important;color:#102b65 !important;font-weight:600}
  body#royal-blue-app .project-role-grid {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
  body#royal-blue-app .project-role-card {display:flex;gap:10px;padding:14px;border:1px solid #e0e9f6;border-radius:10px;background:#fff}
  body#royal-blue-app .project-role-card > svg {flex:none;color:#2464df;margin-top:3px}
  body#royal-blue-app .project-role-card h3 {font-size:12px !important;margin:0 0 6px !important;color:#506580 !important;font-weight:500}
  body#royal-blue-app .project-role-card p {font-size:14px !important;font-weight:600;color:#173b70}
  body#royal-blue-app .project-members h3 {display:flex;gap:8px;align-items:center;margin:20px 0 10px !important}
  body#royal-blue-app .project-members ul {display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;list-style:none;padding:0;margin:0}
  body#royal-blue-app .project-members li {display:flex;align-items:baseline;gap:8px;font-size:13px;line-height:1.6;color:#36516f}
  body#royal-blue-app .project-members li svg {flex:none;color:#168a90}
  @media(max-width:600px) {
    body#royal-blue-app .project-credit-modal {padding:18px !important}
    body#royal-blue-app .project-role-grid,body#royal-blue-app .project-members ul {grid-template-columns:1fr}
  }
  body#royal-blue-app .river-quality-control {padding:4px 5px !important;border-radius:7px !important;width:184px;box-sizing:border-box}
  body#royal-blue-app .river-quality-switches {gap:3px !important}
  body#royal-blue-app .river-quality-switches button {min-height:28px !important;padding:3px 4px !important;gap:3px !important;font-size:10px !important}
  body#royal-blue-app .river-quality-switches button svg {width:13px !important;height:13px !important}
  body#royal-blue-app .river-quality-scale {font-size:10px !important;line-height:1.3 !important;margin-top:3px !important;gap:3px !important}
  body#royal-blue-app .gis-location-bar > div {display:flex !important;align-items:baseline;flex-wrap:wrap;gap:3px 8px;min-width:0}
  body#royal-blue-app .gis-location-bar .gis-coordinate-label {text-transform:none !important;letter-spacing:normal !important}
  body#royal-blue-app .gis-location-bar strong {margin:0 !important;font-size:12px !important;white-space:nowrap}
  body#royal-blue-app .topbar .rb-top-export {display:inline-flex !important;align-items:center;justify-content:center;gap:7px !important;padding:8px 12px !important;line-height:1.4 !important}
  body#royal-blue-app .topbar .rb-top-export::before {display:none !important}
  body#royal-blue-app .topbar .rb-top-export svg {width:17px;height:17px;flex:none}
  body#royal-blue-app #notification-button {width:36px;height:36px;padding:8px !important;display:grid !important;place-items:center}
  body#royal-blue-app #notification-button::after {display:none !important}
  body#royal-blue-app #notification-button svg {width:20px;height:20px}
  body#royal-blue-app #notification-button .notification-count {top:1px !important;right:0 !important;min-width:16px;height:16px;box-sizing:border-box;padding:0 3px !important;display:flex;align-items:center;justify-content:center;font-size:9px !important;line-height:1 !important;border:1px solid white !important;border-radius:8px !important}
  body#royal-blue-app #footer-mode {font-size:11px !important;color:#506580 !important;line-height:1.5}
  body#royal-blue-app .project-credit-details {font:inherit !important;color:#1758bd !important;background:none;border:0;padding:2px 0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  body#royal-blue-app .project-credit-body h3 {font-size:14px !important;margin:16px 0 5px;color:#173eae}
  body#royal-blue-app .project-credit-body p {font-size:14px !important;line-height:1.7;margin:0;overflow-wrap:anywhere}
  @media(max-width:600px) {
    body#royal-blue-app .river-quality-switches button {min-height:32px !important}
    body#royal-blue-app .topbar .rb-top-export {padding:8px !important}
    body#royal-blue-app .topbar .rb-top-export span {display:none}
  }
  body#royal-blue-app {
    --readable-caption: max(13px, calc(var(--font-size, 16px) * .8125));
    --rb-muted: #506580 !important;
    --rb-text: #2d4e7a !important;
    --muted: #506580 !important;
    --text-secondary: #405b78 !important;
    --text-caption: #506580 !important;
    font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif !important;
    font-size: max(15px, calc(var(--font-size, 16px) - 1px)) !important;
    line-height: 1.6 !important;
  }
  body#royal-blue-app :is(button,input,select,textarea) {font-family:inherit !important}
  body#royal-blue-app :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) {
    font-size: max(15px, calc(var(--font-size, 16px) - 1px)) !important;
    line-height:1.55 !important;
  }
  body#royal-blue-app :is(.btn,.tabs button,.segments button,.admin-nav-item,.account,.rb-top-export,.live-update-notice) {
    font-size:14px !important; line-height:1.5 !important;
  }
  body#royal-blue-app #navigation a {font-size:14px !important;line-height:1.5 !important;font-weight:500 !important}
  body#royal-blue-app #navigation a.active {font-weight:600 !important}
  body#royal-blue-app :is(#breadcrumb,#brand-name) {font-size:var(--readable-caption) !important;line-height:1.6 !important}
  body#royal-blue-app :is(small,.tiny,.muted,.text-muted,.note,.section-note,.help-text,.field-help,.form-help,.empty,.loading,.subtitle,.privacy-note,
    .field>label,.form-label,legend,.badge,.chip,.section-subtitle,.card-subtitle,
    .rb-clock,.rb-support>summary,.admin-nav-heading>span,.admin-nav-group h2,
    .admin-eyebrow,.admin-context p,.admin-editor-revision,.admin-editor-summary,.admin-editor-tabs button,.admin-editor-tabs button span,
    .parameter-tabs button,.admin-section-description,.admin-save-heading strong,.admin-save-status,
    .admin-upload-heading p,.admin-logo-preview p,.admin-logo-upload label,.admin-supplemental-tool summary,.admin-supplemental-tool summary span,
    .rb-kpi-label,.rb-kpi-caption,.rb-kpi-content>span,.rb-kpi-content>span strong,.rb-kpi-detail span,.rb-kpi-detail strong,.rb-kpi-value small,.rb-fresh-pill,.rb-station-hint,
    .rb-heading-status span,.rb-heading-status strong,.ob-nav-count,
    .ob-page-heading p,.ob-page-heading p span,.ob-page-heading p strong,.ob-section-heading p,.ob-heading-meta,
    .sa-identity strong,.sa-status-chip,.ob-route-disclosure,.ob-extra-readings,.ob-extra-readings summary,
    .ir-name,.ir-name strong,.ir-source,.ir-quality,.ir-value>span,.ir-reference-banner strong,.ir-reference-banner span,
    .ir-scale-heading span,.ir-scale-heading strong,.ir-status,.ir-evidence summary,.ir-column-head,
    .reading-ticks,.standard-gauge-ticks,.ir-reading-guide,.instrument-caption,
    .chart-selector button,.chart-parameters button strong,.chart-parameters button span,.chart-panel-heading p,.chart-source-note,.chart-source-note span,.ob-chart-sample-note,
    .chart-legend,.chart-legend span,.chart-interaction-hint,.ob-chart-stats span,.ob-chart-stats small,.kpi-breakdown,.ob-kpi-action,
    .hydro-hero p,.ir-evidence-body p,.ir-evidence-body strong,.gauge-heading,.gauge-current,.gauge-scale,.gauge-rules,.gauge-rules li,.gauge-rules strong,
    .monitor-timestamp,.monitor-point-state>span,.reference-panel small,
    .data-context p,.data-context li,.data-context button,.data-basis-caption,.data-basis-details summary,
    .threshold-intro,.threshold-rule-preview,.threshold-unit,.threshold-current-note,.mini-stat>span,.checkbox,.form-actions>label,
    .compact-basis summary,.compact-basis-body,.gate-details,.code-box,pre,code,
    .qcvn-page p,.qcvn-page summary,.timeline-time,.timeline-text small,
    .citizen-brand small,.citizen-header nav button,.citizen-source-badge,.citizen-point-status strong,
    .citizen-staff-label,.citizen-location,.coastal-source-summary span,.coastal-source-summary strong,.coastal-live-bar span,.coastal-live-bar button,
    .citizen-alert-strip button,.citizen-attention-note,.citizen-point strong,.citizen-point em,.citizen-points-summary,
    .citizen-point-heading p,.citizen-point>span>small,.citizen-point-tools>span,
    .citizen-value h4,.citizen-value strong small,.citizen-value-note,.citizen-value p,
    .citizen-reading-explain p,.citizen-location-note,.citizen-measures-note,.citizen-reading-more>summary,
    .citizen-reading-help strong,.citizen-reading-help small,.citizen-update strong,.citizen-update small,
    .citizen-info-link strong,.citizen-info-link small,.citizen-map-caption,.citizen-map-legend>span,.citizen-legend-source,
    .citizen-data-mode p,.citizen-fetch-time,.citizen-fetch-time small,.citizen-coverage span,
    .citizen-faq p,.citizen-guide p,.citizen-footer-expanded,.citizen-footer-identity p,.citizen-footer-links button,
    .citizen-footer-credits,.citizen-search-empty,.citizen-primary,.citizen-secondary) {
    font-size:var(--readable-caption) !important;
    line-height:1.55 !important;
  }
  body#royal-blue-app :is(.card-title h2,.ob-section-heading h2,.rb-station-heading h2,.ob-network h2,.river-header h3,.admin-nav-heading strong) {
    font-size:17px !important;line-height:1.45 !important;font-weight:650 !important;
  }
  body#royal-blue-app :is(table th,table td) {font-size:14px !important;line-height:1.6 !important}
  body#royal-blue-app .fleet-comparison th .comparison-column-unit {
    display:block; font-size:11px !important;line-height:1.5 !important;
    font-weight:400 !important;color:#64748b !important;margin-top:3px;white-space:nowrap;
  }
  body#royal-blue-app :is(.rb-kpi-label,.ir-name strong,.field>label,.form-label,.sa-status-chip,.ir-status,.chart-parameters button strong) {font-weight:500 !important}
  body#royal-blue-app :is(.muted,.text-muted,.note,.section-note,.help-text,.field-help,.form-help,.empty,.loading,.subtitle,
    .rb-kpi-caption,.rb-kpi-content>span,.rb-kpi-detail span,.rb-kpi-detail strong,.rb-heading-status span,.rb-kpi-value small,.rb-station-hint,.rb-clock,
    .admin-nav-heading>span,.admin-nav-group h2,.admin-nav-item:not(.is-active),
    .admin-eyebrow,.admin-context p,.admin-editor-revision,.admin-editor-summary,.admin-section-description,
    .admin-save-status,.admin-upload-heading p,.admin-logo-preview p,.admin-logo-upload label,
    .ir-source,.ir-value>span,.ir-scale-heading span,.ir-scale-heading strong,.ir-evidence summary,
    .reading-ticks,.standard-gauge-ticks,.ir-column-head,.ir-reading-guide,
    .chart-source-note,.ob-chart-sample-note,.chart-panel-heading p,.chart-legend,.chart-legend span,.chart-interaction-hint,.ob-chart-stats span,
    .hydro-hero p,.ir-evidence-body p,.ir-evidence-body strong,.gauge-heading,.gauge-scale,.gauge-rules,
    .citizen-brand small,.citizen-point-heading p,.citizen-point>span>small,.citizen-point-tools>span,
    .citizen-value p,.citizen-reading-explain p,.citizen-location-note,.citizen-measures-note,
    .citizen-update small,.citizen-info-link small,.citizen-map-caption,.citizen-fetch-time small,
    .citizen-faq p,.citizen-footer-expanded,.citizen-footer-identity p,.citizen-search-empty) {
    color:#506580 !important;opacity:1 !important;
  }
  body#royal-blue-app :is(.field>label,.form-label,table th,.ir-name,.ir-reference-banner span) {color:#36516f !important}
  body#royal-blue-app :is(input,textarea)::placeholder {color:#58677b !important;opacity:1 !important}
  body#royal-blue-app :is(#navigation a,.rb-support>summary,#brand-subtitle,.workspace>footer) {color:#36516f !important}
  body#royal-blue-app #navigation a.active {color:#0752c4 !important}
  body#royal-blue-app .ob-kpi-attention .rb-kpi-label {color:#9a4700 !important}
  body#royal-blue-app .ir-status {color:#176548 !important}
  body#royal-blue-app [data-reference-state=outside] .ir-status {color:#a52d3c !important}
  body#royal-blue-app [data-reference-state=partial] .ir-status {color:#80530c !important}
  body#royal-blue-app :is(.ir-quality,.citizen-value-note) {color:#80530c !important}
  body#royal-blue-app .chart-parameters button strong {color:#36516f !important}
  body#royal-blue-app .chart-parameters button[aria-pressed=true] strong {color:#0752c4 !important}
  body#royal-blue-app .chart-parameters button span {color:#506580 !important;opacity:1 !important}

  /* Smaller reference captions with a real layout slot for the explanation. */
  body#royal-blue-app .instrument-reading .ir-result {
    display:flex !important;align-items:flex-start !important;flex-wrap:wrap !important;
    gap:5px 8px !important;padding-right:0 !important;
  }
  body#royal-blue-app .instrument-reading .ir-result .ir-status {
    font-size:12px !important;line-height:1.5 !important;flex:1 1 110px;min-width:0;
  }
  body#royal-blue-app .instrument-reading .ir-result .ir-evidence {flex:0 0 auto !important}
  body#royal-blue-app .instrument-reading .ir-result .ir-evidence[open] {flex-basis:100% !important}
  body#royal-blue-app .instrument-reading .ir-result .ir-evidence>summary {
    position:static !important;font-size:12px !important;line-height:1.5 !important;padding:0 !important;gap:5px !important;
  }

  /* Map labels keep a compact, readable size; they remain geographically anchored. */
  body#royal-blue-app :is(.map-floating-tools button,.map-basemap-name,.map-basemap-dropdown button,
    .map-level-legend>span,.map-angle,.map-angle output,.gis-coordinate-label,.gis-coordinate-state,
    .geographic-coordinates strong,.gis-location-bar strong,.map-distance-label,.map-pin-label strong,.map-pin-label small,.map-pin-label span,
    .gis-map-notes,.gis-map-notes summary,.map-interface-credit,.map-quality-legend span,.map-quality-scale span,
    .coastal-point strong,.coastal-point small,.coastal-point-label small,.coastal-scene-heading,.coastal-scene-heading>span,.coastal-scene-footer span,
    .coastal-village-label,.citizen-map-tip,.river-quality-scale span,.river-quality-layer span,.river-layer-toggle span) {
    font-size:12px !important;line-height:1.5 !important;
  }
  body#royal-blue-app :is(.gis-coordinate-label,.gis-coordinate-state,.geographic-coordinates strong,.map-distance-label,
    .map-level-legend>span,.map-angle,.map-angle output,.map-interface-credit) {color:#36516f !important}
  body#royal-blue-app .gis-style-night :is(.map-pin-label strong,.map-pin-label small,.map-pin-label span,.map-distance-label) {color:#eff6ff !important}
  body#royal-blue-app :is(.coastal-scene-heading,.coastal-scene-heading>span) {color:#effcff !important}
  body#royal-blue-app :is(.chart,.chart-frame,.chart-content) svg text {font-size:12px !important;fill:#36516f !important}
  body#royal-blue-app .standard-gauge-ticks {height:22px !important}
  body#royal-blue-app :is(.rb-kpi-content>span,.rb-kpi-caption,.ob-heading-meta) {white-space:normal !important}
  body#royal-blue-app :is(.map-footer-inline,.map-level-legend,.geographic-coordinates,.rb-station-heading) {flex-wrap:wrap !important}
  body#royal-blue-app :is(.map-footer-inline,.map-level-legend) {gap:8px 12px !important}
  body#royal-blue-app .rb-overview-row .sa-tile {min-height:72px !important;height:auto !important}
  body#royal-blue-app .rb-overview-row .sa-status-chip {white-space:normal !important}
  body#royal-blue-app .rb-summary .ob-stat {height:auto !important;min-height:135px !important}
  body#royal-blue-app .citizen-brand small {white-space:normal !important;max-width:230px}
  body#royal-blue-app .citizen-header-inner {flex-wrap:wrap;padding-block:12px}
  body#royal-blue-app .citizen-footer-credits {line-height:1.8 !important}
  @media(max-width:600px) {
    body#royal-blue-app :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) {font-size:16px !important}
    body#royal-blue-app .topbar .rb-top-export {font-size:0 !important}
    body#royal-blue-app .topbar .rb-top-export::before {font-size:23px !important}
    body#royal-blue-app .rb-overview-row {grid-template-columns:minmax(0,1fr) !important}
    body#royal-blue-app .rb-overview-row .rb-three-summary .ob-stat {
      grid-template-columns:42px minmax(0,1fr) !important;grid-template-rows:auto 1fr auto !important;padding:16px !important;
    }
    body#royal-blue-app .rb-station-navigation .ob-station-tabs {overflow-x:auto !important;padding-bottom:6px}
    body#royal-blue-app .rb-station-navigation .sa-station {flex:0 0 106px !important;min-width:106px !important}
    body#royal-blue-app .instrument-readings .metric.instrument-reading {grid-template-columns:minmax(0,1fr) !important;gap:12px !important}
    body#royal-blue-app .instrument-reading :is(.ir-identity,.ir-comparison) {grid-column:1 !important;grid-row:auto !important}
    body#royal-blue-app .ir-scale-heading {flex-wrap:wrap !important}
    body#royal-blue-app :is(.citizen-primary,.citizen-secondary) {white-space:normal !important}
    body#royal-blue-app .citizen-brand small {font-size:12px !important;max-width:185px}
    body#royal-blue-app .citizen-header nav {flex-wrap:wrap}
    body#royal-blue-app .rb-summary .ob-stat {min-height:145px !important}
  }
  /* Small maps keep every anchor, with a label only for the active point. */
  @media(max-width:900px), (max-width:1100px) and (orientation:portrait) {
    body#royal-blue-app .gis-beacon:not(.selected) .map-pin-label {display:none !important}
    body#royal-blue-app .gis-beacon:not(.selected)::after {display:none !important}
    body#royal-blue-app .rb-data-basis {
      display:flex !important;flex-direction:column !important;gap:0 !important;min-height:0 !important;
    }
    body#royal-blue-app .rb-data-basis > * {
      grid-column:auto !important;grid-row:auto !important;order:0 !important;width:auto;min-width:0;
    }
    body#royal-blue-app .rb-data-basis .rb-data-sources {padding-top:14px !important}
    body#royal-blue-app .rb-data-basis .rb-data-reference {margin-top:4px !important}
  }
  @media(forced-colors:active) {
    body#royal-blue-app :is(.muted,.note,.field>label,.ir-source,.ir-status) {color:CanvasText !important}
  }
  @media(min-width:1101px) and (max-width:1400px) {
    body#royal-blue-app #ob-network .ob-station-tabs {grid-template-columns:repeat(5,minmax(0,1fr)) !important;overflow:visible !important}
    body#royal-blue-app #ob-network .sa-status-chip {background:var(--sa-color,#8797ab) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--sa-color,#8797ab) 15%,transparent)}
    body#royal-blue-app #ob-network [data-station-alert='0'] .sa-status-chip {background:#245bff !important;box-shadow:0 0 0 3px #245bff20}
  }
}