/* ============================================================================
 * assets/css/mdrrmo/mdrrmo-typhoon.css — Typhoon Command Center (spec §3.2/§3.3)
 * Styles pages/mdrrmo/views/typhoon.php (.ty-root), the site-wide typhoon banner
 * (.ty-banner, rendered above every MDRRMO view) and the rail LIVE badge.
 *
 * Every selector is scoped `body.mdrrmo-cc-body …` because the site theme
 * (assets/css/margosatubig-theme.css) is injected after this file. Colours are the
 * unified theme tokens; every text pair below is WCAG AA on its own:
 *   ink #14181F / muted #333B47 on white & #F0F4FA · cobalt #1A55E3 on white 6.1:1 ·
 *   white on #1A55E3 6.1:1 · white on #DC2626 4.8:1 · #C1121F on white 6.2:1 ·
 *   hero navy #13284E→#0B1830 carries white / #C9D6EA (≥ 9:1).
 * TCWS tiles (number + words, never colour alone): 0 neutral #DCE4F0 + ink ·
 *   1 #1D4ED8 + white 6.7:1 · 2 #FACC15 + ink 11:1 · 3 #F97316 + ink 6.1:1 ·
 *   4 #DC2626 + white 4.8:1 · 5 #7E22CE + white 7.0:1.
 * ==========================================================================*/

body.mdrrmo-cc-body .ty-root,
body.mdrrmo-cc-body .ty-banner {
    --ty-ink: #14181F; --ty-muted: #333B47; --ty-surface: #FFFFFF; --ty-subtle: #F0F4FA;
    --ty-border: #E3E8F0; --ty-control: #7C899D;
    --ty-primary: #1A55E3; --ty-primary-hover: #1648C2; --ty-primary-pressed: #123BA0; --ty-primary-soft: #EDF2FF;
    --ty-red: #DC2626; --ty-red-text: #C1121F; --ty-red-soft: #FDECEC;
    --ty-navy: #13284E; --ty-navy-2: #0B1830; --ty-on-navy: #FFFFFF; --ty-on-navy-muted: #C9D6EA;
    --ty-radius: 10px; --ty-radius-sm: 6px;
}
body.mdrrmo-cc-body .ty-root { color: var(--ty-ink); font-size: 16px; line-height: 1.55; display: grid; gap: 16px; min-width: 0; }
body.mdrrmo-cc-body .ty-root *, body.mdrrmo-cc-body .ty-banner * { box-sizing: border-box; }
body.mdrrmo-cc-body .ty-root [hidden] { display: none !important; }
body.mdrrmo-cc-body .ty-root p { margin: 0; }
body.mdrrmo-cc-body .ty-root h2, body.mdrrmo-cc-body .ty-root h3, body.mdrrmo-cc-body .ty-root h4, body.mdrrmo-cc-body .ty-root h5 { margin: 0; color: inherit; line-height: 1.25; }
body.mdrrmo-cc-body .ty-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.mdrrmo-cc-body .ty-root :focus-visible { outline: 3px solid var(--ty-primary); outline-offset: 2px; }
body.mdrrmo-cc-body .ty-root .ty-link { color: var(--ty-primary); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
body.mdrrmo-cc-body .ty-root .ty-link:hover { color: var(--ty-primary-pressed); }
body.mdrrmo-cc-body .ty-root .ty-prose { color: var(--ty-ink); max-width: 75ch; }
body.mdrrmo-cc-body .ty-root .ty-help { color: var(--ty-muted); font-size: 14px; margin-top: 4px; }
body.mdrrmo-cc-body .ty-root .ty-list { margin: 8px 0 0; padding-left: 1.25em; }
body.mdrrmo-cc-body .ty-root .ty-list li + li { margin-top: 4px; }

/* ── Buttons (≥44px targets) ── */
body.mdrrmo-cc-body .ty-root .ty-btn, body.mdrrmo-cc-body .ty-banner .ty-banner__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px;
    border-radius: 8px; border: 1px solid transparent; font: 600 15px/1.2 inherit; font-family: inherit; text-decoration: none;
    cursor: pointer; white-space: nowrap; transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
body.mdrrmo-cc-body .ty-root .ty-btn--sm { min-height: 44px; padding: 8px 12px; font-size: 14px; }
body.mdrrmo-cc-body .ty-root .ty-btn--primary { background: var(--ty-primary); border-color: var(--ty-primary); color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-btn--primary:hover { background: var(--ty-primary-hover); border-color: var(--ty-primary-hover); color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-btn--primary:active { background: var(--ty-primary-pressed); }
body.mdrrmo-cc-body .ty-root .ty-btn--secondary { background: #FFFFFF; border-color: var(--ty-primary); color: var(--ty-primary); }
body.mdrrmo-cc-body .ty-root .ty-btn--secondary:hover { background: var(--ty-primary-soft); color: var(--ty-primary-pressed); }
body.mdrrmo-cc-body .ty-root .ty-btn--ghost { background: #FFFFFF; border-color: var(--ty-control); color: var(--ty-ink); }
body.mdrrmo-cc-body .ty-root .ty-btn--ghost:hover { background: var(--ty-subtle); }
body.mdrrmo-cc-body .ty-root .ty-btn--danger { background: var(--ty-red); border-color: var(--ty-red); color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-btn--danger:hover { background: #B91C1C; border-color: #B91C1C; }
body.mdrrmo-cc-body .ty-root .ty-btn--danger-outline { background: #FFFFFF; border-color: var(--ty-red-text); color: var(--ty-red-text); }
body.mdrrmo-cc-body .ty-root .ty-btn--danger-outline:hover { background: var(--ty-red-soft); }
body.mdrrmo-cc-body .ty-root .ty-btn--ondark { background: #FFFFFF; border-color: #FFFFFF; color: var(--ty-navy); }
body.mdrrmo-cc-body .ty-root .ty-btn--ondark:hover { background: #DCE4F0; border-color: #DCE4F0; color: var(--ty-navy-2); }
body.mdrrmo-cc-body .ty-root .ty-btn[disabled], body.mdrrmo-cc-body .ty-root .ty-btn[aria-busy="true"] { background: #E3E8F0; border-color: #C3CCD9; color: var(--ty-muted); cursor: progress; }

/* ── Chips / badges / signal chips ── */
body.mdrrmo-cc-body .ty-root .ty-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; font-size: 13.5px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
body.mdrrmo-cc-body .ty-root .ty-chip--ok { background: #E7F6EE; color: #0B5D35; border-color: #9FD4B8; }
body.mdrrmo-cc-body .ty-root .ty-chip--warn { background: #FFF4D6; color: #7A4100; border-color: #E9C46A; }
body.mdrrmo-cc-body .ty-root .ty-chip--danger { background: var(--ty-red-soft); color: var(--ty-red-text); border-color: #F2A7A7; }
body.mdrrmo-cc-body .ty-root .ty-chip--info { background: var(--ty-primary-soft); color: var(--ty-primary-pressed); border-color: #B7C9F5; }
body.mdrrmo-cc-body .ty-root .ty-chip--muted { background: var(--ty-subtle); color: var(--ty-muted); border-color: #C9D2DF; }
body.mdrrmo-cc-body .ty-root .ty-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body.mdrrmo-cc-body .ty-root .ty-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 13.5px; font-weight: 700; line-height: 1.3; border: 1px solid transparent; }
body.mdrrmo-cc-body .ty-root .ty-badge--auth { background: #087443; color: #FFFFFF; border-color: #0B5D35; }
body.mdrrmo-cc-body .ty-root .ty-badge--bench { background: #FDE68A; color: var(--ty-ink); border-color: #D9A406; }
body.mdrrmo-cc-body .ty-root .ty-badge--unlogged { background: #FEF3C7; color: var(--ty-ink); border-color: #D9A406; border-style: dashed; }
body.mdrrmo-cc-body .ty-root .ty-badge--manual { background: #E6ECF5; color: var(--ty-ink); border-color: #9AA7BA; }
body.mdrrmo-cc-body .ty-root .ty-sig { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 6px; font-size: 13.5px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
body.mdrrmo-cc-body .ty-root .ty-sig--sig0, body.mdrrmo-cc-body .ty-root .ty-sig--sigx { background: #DCE4F0; color: var(--ty-ink); border-color: #9AA7BA; }
body.mdrrmo-cc-body .ty-root .ty-sig--sig1 { background: #1D4ED8; color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-sig--sig2 { background: #FACC15; color: var(--ty-ink); border-color: #A16207; }
body.mdrrmo-cc-body .ty-root .ty-sig--sig3 { background: #F97316; color: var(--ty-ink); border-color: #C2410C; }
body.mdrrmo-cc-body .ty-root .ty-sig--sig4 { background: #DC2626; color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-sig--sig5 { background: #7E22CE; color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-eoc { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
body.mdrrmo-cc-body .ty-root .ty-eoc--white { background: #FFFFFF; color: var(--ty-ink); border-color: var(--ty-control); }
body.mdrrmo-cc-body .ty-root .ty-eoc--blue { background: #1D4ED8; color: #FFFFFF; border-color: #1D4ED8; }
body.mdrrmo-cc-body .ty-root .ty-eoc--red { background: #DC2626; color: #FFFFFF; border-color: #DC2626; }

/* ── Situation hero (dark navy, consistent with .cc-masthead) ── */
body.mdrrmo-cc-body .ty-root .ty-hero {
    background: linear-gradient(135deg, var(--ty-navy), var(--ty-navy-2)); color: var(--ty-on-navy);
    border: 1px solid rgba(148, 170, 210, .28); border-left: 6px solid #9AA7BA; border-radius: 14px;
    padding: 18px 22px 20px; display: grid; gap: 12px; min-width: 0;
}
body.mdrrmo-cc-body .ty-root .ty-hero--sig1 { border-left-color: #3B82F6; }
body.mdrrmo-cc-body .ty-root .ty-hero--sig2 { border-left-color: #FACC15; }
body.mdrrmo-cc-body .ty-root .ty-hero--sig3 { border-left-color: #F97316; }
body.mdrrmo-cc-body .ty-root .ty-hero--sig4 { border-left-color: #EF4444; }
body.mdrrmo-cc-body .ty-root .ty-hero--sig5 { border-left-color: #A855F7; }
body.mdrrmo-cc-body .ty-root .ty-hero :focus-visible { outline-color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-hero__bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
body.mdrrmo-cc-body .ty-root .ty-hero__eyebrow { color: var(--ty-on-navy-muted); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
body.mdrrmo-cc-body .ty-root .ty-hero__eyebrow i { color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.mdrrmo-cc-body .ty-root .ty-picker__label { color: var(--ty-on-navy); font-size: 14px; font-weight: 600; }
body.mdrrmo-cc-body .ty-root .ty-picker__select { min-width: 0; max-width: 100%; width: auto; }
body.mdrrmo-cc-body .ty-root .ty-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.mdrrmo-cc-body .ty-root .ty-hchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .4); color: #FFFFFF; font-size: 14px; font-weight: 600; }
body.mdrrmo-cc-body .ty-root .ty-hero .ty-eoc--blue, body.mdrrmo-cc-body .ty-root .ty-hero .ty-eoc--red { border-color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-hero__title { font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; color: #FFFFFF; letter-spacing: -.01em; overflow-wrap: anywhere; }
body.mdrrmo-cc-body .ty-root .ty-hero__lede { color: var(--ty-on-navy-muted); font-size: 15.5px; }
body.mdrrmo-cc-body .ty-root .ty-hero__body { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: 16px; align-items: stretch; }
body.mdrrmo-cc-body .ty-root .ty-hero__empty { display: grid; gap: 8px; align-content: center; color: var(--ty-on-navy-muted); }
body.mdrrmo-cc-body .ty-root .ty-link--ondark { color: #BFD4FF; }
body.mdrrmo-cc-body .ty-root .ty-link--ondark:hover { color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-hero__foot { display: grid; gap: 8px; }
body.mdrrmo-cc-body .ty-root .ty-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
body.mdrrmo-cc-body .ty-root .ty-hero__guard, body.mdrrmo-cc-body .ty-root .ty-hero__checked { color: var(--ty-on-navy-muted); font-size: 14.5px; }
body.mdrrmo-cc-body .ty-root .ty-hero__guard { color: #FFFFFF; font-weight: 600; }
body.mdrrmo-cc-body .ty-root .ty-hero__cached { color: var(--ty-on-navy-muted); }
body.mdrrmo-cc-body .ty-root .ty-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
body.mdrrmo-cc-body .ty-root .ty-hero__cta--text { color: var(--ty-on-navy); font-size: 15px; }

/* Signal tile */
body.mdrrmo-cc-body .ty-root .ty-signal { border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; align-content: start; border: 2px solid rgba(255, 255, 255, .7); background: #DCE4F0; color: var(--ty-ink); }
body.mdrrmo-cc-body .ty-root .ty-signal--sig1 { background: #1D4ED8; color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-signal--sig2 { background: #FACC15; color: var(--ty-ink); }
body.mdrrmo-cc-body .ty-root .ty-signal--sig3 { background: #F97316; color: var(--ty-ink); }
body.mdrrmo-cc-body .ty-root .ty-signal--sig4 { background: #DC2626; color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-signal--sig5 { background: #7E22CE; color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-signal__kicker { font-size: 13.5px; font-weight: 700; }
body.mdrrmo-cc-body .ty-root .ty-signal__value { display: flex; align-items: center; gap: 12px; }
body.mdrrmo-cc-body .ty-root .ty-signal__num { font: 800 56px/1 "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
body.mdrrmo-cc-body .ty-root .ty-signal__label { font-size: 21px; font-weight: 800; line-height: 1.2; display: grid; }
body.mdrrmo-cc-body .ty-root .ty-signal__label--calm { font-size: 22px; }
body.mdrrmo-cc-body .ty-root .ty-signal__where { font-size: 15px; font-weight: 700; }
body.mdrrmo-cc-body .ty-root .ty-signal__winds { font-size: 15px; font-weight: 700; }
body.mdrrmo-cc-body .ty-root .ty-signal__threat, body.mdrrmo-cc-body .ty-root .ty-signal__note { font-size: 14px; }
body.mdrrmo-cc-body .ty-root .ty-signal__note { font-weight: 600; overflow-wrap: anywhere; }

/* Facts grid */
body.mdrrmo-cc-body .ty-root .ty-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; min-width: 0; }
body.mdrrmo-cc-body .ty-root .ty-fact { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; padding: 10px 12px; min-width: 0; }
body.mdrrmo-cc-body .ty-root .ty-fact dt { color: var(--ty-on-navy-muted); font-size: 13.5px; font-weight: 600; }
body.mdrrmo-cc-body .ty-root .ty-fact dd { margin: 2px 0 0; color: #FFFFFF; font-size: 18px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
body.mdrrmo-cc-body .ty-root .ty-fact__sub { display: block; margin-top: 2px; color: var(--ty-on-navy-muted); font-size: 13.5px; font-weight: 500; }

/* ── Cards, alerts, notices ── */
body.mdrrmo-cc-body .ty-root .ty-card { background: var(--ty-surface); color: var(--ty-ink); border: 1px solid var(--ty-border); border-radius: var(--ty-radius); padding: 16px 18px; box-shadow: 0 1px 2px rgba(20, 24, 31, .06); min-width: 0; }
body.mdrrmo-cc-body .ty-root .ty-card--flat { box-shadow: none; display: grid; gap: 10px; }
body.mdrrmo-cc-body .ty-root .ty-card__head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
body.mdrrmo-cc-body .ty-root .ty-card__title { font-size: 18px; font-weight: 700; color: var(--ty-ink); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.mdrrmo-cc-body .ty-root .ty-card__title i { color: var(--ty-primary); }
body.mdrrmo-cc-body .ty-root .ty-card__meta { color: var(--ty-muted); font-size: 14px; }
body.mdrrmo-cc-body .ty-root .ty-alert, body.mdrrmo-cc-body .ty-root .ty-notice, body.mdrrmo-cc-body .ty-root .ty-empty { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--ty-radius); padding: 12px 14px; font-size: 15px; }
body.mdrrmo-cc-body .ty-root .ty-alert { background: #FFF4D6; border: 1px solid #E9C46A; color: var(--ty-ink); }
body.mdrrmo-cc-body .ty-root .ty-alert i { color: #7A4100; margin-top: 3px; }
body.mdrrmo-cc-body .ty-root .ty-notice { background: var(--ty-primary-soft); border: 1px solid #B7C9F5; color: var(--ty-ink); }
body.mdrrmo-cc-body .ty-root .ty-notice i { color: var(--ty-primary-pressed); margin-top: 3px; }
body.mdrrmo-cc-body .ty-root .ty-empty { background: var(--ty-subtle); border: 1px dashed #9AA7BA; color: var(--ty-muted); }
body.mdrrmo-cc-body .ty-root .ty-empty i { color: var(--ty-muted); margin-top: 3px; }
body.mdrrmo-cc-body .ty-root .ty-grid2 { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: start; }
body.mdrrmo-cc-body .ty-root .ty-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
body.mdrrmo-cc-body .ty-root .ty-col, body.mdrrmo-cc-body .ty-root .ty-stack { display: grid; gap: 16px; min-width: 0; }
body.mdrrmo-cc-body .ty-root .ty-dl { margin: 0; display: grid; gap: 8px; }
body.mdrrmo-cc-body .ty-root .ty-dl--grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; }
body.mdrrmo-cc-body .ty-root .ty-dl__wide { grid-column: 1 / -1; }
body.mdrrmo-cc-body .ty-root .ty-dl dt { color: var(--ty-muted); font-size: 14px; font-weight: 600; }
body.mdrrmo-cc-body .ty-root .ty-dl dd { margin: 2px 0 0; color: var(--ty-ink); overflow-wrap: anywhere; }
body.mdrrmo-cc-body .ty-root .ty-dl__sub { display: block; color: var(--ty-muted); font-size: 14px; margin-top: 2px; }
body.mdrrmo-cc-body .ty-root .ty-subtitle { font-size: 16px; font-weight: 700; margin: 4px 0 8px; }

/* ── Track map + live panel ── */
body.mdrrmo-cc-body .ty-root .ty-map { height: 360px; border-radius: 8px; overflow: hidden; border: 1px solid var(--ty-border); background: #DCE4F0; }
body.mdrrmo-cc-body .ty-root .ty-map__status { color: var(--ty-muted); font-size: 14px; margin-top: 8px; }
body.mdrrmo-cc-body .ty-root .ty-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ty-ink); }
body.mdrrmo-cc-body .ty-root .ty-legend li { display: inline-flex; align-items: center; gap: 6px; }
body.mdrrmo-cc-body .ty-root .ty-legend__sw { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; font-size: 11px; font-weight: 800; }
body.mdrrmo-cc-body .ty-root .ty-legend__sw--par { border: 2px dashed #123BA0; border-radius: 3px; }
body.mdrrmo-cc-body .ty-root .ty-legend__sw--track { background: #123BA0; color: #FFFFFF; border-radius: 50%; }
body.mdrrmo-cc-body .ty-root .ty-legend__sw--live { background: #FFFFFF; border: 3px dashed #C1121F; border-radius: 50%; }
body.mdrrmo-cc-body .ty-root .ty-legend__sw--ref { background: #C1121F; border: 3px solid #FFFFFF; border-radius: 50%; box-shadow: 0 0 0 1px #C1121F; }
body.mdrrmo-cc-body .ty-root .ty-legend__sw--gdacs { background: #FDE68A; border: 2px solid #7A4100; transform: rotate(45deg); width: 14px; height: 14px; }
body.mdrrmo-cc-body .ty-root .ty-maplist { margin-top: 10px; font-size: 14.5px; }
body.mdrrmo-cc-body .ty-root .ty-maplist summary, body.mdrrmo-cc-body .ty-root .ty-disclosure > summary {
    cursor: pointer; font-weight: 700; color: var(--ty-primary); min-height: 44px; display: flex; align-items: center; gap: 8px; list-style-position: inside;
}
body.mdrrmo-cc-body .ty-root .ty-maplist__items { margin: 6px 0 0; padding-left: 1.4em; color: var(--ty-ink); }
body.mdrrmo-cc-body .ty-root .ty-live { display: grid; gap: 10px; align-content: start; }
body.mdrrmo-cc-body .ty-root .ty-live .ty-card__head { margin-bottom: 0; }
body.mdrrmo-cc-body .ty-root .ty-live__status { color: var(--ty-muted); font-size: 14px; }
body.mdrrmo-cc-body .ty-root .ty-live__body { display: grid; gap: 10px; }
body.mdrrmo-cc-body .ty-root .ty-live__item { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--ty-border); border-radius: 8px; background: var(--ty-subtle); }
body.mdrrmo-cc-body .ty-root .ty-live__head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body.mdrrmo-cc-body .ty-root .ty-live__name { font-weight: 800; font-size: 16.5px; }
body.mdrrmo-cc-body .ty-root .ty-live__meta, body.mdrrmo-cc-body .ty-root .ty-live__none { font-size: 14.5px; color: var(--ty-ink); overflow-wrap: anywhere; }
body.mdrrmo-cc-body .ty-root .ty-live__note { font-size: 14px; color: #7A4100; font-weight: 600; }
body.mdrrmo-cc-body .ty-root .ty-live__sub { margin-top: 2px; }
body.mdrrmo-cc-body .ty-root .ty-live__list { margin: 0; padding-left: 1.2em; font-size: 14.5px; }
/* Several cyclones at once: every storm PAGASA tracks is listed, never only the nearest. */
body.mdrrmo-cc-body .ty-root .ty-live__sub--others { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--ty-ink); }
body.mdrrmo-cc-body .ty-root .ty-live__others { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.mdrrmo-cc-body .ty-root .ty-live__other { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--ty-border); border-left: 4px solid #B45309; border-radius: 8px; background: var(--ty-subtle); }
body.mdrrmo-cc-body .ty-root .ty-legend__sw--other { background: #FFFFFF; border: 3px dashed #B45309; border-radius: 50%; }
body.mdrrmo-cc-body .ty-root .ty-hero__also { margin: 8px 0 0; color: var(--ty-on-navy-muted); font-size: 14.5px; }
body.mdrrmo-cc-body .ty-root .ty-hero__also strong { color: var(--ty-on-navy); }
/* Stale PAGASA data is said out loud, never shown as current. */
body.mdrrmo-cc-body .ty-root .ty-hero__stale { margin: 10px 0 0; padding: 8px 12px; border: 1px solid #D9A406; border-radius: 8px; background: #FEF3C7; color: var(--ty-ink); font-size: 14.5px; font-weight: 600; }
body.mdrrmo-cc-body .ty-root .ty-hero__stale .fas { color: #7A4100; }
/* "PAGASA has a newer update" notice (filled by mdrrmo-typhoon.js). */
body.mdrrmo-cc-body .ty-root .ty-update { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; padding: 10px 12px; border-left: 4px solid var(--ty-primary); border-radius: 8px; background: #FFFFFF; color: var(--ty-ink); font-size: 14.5px; font-weight: 600; }
body.mdrrmo-cc-body .ty-root .ty-update[hidden] { display: none; }
body.mdrrmo-cc-body .ty-root .ty-update .fa-bell { color: var(--ty-primary); }
body.mdrrmo-cc-body .ty-root .ty-update__auto { font-weight: 400; color: var(--ty-muted); }
body.mdrrmo-cc-body .ty-root .ty-live__foot { font-size: 14px; }
/* Leaflet artefacts drawn by mdrrmo-typhoon.js */
body.mdrrmo-cc-body .ty-root .ty-tpt { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #123BA0; color: #FFFFFF; border: 2px solid #FFFFFF; font: 800 11px/1 "Segoe UI", system-ui, sans-serif; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
body.mdrrmo-cc-body .ty-root .ty-tpt--latest { width: 30px; height: 30px; background: #C1121F; font-size: 12px; }
body.mdrrmo-cc-body .ty-root .leaflet-div-icon.ty-tpt-icon { background: none; border: 0; }
body.mdrrmo-cc-body .ty-root .ty-gd { display: block; width: 14px; height: 14px; margin: 1px; background: #FDE68A; border: 2px solid #7A4100; transform: rotate(45deg); }
body.mdrrmo-cc-body .ty-root .ty-help.ty-help--error { color: var(--ty-red-text); font-weight: 600; }
body.mdrrmo-cc-body .ty-root .leaflet-tooltip.ty-tip { color: var(--ty-ink); font-weight: 700; font-size: 13px; }
body.mdrrmo-cc-body .ty-root .leaflet-popup-content { color: var(--ty-ink); font-size: 14px; }

/* ── Readiness strip ── */
body.mdrrmo-cc-body .ty-root .ty-ready { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
body.mdrrmo-cc-body .ty-root .ty-kpi { background: var(--ty-surface); border: 1px solid var(--ty-border); border-radius: var(--ty-radius); padding: 12px 14px; display: grid; gap: 4px; align-content: start; min-width: 0; }
body.mdrrmo-cc-body .ty-root .ty-kpi__label { color: var(--ty-muted); font-size: 14px; font-weight: 600; }
body.mdrrmo-cc-body .ty-root .ty-kpi__label i { color: var(--ty-primary); }
body.mdrrmo-cc-body .ty-root .ty-kpi__value { font-size: clamp(22px, 1.9vw, 28px); font-weight: 800; color: var(--ty-ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
body.mdrrmo-cc-body .ty-root .ty-kpi__unit { font-size: 15px; font-weight: 600; color: var(--ty-muted); }
body.mdrrmo-cc-body .ty-root .ty-kpi__sub { color: var(--ty-muted); font-size: 13.5px; }
body.mdrrmo-cc-body .ty-root .ty-progress { height: 10px; border-radius: 999px; background: #E3E8F0; border: 1px solid #9AA7BA; overflow: hidden; }
body.mdrrmo-cc-body .ty-root .ty-progress > span { display: block; height: 100%; background: var(--ty-primary); }
body.mdrrmo-cc-body .ty-root .ty-progress--lg { height: 14px; }
body.mdrrmo-cc-body .ty-root .ty-progress-row { display: grid; gap: 6px; margin-bottom: 12px; }

/* ── Tabs (no-JS: TOC + stacked panels; JS adds .ty-js) ── */
body.mdrrmo-cc-body .ty-root .ty-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
body.mdrrmo-cc-body .ty-root .ty-toc a { display: inline-flex; align-items: center; min-height: 44px; }
body.mdrrmo-cc-body .ty-root.ty-js .ty-toc, body.mdrrmo-cc-body .ty-root:not(.ty-js) .ty-tabs,
body.mdrrmo-cc-body .ty-root:not(.ty-js) [data-ty-live-refresh], body.mdrrmo-cc-body .ty-root:not(.ty-js) [data-ty-toggle],
body.mdrrmo-cc-body .ty-root:not(.ty-js) [data-ty-print] { display: none; }
body.mdrrmo-cc-body .ty-root .ty-tabs { display: flex; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; border-bottom: 1px solid #C9D2DF; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
body.mdrrmo-cc-body .ty-root .ty-tab {
    flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 16px; margin-bottom: -1px;
    background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0;
    color: var(--ty-muted); font: 600 15.5px/1.2 inherit; font-family: inherit; cursor: pointer; white-space: nowrap;
}
body.mdrrmo-cc-body .ty-root .ty-tab:hover { background: var(--ty-subtle); color: var(--ty-ink); }
body.mdrrmo-cc-body .ty-root .ty-tab[aria-selected="true"] { color: var(--ty-primary); border-bottom-color: var(--ty-primary); background: #FFFFFF; font-weight: 700; }
body.mdrrmo-cc-body .ty-root .ty-tab:focus-visible { outline-offset: -3px; }
body.mdrrmo-cc-body .ty-root .ty-tab__count { min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--ty-subtle); color: var(--ty-ink); border: 1px solid #C9D2DF; font-size: 12.5px; font-weight: 700; text-align: center; }
body.mdrrmo-cc-body .ty-root .ty-tab[aria-selected="true"] .ty-tab__count { background: var(--ty-primary); border-color: var(--ty-primary); color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-panel { background: var(--ty-surface); border: 1px solid var(--ty-border); border-radius: var(--ty-radius); padding: 16px 18px 20px; min-width: 0; display: grid; gap: 14px; align-content: start; }
body.mdrrmo-cc-body .ty-root.ty-js .ty-panel { border-top-left-radius: 0; }
body.mdrrmo-cc-body .ty-root .ty-panel:focus-visible { outline-offset: -3px; }
body.mdrrmo-cc-body .ty-root .ty-panel__head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
body.mdrrmo-cc-body .ty-root .ty-panel__title { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
body.mdrrmo-cc-body .ty-root .ty-panel__title i { color: var(--ty-primary); }
body.mdrrmo-cc-body .ty-root .ty-panel__tools { display: flex; flex-wrap: wrap; gap: 8px; }
body.mdrrmo-cc-body .ty-root .ty-print-head { display: none; }

/* ── Forms ── */
body.mdrrmo-cc-body .ty-root .ty-form { display: grid; gap: 12px; margin: 0; min-width: 0; }
body.mdrrmo-cc-body .ty-root .ty-form__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
body.mdrrmo-cc-body .ty-root .ty-form__grid--tight { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
body.mdrrmo-cc-body .ty-root .ty-field { display: grid; gap: 4px; align-content: start; min-width: 0; }
body.mdrrmo-cc-body .ty-root .ty-field--wide { grid-column: 1 / -1; }
body.mdrrmo-cc-body .ty-root .ty-label { font-size: 15px; font-weight: 600; color: var(--ty-ink); padding: 0; }
body.mdrrmo-cc-body .ty-root .ty-req { color: var(--ty-red-text); font-weight: 800; }
body.mdrrmo-cc-body .ty-root .ty-input {
    width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--ty-control); border-radius: var(--ty-radius-sm);
    background: #FFFFFF; color: var(--ty-ink); font: 400 16px/1.4 inherit; font-family: inherit; box-shadow: none; margin: 0;
}
body.mdrrmo-cc-body .ty-root textarea.ty-input { resize: vertical; min-height: 64px; }
body.mdrrmo-cc-body .ty-root select.ty-input option { background: #FFFFFF; color: var(--ty-ink); }
body.mdrrmo-cc-body .ty-root .ty-input::placeholder { color: #5A6576; opacity: 1; }
body.mdrrmo-cc-body .ty-root .ty-input:focus-visible { outline: 3px solid var(--ty-primary); outline-offset: 1px; border-color: var(--ty-primary); }
body.mdrrmo-cc-body .ty-root .ty-input:user-invalid { border-color: var(--ty-red-text); box-shadow: inset 0 0 0 1px var(--ty-red-text); }
body.mdrrmo-cc-body .ty-root .ty-fieldset { border: 1px solid var(--ty-border); border-radius: 8px; padding: 8px 12px 12px; margin: 0; min-width: 0; }
body.mdrrmo-cc-body .ty-root .ty-fieldset > legend { padding: 0 6px; }
body.mdrrmo-cc-body .ty-root .ty-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px; }
body.mdrrmo-cc-body .ty-root .ty-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; border-radius: 6px; color: var(--ty-ink); font-size: 15px; cursor: pointer; }
body.mdrrmo-cc-body .ty-root .ty-check:hover { background: var(--ty-subtle); }
body.mdrrmo-cc-body .ty-root .ty-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ty-primary); }
body.mdrrmo-cc-body .ty-root .ty-form__actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
body.mdrrmo-cc-body .ty-root .ty-form__note { color: var(--ty-muted); font-size: 14px; }
body.mdrrmo-cc-body .ty-root .ty-form--inline { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
body.mdrrmo-cc-body .ty-root .ty-form--row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
body.mdrrmo-cc-body .ty-root .ty-form--row .ty-field { flex: 0 1 190px; }
body.mdrrmo-cc-body .ty-root .ty-form--row .ty-field--grow { flex: 1 1 220px; }
body.mdrrmo-cc-body .ty-root .ty-form--void { border-top: 1px dashed #F2A7A7; padding-top: 12px; margin-top: 4px; }
body.mdrrmo-cc-body .ty-root .ty-import { display: grid; gap: 4px; padding: 10px 12px; border-radius: 8px; background: var(--ty-primary-soft); border: 1px solid #B7C9F5; }
body.mdrrmo-cc-body .ty-root .ty-disclosure { display: grid; gap: 10px; }
body.mdrrmo-cc-body .ty-root .ty-disclosure--card > summary { font-size: 17px; }
body.mdrrmo-cc-body .ty-root .ty-start { display: grid; gap: 10px; }

/* ── Tables (scroll inside their own wrap, never the page) ── */
body.mdrrmo-cc-body .ty-root .ty-table-wrap { overflow-x: auto; border: 1px solid var(--ty-border); border-radius: 8px; background: #FFFFFF; max-width: 100%; container-type: inline-size; }
body.mdrrmo-cc-body .ty-root .ty-table { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--ty-ink); }
body.mdrrmo-cc-body .ty-root .ty-table th, body.mdrrmo-cc-body .ty-root .ty-table td { padding: 10px 12px; border-bottom: 1px solid var(--ty-border); text-align: left; vertical-align: top; color: var(--ty-ink); }
body.mdrrmo-cc-body .ty-root .ty-table thead th { background: var(--ty-subtle); font-size: 14px; font-weight: 700; white-space: nowrap; border-bottom-color: #C9D2DF; }
body.mdrrmo-cc-body .ty-root .ty-table tbody th { font-weight: 600; }
body.mdrrmo-cc-body .ty-root .ty-table tfoot th, body.mdrrmo-cc-body .ty-root .ty-table tfoot td { background: var(--ty-subtle); font-weight: 800; border-top: 2px solid #9AA7BA; border-bottom: 0; }
body.mdrrmo-cc-body .ty-root .ty-table--compact { min-width: 0; }
body.mdrrmo-cc-body .ty-root .ty-table:not(.ty-table--compact) { min-width: 760px; }
body.mdrrmo-cc-body .ty-root .ty-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.mdrrmo-cc-body .ty-root .ty-nowrap { white-space: nowrap; }
body.mdrrmo-cc-body .ty-root .ty-wrap { min-width: 160px; overflow-wrap: anywhere; }
body.mdrrmo-cc-body .ty-root .ty-cell-sub { display: block; color: var(--ty-muted); font-size: 13.5px; margin-top: 2px; }
body.mdrrmo-cc-body .ty-root .ty-cell-actions { white-space: nowrap; }
body.mdrrmo-cc-body .ty-root .ty-manage-row > td { background: #F7F9FD; padding: 0; }
body.mdrrmo-cc-body .ty-root .ty-manage { position: sticky; left: 0; max-width: calc(100vw - 40px); padding: 14px 16px 16px; display: grid; gap: 12px; }
@supports (width: 1cqw) { body.mdrrmo-cc-body .ty-root .ty-manage { width: 100cqw; max-width: 100cqw; } }
body.mdrrmo-cc-body .ty-root .ty-manage__title { font-size: 16px; font-weight: 700; }
body.mdrrmo-cc-body .ty-root .ty-manage__sub { font-size: 15px; font-weight: 700; color: var(--ty-red-text); }

/* ── PDRA / checklist ── */
body.mdrrmo-cc-body .ty-root .ty-pdra__head { display: grid; gap: 6px; }
body.mdrrmo-cc-body .ty-root .ty-phase { display: grid; gap: 8px; }
body.mdrrmo-cc-body .ty-root .ty-phase + .ty-phase { margin-top: 10px; }
body.mdrrmo-cc-body .ty-root .ty-phase__title { font-size: 17px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
body.mdrrmo-cc-body .ty-root .ty-phase__count { font-size: 14px; font-weight: 600; color: var(--ty-muted); }
body.mdrrmo-cc-body .ty-root .ty-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.mdrrmo-cc-body .ty-root .ty-citem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: end; padding: 10px 12px; border: 1px solid var(--ty-border); border-left: 4px solid #9AA7BA; border-radius: 8px; background: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-citem--done { border-left-color: #087443; }
body.mdrrmo-cc-body .ty-root .ty-citem--in_progress { border-left-color: #B45309; }
body.mdrrmo-cc-body .ty-root .ty-citem__main { display: grid; gap: 3px; justify-items: start; min-width: 0; }
body.mdrrmo-cc-body .ty-root .ty-citem__label { font-weight: 600; overflow-wrap: anywhere; }
body.mdrrmo-cc-body .ty-root .ty-citem__meta { color: var(--ty-muted); font-size: 14px; }
body.mdrrmo-cc-body .ty-root .ty-citem .ty-form--row { justify-content: flex-end; }

/* ── Signals guide ── */
body.mdrrmo-cc-body .ty-root .ty-sigguide { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
body.mdrrmo-cc-body .ty-root .ty-sigcard { border: 1px solid var(--ty-border); border-radius: var(--ty-radius); overflow: hidden; background: #FFFFFF; display: grid; align-content: start; }
body.mdrrmo-cc-body .ty-root .ty-sigcard__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
body.mdrrmo-cc-body .ty-root .ty-sigcard--sig1 .ty-sigcard__head { background: #1D4ED8; color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-sigcard--sig2 .ty-sigcard__head { background: #FACC15; color: var(--ty-ink); }
body.mdrrmo-cc-body .ty-root .ty-sigcard--sig3 .ty-sigcard__head { background: #F97316; color: var(--ty-ink); }
body.mdrrmo-cc-body .ty-root .ty-sigcard--sig4 .ty-sigcard__head { background: #DC2626; color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-sigcard--sig5 .ty-sigcard__head { background: #7E22CE; color: #FFFFFF; }
body.mdrrmo-cc-body .ty-root .ty-sigcard__num { font: 800 32px/1 "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; }
body.mdrrmo-cc-body .ty-root .ty-sigcard__label { font-size: 17px; font-weight: 800; }
body.mdrrmo-cc-body .ty-root .ty-sigcard__body { padding: 10px 14px 14px; display: grid; gap: 4px; font-size: 15px; }
body.mdrrmo-cc-body .ty-root .ty-eoclist { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
body.mdrrmo-cc-body .ty-root .ty-eoclist li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── Site-wide typhoon banner (markup: spec §3.2, rendered above every MDRRMO view) ── */
body.mdrrmo-cc-body .ty-banner {
    --ty-b-bg: #EDF2FF; --ty-b-ink: #14181F; --ty-b-edge: #1A55E3; --ty-b-cta-bg: #1A55E3; --ty-b-cta-ink: #FFFFFF; --ty-b-ring: #1A55E3;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; padding: 12px 16px;
    background: var(--ty-b-bg); color: var(--ty-b-ink); border: 1px solid var(--ty-b-edge); border-left-width: 6px; border-radius: 12px;
    font-size: 15px; line-height: 1.4;
}
body.mdrrmo-cc-body .ty-banner--sig1 { --ty-b-bg: #1D4ED8; --ty-b-ink: #FFFFFF; --ty-b-edge: #123BA0; --ty-b-cta-bg: #FFFFFF; --ty-b-cta-ink: #123BA0; --ty-b-ring: #FFFFFF; }
body.mdrrmo-cc-body .ty-banner--sig2 { --ty-b-bg: #FACC15; --ty-b-ink: #14181F; --ty-b-edge: #A16207; --ty-b-cta-bg: #14181F; --ty-b-cta-ink: #FFFFFF; --ty-b-ring: #14181F; }
body.mdrrmo-cc-body .ty-banner--sig3 { --ty-b-bg: #F97316; --ty-b-ink: #14181F; --ty-b-edge: #9A3412; --ty-b-cta-bg: #14181F; --ty-b-cta-ink: #FFFFFF; --ty-b-ring: #14181F; }
body.mdrrmo-cc-body .ty-banner--sig4 { --ty-b-bg: #DC2626; --ty-b-ink: #FFFFFF; --ty-b-edge: #991B1B; --ty-b-cta-bg: #FFFFFF; --ty-b-cta-ink: #C1121F; --ty-b-ring: #FFFFFF; }
body.mdrrmo-cc-body .ty-banner--sig5 { --ty-b-bg: #7E22CE; --ty-b-ink: #FFFFFF; --ty-b-edge: #581C87; --ty-b-cta-bg: #FFFFFF; --ty-b-cta-ink: #6B21A8; --ty-b-ring: #FFFFFF; }
body.mdrrmo-cc-body .ty-banner .ty-banner__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ty-b-cta-bg); color: var(--ty-b-cta-ink); font-size: 20px; }
body.mdrrmo-cc-body .ty-banner .ty-banner__text { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
body.mdrrmo-cc-body .ty-banner .ty-banner__title { color: var(--ty-b-ink); font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
body.mdrrmo-cc-body .ty-banner .ty-banner__meta { color: var(--ty-b-ink); font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
body.mdrrmo-cc-body .ty-banner .ty-banner__cta { background: var(--ty-b-cta-bg); color: var(--ty-b-cta-ink); border-color: var(--ty-b-cta-bg); flex: none; }
body.mdrrmo-cc-body .ty-banner .ty-banner__cta:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--ty-b-cta-ink); }
body.mdrrmo-cc-body .ty-banner .ty-banner__cta:focus-visible { outline: 3px solid var(--ty-b-ring); outline-offset: 3px; }

/* ── Rail LIVE badge (controller renders <span class="ccx-badge ccx-badge-live">LIVE</span>) ── */
body.mdrrmo-cc-body .sidebar .ccx-link .ccx-badge.ccx-badge-live {
    margin-left: auto; display: inline-grid; place-items: center; min-width: 0; height: 20px; padding: 0 7px; border-radius: 999px;
    background: #DC2626; color: #FFFFFF; border: 1px solid #DC2626; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; line-height: 1;
}
body.mdrrmo-cc-body .sidebar .ccx-link.active .ccx-badge.ccx-badge-live { background: #FFFFFF; color: #C1121F; border-color: #FFFFFF; }

/* ── Responsive: single column, map 280px, no page-level horizontal scroll ── */
@media (max-width: 1100px) {
    body.mdrrmo-cc-body .ty-root .ty-grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    body.mdrrmo-cc-body .ty-root { gap: 12px; }
    body.mdrrmo-cc-body .ty-root .ty-hero { padding: 14px 14px 16px; border-left-width: 5px; }
    body.mdrrmo-cc-body .ty-root .ty-hero__body, body.mdrrmo-cc-body .ty-root .ty-cols { grid-template-columns: minmax(0, 1fr); }
    body.mdrrmo-cc-body .ty-root .ty-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    body.mdrrmo-cc-body .ty-root .ty-fact dd { font-size: 16px; }
    body.mdrrmo-cc-body .ty-root .ty-map { height: 280px; }
    body.mdrrmo-cc-body .ty-root .ty-card, body.mdrrmo-cc-body .ty-root .ty-panel { padding: 12px; }
    body.mdrrmo-cc-body .ty-root .ty-ready { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.mdrrmo-cc-body .ty-root .ty-citem { grid-template-columns: minmax(0, 1fr); }
    body.mdrrmo-cc-body .ty-root .ty-citem .ty-form--row { justify-content: flex-start; }
    body.mdrrmo-cc-body .ty-root .ty-form--row .ty-field, body.mdrrmo-cc-body .ty-root .ty-form--row .ty-field--grow { flex: 1 1 100%; }
    body.mdrrmo-cc-body .ty-root .ty-picker, body.mdrrmo-cc-body .ty-root .ty-picker__select { width: 100%; }
    body.mdrrmo-cc-body .ty-banner .ty-banner__cta { width: 100%; }
}
@media (max-width: 420px) {
    body.mdrrmo-cc-body .ty-root .ty-facts, body.mdrrmo-cc-body .ty-root .ty-ready { grid-template-columns: minmax(0, 1fr); }
    body.mdrrmo-cc-body .ty-root .ty-signal__num { font-size: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    body.mdrrmo-cc-body .ty-root *, body.mdrrmo-cc-body .ty-banner * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ── Print: only the active panel, with a municipal header ── */
@media print {
    body.mdrrmo-cc-body:has(.ty-root) .topbar, body.mdrrmo-cc-body:has(.ty-root) .sidebar, body.mdrrmo-cc-body:has(.ty-root) .sb-backdrop,
    body.mdrrmo-cc-body:has(.ty-root) .cc-masthead, body.mdrrmo-cc-body:has(.ty-root) #ccTsunamiBanner, body.mdrrmo-cc-body:has(.ty-root) .ty-banner,
    body.mdrrmo-cc-body:has(.ty-root) .mdrrmo-wt, body.mdrrmo-cc-body:has(.ty-root) .cc-toast-host, body.mdrrmo-cc-body:has(.ty-root) #ccRainPopup,
    body.mdrrmo-cc-body .ty-root .ty-hero, body.mdrrmo-cc-body .ty-root .ty-grid2, body.mdrrmo-cc-body .ty-root .ty-ready,
    body.mdrrmo-cc-body .ty-root .ty-tabs, body.mdrrmo-cc-body .ty-root .ty-toc, body.mdrrmo-cc-body .ty-root .ty-alert,
    body.mdrrmo-cc-body .ty-root .ty-form, body.mdrrmo-cc-body .ty-root .ty-disclosure, body.mdrrmo-cc-body .ty-root .ty-notice,
    body.mdrrmo-cc-body .ty-root .ty-panel__tools, body.mdrrmo-cc-body .ty-root .ty-cell-actions, body.mdrrmo-cc-body .ty-root .ty-manage-row,
    body.mdrrmo-cc-body .ty-root .ty-import { display: none !important; }
    body.mdrrmo-cc-body:has(.ty-root) { background: #FFFFFF !important; }
    body.mdrrmo-cc-body .ty-root, body.mdrrmo-cc-body .ty-root * { color: #000000 !important; box-shadow: none !important; }
    body.mdrrmo-cc-body .ty-root .ty-panel { border: 0; padding: 0; break-inside: auto; }
    body.mdrrmo-cc-body .ty-root .ty-print-head { display: block; font-size: 12pt; font-weight: 700; border-bottom: 2px solid #000000; padding-bottom: 6pt; margin-bottom: 8pt; }
    body.mdrrmo-cc-body .ty-root .ty-table-wrap { overflow: visible; border: 0; container-type: normal; }
    body.mdrrmo-cc-body .ty-root .ty-table { min-width: 0 !important; font-size: 10pt; }
    body.mdrrmo-cc-body .ty-root .ty-table th, body.mdrrmo-cc-body .ty-root .ty-table td { border: 1px solid #000000; padding: 4pt 6pt; }
    body.mdrrmo-cc-body .ty-root .ty-card, body.mdrrmo-cc-body .ty-root .ty-citem, body.mdrrmo-cc-body .ty-root .ty-sigcard { border: 1px solid #000000; break-inside: avoid; }
    body.mdrrmo-cc-body .ty-root .ty-chip, body.mdrrmo-cc-body .ty-root .ty-sig, body.mdrrmo-cc-body .ty-root .ty-eoc { background: #FFFFFF !important; border: 1px solid #000000 !important; }
}