/* Final mobile details. No PC styles or risk calculations are changed. */ @media (max-width: 850px) { /* Cut both layers into six pieces without replacing the live score's dash length. */ body[data-page="dashboard"] .gauge-panel .gauge-track, body[data-page="dashboard"] .gauge-panel .gauge-value-arc { mask: url(#mobileGaugeSegments); } body[data-page="dashboard"] .gauge-panel .gauge-track { stroke-dasharray: none; } body[data-page="dashboard"] .gauge-panel .gauge-value-arc { stroke: url(#mobileGaugeSegmentColors); } body[data-page="dashboard"] .trend-signals-grid[data-mobile-tab-swipe="true"] { touch-action: pan-y pinch-zoom; } body[data-page="dashboard"] .mobile-bottom-nav { background: rgba(10,16,28,.97); box-shadow: none; } body[data-page="dashboard"] .mobile-bottom-nav a, body[data-page="dashboard"] .mobile-bottom-nav button { color: #93a7bd; font-weight: 550; } body[data-page="dashboard"] .mobile-bottom-nav .is-active { color: #6fb0de; font-weight: 650; } body[data-page="dashboard"] .mobile-bottom-nav .is-active svg { filter: none; } body[data-page="dashboard"] .mobile-bottom-nav .mobile-alert-count { color: #e0e7ef; background: #d8483d; box-shadow: none; font: 650 10px/1 var(--sans); } body[data-page="dashboard"] .mobile-language-control, body[data-page="dashboard"] .mobile-more-trigger { min-width: 44px; min-height: 44px; color: #93a7bd; } body[data-page="dashboard"] .dashboard-main .panel-heading h2, body[data-page="dashboard"] .situation-brief__body > div > #situationTitle, body[data-page="dashboard"] .risk-map-heading h2 { width: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; color: #93a7bd; font: 600 16px/1.5 var(--sans); letter-spacing: -.015em; } body[data-page="dashboard"] .situation-causes > #mobileCausesTitle { color: #93a7bd; } body[data-page="dashboard"] .mobile-section-tabs button.active { color: #b49c48; } /* Daylight readability: lift information, not decorative titles or risk hues. */ body[data-page="dashboard"] .situation-brief #situationExplanation { margin-top: 6px; color: #cbd5e0; line-height: 1.6; } body[data-page="dashboard"] .change-chip > small[data-i18n], body[data-page="dashboard"] .situation-causes > .cause-change-heading { color: #b7c7da; } /* The update timestamp is metadata, not a competing line of content. */ body[data-page="dashboard"] .situation-brief #situationMobileUpdated { color: #93a7bd; font: 400 12px/1.5 var(--sans); gap: 6px; text-shadow: none; } body[data-page="dashboard"] .situation-brief #situationMobileUpdated svg { width: 14px; height: 14px; stroke-width: 1.5; flex: 0 0 14px; } body[data-page="dashboard"] .situation-brief .situation-lower-row .situation-causes li > strong { color: #b7c7da; } body[data-page="dashboard"] .situation-brief .situation-lower-row .situation-causes li { border-bottom-color: rgba(140,165,195,.2); } body[data-page="dashboard"] .gauge-panel .gauge-ticks text, body[data-page="dashboard"] .gauge-panel .gauge-tiers text { fill: #b7c7da; } body[data-page="dashboard"] .gauge-panel .gauge-score > span { color: #b7c7da; } body[data-page="dashboard"] .trend-panel .chart-axis, body[data-page="dashboard"] .trend-panel .trend-stats small { color: #b7c7da; } body[data-page="dashboard"] .trend-panel .trend-stats strong { color: #d0dbe6; } body[data-page="dashboard"] .risk-map-mobile-regions a { color: #d0dbe6; } body[data-page="dashboard"] .risk-map-footer span { color: #b7c7da; } body[data-page="dashboard"] .risk-map-footer small { color: #93a7bd; } body[data-page="dashboard"] .situation-brief__body > div > #situationTitle { margin-bottom: 12px; } /* Smaller section captions, using the guide's readable neutral text color. */ body[data-page="dashboard"] .situation-brief > .gauge-panel .panel-heading h2 { color: #cbd5e0; font-size: 14px; font-weight: 600; } /* A quiet section caption introduces the brighter, larger event headline. */ body[data-page="dashboard"] .situation-brief__body > div > #situationTitle { color: #93a7bd; font: 500 13px/1.5 var(--sans); } body[data-page="dashboard"] .situation-brief #situationConclusion { color: #e0e7ef; font-weight: 650; line-height: 1.4; } body[data-page="dashboard"] .situation-brief #situationConclusion .situation-conclusion__cause { color: inherit; } /* The gauge and bottom navigation already identify this mobile section. */ body[data-page="dashboard"] .situation-brief > .gauge-panel .panel-heading h2 { display: none; } body[data-page="dashboard"] .situation-brief > .gauge-panel .panel-heading { justify-content: flex-start; gap: 0; } body[data-page="dashboard"] .situation-brief > .gauge-panel .panel-heading > div:first-child { display: none; } body[data-page="dashboard"] .trend-panel > .panel-heading h2::before { display: none; } body[data-page="dashboard"] .situation-brief > .gauge-panel .panel-heading { top: 16px; align-items: baseline; } body[data-page="dashboard"] .situation-brief > .gauge-panel .gauge-panel__meta { align-self: baseline; } body[data-page="dashboard"] .situation-brief > .gauge-panel .classification { padding: 0; font: 500 8.5px/1.5 var(--mono); } /* Reserve room for the unchanged outer eight captions, including the long right caption. */ body[data-page="dashboard"] .situation-brief > .gauge-panel .gauge-wrap { width: min(384px, calc(100% - 16px)); margin-top: 45px !important; margin-bottom: 10px !important; transform: translateY(10px); } /* Balance the score and change row inside the existing gauge frame. */ body[data-page="dashboard"] .situation-brief > .gauge-panel .gauge-score { top: 54%; } /* Breathing marks the current position without changing its score or hue. */ body[data-page="dashboard"] .situation-brief > .gauge-panel .gauge-marker { transform-box: fill-box; transform-origin: center; animation: mobile-gauge-marker-breath 2.8s ease-in-out infinite; filter: none; } @keyframes mobile-gauge-marker-breath { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.14); } } @media (prefers-reduced-motion: reduce) { body[data-page="dashboard"] .situation-brief > .gauge-panel .gauge-marker { animation: none; opacity: 1; transform: none; } } body[data-page="dashboard"] .situation-brief > .gauge-panel .gauge-footer { margin-top: 0; } /* Base color for unavailable changes; directional colors are applied below. */ body[data-page="dashboard"] .situation-causes .cause-change-chart { filter: none; } body[data-page="dashboard"] .cause-change-chart { color: #92a4b4; } body[data-page="dashboard"] .cause-change-chart .cause-change-value { color: inherit; text-shadow: none; } body[data-page="dashboard"] .cause-change-chart .cause-change-fill { color: inherit; background: currentColor; box-shadow: none; } body[data-page="dashboard"] .cause-change-track { background: #213040; } body[data-page="dashboard"] .cause-change-track::before { display: none; } body[data-page="dashboard"] .cause-change-chart.is-flat .cause-change-track::after { background: currentColor; } /* Lead with the graph; keep controls compact and statistics below it. */ body[data-page="dashboard"]:not([data-mobile-tab="causes"]):not([data-mobile-tab="signals"]):not([data-mobile-tab="distribution"]) main > .trend-signals-grid > .trend-panel { display: grid !important; grid-template-columns: minmax(0, 1fr); } /* The same live causes list is now a fourth mobile tab, not summary clutter. */ body[data-page="dashboard"] .situation-lower-row.causes-in-mobile-tab { display: none; } body[data-page="dashboard"] main > .trend-signals-grid > .mobile-causes-panel { display: none !important; } body[data-page="dashboard"][data-mobile-tab="causes"] main > .trend-signals-grid > .mobile-causes-panel { display: block !important; padding: 8px 16px 24px; background: #131c2a; border: 0; box-shadow: none; } body[data-page="dashboard"][data-mobile-tab="causes"] main > .trend-signals-grid > .trend-panel { display: none !important; } body[data-page="dashboard"] .mobile-section-tabs button { flex: 1 1 0; min-width: 0; padding-inline: 6px; } body[data-page="dashboard"] .mobile-causes-panel .situation-causes { --cause-change-width: clamp(80px, 24vw, 102px); display: grid; grid-template-columns: 16px minmax(0, 1fr) var(--cause-change-width); column-gap: 8px; width: 100%; max-width: none; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; } body[data-page="dashboard"] .mobile-causes-panel #mobileCausesTitle { display: block; grid-column: 1 / 3; margin: 0; color: #93a7bd; font: 600 16px/1.5 var(--sans); } body[data-page="dashboard"] .mobile-causes-panel .cause-change-heading { grid-column: 3; grid-row: 1; align-self: center; margin: 0 0 2px; text-align: right; } body[data-page="dashboard"] .mobile-causes-panel #situationCauses { grid-row: 2; margin-top: 0; list-style: none; } body[data-page="dashboard"] .mobile-causes-panel .situation-causes li { display: grid; grid-template-columns: 16px minmax(0, 1fr) var(--cause-change-width); gap: 6px 8px; padding: 14px 0; min-height: 64px; border-bottom: 1px solid rgba(140,165,195,.2); box-sizing: border-box; } body[data-page="dashboard"] .mobile-causes-panel .situation-causes li:last-child { border-bottom: 0; } body[data-page="dashboard"] .mobile-causes-panel .situation-cause-rank { grid-column: 1; grid-row: 1 / 3; color: #70849a; font: 450 11px/1.5 var(--sans); } body[data-page="dashboard"] .mobile-causes-panel .situation-causes li > span { display: block; grid-column: 2; grid-row: 1; color: #d0dbe6; font: 600 14px/1.5 var(--sans); overflow: visible; white-space: normal; overflow-wrap: anywhere; text-align: left; } body[data-page="dashboard"] .mobile-causes-panel .situation-causes li > strong { grid-column: 2; grid-row: 2; color: #b7c7da; font: 450 12px/1.5 var(--sans); white-space: normal; text-align: left; } body[data-page="dashboard"] .mobile-causes-panel .situation-causes li > i { display: none; } body[data-page="dashboard"] .trend-panel > .panel-heading { grid-row: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 8px 0 0; padding: 0; } body[data-page="dashboard"] .dashboard-main .trend-panel > .panel-heading h2 { font-size: 14px; line-height: 1.4; } body[data-page="dashboard"] .trend-panel > .panel-heading .trend-summary { display: none; } body[data-page="dashboard"] .trend-panel > .panel-heading .range-tabs { justify-self: center; position: relative; isolation: isolate; width: auto; margin: 0; padding: 0; gap: 0; border: 0 !important; border-radius: 999px; background: transparent; box-shadow: none; } body[data-page="dashboard"] .trend-panel > .panel-heading .range-tabs::before { content: ""; position: absolute; inset: 7px 0; z-index: -1; pointer-events: none; border: 1px solid rgba(140,165,195,.18); border-radius: 999px; background: rgba(22,33,52,.45); } body[data-page="dashboard"] .trend-signals-grid .trend-panel .range-tabs button { position: relative; isolation: isolate; min-width: 44px; min-height: 44px; padding: 6px 10px; font-size: 11px; font-weight: 500; color: #93a7bd; border-radius: 999px; background: transparent; box-shadow: none; transition: color .15s ease; } body[data-page="dashboard"] .trend-signals-grid .trend-panel .range-tabs button.active { color: #cbd5e0; font-weight: 600; background: transparent; box-shadow: none; } body[data-page="dashboard"] .trend-signals-grid .trend-panel .range-tabs button.active::before { content: ""; position: absolute; inset: 9px 2px; z-index: -1; pointer-events: none; border-radius: 999px; background: rgba(134,164,202,.12); } body[data-page="dashboard"] .trend-signals-grid .trend-panel .range-tabs button:focus-visible { outline: 2px solid #86a4ca; outline-offset: -2px; } body[data-page="dashboard"] .trend-panel .chart-wrap { grid-row: 1; margin-top: 0; height: clamp(190px, 50vw, 230px) !important; min-height: 190px; border-top: 0; background-image: none; } body[data-page="dashboard"] .trend-panel .chart-axis { grid-row: 2; margin-top: 8px; color: #8194ab; font: 450 10px/1.4 var(--sans); text-shadow: none; } body[data-page="dashboard"] .trend-panel .trend-stats { grid-row: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 10px 0 0; padding: 6px 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; box-sizing: border-box; } body[data-page="dashboard"] .trend-panel .trend-stats > div { position: relative; display: flex; align-items: baseline; justify-content: center; gap: 5px; min-width: 0; border: 0; padding: 0; } body[data-page="dashboard"] .trend-panel .trend-stats > div + div::before { content: ""; position: absolute; left: 0; top: 50%; height: 16px; width: 1px; background: rgba(140,165,195,.28); transform: translateY(-50%); } body[data-page="dashboard"] .trend-panel .trend-stats .trend-direction small { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); } body[data-page="dashboard"] .trend-panel .trend-stats small { color: #93a7bd; font-size: 11px; white-space: nowrap; } body[data-page="dashboard"] .trend-panel .trend-stats strong { margin-top: 0; color: #b7c7da; font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap; } body[data-page="dashboard"] .trend-panel .trend-stats .trend-direction strong { font-size: 11px; white-space: nowrap; } body[data-page="dashboard"] .trend-panel .trend-stats #trendAverage { color: #b7c7da; } body[data-page="dashboard"] .signals-panel > .panel-heading, body[data-page="dashboard"] .risk-map-heading { min-height: 44px; align-items: center; } body[data-page="dashboard"] .signals-panel > .panel-heading .signal-radar-open, body[data-page="dashboard"] .signals-panel .signal-radar-detail__back, body[data-page="dashboard"] .risk-map-heading a { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; justify-content: flex-end; padding: 8px 0 8px 12px; border: 0; background: transparent; color: #93a7bd; font: 500 12px/1.5 var(--sans); box-sizing: border-box; } body[data-page="dashboard"] .signals-panel .signal-radar-detail__back { padding-left: 0; justify-content: flex-start; } body[data-page="dashboard"] .risk-map-heading a:focus-visible, body[data-page="dashboard"] .signal-radar-open:focus-visible, body[data-page="dashboard"] .signal-radar-detail__back:focus-visible { outline: 2px solid #86a4ca; outline-offset: 2px; border-radius: 4px; } /* JS converts these pixel targets into SVG units after the graph is fitted. */ body[data-page="dashboard"] .signals-panel .desktop-radar-label__title { font-size: var(--radar-title-font, 14px); font-weight: 600; } body[data-page="dashboard"] .signals-panel .desktop-radar-node-tag__text { font-size: var(--radar-tag-font, 12px); } body[data-page="dashboard"] .signals-panel .desktop-radar-node-tag__level { font-size: var(--radar-tag-level-font, 11px); font-weight: 500; } body[data-page="dashboard"] .signals-panel .desktop-radar-node-tag__background { fill: #131c2a; stroke: none; rx: 0; } /* Keep the geographic base readable in daylight without brightening risk markers. */ body[data-page="dashboard"] .risk-map-land { fill: #3b5066; stroke: #70849a; } body[data-page="dashboard"] .risk-map-land path { stroke-width: .6; vector-effect: non-scaling-stroke; } body[data-page="dashboard"] .risk-map-point { r: var(--map-anchor-radius, 8px); } body[data-page="dashboard"] .risk-map-mobile-number { display: none; } body[data-page="dashboard"] .risk-map-mobile-badge { display: block; } body[data-page="dashboard"] .risk-map-mobile-leader { fill: none; stroke: #93a7bd; stroke-opacity: .65; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; } body[data-page="dashboard"] .risk-map-mobile-badge circle { fill: var(--risk-map-muted-color); stroke: #131c2a; stroke-width: 1.5; vector-effect: non-scaling-stroke; } body[data-page="dashboard"] .risk-map-mobile-badge text { fill: #0a101c; stroke: none; font: 650 var(--map-number-font, 36px) var(--sans); pointer-events: none; } body[data-page="dashboard"] .risk-map-footer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; text-align: center; } /* Tab names are the visible section headings. Retain accessible names and IDs for live translations, but remove their repeated text and layout footprint. */ body[data-page="dashboard"] .mobile-causes-panel #mobileCausesTitle, body[data-page="dashboard"] .trend-panel > .panel-heading > div:first-child, body[data-page="dashboard"] .signals-panel > .panel-heading > div:first-child, body[data-page="dashboard"] .risk-map-heading > h2 { display: block !important; position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; } body[data-page="dashboard"] .trend-panel > .panel-heading { grid-template-columns: minmax(0, 1fr); gap: 0; } body[data-page="dashboard"] .signals-panel > .panel-heading, body[data-page="dashboard"] .risk-map-heading { justify-content: flex-end; min-height: 0; } body[data-page="dashboard"] .risk-map-description { display: none; } /* Quiet actions follow their content; nothing floats over the graph. */ body[data-page="dashboard"] .signals-panel { display: flex; flex-direction: column; height: auto !important; min-height: 0; } body[data-page="dashboard"] .signals-panel > .panel-heading { order: 10; position: static; inset: auto; margin: 8px 0 0; padding: 0; flex: 0 0 auto; } body[data-page="dashboard"] .signals-panel #monitorLiveBadge { display: none !important; } body[data-page="dashboard"] .signals-panel:has(> .mobile-signal-footer) > .panel-heading { display: none; } body[data-page="dashboard"] main > .trend-signals-grid > .intelligence-grid > .signals-panel { padding-top: 4px; padding-bottom: 16px; } body[data-page="dashboard"] .signals-panel .desktop-signal-radar { margin-top: 0; padding-block: 0; min-height: 0; } body[data-page="dashboard"] .signals-panel .desktop-signal-radar__chart { width: 90%; max-width: 380px; height: auto; margin: 8px auto 10px; } body[data-page="dashboard"] .mobile-signal-footer { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; margin-top: 2px; } body[data-page="dashboard"] .signals-panel .mobile-signal-footer > .signal-radar-open { order: 1; display: inline-flex; position: static; inset: auto; align-self: center; align-items: flex-start; justify-content: center; gap: 5px; min-width: 44px; min-height: 44px; margin: 0; padding: 0 12px; border: 0; background: transparent; color: #93a7bd; font: 500 12px/1.5 var(--sans); transform: none; } body[data-page="dashboard"] .mobile-signal-footer > .desktop-signal-radar__legend { order: 0; position: static; inset: auto; margin: 0; line-height: 1.5; transform: none; } body[data-page="dashboard"] .signals-panel:has(.desktop-signal-radar.is-detail) .mobile-signal-footer > .desktop-signal-radar__legend { display: none; } /* Causes: guide typography and a clear region / driver / change hierarchy. */ body[data-page="dashboard"] .mobile-causes-panel .situation-causes { --cause-change-width: clamp(96px, 26vw, 112px); column-gap: 10px; } body[data-page="dashboard"] .mobile-causes-panel .situation-causes li { grid-template-columns: 18px minmax(0, 1fr) var(--cause-change-width); gap: 4px 10px; padding: 16px 0; min-height: 72px; align-items: start; border-bottom-color: rgba(140,165,195,.16); } body[data-page="dashboard"] .mobile-causes-panel .situation-cause-rank { align-self: start; padding-top: 2px; color: #70849a; font: 450 12px/1.5 var(--sans); filter: none; } body[data-page="dashboard"] .mobile-causes-panel .situation-causes li > span { color: #e0e7ef; font: 600 15px/1.5 var(--sans); letter-spacing: -.015em; word-break: keep-all; overflow-wrap: anywhere; } body[data-page="dashboard"] .mobile-causes-panel .situation-causes li > strong { justify-self: start; max-width: 100%; box-sizing: border-box; padding: 3px 8px; border: 0; border-radius: 5px; background: #162134; color: #93a7bd; font: 500 12px/1.5 var(--sans); word-break: keep-all; overflow-wrap: anywhere; } body[data-page="dashboard"] .mobile-causes-panel .cause-change-chart { grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; align-self: center; } body[data-page="dashboard"] .mobile-causes-panel .cause-change-value { font: 600 14px/1.5 var(--sans); font-variant-numeric: tabular-nums; text-align: right; } body[data-page="dashboard"] .mobile-causes-panel .cause-change-heading { color: #93a7bd; font: 450 12px/1.5 var(--sans); } body[data-page="dashboard"] .mobile-causes-panel .situation-causes li.is-empty { grid-column: 1 / -1; display: block; min-height: 0; color: #93a7bd; font: 450 13px/1.5 var(--sans); } /* Signal text follows the design-guide roles; risk hues stay on graph marks. */ body[data-page="dashboard"] .signals-panel .desktop-radar-label__title { fill: #e0e7ef; } body[data-page="dashboard"] .signals-panel .panel-heading h2, body[data-page="dashboard"] .signals-panel .signal-item h3 { color: #e0e7ef; } body[data-page="dashboard"] .signals-panel .desktop-radar-label__value, body[data-page="dashboard"] .signals-panel .desktop-radar-label__prefix, body[data-page="dashboard"] .signals-panel .desktop-radar-label__score { fill: #cbd5e0 !important; } body[data-page="dashboard"] .signals-panel .desktop-radar-node-tag__text, body[data-page="dashboard"] .signals-panel .desktop-radar-node-tag__score { fill: #cbd5e0; } body[data-page="dashboard"] .signals-panel .desktop-radar-node-tag__level, body[data-page="dashboard"] .signals-panel .desktop-radar-label__value > .desktop-radar-label__level { fill: #93a7bd !important; } body[data-page="dashboard"] .signals-panel .signal-item p, body[data-page="dashboard"] .signals-panel .signal-item__stat, body[data-page="dashboard"] .signals-panel .signal-item__stat b { color: #cbd5e0; } body[data-page="dashboard"] .signals-panel .signal-state--inline, body[data-page="dashboard"] .signals-panel .signal-radar-open, body[data-page="dashboard"] .signals-panel .signal-radar-detail__back, body[data-page="dashboard"] .signals-panel .signal-time, body[data-page="dashboard"] .signals-panel .desktop-signal-radar__legend, body[data-page="dashboard"] .signals-panel .desktop-signal-radar__legend small { color: #93a7bd; } /* Detail hierarchy: headline, explanation, then separately labelled metrics. */ body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto auto auto; gap: 6px !important; padding: 16px 0 !important; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item h3 { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-column: 1; grid-row: 1; align-items: center; gap: 10px; color: #e0e7ef; font: 600 17px/1.45 var(--sans); letter-spacing: -.01em; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-title { grid-column: 1; grid-row: 1; color: inherit; font-size: 17px !important; font-weight: inherit; line-height: 1.45; white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; overflow-wrap: anywhere; } /* Legacy style.css forces a risk-coloured border with !important. */ body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-state--inline { grid-column: 2; grid-row: 1; justify-self: end; min-height: 0; padding: 0; border: 0 !important; border-radius: 0; background: transparent; color: var(--risk-color, #93a7bd); font: 400 11px/1.5 var(--sans); letter-spacing: 0; box-shadow: none; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-state--inline::before { display: none; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item p { grid-column: 1; grid-row: 2; display: block; margin: 0; color: #cbd5e0; font: 400 15px/1.7 var(--sans); letter-spacing: 0; white-space: normal; overflow: visible; max-height: none; -webkit-line-clamp: unset; line-clamp: unset; word-break: keep-all; overflow-wrap: anywhere; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item__stats { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 4px 0 0; padding: 8px 10px; border-radius: 6px; background: #162134; font: 450 12px/1.5 var(--sans); } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item__stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; color: #93a7bd; font: 450 12px/1.5 var(--sans); } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item__stat + .signal-item__stat { margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(140,165,195,.16); } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item__stat b { color: #e0e7ef; font: 600 16px/1.4 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item__meta { grid-column: 1; grid-row: 4; min-width: 0; justify-content: flex-end; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-time { color: #93a7bd; font: 400 12px/1.5 var(--sans); } /* Final detail polish: natural-height rows and quiet graph/detail controls. */ body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-list { margin: 0; gap: 0; grid-template-rows: none; grid-auto-rows: max-content; align-content: start; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item { row-gap: 8px !important; padding-block: 18px !important; border-bottom: 1px solid rgba(140,165,195,.16) !important; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item:last-child { border-bottom: 0 !important; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item__stats { margin-top: 2px; padding: 8px 12px; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item__meta { margin: 0; } body[data-page="dashboard"] .signals-panel .mobile-signal-footer > .signal-radar-open, body[data-page="dashboard"] .signals-panel .signal-radar-detail__back { position: relative; align-items: flex-start; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: #93a7bd; font: 500 12px/1.5 var(--sans); box-shadow: none; box-sizing: border-box; } body[data-page="dashboard"] .signals-panel .mobile-signal-footer > .signal-radar-open::before, body[data-page="dashboard"] .signals-panel .signal-radar-detail__back::before { display: none; } body[data-page="dashboard"] .signals-panel .mobile-signal-footer .signal-radar-open-label, body[data-page="dashboard"] .signals-panel .signal-radar-detail__back-label { color: inherit; font: inherit; letter-spacing: 0; } /* A consistent drawn chevron replaces the font-dependent arrow glyph. */ body[data-page="dashboard"] .signals-panel .mobile-signal-footer > .signal-radar-open, body[data-page="dashboard"] .signals-panel .signal-radar-detail__back { gap: 6px; font-size: 14px; } body[data-page="dashboard"] .signals-panel .mobile-signal-footer .signal-radar-open-icon, body[data-page="dashboard"] .signals-panel .signal-radar-detail__back-icon { display: inline-flex; flex: 0 0 14px; align-items: center; justify-content: center; width: 14px; height: 21px; color: inherit; font-size: 0; line-height: 0; } body[data-page="dashboard"] .signals-panel .mobile-signal-footer .signal-radar-open-icon::after, body[data-page="dashboard"] .signals-panel .signal-radar-detail__back-icon::after { content: ""; display: block; width: 14px; height: 14px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5 3l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } body[data-page="dashboard"] .signals-panel .mobile-signal-footer .signal-radar-open-icon:first-child::after, body[data-page="dashboard"] .signals-panel .signal-radar-detail__back-icon::after { transform: rotate(180deg); } } /* Mobile palette and type polish; existing sections and controls stay in place. */ @media (max-width: 850px) { body[data-page="dashboard"] .dashboard-main { color: #c7cfd8; } body[data-page="dashboard"] .gauge-panel #globalScore { filter: brightness(.84); font-weight: 700; letter-spacing: -.025em; } body[data-page="dashboard"] .gauge-panel .gauge-score > span { color: #92a4b4; font-weight: 400; } body[data-page="dashboard"] .gauge-panel .gauge-ticks text, body[data-page="dashboard"] .gauge-panel .gauge-tiers text { fill: #92a4b4; font-weight: 450; } body[data-page="dashboard"] .situation-brief > .gauge-panel .classification { color: #92a4b4; font-size: 10px; letter-spacing: .08em; } body[data-page="dashboard"] .situation-brief #situationConclusion { font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: -.015em; } body[data-page="dashboard"] .situation-brief #situationExplanation { color: #c7cfd8; font-weight: 400; } body[data-page="dashboard"] .situation-brief #situationMobileUpdated { color: #92a4b4; } body[data-page="dashboard"] .mobile-section-tabs button { color: #92a4b4; font-weight: 500; } body[data-page="dashboard"] .mobile-section-tabs button.active, body[data-page="dashboard"] .trend-signals-grid .trend-panel .range-tabs button.active { color: #52c7b8; background: rgba(82,199,184,.12); font-weight: 650; } body[data-page="dashboard"] .trend-signals-grid .trend-panel .range-tabs button { color: #92a4b4; } body[data-page="dashboard"] .trend-signals-grid .trend-panel .range-tabs button.active { color: #52c7b8; } body[data-page="dashboard"] .mobile-section-tabs button:focus-visible, body[data-page="dashboard"] .trend-signals-grid .trend-panel .range-tabs button:focus-visible { outline-color: #52c7b8; } body[data-page="dashboard"] .mobile-causes-panel .situation-causes li > span { color: #e0e7ef; font-weight: 600; } body[data-page="dashboard"] .mobile-causes-panel .situation-causes li > strong, body[data-page="dashboard"] .mobile-causes-panel .cause-change-heading { color: #92a4b4; font-weight: 400; } body[data-page="dashboard"] .mobile-causes-panel .cause-change-chart { color: #92a4b4; } body[data-page="dashboard"] .mobile-causes-panel .cause-change-chart.is-up { color: rgb(239,85,76); } body[data-page="dashboard"] .mobile-causes-panel .cause-change-chart.is-down { color: #76b7ff; } body[data-page="dashboard"] .mobile-causes-panel .cause-change-chart.is-flat { color: #92a4b4; } body[data-page="dashboard"] .trend-panel .trend-stats small, body[data-page="dashboard"] .trend-panel .chart-axis { color: #92a4b4; } body[data-page="dashboard"] .trend-panel .trend-stats strong { color: #e0e7ef; font-weight: 650; } body[data-page="dashboard"] .signals-panel .desktop-radar-label__title { fill: #e0e7ef; font-weight: 600; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item p { color: #c7cfd8; } body[data-page="dashboard"] .signals-panel .mobile-signal-footer > .signal-radar-open, body[data-page="dashboard"] .signals-panel .signal-radar-detail__back { color: #76b7ff; } body[data-page="dashboard"] .risk-map-mobile-regions a { color: #c7cfd8; } body[data-page="dashboard"] .risk-map-footer span, body[data-page="dashboard"] .risk-map-footer small { color: #92a4b4; } body[data-page="dashboard"] .mobile-bottom-nav a, body[data-page="dashboard"] .mobile-bottom-nav button { color: #92a4b4; font-weight: 500; } body[data-page="dashboard"] .mobile-bottom-nav .is-active { color: #52c7b8; font-weight: 650; } } /* Every mobile dashboard tab uses the same flat navy surface. */ @media (max-width: 850px) { body[data-page="dashboard"][data-page] main > .trend-signals-grid, body[data-page="dashboard"][data-page] main > .trend-signals-grid > .dashboard-risk-map, body[data-page="dashboard"][data-page] main > .trend-signals-grid > .intelligence-grid, body[data-page="dashboard"][data-page] main > .trend-signals-grid > .intelligence-grid > .signals-panel { background: #0a101c; background-image: none; } body[data-page="dashboard"] { --surface-solid: #0a101c; --dashboard-surface: #0a101c; } body[data-page="dashboard"] .dashboard-main, body[data-page="dashboard"] .dashboard-main .panel, body[data-page="dashboard"] .dashboard-main .situation-brief, body[data-page="dashboard"] .mobile-section-tabs, body[data-page="dashboard"][data-mobile-tab="causes"] main > .trend-signals-grid > .mobile-causes-panel { background: #0a101c; } body[data-page="dashboard"] .signals-panel .desktop-radar-node-tag__background { fill: #0a101c; } } /* Explicitly hide the generated mobile overlays when returning to PC. */ /* Keep endpoint captions within the gauge frame, below the numeric ticks. */ @media (max-width: 850px) { /* Six captions sit on the center ray of their respective arc pieces. Center the words on those positions so their lengths do not shift the rhythm. */ body[data-page="dashboard"] .gauge-panel .gauge-tiers text:not([data-i18n="tier.low"]):not([data-i18n="tier.global"]) { text-anchor: middle; dominant-baseline: central; } body[data-page="dashboard"] .gauge-panel .gauge-tiers text[data-i18n="tier.watch"] { transform: translate(-23.06px, 22.40px); } body[data-page="dashboard"] .gauge-panel .gauge-tiers text[data-i18n="tier.rising"] { transform: translate(-22.28px, 1.29px); } body[data-page="dashboard"] .gauge-panel .gauge-tiers text[data-i18n="tier.high"] { transform: translate(-9.07px, -12.17px); } body[data-page="dashboard"] .gauge-panel .gauge-tiers text[data-i18n="tier.veryHigh"] { transform: translate(9.07px, -12.17px); } body[data-page="dashboard"] .gauge-panel .gauge-tiers text[data-i18n="tier.critical"] { transform: translate(22.28px, 1.29px); } body[data-page="dashboard"] .gauge-panel .gauge-tiers text[data-i18n="tier.extreme"] { transform: translate(23.06px, 22.40px); } /* Longer English captions retain extra clearance on the same center rays. */ html[lang="en"] body[data-page="dashboard"] .gauge-panel .gauge-tiers text[data-i18n="tier.watch"] { transform: translate(-32.75px, 19.91px); } html[lang="en"] body[data-page="dashboard"] .gauge-panel .gauge-tiers text[data-i18n="tier.rising"] { transform: translate(-29.39px, -5.73px); } html[lang="en"] body[data-page="dashboard"] .gauge-panel .gauge-tiers text[data-i18n="tier.high"] { transform: translate(-11.68px, -21.82px); } html[lang="en"] body[data-page="dashboard"] .gauge-panel .gauge-tiers text[data-i18n="tier.veryHigh"] { transform: translate(11.68px, -21.82px); } html[lang="en"] body[data-page="dashboard"] .gauge-panel .gauge-tiers text[data-i18n="tier.critical"] { transform: translate(29.39px, -5.73px); } html[lang="en"] body[data-page="dashboard"] .gauge-panel .gauge-tiers text[data-i18n="tier.extreme"] { transform: translate(32.75px, 19.91px); } body[data-page="dashboard"] .gauge-panel .gauge-tiers text[data-i18n="tier.low"] { text-anchor: middle; transform: translate(20px, 30px); } body[data-page="dashboard"] .gauge-panel .gauge-tiers text[data-i18n="tier.global"] { text-anchor: middle; transform: translate(-20px, 30px); } } /* Mobile gauge: hide denominator and move endpoint ticks inward. */ @media (max-width: 850px) { body[data-page="dashboard"] .gauge-panel .gauge-score > span { display: none; } body[data-page="dashboard"] .gauge-panel .gauge-ticks text:first-child { transform: translate(24px, -28px); } body[data-page="dashboard"] .gauge-panel .gauge-ticks text:last-child { transform: translate(-24px, -28px); } } @media (min-width: 851px) { .risk-map-mobile-badge { display: none; } } /* Mobile signal analysis follows the same flat navy and text hierarchy. */ @media (max-width: 850px) { body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail, body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail__host { background: #0a101c; background-image: none; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item { background: transparent; background-image: none; box-shadow: none; border-bottom-color: rgba(146,164,180,.12) !important; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item.focused { background: rgba(82,199,184,.06); } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item h3 { color: #e0e7ef; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item p { color: #c7cfd8; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item__stats { background: #101a27; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item__stat { color: #92a4b4; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item__stat b { color: var(--risk-color); } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-item__stat--confidence b { color: #76b7ff; } body[data-page="dashboard"] .trend-signals-grid .signals-panel .signal-radar-detail .signal-time { color: #6e8398; } }