/* ============================================================================
 * css/mdrrmo/mdrrmo-clarity.css — MDRRMO Command Center on the unified theme
 * Municipality of Margosatubig, Zamboanga del Sur · Region IX
 *
 * WHY THIS FILE EXISTS (the cascade)
 * ----------------------------------
 * command-center.css / command-center-v2.css / components/*.css were written for
 * a DARK "mission control" UI: the --cc-* ink tokens are light and many rules
 * hardcode #fff / rgba(255,255,255,…) inks on translucent navy fills. The
 * site-wide theme (assets/css/margosatubig-theme.css) is injected LAST in <head>
 * by includes/theme-everywhere.php and repaints the page canvas and the rail
 * white (`.sidebar:has(.sb-nav)`, `body:has(.topbar)`), and forces `.cc-muted`
 * to #333B47 with an unlayered rule. Result: white-on-white brand and nav text,
 * an unreadable active row, faded headings, and dark-on-dark muted copy.
 *
 * This sheet is linked after command-center-v2.css and still BEFORE the site
 * theme, so every selector starts with `body.mdrrmo-cc-body` to win on
 * specificity. No !important is needed anywhere.
 *
 * HOW IT WORKS
 * ------------
 * 1. Light tokens on body.mdrrmo-cc-body: the module's own --cc-* names are
 *    re-pointed to the Margosatubig tokens (--dt-*, literal fallbacks), plus a
 *    small --ccl-* status palette (text / soft tint / line), all AA on white
 *    and on their own tint.
 * 2. Every override below reads those tokens, never a literal ink.
 * 3. Dark islands (the command masthead, the TV wall #mwRoot, life-safety alarm
 *    panels, the hazard ticker, map overlays) re-point the SAME tokens back to a
 *    harmonised navy set, so one component rule reads correctly on both.
 *
 * THE RULE: never light ink on a light surface, never dark ink on a dark one.
 * Colour, type, border and paint only on application-owned selectors — no
 * width/height/position/display changes outside .ccx-*, .cc-empty*, .cc-gate*.
 * Panels painted by inline style="" in view files are re-surfaced with an inset
 * box-shadow (painted above the element's background, below its content) so no
 * !important is required to beat the inline declaration.
 * ==========================================================================*/

/* ── 1. Tokens: light by default ─────────────────────────────────────────── */
body.mdrrmo-cc-body {
    --cc-panel:        var(--dt-surface, #FFFFFF);
    --cc-panel-2:      var(--dt-surface, #FFFFFF);
    --cc-panel-3:      var(--dt-surface-subtle, #F0F4FA);
    --cc-ink:          var(--dt-text, #14181F);
    --cc-ink-soft:     var(--dt-text, #14181F);
    --cc-muted:        var(--dt-text-muted, #333B47);
    --cc-border:       var(--dt-border-subtle, #E3E8F0);
    --cc-border-2:     #C9D2DF;
    --cc-control:      var(--dt-border-control, #7C899D);
    --cc-cyan:         var(--dt-primary, #1A55E3);
    --cc-cyan-bright:  var(--dt-primary-pressed, #123BA0);
    --cc-gold:         var(--dt-warning-text, #805400);
    --cc-shadow:       var(--dt-shadow-1, 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03));
    --cc-shadow-hover: var(--dt-shadow-2, 0 2px 4px rgba(16, 24, 40, .06), 0 4px 10px rgba(16, 24, 40, .05));
    --cc-radius:       var(--dt-radius, 4px);
    --cc-radius-sm:    var(--dt-radius, 4px);

    /* One status palette: text / soft tint / line. Text clears 4.5:1 on white
       and on its own tint (success 5.46, info 5.55, warn 6.16, hot 6.6,
       danger 5.45, neutral 9.9, primary 8.9). */
    --ccl-primary:      var(--dt-primary, #1A55E3);
    --ccl-primary-ink:  var(--dt-primary-pressed, #123BA0);
    --ccl-primary-soft: var(--dt-primary-soft, #EDF2FF);
    --ccl-primary-line: #C9D8FF;
    --ccl-ok:           var(--dt-success-text, #087443);
    --ccl-ok-soft:      var(--dt-success-soft, #E8FAF2);
    --ccl-ok-line:      #9FD8BE;
    --ccl-warn:         var(--dt-warning-text, #805400);
    --ccl-warn-soft:    var(--dt-warning-soft, #FFF7DB);
    --ccl-warn-line:    #E3C56E;
    --ccl-hot:          #9A3412;
    --ccl-hot-soft:     #FFF1E6;
    --ccl-hot-line:     #F3BE96;
    --ccl-danger:       var(--dt-red-text, #C1121F);
    --ccl-danger-soft:  var(--dt-red-soft, #FDECEC);
    --ccl-danger-line:  var(--dt-red-border, #F5C2C2);
    --ccl-danger-fill:  var(--dt-red, #DC2626);
    --ccl-info:         var(--dt-info-text, #076D83);
    --ccl-info-soft:    var(--dt-info-soft, #E8F9FD);
    --ccl-info-line:    #9ED6E3;
    --ccl-neutral:      var(--dt-text-muted, #333B47);
    --ccl-neutral-soft: var(--dt-surface-subtle, #F0F4FA);
    --ccl-neutral-line: #C9D2DF;
    --ccl-violet:       #5B2FB0;
    --ccl-violet-soft:  #F1ECFD;
    --ccl-violet-line:  #CDBDF3;
    --ccl-on-fill:      #FFFFFF;

    /* Severity fills (bars, stripes, dots, solid tags). */
    --sev-critical: var(--dt-red, #DC2626);
    --sev-high:     #C2410C;
    --sev-moderate: #CA8A04;
    --sev-low:      #0E7490;
    /* Incident / camera-event status inks (text on white and on soft tints). */
    --st-reported: var(--dt-text-muted, #333B47); --st-verified: var(--dt-info-text, #076D83);
    --st-activated: var(--dt-warning-text, #805400); --st-responding: var(--dt-primary, #1A55E3);
    --st-deescalating: #0F766E; --st-closed: var(--dt-success-text, #087443); --st-cancelled: var(--dt-text-muted, #333B47);
    --ev-pending: var(--dt-warning-text, #805400); --ev-verified: var(--dt-info-text, #076D83);
    --ev-dismissed: var(--dt-text-muted, #333B47); --ev-converted: var(--dt-success-text, #087443);

    background: var(--dt-canvas, #F6F8FC);
    color: var(--dt-text, #14181F);
}

/* ── 1b. Dark islands: the same token names, harmonised navy values ────────
 * Navy surfaces, #F5F7FB ink, #A9B4C7 muted (≥6.9:1 on #13284E), cobalt-light
 * accent #8AB4FF (7.0:1) and the theme's on-dark status hues.               */
body.mdrrmo-cc-body .cc-masthead,
body.mdrrmo-cc-body #mwRoot,
body.mdrrmo-cc-body .cc-tsunami-banner,
body.mdrrmo-cc-body .cc-fcpanel,
body.mdrrmo-cc-body .cc-rain-popup,
body.mdrrmo-cc-body .cc-rain-display,
body.mdrrmo-cc-body .cc-rain-action-panel,
body.mdrrmo-cc-body .cc-esc-msg,
body.mdrrmo-cc-body .mdrrmo-wt,
body.mdrrmo-cc-body .mwt-modal-card,
body.mdrrmo-cc-body .mdrrmo-map-fallback,
body.mdrrmo-cc-body .mw-pagasa-om,
body.mdrrmo-cc-body .ccs-tile,
body.mdrrmo-cc-body .ccs-mapstatus,
body.mdrrmo-cc-body .haz-switch,
body.mdrrmo-cc-body .haz-legend,
body.mdrrmo-cc-body .risk-tools,
body.mdrrmo-cc-body .risk-search,
body.mdrrmo-cc-body .leaflet-popup.haz-pop,
body.mdrrmo-cc-body .cc-dash > section[style*="rgba(8,47,73"],
body.mdrrmo-cc-body .cc-dash > section [style*="background:rgba(2,20,40"],
body.mdrrmo-cc-body .cc-dash > section [style*="background:rgba(14,116,144"] {
    --cc-panel: #0F203F; --cc-panel-2: #13284E; --cc-panel-3: #0B1830;
    --cc-ink: #F5F7FB; --cc-ink-soft: #D5DEEC; --cc-muted: #A9B4C7;
    --cc-border: rgba(148, 170, 210, .2); --cc-border-2: rgba(148, 170, 210, .34); --cc-control: rgba(148, 170, 210, .5);
    --cc-cyan: #8AB4FF; --cc-cyan-bright: #B3CCFF; --cc-gold: #E8B93D;
    --cc-shadow: 0 10px 30px rgba(2, 8, 23, .45);
    --ccl-primary: #8AB4FF; --ccl-primary-ink: #B3CCFF; --ccl-primary-soft: rgba(138, 180, 255, .16); --ccl-primary-line: rgba(138, 180, 255, .45);
    --ccl-ok: #4BD597; --ccl-ok-soft: rgba(75, 213, 151, .14); --ccl-ok-line: rgba(75, 213, 151, .42);
    --ccl-warn: #E8B93D; --ccl-warn-soft: rgba(232, 185, 61, .14); --ccl-warn-line: rgba(232, 185, 61, .42);
    --ccl-hot: #FDBA74; --ccl-hot-soft: rgba(253, 186, 116, .14); --ccl-hot-line: rgba(253, 186, 116, .42);
    --ccl-danger: #FF8A8A; --ccl-danger-soft: rgba(255, 107, 107, .16); --ccl-danger-line: rgba(255, 107, 107, .45);
    --ccl-info: #5FD2E8; --ccl-info-soft: rgba(95, 210, 232, .14); --ccl-info-line: rgba(95, 210, 232, .42);
    --ccl-neutral: #A9B4C7; --ccl-neutral-soft: rgba(169, 180, 199, .12); --ccl-neutral-line: rgba(169, 180, 199, .32);
    --ccl-violet: #C4B5FD; --ccl-violet-soft: rgba(167, 139, 250, .16); --ccl-violet-line: rgba(167, 139, 250, .42);
    --st-reported: #A9B4C7; --st-verified: #5FD2E8; --st-activated: #E8B93D; --st-responding: #8AB4FF;
    --st-deescalating: #5EEAD4; --st-closed: #4BD597; --st-cancelled: #A9B4C7;
    --ev-pending: #E8B93D; --ev-verified: #5FD2E8; --ev-dismissed: #A9B4C7; --ev-converted: #4BD597;
}

/* ── 2. Canvas + shell ───────────────────────────────────────────────────── */
body.mdrrmo-cc-body .shell::before { background-image: none; }
body.mdrrmo-cc-body .cc-view { color: var(--cc-ink-soft); }
/* The theme pins .cc-muted to #333B47 everywhere; follow the local token so
   it stays dark on white and light inside a dark island. */
body.mdrrmo-cc-body .cc-muted { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-mono { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-link { color: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-link:hover { color: var(--ccl-primary-ink); }

/* ── 3. Sidebar rail ───────────────────────────────────────────────────────
 * White rail, #14181F labels, AA category headers, cobalt active row with a
 * white label AND a white indicator bar (shape, not colour alone).          */
body.mdrrmo-cc-body .sidebar {
    background: var(--dt-surface, #FFFFFF);
    border-right: 1px solid var(--dt-border-subtle, #E3E8F0);
}
body.mdrrmo-cc-body .sidebar .ccx-brand {
    border-bottom-color: var(--dt-border-subtle, #E3E8F0);
    min-height: 64px;
}
body.mdrrmo-cc-body .sidebar .ccx-brand .ccx-seal { box-shadow: 0 0 0 1px var(--dt-border-subtle, #E3E8F0); background: #FFFFFF; }
body.mdrrmo-cc-body .sidebar .ccx-brand b {
    color: var(--dt-text, #14181F);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .005em;
}
body.mdrrmo-cc-body .sidebar .ccx-brand span { color: var(--dt-text-muted, #333B47); font-size: 12.5px; }
body.mdrrmo-cc-body .sidebar .ccx-brand .ccx-mark { background: var(--dt-primary, #1A55E3); color: #FFFFFF; box-shadow: none; }
body.mdrrmo-cc-body .sidebar .ccx-cat {
    color: var(--dt-text-muted, #333B47);
    opacity: 1;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    padding: 16px 12px 6px;
}
body.mdrrmo-cc-body .sidebar .ccx-cat:first-child { padding-top: 6px; }
body.mdrrmo-cc-body .sidebar .ccx-link {
    position: relative;
    min-height: 44px;
    padding: 9px 12px;
    border-radius: var(--dt-radius, 4px);
    color: var(--dt-text, #14181F);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.25;
}
body.mdrrmo-cc-body .sidebar .ccx-link i { color: var(--dt-text-muted, #333B47); }
body.mdrrmo-cc-body .sidebar .ccx-link:hover { background: var(--dt-surface-subtle, #F0F4FA); color: var(--dt-text, #14181F); }
body.mdrrmo-cc-body .sidebar .ccx-link:hover i { color: var(--dt-primary, #1A55E3); }
body.mdrrmo-cc-body .sidebar .ccx-link.active,
body.mdrrmo-cc-body .sidebar .ccx-link.active:hover {
    background: var(--dt-primary, #1A55E3);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}
body.mdrrmo-cc-body .sidebar .ccx-link.active i { color: #FFFFFF; }
body.mdrrmo-cc-body .sidebar .ccx-link.active::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 4px;
    height: 58%;
    border-radius: 2px;
    background: #FFFFFF;
    transform: translateY(-50%);
}
body.mdrrmo-cc-body .sidebar .ccx-link:focus-visible {
    outline: 3px solid var(--dt-primary, #1A55E3);
    outline-offset: 2px;
    border-radius: var(--dt-radius, 4px);
}
body.mdrrmo-cc-body .sidebar .ccx-link.active:focus-visible { outline-color: #FFFFFF; outline-offset: -4px; }
body.mdrrmo-cc-body .sidebar .ccx-link .ccx-lock { color: var(--dt-text-muted, #333B47); opacity: 1; font-size: 12px; }
body.mdrrmo-cc-body .sidebar .ccx-link.active .ccx-lock { color: #FFFFFF; }
body.mdrrmo-cc-body .sidebar .ccx-link[aria-disabled="true"] { color: var(--dt-text-muted, #333B47); cursor: not-allowed; }
body.mdrrmo-cc-body .sidebar .ccx-link .ccx-badge {
    background: var(--ccl-danger-fill);
    color: #FFFFFF;
    min-width: 22px;
    height: 22px;
    font-size: 12px;
    font-weight: 700;
}
body.mdrrmo-cc-body .sidebar .ccx-link.active .ccx-badge { background: #FFFFFF; color: var(--dt-primary-pressed, #123BA0); }
body.mdrrmo-cc-body .sidebar .ccx-nav .ccx-cross { border-top-color: var(--dt-border-subtle, #E3E8F0); }
body.mdrrmo-cc-body .sidebar .ccx-nav { scrollbar-color: #B8C3D3 transparent; }
body.mdrrmo-cc-body .sidebar .ccx-nav::-webkit-scrollbar-thumb { background: #B8C3D3; }
body.mdrrmo-cc-body .sb-backdrop { background: rgba(16, 24, 40, .5); }

/* ── 4. Command masthead: intentionally dark, harmonised with the cobalt bar ── */
body.mdrrmo-cc-body .cc-masthead {
    background: linear-gradient(135deg, #13284E, #0B1830);
    border: 1px solid #0B1830;
    border-left: 4px solid var(--dt-primary, #1A55E3);
    border-radius: var(--dt-radius, 4px);
    box-shadow: var(--dt-shadow-2, 0 2px 4px rgba(16, 24, 40, .06), 0 4px 10px rgba(16, 24, 40, .05));
}
body.mdrrmo-cc-body .cc-masthead .cc-eyebrow { color: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-masthead .cc-title { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-masthead .cc-title span { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-pill { background: rgba(255, 255, 255, .06); border-color: var(--cc-border-2); color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-pill-live { color: var(--ccl-ok); border-color: var(--ccl-ok-line); background: var(--ccl-ok-soft); }
body.mdrrmo-cc-body .cc-pill-live .cc-dot { background: var(--ccl-ok); box-shadow: none; }
body.mdrrmo-cc-body .cc-pill-ok { color: var(--ccl-ok); border-color: var(--ccl-ok-line); background: var(--ccl-ok-soft); }
body.mdrrmo-cc-body .cc-pill-danger { color: var(--ccl-danger); border-color: var(--ccl-danger-line); background: var(--ccl-danger-soft); }
body.mdrrmo-cc-body .cc-pill-warn { color: var(--ccl-warn); border-color: var(--ccl-warn-line); background: var(--ccl-warn-soft); }
body.mdrrmo-cc-body .cc-pill-muted { color: var(--cc-muted); }
body.mdrrmo-cc-body a.cc-pill:hover { color: var(--cc-ink); border-color: var(--ccl-primary-line); }

/* ── 5. Headings: one ink, one weight scale ─────────────────────────────── */
body.mdrrmo-cc-body .cc-list-head h2,
body.mdrrmo-cc-body .cc-detail-head h2,
body.mdrrmo-cc-body .cc-formwrap h2,
body.mdrrmo-cc-body .cc-smsg-head h2,
body.mdrrmo-cc-body .ccs-bar h2 { color: var(--cc-ink); font-weight: 700; }
body.mdrrmo-cc-body .cc-card-head h3,
body.mdrrmo-cc-body .cc-rule-head h3,
body.mdrrmo-cc-body .cc-modal-head h3,
body.mdrrmo-cc-body .cc-dost__head h3,
body.mdrrmo-cc-body .cc-eoc-lead h3,
body.mdrrmo-cc-body .cc-fc-global-head h3,
body.mdrrmo-cc-body .gis-band-head h3,
body.mdrrmo-cc-body .gis-catalog-head h3,
body.mdrrmo-cc-body .ccs-maphead h3 { color: var(--cc-ink); font-weight: 700; }
body.mdrrmo-cc-body .cc-card-head h3 i,
body.mdrrmo-cc-body .cc-list-head h2 i,
body.mdrrmo-cc-body .cc-detail-head h2 i,
body.mdrrmo-cc-body .cc-rule-head h3 i { color: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-modules-head h2,
body.mdrrmo-cc-body .cc-quake-news h4,
body.mdrrmo-cc-body .cc-eoc-cap { color: var(--cc-muted); }

/* ── 6. Cards and surfaces: white, 1px #E3E8F0, one radius, one shadow ───── */
body.mdrrmo-cc-body .cc-card,
body.mdrrmo-cc-body .cc-kpi,
body.mdrrmo-cc-body .cc-alert,
body.mdrrmo-cc-body .cc-cam-card,
body.mdrrmo-cc-body .cc-modal-card,
body.mdrrmo-cc-body .cc-dost,
body.mdrrmo-cc-body .cc-eoc-footer,
body.mdrrmo-cc-body .gis-band,
body.mdrrmo-cc-body .gis-catalog-band {
    background: var(--cc-panel);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
}
body.mdrrmo-cc-body .cc-card-head { border-bottom-color: var(--cc-border); }
body.mdrrmo-cc-body .cc-kpi { border-left: 4px solid var(--ccl-primary); }
body.mdrrmo-cc-body .cc-kpi:hover { box-shadow: var(--cc-shadow-hover); }
body.mdrrmo-cc-body .cc-kpi-ico { background: var(--ccl-primary-soft); color: var(--ccl-primary-ink); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-kpi-num { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-kpi-label { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-kpi-danger { border-left-color: var(--ccl-danger-fill); }
body.mdrrmo-cc-body .cc-kpi-danger .cc-kpi-ico { background: var(--ccl-danger-soft); color: var(--ccl-danger); }
body.mdrrmo-cc-body .cc-kpi-warn { border-left-color: var(--sev-moderate); }
body.mdrrmo-cc-body .cc-kpi-warn .cc-kpi-ico { background: var(--ccl-warn-soft); color: var(--ccl-warn); }
body.mdrrmo-cc-body .cc-kpi-ok { border-left-color: var(--ccl-ok); }
body.mdrrmo-cc-body .cc-kpi-ok .cc-kpi-ico { background: var(--ccl-ok-soft); color: var(--ccl-ok); }
body.mdrrmo-cc-body .cc-kpi-info { border-left-color: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-kpi-muted { border-left-color: var(--cc-control); }
body.mdrrmo-cc-body .cc-kpi-muted .cc-kpi-ico { background: var(--ccl-neutral-soft); color: var(--ccl-neutral); }

/* Operational-readiness strip */
body.mdrrmo-cc-body .cc-ready { background: var(--cc-panel); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-ready:hover { background: var(--ccl-primary-soft); border-color: var(--ccl-primary-line); }
body.mdrrmo-cc-body .cc-ready i { color: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-ready-num { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-ready-label { color: var(--cc-muted); }

/* Quick-access module launcher: white tile, tinted icon chip (portal launchpad) */
body.mdrrmo-cc-body .cc-modules-head .cc-rule { background: var(--cc-border); }
body.mdrrmo-cc-body .cc-mod {
    background: var(--cc-panel);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    color: var(--cc-ink);
}
body.mdrrmo-cc-body .cc-mod:hover,
body.mdrrmo-cc-body .cc-mod:focus-visible { color: var(--cc-ink); border-color: var(--ccl-primary); box-shadow: var(--cc-shadow-hover); }
body.mdrrmo-cc-body .cc-mod__label { font-weight: 600; }
body.mdrrmo-cc-body .cc-mod__ico,
body.mdrrmo-cc-body .cc-agency__ico { border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-i-red    { background: #FDECEC; color: #A32320; }
body.mdrrmo-cc-body .cc-i-blue   { background: #EDF2FF; color: #123BA0; }
body.mdrrmo-cc-body .cc-i-cyan   { background: #E8F9FD; color: #076D83; }
body.mdrrmo-cc-body .cc-i-green  { background: #E8FAF2; color: #087443; }
body.mdrrmo-cc-body .cc-i-amber  { background: #FFF7DB; color: #805400; }
body.mdrrmo-cc-body .cc-i-violet { background: #F1ECFD; color: #5B2FB0; }
body.mdrrmo-cc-body .cc-i-slate  { background: #EFF1F5; color: #2A3145; }
body.mdrrmo-cc-body .cc-mod__badge { background: var(--ccl-danger-fill); color: #FFFFFF; }

/* DOST & International Monitoring panel */
body.mdrrmo-cc-body .cc-dost__head p { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-agency { background: var(--cc-panel-3); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-agency:hover { background: var(--ccl-primary-soft); border-color: var(--ccl-primary); color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-agency__tx span { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-agency__role { font-size: 10.5px; border: 1px solid transparent; }
body.mdrrmo-cc-body .cc-role-auth { background: var(--ccl-ok-soft); color: var(--ccl-ok); border-color: var(--ccl-ok-line); }
body.mdrrmo-cc-body .cc-role-bench { background: var(--ccl-warn-soft); color: var(--ccl-warn); border-color: var(--ccl-warn-line); }

/* International quake list — solid magnitude fills that carry their label */
body.mdrrmo-cc-body .cc-quake-news { border-top-color: var(--cc-border); }
body.mdrrmo-cc-body .cc-qn-row { border-bottom-color: var(--cc-border); }
body.mdrrmo-cc-body .cc-qn-place { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-qn-place b { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-qn-place span,
body.mdrrmo-cc-body .cc-qn-when,
body.mdrrmo-cc-body .cc-qn-empty { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-qn-mag { border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-qn-m-major  { background: var(--ccl-danger-fill); color: #FFFFFF; }
body.mdrrmo-cc-body .cc-qn-m-strong { background: #C2410C; color: #FFFFFF; }
body.mdrrmo-cc-body .cc-qn-m-mod    { background: #0E7490; color: #FFFFFF; }

/* Command posture guide + EOC footer */
body.mdrrmo-cc-body .cc-posture__item { background: var(--cc-panel); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-posture__item.is-current { background: var(--ccl-primary-soft); border-color: var(--ccl-primary); box-shadow: inset 3px 0 0 var(--ccl-primary); }
body.mdrrmo-cc-body .cc-posture__dot { box-shadow: 0 0 0 1px rgba(20, 24, 31, .35); }
body.mdrrmo-cc-body .cc-posture__tx b { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-posture__tx span { color: var(--cc-muted); font-size: 11.5px; }
body.mdrrmo-cc-body .cc-cur-badge { background: var(--cc-panel-3); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); color: var(--cc-ink); }

/* Dashboard lists, feeds, rosters, dispatch cards */
body.mdrrmo-cc-body .cc-feed-item a { background: var(--cc-panel-3); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-feed-item a:hover { background: var(--ccl-primary-soft); }
body.mdrrmo-cc-body .cc-feed-title { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-feed-meta { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-roster li,
body.mdrrmo-cc-body .cc-comments li { background: var(--cc-panel-3); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-comments p,
body.mdrrmo-cc-body .cc-roster b { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-dispatch { background: var(--cc-panel); border: 1px solid var(--cc-border); border-left: 3px solid var(--ccl-primary); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-dispatch-sub { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-dispatch-meta { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-dispatch-meta i,
body.mdrrmo-cc-body .cc-rescard-sub i,
body.mdrrmo-cc-body .cc-rescard-meta i,
body.mdrrmo-cc-body .cc-cam-loc i { color: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-rescard:hover { border-color: var(--ccl-primary-line); box-shadow: var(--cc-shadow-hover); }
body.mdrrmo-cc-body .cc-rescard-head b { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-rescard-sub { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-rescard-meta,
body.mdrrmo-cc-body .cc-occ-label { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-occ-label b { color: var(--cc-ink); }

/* Tracks and meters (non-text, but a light track must still be visible) */
body.mdrrmo-cc-body .cc-sev-track,
body.mdrrmo-cc-body .cc-occ-track,
body.mdrrmo-cc-body .cc-conf-track { background: var(--cc-border); }
body.mdrrmo-cc-body .cc-conf-fill { background: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-sev-name { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-sev-val,
body.mdrrmo-cc-body .cc-conf b { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-conf span { color: var(--cc-muted); }

/* Detail views, timeline, snapshot */
body.mdrrmo-cc-body .cc-dl dt { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-dl dd,
body.mdrrmo-cc-body .cc-impact b { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-impact { border-top-color: var(--cc-border); }
body.mdrrmo-cc-body .cc-impact span,
body.mdrrmo-cc-body .cc-tl-when { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-desc,
body.mdrrmo-cc-body .cc-tl-note { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-from-cam,
body.mdrrmo-cc-body .cc-from-cam.cc-note { color: var(--ccl-primary-ink); }
body.mdrrmo-cc-body .cc-timeline { border-left-color: var(--cc-border-2); }
body.mdrrmo-cc-body .cc-tl-dot { border-color: var(--cc-panel); }
body.mdrrmo-cc-body .cc-snapshot { background: var(--cc-panel-3); border-color: var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-snapshot-ph { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-rep-h { color: var(--ccl-primary-ink); }

/* Camera queue + registry */
body.mdrrmo-cc-body .cc-alert-ico,
body.mdrrmo-cc-body .cc-cam-ico { background: var(--ccl-primary-soft); color: var(--ccl-primary-ink); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-alert-title { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-alert-title:hover { color: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-alert-sub,
body.mdrrmo-cc-body .cc-alert-meta,
body.mdrrmo-cc-body .cc-cam-seen { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-alert-note,
body.mdrrmo-cc-body .cc-cam-loc { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-alert-converted { color: var(--ev-converted); }
body.mdrrmo-cc-body .cc-cam-card-head b { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-cam-seen i { color: var(--ccl-ok); }
body.mdrrmo-cc-body .cc-cam-seen .cc-sim { color: var(--ccl-warn); }

/* Export grid */
body.mdrrmo-cc-body .cc-export-link { background: var(--ccl-primary-soft); border: 1px solid var(--ccl-primary-line); border-radius: var(--cc-radius); color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-export-link:hover { background: #E2EAFF; border-color: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-export-link i { color: var(--ccl-primary); }

/* ── 7. Notes, banners, escalation ──────────────────────────────────────── */
body.mdrrmo-cc-body .cc-note {
    background: var(--cc-panel-3);
    border: 1px solid var(--cc-border);
    border-left: 3px solid var(--cc-control);
    border-radius: var(--cc-radius);
    color: var(--cc-ink-soft);
}
body.mdrrmo-cc-body .cc-note b { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-note-warn { background: var(--ccl-warn-soft); border-color: var(--ccl-warn-line); border-left-color: var(--ccl-warn); color: var(--ccl-warn); }
body.mdrrmo-cc-body .cc-note-ok { background: var(--ccl-ok-soft); border-color: var(--ccl-ok-line); border-left-color: var(--ccl-ok); color: var(--ccl-ok); }
body.mdrrmo-cc-body .cc-note-muted { background: var(--ccl-neutral-soft); border-color: var(--cc-border); border-left-color: var(--cc-control); color: var(--ccl-neutral); }
body.mdrrmo-cc-body .cc-note-warn b,
body.mdrrmo-cc-body .cc-note-ok b,
body.mdrrmo-cc-body .cc-note-muted b,
body.mdrrmo-cc-body .cc-note-warn .cc-muted,
body.mdrrmo-cc-body .cc-note-ok .cc-muted { color: inherit; }

body.mdrrmo-cc-body .cc-demo-banner {
    background: var(--ccl-warn-soft);
    border: 1px solid var(--ccl-warn-line);
    border-left: 4px solid var(--ccl-warn);
    border-radius: var(--cc-radius);
    color: var(--ccl-warn);
}
body.mdrrmo-cc-body .cc-demo-banner i,
body.mdrrmo-cc-body .cc-demo-banner b { color: var(--ccl-warn); }
body.mdrrmo-cc-body .cc-demo-note { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-demo-note code { color: var(--ccl-primary-ink); }

/* Unacted-alert escalation: red-soft panel; the 14pt message block stays dark */
body.mdrrmo-cc-body .cc-esc {
    background: var(--ccl-danger-soft);
    border: 1px solid var(--ccl-danger-line);
    border-left: 4px solid var(--ccl-danger-fill);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
}
body.mdrrmo-cc-body .cc-esc-flag { background: var(--ccl-danger-fill); color: #FFFFFF; }
body.mdrrmo-cc-body .cc-esc-meta,
body.mdrrmo-cc-body .cc-esc-reason { color: var(--ccl-danger); }
body.mdrrmo-cc-body .cc-esc-msg { background: #0B1220; color: #FFFFFF; border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-esc-note.cc-esc-ok { color: var(--ccl-ok); }
body.mdrrmo-cc-body .cc-esc-note.cc-esc-warn { color: var(--ccl-warn); }
body.mdrrmo-cc-body .cc-esc-tool { background: var(--cc-panel); border-color: var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-esc-tool-head { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-esc-gw,
body.mdrrmo-cc-body .cc-esc-tool-sub,
body.mdrrmo-cc-body .cc-esc-sim-load,
body.mdrrmo-cc-body .cc-esc-sim-gw,
body.mdrrmo-cc-body .cc-esc-sim-lbl,
body.mdrrmo-cc-body .cc-esc-sim-rec .r { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-esc-sim { border-top-color: var(--cc-border-2); }
body.mdrrmo-cc-body .cc-esc-sim-rec { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-esc-sim-err { color: var(--ccl-danger); }
body.mdrrmo-cc-body .cc-esc-sim-verdict.go { background: var(--ccl-danger-soft); color: var(--ccl-danger); border-color: var(--ccl-danger-line); }
body.mdrrmo-cc-body .cc-esc-sim-verdict.no { background: var(--ccl-ok-soft); color: var(--ccl-ok); border-color: var(--ccl-ok-line); }

/* ── 8. Buttons: cobalt primary, outlined secondary, one radius ──────────── */
body.mdrrmo-cc-body .cc-btn { border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-btn:hover { filter: none; }
body.mdrrmo-cc-body .cc-btn:focus-visible { outline: 3px solid var(--ccl-primary); outline-offset: 2px; }
body.mdrrmo-cc-body .cc-btn-primary,
body.mdrrmo-cc-body .ccs-btn {
    background: var(--dt-primary, #1A55E3);
    border-color: var(--dt-primary, #1A55E3);
    color: #FFFFFF;
}
body.mdrrmo-cc-body .cc-btn-primary:hover,
body.mdrrmo-cc-body .ccs-btn:hover { background: var(--dt-primary-hover, #1648C2); border-color: var(--dt-primary-hover, #1648C2); color: #FFFFFF; }
body.mdrrmo-cc-body .cc-btn-primary:active,
body.mdrrmo-cc-body .ccs-btn:active { background: var(--dt-primary-pressed, #123BA0); }
body.mdrrmo-cc-body .cc-btn-danger { background: var(--ccl-danger-fill); border-color: var(--ccl-danger-fill); color: #FFFFFF; }
body.mdrrmo-cc-body .cc-btn-danger:hover { background: var(--dt-red-hover, #C1121F); border-color: var(--dt-red-hover, #C1121F); }
body.mdrrmo-cc-body .cc-btn-warn { background: var(--ccl-warn-soft); border-color: var(--ccl-warn); color: var(--ccl-warn); }
body.mdrrmo-cc-body .cc-btn-warn:hover { background: #FBEFC4; }
body.mdrrmo-cc-body .cc-btn-soft { background: var(--ccl-primary-soft); border-color: var(--ccl-primary-line); color: var(--ccl-primary-ink); }
body.mdrrmo-cc-body .cc-btn-soft:hover { background: #E2EAFF; border-color: var(--ccl-primary); }
/* Bare .cc-btn and the ghost variant read as the outlined secondary button. */
body.mdrrmo-cc-body .cc-btn:not(.cc-btn-primary):not(.cc-btn-danger):not(.cc-btn-warn):not(.cc-btn-soft) {
    background-color: var(--cc-panel);
    border-color: var(--cc-control);
    color: var(--cc-ink);
}
body.mdrrmo-cc-body .cc-btn:not(.cc-btn-primary):not(.cc-btn-danger):not(.cc-btn-warn):not(.cc-btn-soft):hover {
    background-color: var(--cc-panel-3);
    border-color: var(--cc-ink-soft);
}
body.mdrrmo-cc-body .cc-btn:disabled,
body.mdrrmo-cc-body .cc-btn[aria-disabled="true"] {
    opacity: 1;
    background: var(--cc-panel-3);
    border-color: var(--cc-border);
    color: var(--cc-muted);
}

/* ── 9. Status chips, tags, pills, badges ────────────────────────────────── */
body.mdrrmo-cc-body .cc-st { border: 1px solid currentColor; background: var(--ccl-neutral-soft); }
body.mdrrmo-cc-body .cc-st-ok     { color: var(--ccl-ok);      background: var(--ccl-ok-soft);      border-color: var(--ccl-ok-line); }
body.mdrrmo-cc-body .cc-st-warn   { color: var(--ccl-warn);    background: var(--ccl-warn-soft);    border-color: var(--ccl-warn-line); }
body.mdrrmo-cc-body .cc-st-hot    { color: var(--ccl-hot);     background: var(--ccl-hot-soft);     border-color: var(--ccl-hot-line); }
body.mdrrmo-cc-body .cc-st-info   { color: var(--ccl-info);    background: var(--ccl-info-soft);    border-color: var(--ccl-info-line); }
body.mdrrmo-cc-body .cc-st-muted  { color: var(--ccl-neutral); background: var(--ccl-neutral-soft); border-color: var(--ccl-neutral-line); }
body.mdrrmo-cc-body .cc-st-danger { color: var(--ccl-danger);  background: var(--ccl-danger-soft);  border-color: var(--ccl-danger-line); }
/* Bare tone classes on text (freshness line, outlook numbers) stay text-only. */
body.mdrrmo-cc-body .cc-fc-fresh[class*="cc-st-"],
body.mdrrmo-cc-body .cc-fc-wxpop[class*="cc-st-"] { background: none; border-color: transparent; }
body.mdrrmo-cc-body .cc-chip { background: var(--ccl-neutral-soft); border: 1px solid var(--cc-border); color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-chip-num { color: var(--ccl-primary-ink); }
body.mdrrmo-cc-body .cc-chip-primary { background: var(--ccl-primary-soft); border-color: var(--ccl-primary-line); color: var(--ccl-primary-ink); }
/* Severity: solid fill carrying its label (white on red/orange/teal, dark on yellow) */
body.mdrrmo-cc-body .cc-tag.sev-critical { background: var(--sev-critical); color: #FFFFFF; }
body.mdrrmo-cc-body .cc-tag.sev-high     { background: var(--sev-high); color: #FFFFFF; }
body.mdrrmo-cc-body .cc-tag.sev-moderate { background: #FACC15; color: #422006; }
body.mdrrmo-cc-body .cc-tag.sev-low      { background: var(--sev-low); color: #FFFFFF; }
body.mdrrmo-cc-body .cc-tag-cam { background: var(--ccl-primary-soft); color: var(--ccl-primary-ink); border-color: var(--ccl-primary-line); }
body.mdrrmo-cc-body .cc-tag-st,
body.mdrrmo-cc-body .cc-tag-ev { background: var(--cc-panel); }
body.mdrrmo-cc-body .cc-tag-st.st-reported { color: var(--st-reported); }
body.mdrrmo-cc-body .cc-tag-st.st-verified { color: var(--st-verified); }
body.mdrrmo-cc-body .cc-tag-st.st-activated { color: var(--st-activated); }
body.mdrrmo-cc-body .cc-tag-st.st-responding { color: var(--st-responding); }
body.mdrrmo-cc-body .cc-tag-st.st-deescalating { color: var(--st-deescalating); }
body.mdrrmo-cc-body .cc-tag-st.st-closed { color: var(--st-closed); }
body.mdrrmo-cc-body .cc-tag-st.st-cancelled { color: var(--st-cancelled); }
body.mdrrmo-cc-body .cc-tag-ev.ev-pending { color: var(--ev-pending); }
body.mdrrmo-cc-body .cc-tag-ev.ev-verified { color: var(--ev-verified); }
body.mdrrmo-cc-body .cc-tag-ev.ev-dismissed { color: var(--ev-dismissed); }
body.mdrrmo-cc-body .cc-tag-ev.ev-converted { color: var(--ev-converted); }
body.mdrrmo-cc-body .cc-nav-badge { background: #FACC15; color: #422006; }

/* ── 10. Forms: white controls, #7C899D boundary, cobalt focus ring ──────── */
body.mdrrmo-cc-body .cc-form input[type=text],
body.mdrrmo-cc-body .cc-form input[type=number],
body.mdrrmo-cc-body .cc-form input[type=search],
body.mdrrmo-cc-body .cc-form input[type=date],
body.mdrrmo-cc-body .cc-form input[type=datetime-local],
body.mdrrmo-cc-body .cc-form input[type=email],
body.mdrrmo-cc-body .cc-form input[type=tel],
body.mdrrmo-cc-body .cc-form input[type=url],
body.mdrrmo-cc-body .cc-form input[type=password],
body.mdrrmo-cc-body .cc-form input[type=time],
body.mdrrmo-cc-body .cc-form select,
body.mdrrmo-cc-body .cc-form textarea,
body.mdrrmo-cc-body .cc-inline-form textarea,
body.mdrrmo-cc-body .cc-filters input,
body.mdrrmo-cc-body .cc-filters select,
body.mdrrmo-cc-body .cc-fc-search input[type="search"],
body.mdrrmo-cc-body .cc-fc-search select,
body.mdrrmo-cc-body .cc-rain-target-search input[type="search"],
body.mdrrmo-cc-body .cc-smsg-testrow input,
body.mdrrmo-cc-body .cc-fc-adv-text {
    background: var(--cc-panel);
    border: 1px solid var(--cc-control);
    border-radius: var(--cc-radius);
    color: var(--cc-ink);
}
body.mdrrmo-cc-body .cc-form select option,
body.mdrrmo-cc-body .cc-filters select option,
body.mdrrmo-cc-body .cc-fc-search select option { background: #FFFFFF; color: #14181F; }
body.mdrrmo-cc-body .cc-view input::placeholder,
body.mdrrmo-cc-body .cc-view textarea::placeholder { color: var(--cc-muted); opacity: 1; }
body.mdrrmo-cc-body .cc-form input:focus,
body.mdrrmo-cc-body .cc-form select:focus,
body.mdrrmo-cc-body .cc-form textarea:focus,
body.mdrrmo-cc-body .cc-inline-form textarea:focus,
body.mdrrmo-cc-body .cc-filters input:focus,
body.mdrrmo-cc-body .cc-filters select:focus,
body.mdrrmo-cc-body .cc-fc-search input[type="search"]:focus,
body.mdrrmo-cc-body .cc-fc-search select:focus,
body.mdrrmo-cc-body .cc-rain-target-search input[type="search"]:focus,
body.mdrrmo-cc-body .cc-smsg-testrow input:focus,
body.mdrrmo-cc-body .cc-fc-adv-text:focus {
    outline: 3px solid var(--ccl-primary);
    outline-offset: 1px;
    border-color: var(--ccl-primary);
    box-shadow: none;
}
body.mdrrmo-cc-body .cc-field > span { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-field > span i { color: var(--ccl-danger); }
body.mdrrmo-cc-body .cc-field small { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-check { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-check input,
body.mdrrmo-cc-body .ccs-toggle input { accent-color: var(--dt-primary, #1A55E3); }
body.mdrrmo-cc-body .cc-checkset { border-color: var(--cc-border); border-radius: var(--cc-radius); }

/* Segmented tabs + pager */
body.mdrrmo-cc-body .cc-segtabs { background: var(--cc-panel-3); border-color: var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-seg { color: var(--cc-ink-soft); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-seg:hover { color: var(--cc-ink); background: var(--cc-panel); }
body.mdrrmo-cc-body .cc-seg.active { background: var(--dt-primary, #1A55E3); color: #FFFFFF; }
body.mdrrmo-cc-body .cc-seg-n { background: var(--cc-border); color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-seg.active .cc-seg-n { background: #FFFFFF; color: #123BA0; } /* solid pill: 9.7:1 (the 24% white wash gave 3.8:1) */
body.mdrrmo-cc-body .cc-page { background: var(--cc-panel); border-color: var(--cc-control); color: var(--cc-ink); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-page:hover { background: var(--cc-panel-3); }
body.mdrrmo-cc-body .cc-page.active { background: var(--dt-primary, #1A55E3); border-color: var(--dt-primary, #1A55E3); color: #FFFFFF; }
body.mdrrmo-cc-body .cc-nav { background: var(--cc-panel); border-color: var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-nav-link { color: var(--cc-ink); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-nav-link i { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-nav-link:hover { background: var(--cc-panel-3); color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-nav-link.active { background: var(--dt-primary, #1A55E3); border-color: var(--dt-primary, #1A55E3); color: #FFFFFF; }
body.mdrrmo-cc-body .cc-nav-link.active i { color: #FFFFFF; }
body.mdrrmo-cc-body .cc-nav-link.locked { opacity: 1; color: var(--cc-muted); }

/* ── 11. Tables: subtle header, zebra, primary-soft hover ───────────────── */
body.mdrrmo-cc-body .cc-tablewrap { background: var(--cc-panel); border-color: var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-table thead th {
    background: var(--cc-panel-3);
    color: var(--cc-muted);
    font-weight: 700;
    border-bottom: 1px solid var(--cc-border-2);
}
body.mdrrmo-cc-body .cc-table tbody td { color: var(--cc-ink-soft); border-bottom-color: var(--cc-border); }
body.mdrrmo-cc-body .cc-table tbody tr:nth-child(even) { background: var(--dt-canvas, #F6F8FC); }
body.mdrrmo-cc-body .cc-table tbody tr:hover { background: var(--ccl-primary-soft); }
body.mdrrmo-cc-body .cc-table b { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-row-go { color: var(--cc-muted); }
/* Archived rows keep full ink (opacity .58 dropped them under AA) and read as
   archived through the subtle surface plus their own "Archived" chip. */
body.mdrrmo-cc-body .cc-row-archived { opacity: 1; }
body.mdrrmo-cc-body .cc-table tbody tr.cc-row-archived,
body.mdrrmo-cc-body .cc-table tbody tr.cc-row-archived:hover { opacity: 1; background: var(--cc-panel-3); }
body.mdrrmo-cc-body .cc-row-archived td { color: var(--cc-muted); }

/* ── 12. Empty states, placeholder (views/_placeholder.php), gate ───────── */
body.mdrrmo-cc-body .cc-empty {
    background: var(--cc-panel);
    border: 1px dashed var(--cc-border-2);
    border-radius: var(--cc-radius);
    color: var(--cc-muted);
}
body.mdrrmo-cc-body .cc-empty i { color: var(--cc-muted); opacity: 1; }
body.mdrrmo-cc-body .cc-empty p { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-empty-sm { border: none; background: transparent; }
body.mdrrmo-cc-body .cc-empty-sm i { color: var(--ccl-ok); }
body.mdrrmo-cc-body .cc-empty-build .cc-empty-icon,
body.mdrrmo-cc-body .cc-empty-build .cc-empty-icon i {
    background: var(--ccl-primary-soft);
    color: var(--ccl-primary-ink);
    border-radius: var(--cc-radius);
}
body.mdrrmo-cc-body .cc-empty-build h2 { color: var(--cc-ink); font-weight: 700; }
body.mdrrmo-cc-body .cc-empty-build > p { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-badge-soon {
    background: var(--ccl-warn-soft);
    border: 1px solid var(--ccl-warn-line);
    color: var(--ccl-warn);
    border-radius: 999px;
}
body.mdrrmo-cc-body .cc-badge-soon i { color: var(--ccl-warn); }

/* Placeholder (views/_placeholder.php): left-aligned explainer + related links */
body.mdrrmo-cc-body .cc-placeholder {
    max-width: 760px;
    margin: 8px auto 0;
    padding: 32px clamp(18px, 4vw, 40px) 28px;
    border-style: solid;
    border-color: var(--cc-border);
    box-shadow: var(--cc-shadow);
    text-align: left;
}
body.mdrrmo-cc-body .cc-placeholder .cc-empty-head { display: flex; align-items: flex-start; gap: 16px; }
body.mdrrmo-cc-body .cc-placeholder .cc-empty-head .cc-empty-icon { flex: 0 0 auto; width: 56px; height: 56px; margin: 0; font-size: 24px; }
body.mdrrmo-cc-body .cc-placeholder .cc-empty-head h2 { margin: 6px 0 4px; font-size: 22px; line-height: 1.25; }
body.mdrrmo-cc-body .cc-placeholder .cc-empty-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--ccl-warn-line);
    background: var(--ccl-warn-soft);
    color: var(--ccl-warn);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
}
body.mdrrmo-cc-body .cc-placeholder .cc-empty-status i { font-size: 12px; margin: 0; display: inline; color: var(--ccl-warn); }
body.mdrrmo-cc-body .cc-placeholder .cc-empty-lead { margin: 16px 0 6px; font-size: 16px; line-height: 1.6; color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-placeholder .cc-empty-note { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-placeholder .cc-empty-links-h {
    margin: 18px 0 10px;
    padding-top: 16px;
    border-top: 1px solid var(--cc-border);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cc-muted);
}
body.mdrrmo-cc-body .cc-placeholder .cc-empty-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}
body.mdrrmo-cc-body .cc-placeholder .cc-empty-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: var(--cc-panel);
    color: var(--cc-ink);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}
body.mdrrmo-cc-body .cc-placeholder .cc-empty-links a:hover { background: var(--ccl-primary-soft); border-color: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-placeholder .cc-empty-links a:focus-visible { outline: 3px solid var(--ccl-primary); outline-offset: 2px; }
body.mdrrmo-cc-body .cc-placeholder .cc-empty-links a i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin: 0;
    font-size: 15px;
    border-radius: var(--cc-radius);
    background: var(--ccl-primary-soft);
    color: var(--ccl-primary-ink);
}
body.mdrrmo-cc-body .cc-placeholder .cc-empty-links a span { display: flex; flex-direction: column; min-width: 0; }
body.mdrrmo-cc-body .cc-placeholder .cc-empty-links a small { font-size: 12.5px; font-weight: 400; color: var(--cc-muted); }

/* Access gate (views/_gate.php) */
body.mdrrmo-cc-body .cc-gate {
    max-width: 620px;
    margin: 24px auto;
    padding: 32px clamp(18px, 4vw, 36px);
    text-align: left;
    background: var(--cc-panel);
    border: 1px solid var(--cc-border);
    border-top: 4px solid var(--dt-primary, #1A55E3);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
}
body.mdrrmo-cc-body .cc-gate-icon {
    width: 56px;
    height: 56px;
    margin: 0 0 14px;
    font-size: 24px;
    border-radius: var(--cc-radius);
    background: var(--ccl-primary-soft);
    color: var(--ccl-primary-ink);
}
body.mdrrmo-cc-body .cc-gate h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-gate p { color: var(--cc-ink-soft); font-size: 15.5px; line-height: 1.6; }
body.mdrrmo-cc-body .cc-gate-roles { margin: 10px 0 0; padding-left: 20px; color: var(--cc-ink-soft); font-size: 15px; line-height: 1.7; }
body.mdrrmo-cc-body .cc-gate-actions { justify-content: flex-start; gap: 10px; margin: 20px 0 6px; }
body.mdrrmo-cc-body .cc-gate-actions .cc-btn { min-height: 44px; padding: 10px 18px; font-size: 15px; }
body.mdrrmo-cc-body .cc-gate-note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--cc-border);
    font-size: 14px;
    line-height: 1.55;
    color: var(--cc-muted);
}
body.mdrrmo-cc-body .cc-gate-note i { margin-top: 3px; color: var(--ccl-primary); }

/* ── 13. Toasts + modal ──────────────────────────────────────────────────── */
body.mdrrmo-cc-body .cc-toast {
    background: var(--dt-surface, #FFFFFF);
    border: 1px solid var(--cc-border-2);
    border-left: 4px solid var(--ccl-primary);
    border-radius: var(--cc-radius);
    color: var(--dt-text, #14181F);
    box-shadow: var(--dt-shadow-overlay, 0 8px 28px rgba(16, 24, 40, .16));
}
body.mdrrmo-cc-body .cc-toast.ok { border-left-color: var(--ccl-ok); }
body.mdrrmo-cc-body .cc-toast.ok i { color: var(--ccl-ok); }
body.mdrrmo-cc-body .cc-toast.err { border-left-color: var(--ccl-danger-fill); }
body.mdrrmo-cc-body .cc-toast.err i { color: var(--ccl-danger); }
body.mdrrmo-cc-body .cc-toast.info i { color: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-modal-backdrop { background: rgba(16, 24, 40, .55); backdrop-filter: none; }
body.mdrrmo-cc-body .cc-modal-head { border-bottom-color: var(--cc-border); }
body.mdrrmo-cc-body .cc-modal-head h3 i { color: var(--ccl-hot); }
body.mdrrmo-cc-body .cc-modal-x { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-modal-x:hover { color: var(--cc-ink); }

/* ── 14. Leaflet: light popups (content is written for them), readable controls ── */
body.mdrrmo-cc-body .cc-map { background: var(--cc-panel-3); border-color: var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-map-empty { color: var(--cc-muted); }
body.mdrrmo-cc-body .leaflet-popup-content-wrapper,
body.mdrrmo-cc-body .leaflet-popup-tip { background: var(--cc-panel-2); color: var(--cc-ink); }
body.mdrrmo-cc-body .leaflet-container a.leaflet-popup-close-button { color: var(--cc-muted); }
body.mdrrmo-cc-body .leaflet-container .leaflet-control-attribution {
    background: rgba(255, 255, 255, .92);
    color: #14181F;
}
body.mdrrmo-cc-body .leaflet-container .leaflet-control-attribution a { color: #123BA0; }
body.mdrrmo-cc-body .leaflet-bar a.leaflet-disabled { color: #5B6475; background-color: #F0F4FA; }

/* ── 15. Forecast & early warning (light conversion) ─────────────────────── */
/* Warning-level hero: white card, level colour on the edge and badge */
body.mdrrmo-cc-body .cc-fchero { background: var(--cc-panel); border: 1px solid var(--cc-border); border-left: 5px solid var(--lvl, var(--ccl-primary)); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); }
body.mdrrmo-cc-body .cc-fchero::after { background: none; }
body.mdrrmo-cc-body .cc-fchero-warn   { background: var(--ccl-warn-soft); border-color: var(--ccl-warn-line); border-left-color: #CA8A04; }
body.mdrrmo-cc-body .cc-fchero-hot    { background: var(--ccl-hot-soft); border-color: var(--ccl-hot-line); border-left-color: #C2410C; }
body.mdrrmo-cc-body .cc-fchero-danger { background: var(--ccl-danger-soft); border-color: var(--ccl-danger-line); border-left-color: var(--ccl-danger-fill); }
body.mdrrmo-cc-body .cc-fchero-badge { background: color-mix(in srgb, var(--lvl, #1A55E3) 16%, #FFFFFF); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-fchero-code { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-fchero-eyebrow { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-fchero-title { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-fchero-sub { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-fcladder-step { opacity: 1; }
body.mdrrmo-cc-body .cc-fcladder-step .cc-fcladder-dot { opacity: .45; border-color: rgba(20, 24, 31, .25); }
body.mdrrmo-cc-body .cc-fcladder-step.is-current .cc-fcladder-dot { opacity: 1; border-color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-fcladder-code { color: var(--cc-muted); font-size: 10px; }
body.mdrrmo-cc-body .cc-fcladder-step.is-current .cc-fcladder-code { color: var(--cc-ink); font-weight: 900; }

/* Driver cards */
body.mdrrmo-cc-body .cc-fc-driver { background: var(--cc-panel); border: 1px solid var(--cc-border); border-left-width: 4px; border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-fc-driver-warn   { border-left-color: #CA8A04; }
body.mdrrmo-cc-body .cc-fc-driver-hot    { border-left-color: #C2410C; }
body.mdrrmo-cc-body .cc-fc-driver-danger { border-left-color: var(--ccl-danger-fill); }
body.mdrrmo-cc-body .cc-fc-driver-ok     { border-left-color: var(--ccl-ok); }
body.mdrrmo-cc-body .cc-fc-driver-ico { background: var(--ccl-neutral-soft); color: var(--cc-ink-soft); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-fc-driver-head h3,
body.mdrrmo-cc-body .cc-fc-driver-what { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-fc-driver-lvl { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-fc-driver-w5 dt { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-fc-driver-w5 dd { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-fc-driver-foot { color: var(--cc-muted); border-top-color: var(--cc-border); }
body.mdrrmo-cc-body .cc-fc-st-off  { background: var(--ccl-ok-soft); color: var(--ccl-ok); border-color: var(--ccl-ok-line); }
body.mdrrmo-cc-body .cc-fc-st-proj { background: var(--ccl-info-soft); color: var(--ccl-info); border-color: var(--ccl-info-line); }
body.mdrrmo-cc-body .cc-fc-st-adv  { background: var(--ccl-warn-soft); color: var(--ccl-warn); border-color: var(--ccl-warn-line); }

/* Freshness chip, weather outlook */
body.mdrrmo-cc-body .cc-fc-fresh.cc-st-ok { color: var(--ccl-ok); }
body.mdrrmo-cc-body .cc-fc-fresh.cc-st-warn { color: var(--ccl-warn); }
body.mdrrmo-cc-body .cc-fc-fresh.cc-st-danger { color: var(--ccl-danger); }
body.mdrrmo-cc-body .cc-fc-fresh.cc-st-muted { color: var(--ccl-neutral); }
body.mdrrmo-cc-body .cc-fc-dot { box-shadow: none; }
body.mdrrmo-cc-body .cc-fc-wxday { background: var(--cc-panel-3); border-color: var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-fc-wxlbl,
body.mdrrmo-cc-body .cc-fc-wxsub { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-fc-wxpop { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-fc-wxpop.cc-st-danger { color: var(--ccl-danger); }
body.mdrrmo-cc-body .cc-fc-wxpop.cc-st-warn { color: var(--ccl-warn); }
body.mdrrmo-cc-body .cc-fc-wxpop.cc-st-ok { color: var(--ccl-ok); }

/* Rain projection / travel search / answer / live cards */
body.mdrrmo-cc-body .cc-rain-projection,
body.mdrrmo-cc-body .cc-rain-target,
body.mdrrmo-cc-body .cc-rain-answer,
body.mdrrmo-cc-body .cc-rain-live-card,
body.mdrrmo-cc-body .cc-rain-window,
body.mdrrmo-cc-body .cc-rain-ops-grid article,
body.mdrrmo-cc-body .cc-travel-rain-card {
    background: var(--cc-panel);
    border-color: var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: none;
}
body.mdrrmo-cc-body .cc-rain-target-travel,
body.mdrrmo-cc-body .cc-rain-target-travel.is-active { background: var(--ccl-primary-soft); border-color: var(--ccl-primary-line); box-shadow: none; }
body.mdrrmo-cc-body .cc-rain-target-travel.is-active { border-color: var(--ccl-warn); }
body.mdrrmo-cc-body .cc-rain-target-travel::before { border-color: transparent; }
body.mdrrmo-cc-body .cc-rain-target span,
body.mdrrmo-cc-body .cc-rain-target-main small,
body.mdrrmo-cc-body .cc-rain-projection-head p,
body.mdrrmo-cc-body .cc-rain-first,
body.mdrrmo-cc-body .cc-rain-time,
body.mdrrmo-cc-body .cc-rain-answer-metrics small,
body.mdrrmo-cc-body .cc-rain-answer-basis,
body.mdrrmo-cc-body .cc-rain-live-card footer,
body.mdrrmo-cc-body .cc-rain-source-row,
body.mdrrmo-cc-body .cc-travel-rain-card small,
body.mdrrmo-cc-body .cc-place-quick > span,
body.mdrrmo-cc-body .cc-place-chip small { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-rain-target b,
body.mdrrmo-cc-body .cc-rain-projection-head h4,
body.mdrrmo-cc-body .cc-rain-answer h4,
body.mdrrmo-cc-body .cc-rain-answer-metrics b,
body.mdrrmo-cc-body .cc-rain-answer-basis b,
body.mdrrmo-cc-body .cc-rain-live-main b,
body.mdrrmo-cc-body .cc-rain-window-label,
body.mdrrmo-cc-body .cc-rain-metrics b,
body.mdrrmo-cc-body .cc-rain-mm,
body.mdrrmo-cc-body .cc-rain-source-row b,
body.mdrrmo-cc-body .cc-rain-ops-grid b,
body.mdrrmo-cc-body .cc-travel-rain-card > b,
body.mdrrmo-cc-body .cc-place-chip b { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-rain-answer p,
body.mdrrmo-cc-body .cc-rain-live-main strong,
body.mdrrmo-cc-body .cc-rain-live-line,
body.mdrrmo-cc-body .cc-rain-live-card footer span,
body.mdrrmo-cc-body .cc-rain-metrics,
body.mdrrmo-cc-body .cc-rain-hour,
body.mdrrmo-cc-body .cc-rain-ops-grid p,
body.mdrrmo-cc-body .cc-travel-rain-card p { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-rain-target-search label,
body.mdrrmo-cc-body .cc-rain-answer-kicker,
body.mdrrmo-cc-body .cc-rain-pop,
body.mdrrmo-cc-body .cc-rain-ops-grid span,
body.mdrrmo-cc-body .cc-travel-rain-card > span { color: var(--ccl-primary-ink); }
body.mdrrmo-cc-body .cc-rain-target-search label i,
body.mdrrmo-cc-body .cc-travel-rain-prompt i,
body.mdrrmo-cc-body .cc-rain-live-main > i,
body.mdrrmo-cc-body .cc-rain-source-row i,
body.mdrrmo-cc-body .cc-rain-ops-summary .cc-card-head h3 i { color: var(--ccl-primary); text-shadow: none; }
body.mdrrmo-cc-body .cc-rain-live-label { color: var(--ccl-warn); }
body.mdrrmo-cc-body .cc-rain-live-danger { background: var(--ccl-danger-soft); border-left-color: var(--ccl-danger-fill); }
body.mdrrmo-cc-body .cc-rain-live-card footer,
body.mdrrmo-cc-body .cc-rain-answer-basis { border-top-color: var(--cc-border); }
body.mdrrmo-cc-body .cc-rain-answer-metrics span,
body.mdrrmo-cc-body .cc-rain-source-row,
body.mdrrmo-cc-body .cc-fc-hazard-counts span { background: var(--cc-panel-3); border-color: var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-rain-window.info   { background: var(--ccl-info-soft); border-color: var(--ccl-info-line); }
body.mdrrmo-cc-body .cc-rain-window.warn   { background: var(--ccl-warn-soft); border-color: var(--ccl-warn-line); }
body.mdrrmo-cc-body .cc-rain-window.danger { background: var(--ccl-danger-soft); border-color: var(--ccl-danger-line); }
body.mdrrmo-cc-body .cc-rain-window.muted  { background: var(--ccl-neutral-soft); border-color: var(--cc-border); }
body.mdrrmo-cc-body .cc-rain-metrics span { border-bottom-color: var(--cc-border); }
body.mdrrmo-cc-body .cc-rain-bar-track { background: var(--cc-border); border-color: var(--cc-border); }
body.mdrrmo-cc-body .cc-rain-bar-fill { background: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-rain-target-actions a,
body.mdrrmo-cc-body .cc-place-chip,
body.mdrrmo-cc-body .cc-fc-candidates a,
body.mdrrmo-cc-body .cc-fc-adv-tab {
    background: var(--ccl-primary-soft);
    border: 1px solid var(--ccl-primary-line);
    border-radius: var(--cc-radius);
    color: var(--ccl-primary-ink);
}
body.mdrrmo-cc-body .cc-fc-candidates a { border-radius: 999px; }
body.mdrrmo-cc-body .cc-rain-target-actions a:hover,
body.mdrrmo-cc-body .cc-rain-target-actions a.is-active,
body.mdrrmo-cc-body .cc-place-chip:hover,
body.mdrrmo-cc-body .cc-place-chip.is-active,
body.mdrrmo-cc-body .cc-fc-adv-tab.is-active {
    background: var(--dt-primary, #1A55E3);
    border-color: var(--dt-primary, #1A55E3);
    color: #FFFFFF;
    box-shadow: none;
}
body.mdrrmo-cc-body .cc-place-chip:hover b,
body.mdrrmo-cc-body .cc-place-chip.is-active b,
body.mdrrmo-cc-body .cc-place-chip:hover small,
body.mdrrmo-cc-body .cc-place-chip.is-active small { color: #FFFFFF; }
body.mdrrmo-cc-body .cc-fc-candidates a:hover { background: #E2EAFF; border-color: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-travel-rain-prompt { background: var(--ccl-primary-soft); border-color: var(--ccl-primary-line); border-radius: var(--cc-radius); color: var(--ccl-primary-ink); }
body.mdrrmo-cc-body .cc-travel-rain-card:hover,
body.mdrrmo-cc-body .cc-travel-rain-card:focus-visible { border-color: var(--ccl-primary); box-shadow: var(--cc-shadow-hover); outline: 3px solid var(--ccl-primary); outline-offset: 1px; }
body.mdrrmo-cc-body .cc-travel-rain-danger { border-left-color: var(--ccl-danger-fill); box-shadow: none; }
body.mdrrmo-cc-body .cc-travel-rain-warn { border-left-color: #CA8A04; box-shadow: none; }
body.mdrrmo-cc-body .cc-rain-answer-danger { border-left-color: var(--ccl-danger-fill); }
body.mdrrmo-cc-body .cc-rain-answer-warn { border-left-color: #CA8A04; }

/* Global location + hazard watch */
body.mdrrmo-cc-body .cc-fc-location-card { background: var(--cc-panel-3); border-color: var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-fc-loc-k { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-fc-loc-now,
body.mdrrmo-cc-body .cc-fc-hazard-counts b { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-fc-loc-now i,
body.mdrrmo-cc-body .cc-fc-hazard-counts i,
body.mdrrmo-cc-body .cc-fc-global-head h3 i { color: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-fc-location-card p,
body.mdrrmo-cc-body .cc-fc-hazard-counts span { color: var(--cc-ink-soft); }

/* AI queue, hazard timeline, sensors, PAGASA strip, legend, disclaimer */
body.mdrrmo-cc-body .cc-ai-card,
body.mdrrmo-cc-body .cc-haz-node { background: var(--cc-panel); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-ai-card { border-left: 4px solid var(--ccl-ok); }
body.mdrrmo-cc-body .cc-ai-advisory { border-left-color: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-ai-watch { border-left-color: #CA8A04; }
body.mdrrmo-cc-body .cc-ai-warning { border-left-color: #C2410C; }
body.mdrrmo-cc-body .cc-ai-critical { background: var(--ccl-danger-soft); border-left-color: var(--ccl-danger-fill); }
body.mdrrmo-cc-body .cc-ai-level,
body.mdrrmo-cc-body .cc-ai-card dt,
body.mdrrmo-cc-body .cc-ai-card footer,
body.mdrrmo-cc-body .cc-haz-node time,
body.mdrrmo-cc-body .cc-sensor-card small { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-ai-score { background: var(--cc-panel-3); border-color: var(--cc-border); color: var(--cc-ink); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-ai-card h4,
body.mdrrmo-cc-body .cc-haz-node b,
body.mdrrmo-cc-body .cc-sensor-card h4,
body.mdrrmo-cc-body .cc-sensor-card b,
body.mdrrmo-cc-body .cc-pagasa-head > span:first-child,
body.mdrrmo-cc-body .cc-pagasa-item b { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-ai-card p,
body.mdrrmo-cc-body .cc-ai-card dd,
body.mdrrmo-cc-body .cc-haz-node small,
body.mdrrmo-cc-body .cc-sensor-card p,
body.mdrrmo-cc-body .cc-map-legend { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-ai-card footer { border-top-color: var(--cc-border); }
body.mdrrmo-cc-body .cc-map-key { border-color: rgba(20, 24, 31, .45); }
body.mdrrmo-cc-body .cc-sensor-card { background: var(--ccl-violet-soft); border-color: var(--ccl-violet-line); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-sensor-type { color: var(--ccl-violet); }
body.mdrrmo-cc-body .cc-pagasa-strip { background: var(--ccl-info-soft); border-color: var(--ccl-info-line); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-pagasa-item { background: var(--cc-panel); border-color: var(--cc-border); border-radius: var(--cc-radius); color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-pagasa-item span { color: var(--ccl-primary-ink); }
body.mdrrmo-cc-body .cc-fc-disclaimer { background: var(--cc-panel-3); border-color: var(--cc-border); border-radius: var(--cc-radius); color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-fc-disclaimer i { color: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-fc-adv-text { font-size: 13px; }

/* Earthquake shaking calculator */
body.mdrrmo-cc-body .cc-atten-myth { background: var(--ccl-info-soft); border-color: var(--ccl-info-line); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-atten-myth i { color: var(--ccl-info); }
body.mdrrmo-cc-body .cc-atten-myth p,
body.mdrrmo-cc-body .cc-atten-box p,
body.mdrrmo-cc-body .cc-atten-effect { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-atten-myth b,
body.mdrrmo-cc-body .cc-atten-box b,
body.mdrrmo-cc-body .cc-atten-v,
body.mdrrmo-cc-body .cc-atten-name,
body.mdrrmo-cc-body .cc-atten-coord b { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-atten-step { background: var(--cc-panel-3); border-color: var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-atten-result { background: var(--ccl-primary-soft); border-color: var(--ccl-primary-line); }
body.mdrrmo-cc-body .cc-atten-result .cc-atten-v { color: var(--ccl-primary-ink); }
body.mdrrmo-cc-body .cc-atten-k,
body.mdrrmo-cc-body .cc-atten-s,
body.mdrrmo-cc-body .cc-atten-band,
body.mdrrmo-cc-body .cc-atten-method { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-atten-box { background: var(--cc-panel-3); border-color: var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-atten-box-h { color: var(--ccl-primary-ink); }
body.mdrrmo-cc-body .cc-atten-coord { background: var(--ccl-primary-soft); border-color: var(--ccl-primary-line); border-radius: var(--cc-radius); color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-atten-coord i { color: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-atten-guard { background: var(--ccl-hot-soft); border-color: var(--ccl-hot-line); border-radius: var(--cc-radius); color: var(--ccl-hot); }
body.mdrrmo-cc-body .cc-atten-guard i,
body.mdrrmo-cc-body .cc-atten-guard b { color: var(--ccl-hot); }
body.mdrrmo-cc-body .cc-atten-headline { border-color: var(--cc-border); }
body.mdrrmo-cc-body .cc-atten-roman { border-radius: var(--cc-radius); }

/* SMS / Text-Blast gateway page */
body.mdrrmo-cc-body .cc-smsg-state.on { background: var(--ccl-ok-soft); color: var(--ccl-ok); border-color: var(--ccl-ok-line); }
body.mdrrmo-cc-body .cc-smsg-state.off { background: var(--ccl-warn-soft); color: var(--ccl-warn); border-color: var(--ccl-warn-line); }
body.mdrrmo-cc-body .cc-smsg-head p,
body.mdrrmo-cc-body .cc-smsg-status-grid span,
body.mdrrmo-cc-body .cc-prov-region,
body.mdrrmo-cc-body .cc-prov-note,
body.mdrrmo-cc-body .cc-smsg-priv,
body.mdrrmo-cc-body .cc-smsg-testnote { color: var(--cc-muted); }
body.mdrrmo-cc-body .cc-smsg-status h3,
body.mdrrmo-cc-body .cc-smsg-form h3,
body.mdrrmo-cc-body .cc-smsg-test h3,
body.mdrrmo-cc-body .cc-smsg-sec,
body.mdrrmo-cc-body .cc-smsg-status-grid b,
body.mdrrmo-cc-body .cc-prov h4 { color: var(--cc-ink); }
body.mdrrmo-cc-body .cc-smsg-status-grid > div,
body.mdrrmo-cc-body .cc-prov { background: var(--cc-panel); border-color: var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .cc-prov.is-rec { border-color: var(--ccl-warn-line); box-shadow: inset 0 3px 0 #CA8A04; }
body.mdrrmo-cc-body .cc-prov-facts li { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .cc-prov-facts i,
body.mdrrmo-cc-body .cc-smsg-status h3 i,
body.mdrrmo-cc-body .cc-smsg-form h3 i,
body.mdrrmo-cc-body .cc-smsg-test h3 i,
body.mdrrmo-cc-body .cc-smsg-head h2 i { color: var(--ccl-primary); }
body.mdrrmo-cc-body .cc-smsg-sec i { color: var(--ccl-warn); }
body.mdrrmo-cc-body .cc-smsg-priv i { color: var(--ccl-ok); }
body.mdrrmo-cc-body .cc-prov-badge { background: #FACC15; color: #422006; }

/* ── 16. View-local components (inline <style> blocks load after this sheet;
 *        the body.mdrrmo-cc-body prefix still outranks them) ─────────────── */
/* Situational (.ccs-*) */
body.mdrrmo-cc-body .ccs-chip { background: var(--ccl-neutral-soft); border-color: var(--cc-border); color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .ccs-chip b { color: var(--ccl-primary-ink); }
body.mdrrmo-cc-body .ccs-chip.gold b,
body.mdrrmo-cc-body .ccs-note b { color: var(--ccl-warn); }
body.mdrrmo-cc-body .ccs-note { background: var(--ccl-warn-soft); border-color: var(--ccl-warn-line); border-radius: var(--cc-radius); color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .ccs-toggle { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .ccs-toggle .on { color: var(--ccl-ok); }
body.mdrrmo-cc-body .ccs-maphead h3 i,
body.mdrrmo-cc-body .ccs-bar h2 i { color: var(--ccl-primary); }
body.mdrrmo-cc-body .ccs-map { border-color: var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .ccs-fitem { background: var(--cc-panel-3); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .ccs-fitem .ft b { color: var(--cc-ink); }
body.mdrrmo-cc-body .ccs-fitem .ft time,
body.mdrrmo-cc-body .ccs-feed-empty { color: var(--cc-muted); }
body.mdrrmo-cc-body .ccs-fitem .fm { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .ccs-fitem .pill.auto { color: var(--ccl-ok); background: var(--ccl-ok-soft); }
body.mdrrmo-cc-body .ccs-fitem .pill.pending { color: var(--ccl-warn); background: var(--ccl-warn-soft); }
/* Camera tiles simulate a video feed — they stay dark (tokens restored above). */
body.mdrrmo-cc-body .ccs-tile.maint { opacity: 1; }
body.mdrrmo-cc-body .ccs-badge.maint { color: #D5DEEC; background: rgba(15, 23, 42, .78); border-color: rgba(169, 180, 199, .45); }
body.mdrrmo-cc-body .ccs-tname span { color: var(--cc-muted); }
body.mdrrmo-cc-body .ccs-mapstatus .sep { color: #A9B4C7; }

/* Risk + hazard-map GIS panels (.gis-*) */
body.mdrrmo-cc-body .gis-stat-row span { background: var(--ccl-neutral-soft); border-color: var(--cc-border); color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .gis-stat-row b { color: var(--cc-ink); }
body.mdrrmo-cc-body .gis-mini-card { background: var(--cc-panel-3); border-color: var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .gis-mini-card b { color: var(--cc-ink); }
body.mdrrmo-cc-body .gis-mini-card span,
body.mdrrmo-cc-body .gis-layer-key-card p { color: var(--cc-ink-soft); }
body.mdrrmo-cc-body .gis-layer-key-card { background: var(--cc-panel-3); border-color: var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .gis-layer-key-card b { color: var(--cc-ink); }
body.mdrrmo-cc-body .gis-layer-key-card.evacuation { background: var(--ccl-ok-soft); border-color: var(--ccl-ok-line); }
body.mdrrmo-cc-body .gis-layer-key-card.evacuation b { color: var(--ccl-ok); }
body.mdrrmo-cc-body .gis-layer-key-card.flood { background: var(--ccl-info-soft); border-color: var(--ccl-info-line); }
body.mdrrmo-cc-body .gis-layer-key-card.flood b { color: var(--ccl-info); }
body.mdrrmo-cc-body .gis-layer-key-card.rupture { background: var(--ccl-danger-soft); border-color: var(--ccl-danger-line); }
body.mdrrmo-cc-body .gis-layer-key-card.rupture b { color: var(--ccl-danger); }
body.mdrrmo-cc-body .gis-layer-key-card.landslide { background: var(--ccl-hot-soft); border-color: var(--ccl-hot-line); }
body.mdrrmo-cc-body .gis-layer-key-card.landslide b { color: var(--ccl-hot); }
body.mdrrmo-cc-body .gis-layer-key-card.liquefaction { background: var(--ccl-warn-soft); border-color: var(--ccl-warn-line); }
body.mdrrmo-cc-body .gis-layer-key-card.liquefaction b { color: var(--ccl-warn); }
body.mdrrmo-cc-body .gis-sheet-links a { border-color: var(--cc-border); }
body.mdrrmo-cc-body .gis-sheet-links a.evacuation { background: var(--ccl-ok-soft); color: var(--ccl-ok); border-color: var(--ccl-ok-line); }
body.mdrrmo-cc-body .gis-sheet-links a.flood { background: var(--ccl-info-soft); color: var(--ccl-info); border-color: var(--ccl-info-line); }
body.mdrrmo-cc-body .gis-sheet-links a.rupture { background: var(--ccl-danger-soft); color: var(--ccl-danger); border-color: var(--ccl-danger-line); }
body.mdrrmo-cc-body .gis-sheet-links a.landslide { background: var(--ccl-hot-soft); color: var(--ccl-hot); border-color: var(--ccl-hot-line); }
body.mdrrmo-cc-body .gis-sheet-links a.liquefaction { background: var(--ccl-warn-soft); color: var(--ccl-warn); border-color: var(--ccl-warn-line); }
body.mdrrmo-cc-body .risk-map-stage { border-color: var(--cc-border); border-radius: var(--cc-radius); }
body.mdrrmo-cc-body .risk-search input::placeholder { color: #A9B4C7; }

/* Hazard-map catalogue preview frames: the "awaiting upload" frame goes light
   (its #64748B caption can only pass on white); the PDF frame stays dark. */
body.mdrrmo-cc-body .cc-card > div[style*="background:#0b1220"]:has(> div[style*="color:#64748b"]) {
    box-shadow: inset 0 0 0 100vmax var(--dt-surface, #FFFFFF); /* #64748B on white = 4.76:1 */
}
body.mdrrmo-cc-body .cc-card button[style*="color:#fca5a5"] { box-shadow: inset 0 0 0 100vmax #7F1D1D; border-color: #7F1D1D; }

/* GeoRisk / DOST panels painted by inline style="": the translucent navy
   sections become white cards (inset paint), their token inks follow the
   light tokens; the hero and the layer tiles that carry hard-coded light ink
   stay navy islands (tokens restored in 1b) and get an opaque navy base.    */
body.mdrrmo-cc-body .cc-dash > section[style*="background:rgba(8,16,34"],
body.mdrrmo-cc-body .cc-listwrap > section.cc-fcmap[style*="background:rgba(8,16,34"],
body.mdrrmo-cc-body .cc-dash > section.cc-fcmap[style*="background:rgba(8,16,34"] {
    box-shadow: inset 0 0 0 100vmax var(--dt-surface, #FFFFFF), var(--dt-shadow-1, 0 1px 2px rgba(16, 24, 40, .04));
    border-color: var(--dt-border-subtle, #E3E8F0);
}
body.mdrrmo-cc-body .cc-dash > section[style*="rgba(8,47,73"] {
    box-shadow: inset 0 0 0 100vmax rgba(7, 17, 38, .62);
}
body.mdrrmo-cc-body .cc-dash > section [style*="background:rgba(2,20,40"],
body.mdrrmo-cc-body .cc-dash > section [style*="background:rgba(14,116,144"] {
    box-shadow: inset 0 0 0 100vmax #0F203F;
}
body.mdrrmo-cc-body .cc-dash > section [style*="background:rgba(14,116,144"] { box-shadow: inset 0 0 0 100vmax #0C3552; }
body.mdrrmo-cc-body .cc-dash > section[style*="rgba(8,47,73"] a.cc-btn[style*="background:#0284c7"] {
    box-shadow: inset 0 0 0 100vmax var(--dt-primary, #1A55E3);
    border-color: var(--dt-primary, #1A55E3);
}
body.mdrrmo-cc-body .cc-dash > section[style*="rgba(8,47,73"] .cc-btn:not([style]) {
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(169, 180, 199, .55);
    color: #F5F7FB;
}
body.mdrrmo-cc-body .cc-dash > section[style*="rgba(8,47,73"] .cc-btn:not([style]):hover { background-color: rgba(255, 255, 255, .16); }

/* ── 17. Intentionally dark panels (tokens restored in 1b) ──────────────── */
/* Tsunami projection banner + in-view forecast panel: opaque navy base under
   their own translucent alarm gradients. */
body.mdrrmo-cc-body .cc-tsunami-banner,
body.mdrrmo-cc-body .cc-fcpanel { background-color: #0B1326; border-radius: var(--dt-radius, 4px); }
body.mdrrmo-cc-body .cc-fcpanel-head { border-bottom-color: var(--cc-border); }
body.mdrrmo-cc-body .cc-fc-guard,
body.mdrrmo-cc-body .cc-fc-scenario-note,
body.mdrrmo-cc-body .cc-fc-brgys-lbl { color: #A9B4C7; }
body.mdrrmo-cc-body .cc-tsunami-banner .cc-muted,
body.mdrrmo-cc-body .cc-fcpanel .cc-muted { color: var(--cc-muted); }

/* Rain alert popup (floating) */
body.mdrrmo-cc-body .cc-rain-popup { background-color: #0B1326; border-radius: var(--dt-radius, 4px); }
body.mdrrmo-cc-body .cc-rain-popup .cc-rain-source { color: #D5DEEC; }
body.mdrrmo-cc-body .cc-rain-popup .cc-rain-mini small { color: #C5CFDD; }
body.mdrrmo-cc-body .cc-rain-popup.danger .cc-rain-source,
body.mdrrmo-cc-body .cc-rain-popup.danger p { color: #FFF1F1; }
body.mdrrmo-cc-body .cc-rain-actions a,
body.mdrrmo-cc-body .cc-rain-actions button { color: #E0F2FE; background: rgba(8, 20, 38, .72); }
body.mdrrmo-cc-body .cc-rain-popup.danger .cc-rain-actions a,
body.mdrrmo-cc-body .cc-rain-popup.danger .cc-rain-actions button { background: rgba(69, 10, 10, .72); border-color: rgba(254, 202, 202, .55); color: #FFFFFF; }

/* Rain action panel (alarm) and the full-screen rain display keep navy */
body.mdrrmo-cc-body .cc-rain-action-panel { background-color: #0B1326; border-radius: var(--dt-radius, 4px); }
body.mdrrmo-cc-body .cc-rain-display { background-color: #020617; }
body.mdrrmo-cc-body .cc-rain-display .cc-rain-live-card { background: linear-gradient(180deg, rgba(15, 23, 42, .92), rgba(8, 16, 34, .92)); }
body.mdrrmo-cc-body .cc-rain-display .cc-rain-live-danger { background: linear-gradient(180deg, rgba(69, 10, 10, .85), rgba(15, 23, 42, .9)); }
body.mdrrmo-cc-body .cc-rain-display .cc-rain-live-label { color: #FBBF24; }

/* Hazard ticker (fixed, dark): solid label fills that carry their label */
body.mdrrmo-cc-body .mdrrmo-wt-label { background: var(--dt-primary, #1A55E3); color: #FFFFFF; }
body.mdrrmo-cc-body .mdrrmo-wt-dot { background: #FFFFFF; }
body.mdrrmo-cc-body .mdrrmo-wt[data-alarm="1"] .mdrrmo-wt-label { background: var(--dt-red, #DC2626); color: #FFFFFF; }
body.mdrrmo-cc-body .mdrrmo-wt[data-alarm="caution"] .mdrrmo-wt-label { background: #FACC15; color: #1A1205; }
body.mdrrmo-cc-body .mdrrmo-wt[data-alarm="caution"] .mdrrmo-wt-dot { background: #1A1205; }

/* Map overlays stay dark over the tiles */
body.mdrrmo-cc-body .haz-legend,
body.mdrrmo-cc-body .haz-switch,
body.mdrrmo-cc-body .risk-tools,
body.mdrrmo-cc-body .risk-search { background-color: rgba(11, 18, 32, .96); }

/* TV monitoring wall: a navy panel on the light page, same accent family */
body.mdrrmo-cc-body #mwRoot {
    --mw-cyan: #8AB4FF;
    --mw-muted: #B4C0D3;
    --mw-line: rgba(138, 180, 255, .26);
    background: var(--mw-bg, #050B18);
    border-radius: var(--dt-radius, 4px);
    box-shadow: 0 0 0 12px var(--mw-bg, #050B18), var(--dt-shadow-2, 0 2px 4px rgba(16, 24, 40, .06));
    color: var(--mw-text, #F8FAFC);
}
body.mdrrmo-cc-body #mwRoot .mw-rail-head h3,
body.mdrrmo-cc-body #mwRoot .mw-bar h2 { color: var(--mw-text, #F8FAFC); }
body.mdrrmo-cc-body #mwRoot .mw-rail-head,
body.mdrrmo-cc-body #mwRoot .mw-rail-head p,
body.mdrrmo-cc-body #mwRoot .mw-rail-head span { color: #D5DEEC; }
body.mdrrmo-cc-body #mwRoot .mw-spot-head { background: linear-gradient(180deg, rgba(3, 9, 20, .96), rgba(3, 9, 20, .82) 72%, rgba(3, 9, 20, 0)); }
body.mdrrmo-cc-body #mwRoot .mw-spot-sub { color: #D5DEEC; }
body.mdrrmo-cc-body #mwRoot .mw-badge { background: rgba(3, 9, 20, .88); }
body.mdrrmo-cc-body #mwRoot .mw-badge.live { background: rgba(4, 36, 22, .9); }
body.mdrrmo-cc-body #mwRoot .mw-badge.warn { background: rgba(45, 28, 4, .9); }
body.mdrrmo-cc-body #mwRoot .mw-badge.alert { background: rgba(60, 10, 12, .9); }
body.mdrrmo-cc-body #mwRoot .mw-stat small,
body.mdrrmo-cc-body #mwRoot .mw-label span { color: #E2E8F0; }
body.mdrrmo-cc-body #mwRoot .mw-label { background: linear-gradient(0deg, rgba(4, 12, 24, .95), rgba(4, 12, 24, .72) 70%, transparent); }

/* ── 18. Small screens: rail drawer + masthead fit 390px ─────────────────── */
@media (max-width: 768px) {
    body.mdrrmo-cc-body .sidebar .ccx-brand { padding: 14px 14px 12px; }
    body.mdrrmo-cc-body #mwRoot { box-shadow: 0 0 0 8px var(--mw-bg, #050B18); }
}

@media (prefers-reduced-motion: reduce) {
    body.mdrrmo-cc-body .sidebar .ccx-link,
    body.mdrrmo-cc-body .cc-mod,
    body.mdrrmo-cc-body .cc-kpi { transition: none; }
}

/* Forecast view: the coastal SOP note and the calm state were inked for dark cards
   (#fee2e2 / #fef9c3 / #cbd5e1 — 1.0 to 1.5:1 on the light card). The washes stay;
   the ink goes dark: SOP 8.4:1, warn 8.2:1, calm 17:1. #ccView-scoped, so the
   tsunami banner (outside #ccView) keeps its own ink. */
body.mdrrmo-cc-body #ccView .cc-fc-sop { color: #7F1D1D; }
body.mdrrmo-cc-body #ccView .cc-fc-sop i { color: #B91C1C; }
body.mdrrmo-cc-body #ccView .cc-fc-warn .cc-fc-sop { color: #713F12; }
body.mdrrmo-cc-body #ccView .cc-fc-warn .cc-fc-sop i { color: #A16207; }
body.mdrrmo-cc-body #ccView .cc-fc-calm { color: var(--dt-text, #14181F); }
body.mdrrmo-cc-body #ccView .cc-fc-calm i { color: #047857; }

@media print {
    body.mdrrmo-cc-body .cc-card,
    body.mdrrmo-cc-body .cc-empty,
    body.mdrrmo-cc-body .cc-gate { box-shadow: none; border-color: #000000; }
}