/* Status dashboard. Uses the tokens from site.css. */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.dash-section { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.dash-section h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.pad { padding: 20px; }
.card-note { margin: 4px 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.45; }

.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 4px; }
.dash-head h1 { margin-top: 8px; font-size: clamp(2.2rem, 5vw, 3.5rem); }
.dash-meta { display: flex; align-items: center; gap: 12px; }
.dash-updated { color: var(--faint); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

/* Loading skeleton */
.dash-skeleton { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.dash-skeleton i {
  height: 120px;
  border-radius: var(--radius);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 220% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer { to { background-position: -120% 0; } }

/* Health banner */
.health {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: clamp(18px, 3vw, 28px);
  background: linear-gradient(115deg, color-mix(in srgb, var(--tone, var(--faint)) 14%, var(--surface-solid)), var(--surface) 70%);
  border-color: color-mix(in srgb, var(--tone, var(--faint)) 36%, var(--line));
}
.dot-large { width: 26px; height: 26px; box-shadow: 0 0 0 7px color-mix(in srgb, var(--tone, var(--faint)) 20%, transparent); }
.dot-large[data-state="ok"] { animation: orb-breathe 3.6s ease-in-out infinite; }
@keyframes orb-breathe {
  0%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tone) 20%, transparent); }
  50% { box-shadow: 0 0 0 13px color-mix(in srgb, var(--tone) 6%, transparent); }
}
.health-text { min-width: 0; }
.health-text h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.health-sub { margin: 6px 0 0; color: var(--muted); }
.health-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.health-list:empty { display: none; }

/* Key figures */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 150px;
  padding: 18px 18px 14px;
  overflow: hidden;
}
.kpi[data-state="warn"], .kpi[data-state="bad"] { border-color: color-mix(in srgb, var(--tone) 50%, var(--line)); }
.kpi-value { font-family: var(--font-num); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-sub { color: var(--muted); font-size: 0.84rem; }
.kpi .meter { margin-top: 8px; }
.kpi-spark { height: 34px; margin-top: auto; padding-top: 6px; }
.spark { display: block; width: 100%; height: 100%; }

/* Controls */
.segmented { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.segmented button {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); }

/* Charts */
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.chart-card { padding: 18px 18px 14px; min-width: 0; }
.chart-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.chart-card h3, .pad h3 { font-size: 1.1rem; }
.chart-now { color: var(--accent); font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.chart-box { position: relative; min-height: 190px; }
.chart-svg { display: block; width: 100%; height: auto; touch-action: pan-y; overflow: visible; }
.chart-grid { stroke: rgba(var(--line-rgb), 0.09); stroke-width: 1; }
.chart-axis { fill: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-cross { stroke: var(--line-strong); stroke-dasharray: 3 4; }
.chart-dot { stroke: var(--bg); stroke-width: 2; }
.chart-hit { cursor: crosshair; }
.chart-empty { display: grid; place-items: center; height: 190px; margin: 0; color: var(--faint); font-size: 0.9rem; text-align: center; }
.chart-tip {
  position: absolute;
  top: 8px;
  z-index: 3;
  display: grid;
  gap: 3px;
  min-width: 130px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(var(--panel-rgb), 0.96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-size: 0.8rem;
  pointer-events: none;
}
.chart-tip strong { color: var(--text); font-size: 0.78rem; }
.chart-tip span { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.chart-tip span::before, .chart-legend li::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c); flex: none; }
.chart-tip b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.chart-legend { display: flex; gap: 16px; margin: 6px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.8rem; }
.chart-legend li { display: flex; align-items: center; gap: 7px; }

/* Inside, care and site cards */
.cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.cards-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.pad header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pad > h3 { margin-bottom: 14px; }
.big { display: block; font-family: var(--font-num); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.pair .card-note { display: block; }
.pad .meter { margin: 14px 0 6px; }
.pad[data-state] .meter > i { background: var(--tone); }

.rows { display: grid; gap: 0; margin: 14px 0 0; }
.row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.9rem; }
.row dt { color: var(--muted); }
.row dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.row dd[data-state] { color: var(--tone); }

.cores { display: grid; gap: 10px; }
.core { display: grid; grid-template-columns: 56px 1fr 44px; align-items: center; gap: 12px; font-size: 0.86rem; color: var(--muted); }
.core b { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.core .meter { height: 10px; }

.stack { display: flex; height: 16px; overflow: hidden; border-radius: 999px; background: rgba(var(--line-rgb), 0.1); gap: 2px; }
.stack i { display: block; height: 100%; min-width: 3px; background: var(--c); }
.legend { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 0.88rem; }
.legend li { display: flex; align-items: center; gap: 9px; color: var(--muted); }
.legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.legend b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }

/* Services */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.service[data-state="bad"] { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }
.service .rows { margin-top: 4px; }

/* Availability */
.avail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.avail-percent { font-family: var(--font-num); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ok); }
.avail-percent[data-state="warn"] { color: var(--warn); }
.avail-percent[data-state="bad"] { color: var(--bad); }
.avail-detail { color: var(--muted); font-size: 0.88rem; }
.avail-track { display: flex; gap: 2px; height: 34px; overflow: hidden; }
.avail-track i { flex: 1 1 0; min-width: 0; border-radius: 4px; background: var(--bad); opacity: 0.85; }
.avail-track i.up { background: var(--ok); opacity: 0.8; }
.avail-track i:hover { opacity: 1; }

/* Housing sources */
.sources { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.sources li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.92rem; font-weight: 600; }
.sources small { grid-column: 1; color: var(--muted); font-size: 0.78rem; font-weight: 500; }
.sources .chip { grid-column: 2; grid-row: 1 / span 2; }

.dash-foot { margin: 8px 0 0; color: var(--faint); font-size: 0.84rem; text-align: center; }

@media (max-width: 1000px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 760px) {
  .charts { grid-template-columns: minmax(0, 1fr); }
  .health { flex-direction: column; align-items: flex-start; gap: 14px; }
  .kpi { min-height: 140px; padding: 14px 14px 12px; }
  .pad { padding: 16px; }
  .dash-section { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .kpis { gap: 10px; }
  .cards-2 { grid-template-columns: 1fr; }
}

.health-list .chip { min-width: 0; white-space: normal; }

/* Entrance animations. Only elements built once get them, so refreshes never replay them. */
.dash > *, .kpis > .kpi, .charts > .chart-card, .cards-3 > .card, .cards-2 > .card {
  animation: dash-in 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dash > :nth-child(2) { animation-delay: 70ms; }
.dash > :nth-child(3) { animation-delay: 130ms; }
.dash > :nth-child(n + 4) { animation-delay: 190ms; }
.kpis > .kpi:nth-child(1) { animation-delay: 150ms; }
.kpis > .kpi:nth-child(2) { animation-delay: 200ms; }
.kpis > .kpi:nth-child(3) { animation-delay: 250ms; }
.kpis > .kpi:nth-child(4) { animation-delay: 300ms; }
.kpis > .kpi:nth-child(5) { animation-delay: 350ms; }
.kpis > .kpi:nth-child(6) { animation-delay: 400ms; }
.kpis > .kpi:nth-child(7) { animation-delay: 450ms; }
.kpis > .kpi:nth-child(8) { animation-delay: 500ms; }
.charts > .chart-card:nth-child(even), .cards-3 > .card:nth-child(2) { animation-delay: 260ms; }
.cards-3 > .card:nth-child(3), .cards-2 > .card:nth-child(2) { animation-delay: 330ms; }

@keyframes dash-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Chart lines draw themselves the first time, then the fill fades in. */
.chart-svg.is-new .chart-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-line 1.4s cubic-bezier(0.3, 0.7, 0.2, 1) 0.3s forwards; }
.chart-svg.is-new .chart-area { opacity: 0; animation: fade-in 0.9s ease 0.9s forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }

/* Cards respond when you point at them. */
.kpi, .chart-card, .service { transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease; }
.kpi:hover, .chart-card:hover, .service:hover { transform: translateY(-3px); border-color: var(--line-strong); }

/* Stronger entrance than before: a bigger rise with a slight scale. */
.dash > *, .kpis > .kpi, .charts > .chart-card, .cards-3 > .card, .cards-2 > .card {
  animation-name: dash-in-big;
  animation-duration: 900ms;
}
@keyframes dash-in-big {
  from { opacity: 0; transform: translate3d(0, 38px, 0) scale(0.965); }
  to { opacity: 1; transform: none; }
}
.kpis > .kpi:nth-child(1) { animation-delay: 220ms; }
.kpis > .kpi:nth-child(2) { animation-delay: 300ms; }
.kpis > .kpi:nth-child(3) { animation-delay: 380ms; }
.kpis > .kpi:nth-child(4) { animation-delay: 460ms; }
.kpis > .kpi:nth-child(5) { animation-delay: 540ms; }
.kpis > .kpi:nth-child(6) { animation-delay: 620ms; }
.kpis > .kpi:nth-child(7) { animation-delay: 700ms; }
.kpis > .kpi:nth-child(8) { animation-delay: 780ms; }

/* Charts further down reveal while you scroll (where the browser supports it). */
@supports (animation-timeline: view()) {
  .charts > .chart-card, .cards-3 > .card, .cards-2 > .card, .availability {
    animation: dash-in-big linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}

/* The availability bar builds up from left to right. */
.avail-track.is-new i { animation: seg-in 500ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 12ms); transform-origin: bottom; }
@keyframes seg-in { from { opacity: 0; transform: scaleY(0.15); } to { opacity: 1; transform: none; } }

/* The health banner glows once it has settled. */
.health { animation: dash-in-big 900ms cubic-bezier(0.16, 1, 0.3, 1) both, health-glow 2.4s ease-out 1s 1; }
@keyframes health-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone) 45%, transparent), var(--shadow); } 100% { box-shadow: 0 0 0 26px color-mix(in srgb, var(--tone) 0%, transparent), var(--shadow); } }