/* PC-only early-warning board. Kept separate from the legacy responsive
   stylesheet so its 01 + 2x2 composition cannot affect mobile. */
@media (min-width: 1181px) {
  /* Keep the warning board in the compact right rail requested for desktop. */
  .trend-signals-grid {
    grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr);
    gap: 8px;
  }

  .trend-signals-grid .signals-panel {
    min-height: 0;
    height: 100%;
    padding: 0;
    align-self: stretch;
  }

  /* The board itself meets the panel edge, as in the reference.  Only the
     heading receives breathing room; the cards are one continuous grid. */
  .trend-signals-grid .signals-panel > .panel-heading {
    padding: 18px 18px 16px;
  }

  .trend-signals-grid .signals-panel .signal-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(132px, auto) repeat(2, minmax(168px, 1fr));
    flex: 1 1 auto;
    margin-top: 0;
    gap: 0;
    align-content: stretch;
    overflow: hidden;
    padding-right: 0;
  }

  .trend-signals-grid .signal-item,
  .trend-signals-grid .signal-item--strongest,
  .trend-signals-grid .signal-item:last-child:nth-child(odd) {
    display: grid;
    min-height: 0;
    height: auto;
    padding: 14px 13px;
    border: 1px solid rgba(103, 145, 166, .28);
    border-right-width: 0;
    border-bottom-width: 0;
    background: linear-gradient(145deg, rgba(12, 27, 36, .56), rgba(7, 16, 22, .56));
    box-shadow: none;
    grid-column: auto;
    grid-template-columns: 30px max-content minmax(0, 1fr);
    grid-template-rows: min-content min-content min-content min-content;
    gap: 0 7px;
    align-content: start;
  }

  .trend-signals-grid .signal-item:nth-child(even) { border-right-width: 1px; }
  .trend-signals-grid .signal-item:nth-child(n + 4) { border-bottom-width: 1px; }
  .trend-signals-grid .signal-item__body { display: contents; }

  .trend-signals-grid .signal-rank,
  .trend-signals-grid .signal-item--strongest .signal-rank {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

  .trend-signals-grid .signal-item h3,
  .trend-signals-grid .signal-item--strongest h3 {
    grid-column: 2;
    grid-row: 1;
    font-size: 16px;
    line-height: 1.28;
    white-space: nowrap;
  }

  .trend-signals-grid .signal-item__meta {
    display: contents;
  }

  .trend-signals-grid .signal-item__meta::before {
    display: none;
  }

  .trend-signals-grid .signal-state { order: 0; font-size: 11px; }
  .trend-signals-grid .signal-time { order: 2; font-size: 10px; }

  .trend-signals-grid .signal-item p,
  .trend-signals-grid .signal-item--strongest p {
    display: -webkit-box;
    grid-column: 2 / -1;
    grid-row: 2;
    margin-top: 8px;
    overflow: hidden;
    color: #c0d0d7;
    font-size: 13px;
    font-weight: 560;
    line-height: 1.46;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .trend-signals-grid .signal-item--strongest {
    grid-column: 1 / -1;
    padding: 17px;
    border-right-width: 1px;
    background: linear-gradient(110deg, rgba(21, 53, 63, .7), rgba(8, 22, 30, .64));
    grid-template-columns: 36px max-content minmax(0, 1fr);
    grid-template-rows: min-content min-content min-content min-content;
  }

  .trend-signals-grid .signal-item--strongest .signal-rank {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .trend-signals-grid .signal-item--strongest h3 {
    font-size: 22px;
    line-height: 1.2;
  }

  .trend-signals-grid .signal-item--strongest p {
    grid-column: 2 / -1;
    grid-row: 2;
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.46;
    -webkit-line-clamp: 2;
  }

  /* Reference-style indexing: quiet mono numbers, not a second visual card. */
  .trend-signals-grid .signal-rank,
  .trend-signals-grid .signal-item--strongest .signal-rank {
    display: block;
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
    color: #a6bed3;
    font: 650 16px/1.15 var(--mono);
    letter-spacing: .035em;
  }

  .trend-signals-grid .signal-item--strongest .signal-rank { font-size: 18px; }

  /* The type hierarchy carries the information; state colors stay restrained. */
  .trend-signals-grid .signal-item h3,
  .trend-signals-grid .signal-item--strongest h3 { font-size: 17px; }
  .trend-signals-grid .signal-item--strongest h3 { font-size: 23px; }
  .trend-signals-grid .signal-item p,
  .trend-signals-grid .signal-item--strongest p {
    color: #718790;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 520;
    line-height: 1.68;
    letter-spacing: normal;
    font-synthesis: none;
  }
  .trend-signals-grid .signal-item--strongest p { font-size: 15px; }

  .trend-signals-grid .signal-state {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    align-items: center;
    align-self: center;
    gap: 4px;
    color: #a3b6bd;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .01em;
  }
  .trend-signals-grid .signal-state::before {
    content: "◆";
    font-size: 9px;
    line-height: 1;
  }
  .trend-signals-grid .signal-time {
    display: inline-flex;
    grid-column: 2 / -1;
    grid-row: 4;
    justify-self: start;
    align-items: center;
    margin-top: 7px;
    padding: 3px 6px;
    border: 1px solid rgba(103, 145, 166, .30);
    background: rgba(103, 145, 166, .06);
    color: #91a9b1;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
  }
  .trend-signals-grid .signal-meter {
    position: relative;
    position: absolute;
    top: 42px;
    bottom: 14px;
    left: 15px;
    width: 5px;
    overflow: hidden;
    background: repeating-linear-gradient(to top, rgba(112, 137, 148, .26) 0 16%, transparent 16% 20%);
  }
  .trend-signals-grid .signal-meter span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: var(--signal-strength, 35%);
    background: var(--risk-color);
    box-shadow: 0 0 7px color-mix(in srgb, var(--risk-color), transparent 36%);
  }
  .trend-signals-grid .signal-item--strongest .signal-meter { top: 48px; left: 20px; }
  .trend-signals-grid .signal-item[data-signal-level="CRITICAL"] .signal-state::before,
  .trend-signals-grid .signal-item[data-signal-level="HIGH"] .signal-state::before,
  .trend-signals-grid .signal-item[data-signal-level="ELEVATED"] .signal-state::before { content: "▲"; }
  .trend-signals-grid .signal-item[data-signal-level="WATCH"] .signal-state::before { content: "◆"; }
  .trend-signals-grid .signal-item[data-signal-level="LOW"] .signal-state::before { content: "○"; font-size: 11px; }
  .trend-signals-grid .signal-item[data-signal-level="HIGH"] .signal-state { color: #c69086; }
  .trend-signals-grid .signal-item[data-signal-level="CRITICAL"] .signal-state { color: #c58a83; }
  .trend-signals-grid .signal-item[data-signal-level="ELEVATED"] .signal-state { color: #b7a778; }
  .trend-signals-grid .signal-item[data-signal-level="WATCH"] .signal-state { color: #bca56f; }
  .trend-signals-grid .signal-item[data-signal-level="LOW"] .signal-state { color: #84b9bf; }
}

/* PC unified dashboard surface: the summary/gauge and the three monitoring
   sections read as one card. Individual lower panels are separated only by
   quiet structural rules. Mobile remains on the legacy independent layout. */
@media (min-width: 1181px) {
  body[data-page="dashboard"] .situation-brief {
    margin-bottom: 0 !important;
    border-bottom: 0;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: none;
  }

  body[data-page="dashboard"] main > .situation-brief ~ .trend-signals-grid {
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(370px, .94fr) minmax(350px, .91fr) !important;
    gap: 0 !important;
    align-items: stretch;
    min-height: 450px;
    margin-top: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(112, 203, 213, .22);
    border-radius: 0 0 8px 8px;
    background: rgba(9, 16, 22, .94);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .14);
  }

  body[data-page="dashboard"] .dashboard-card-notice {
    display: block;
    overflow: hidden;
    margin: 10px 10px 0;
    color: #60747d;
    font: 500 9.5px/1.2 var(--sans);
    letter-spacing: -.005em;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
  }

  body[data-page="dashboard"] .trend-signals-grid > .trend-panel,
  body[data-page="dashboard"] .trend-signals-grid > .intelligence-grid,
  body[data-page="dashboard"] .trend-signals-grid > .desktop-events-panel {
    height: 450px !important;
    min-height: 450px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-page="dashboard"] .trend-signals-grid > .trend-panel,
  body[data-page="dashboard"] .trend-signals-grid > .intelligence-grid {
    border-right: 1px solid rgba(127, 158, 176, .18) !important;
  }

  body[data-page="dashboard"] .trend-signals-grid > .intelligence-grid {
    display: block;
    min-width: 0;
  }

  body[data-page="dashboard"] .trend-signals-grid > .intelligence-grid > .signals-panel {
    width: 100%;
    height: 100% !important;
    min-height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-page="dashboard"] .trend-signals-grid > .trend-panel::after,
  body[data-page="dashboard"] .trend-signals-grid .signals-panel::after,
  body[data-page="dashboard"] .trend-signals-grid > .desktop-events-panel::after {
    display: none;
  }

  body[data-page="dashboard"] .trend-signals-grid > .trend-panel .chart-wrap {
    height: 220px !important;
    min-height: 220px;
  }
}

/* One quiet structural stroke across the product.  Risk remains visible in
   text and fills, while outlines no longer introduce competing colors. */
:root {
  --site-unified-border: rgba(103, 145, 166, .30);
  --line: var(--site-unified-border);
  --line-bright: var(--site-unified-border);
}

body *,
body *::before,
body *::after {
  border-color: var(--site-unified-border) !important;
}

/* Recency should be easy to scan without competing with the signal state. */
.trend-signals-grid .signal-time {
  color: #a4b7bf;
}

/* Regional risk uses the same stepped empty-state rail as the signal board:
   muted slots remain visible where the score has not filled the scale. */
@media (min-width: 1181px) {
  .section-block[aria-labelledby="regionsTitle"] .region-card .region-score { font-size: 18px; }

  .section-block[aria-labelledby="regionsTitle"] .region-card .risk-bar {
    width: 5px;
    border: 0;
    background: repeating-linear-gradient(to top, rgba(112, 137, 148, .26) 0 16%, transparent 16% 20%);
  }
}

@media (max-width: 768px) {
  .regions-grid .region-card .risk-bar {
    width: 5px;
    border: 0;
    background: repeating-linear-gradient(to top, rgba(112, 137, 148, .26) 0 16%, transparent 16% 20%);
  }
}