/* Keep the existing mobile cause list. PC compares actual regional changes
   on one shared, symmetric scale; it does not imply global-score attribution. */
.cause-change-chart, .cause-change-heading { display: none; }
@media (max-width: 850px) {
  body[data-page="dashboard"] .gauge-tiers { display: none; }
}
@media (min-width: 851px) {
  body[data-page="dashboard"] .situation-lower-row .situation-risk-transmission { display: none; }
  body[data-page="dashboard"] .situation-lower-row .situation-causes {
    width: 100%;
    max-width: 580px;
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(90px, 120px) minmax(100px, 1fr) 140px;
    column-gap: 12px;
    align-items: baseline;
  }
  body[data-page="dashboard"] .situation-lower-row .situation-causes > .situation-causes__title--mobile {
    grid-column: 1 / 4;
    margin: 0;
    color: #a4b6cc;
    font: 600 13px/1.5 var(--sans);
  }
  body[data-page="dashboard"] .cause-change-heading {
    display: block;
    grid-column: 4;
    text-align: right;
    color: #94a8be;
    font: 500 12px/1.5 var(--sans);
  }
  body[data-page="dashboard"] .situation-lower-row .situation-causes ul {
    gap: 0;
    margin: 8px 0 0;
    padding: 0;
    grid-column: 1 / -1;
    width: 100%;
  }
  body[data-page="dashboard"] .situation-lower-row .situation-causes li {
    display: grid;
    grid-template-columns: 18px minmax(90px, 120px) minmax(100px, 1fr) 140px;
    align-items: center;
    justify-content: stretch;
    gap: 12px;
    min-height: 48px;
    padding: 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(137, 160, 190, .12);
  }
  /* The card already has its own section divider below the list. */
  body[data-page="dashboard"] .situation-lower-row .situation-causes li:last-child {
    border-bottom: 0 !important;
  }
  body[data-page="dashboard"] .situation-lower-row .situation-causes li .situation-cause-rank {
    grid-column: 1;
    grid-row: 1;
    color: #70849a;
    font: 500 12px/1.5 var(--sans);
  }
  body[data-page="dashboard"] .situation-lower-row .situation-causes li > span {
    display: block;
    grid-column: 2;
    color: #d0dbe6;
    font: 600 15px/1.55 var(--sans);
    white-space: normal;
    overflow: visible;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  body[data-page="dashboard"] .situation-lower-row .situation-causes li > strong {
    grid-column: 3;
    color: #a3b5c7;
    font: 450 13px/1.65 var(--sans);
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  body[data-page="dashboard"] .situation-lower-row .situation-cause-trend { display: none; }
  body[data-page="dashboard"] .situation-lower-row .cause-change-chart {
    display: grid;
    grid-column: 4;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    color: #94a8be;
  }
  body[data-page="dashboard"] .cause-change-track {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: rgba(137, 160, 190, .065);
  }
  body[data-page="dashboard"] .cause-change-track::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -5px;
    height: 16px;
    width: 1px;
    background: #4f6379;
  }
  body[data-page="dashboard"] .cause-change-fill {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 999px;
    background: currentColor;
  }
  body[data-page="dashboard"] .cause-change-value {
    font: 600 14px/1.4 var(--sans);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }
  body[data-page="dashboard"] .cause-change-chart.is-up { color: #be8575; }
  body[data-page="dashboard"] .cause-change-chart.is-down { color: #78a39e; }
  body[data-page="dashboard"] .cause-change-chart.is-flat .cause-change-track::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 3px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #91a3b5;
  }
  body[data-page="dashboard"] .cause-change-chart.is-missing .cause-change-track { visibility: hidden; }
  body[data-page="dashboard"] .situation-lower-row .situation-causes li.is-empty {
    display: block;
    color: #94a8be;
  }
}
@media (min-width: 851px) and (max-width: 1100px) {
  body[data-page="dashboard"] .situation-lower-row .situation-causes,
  body[data-page="dashboard"] .situation-lower-row .situation-causes li {
    grid-template-columns: 18px minmax(75px, 100px) minmax(80px, 1fr) 100px;
    gap: 8px;
  }
  body[data-page="dashboard"] .situation-lower-row .cause-change-chart {
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 8px;
  }
}