.terranet-page {
  --terranet-section-space: clamp(1.75rem, 3vw, 2.5rem);
  --terranet-flow-space: clamp(0.65rem, 1.2vw, 0.9rem);
  --terranet-heading-space: clamp(0.6rem, 1vw, 0.8rem);
  --terranet-panel-space: clamp(1rem, 1.75vw, 1.5rem);
  --terranet-warm-paper: #f8f3e9;
  --terranet-sand: #ede2cf;
  --terranet-muted-sage: #e5eadc;
  --terranet-pale-clay: #f4e8e3;
  --terranet-surface-line: color-mix(in srgb, var(--line) 72%, var(--cream));
  margin-inline: auto;
  max-width: 92rem;
  padding: clamp(1.5rem, 3vw, 3rem) max(1rem, calc((100vw - 86rem) / 2)) clamp(2.5rem, 4.5vw, 4.25rem);
}

.terranet-intro,
.terranet-history-heading {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
}

.terranet-intro {
  background: var(--terranet-warm-paper);
  border: 1px solid var(--terranet-surface-line);
  padding: var(--terranet-panel-space);
}

.terranet-intro > div { max-width: 48rem; }
.terranet-intro .eyebrow,
.terranet-section-title .eyebrow,
.terranet-history-heading .eyebrow,
.terranet-close .eyebrow { margin: 0 0 0.45rem; }
.terranet-intro h1 { font-size: clamp(2.55rem, 5vw, 4.5rem); margin: 0; }

.terranet-report-link {
  border: 1px solid var(--clay);
  color: var(--clay);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  min-height: 2.5rem;
  padding: 0.5rem 0.9rem;
  text-decoration: none;
  text-transform: uppercase;
}

.terranet-report-link:hover,
.terranet-report-link:focus-visible { background: var(--clay); color: #fff; }

.terranet-overview {
  display: grid;
  gap: var(--terranet-flow-space);
  margin-top: var(--terranet-flow-space);
}

.terranet-overall {
  align-items: center;
  background: var(--terranet-warm-paper);
  border: 1px solid var(--line);
  display: grid;
  gap: 0.75rem 1.1rem;
  grid-template-columns: auto minmax(0, 1fr) minmax(10rem, auto);
  padding: clamp(1rem, 1.8vw, 1.4rem);
}

.terranet-overall[data-state="operational"] { background: color-mix(in srgb, var(--sage) 60%, var(--cream)); border-color: color-mix(in srgb, var(--moss) 38%, var(--line)); }
.terranet-overall[data-state="degraded"] { background: #f3e4c4; border-color: #d9b96a; }
.terranet-overall[data-state="outage"] { background: #f1d9d3; border-color: #d69a8c; }

.terranet-status-glyph {
  align-items: center;
  background: #5e5f58;
  border-radius: 50%;
  color: var(--cream);
  display: inline-flex;
  font-size: 1.15rem;
  font-weight: 700;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.terranet-overall[data-state="operational"] .terranet-status-glyph { background: var(--moss); }
.terranet-overall[data-state="degraded"] .terranet-status-glyph { background: #6b4a0b; }
.terranet-overall[data-state="outage"] .terranet-status-glyph { background: #7a2e1d; }
.terranet-overall h2 { color: var(--ink); font-size: clamp(1.55rem, 2.5vw, 2rem); margin: 0; }
.terranet-overall-copy p { margin: 0.15rem 0 0; max-width: 42rem; }
.terranet-freshness { color: var(--muted); font-size: 0.8rem; line-height: 1.45; margin: 0; text-align: right; }

.terranet-metrics { display: grid; gap: var(--terranet-flow-space); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.terranet-metrics article { background: var(--terranet-sand); border: 1px solid var(--terranet-surface-line); display: flex; flex-direction: column; gap: 0.25rem; min-height: 7.5rem; padding: clamp(0.85rem, 1.5vw, 1.1rem); }
.terranet-metrics p { color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; margin: 0; text-transform: uppercase; }
.terranet-metrics strong { color: var(--moss); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3vw, 2.65rem); font-weight: 400; line-height: 1.1; }
.terranet-metrics span { color: var(--muted); font-size: 0.78rem; line-height: 1.45; margin-top: auto; }

.terranet-components { background: var(--terranet-muted-sage); border: 1px solid var(--terranet-surface-line); margin-top: var(--terranet-section-space); padding: var(--terranet-panel-space); }
.terranet-section-title h2,
.terranet-history-heading h2,
.terranet-close h2 { margin: 0; }
.terranet-components ul { border-bottom: 1px solid var(--line); list-style: none; margin: var(--terranet-heading-space) 0 0; padding: 0; }
.terranet-components li { align-items: center; border-top: 1px solid var(--line); display: flex; font-size: 0.9rem; gap: 0.8rem; justify-content: space-between; padding: 0.65rem 0; }
.terranet-component-name { align-items: center; display: inline-flex; font-weight: 600; gap: 0.5rem; }
.terranet-component-name i,
.terranet-history-key i { background: #c9c1b0; border-radius: 50%; display: inline-block; flex: 0 0 auto; height: 0.65rem; width: 0.65rem; }
.terranet-component-name i[data-state="operational"], .terranet-history-key i[data-state="operational"], .terranet-history-day[data-state="operational"] { background: var(--garden); }
.terranet-component-name i[data-state="degraded"], .terranet-history-key i[data-state="degraded"], .terranet-history-day[data-state="degraded"] { background: #c99a3f; }
.terranet-component-name i[data-state="outage"], .terranet-history-key i[data-state="outage"], .terranet-history-day[data-state="outage"] { background: #a9442e; }
.terranet-components [data-component-label] { color: var(--muted); font-size: 0.82rem; }

.terranet-history { background: var(--terranet-pale-clay); border: 1px solid var(--terranet-surface-line); margin-top: var(--terranet-section-space); padding: var(--terranet-panel-space); }
.terranet-history-heading { align-items: end; }
.terranet-history-heading > div:first-child { min-width: 0; }
.terranet-history-summary { color: var(--muted); display: flex; flex-direction: column; font-size: 0.78rem; gap: 0.2rem; line-height: 1.4; text-align: right; }
.terranet-history-summary strong { color: var(--moss); font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; font-weight: 400; }
.terranet-history-rail { align-items: end; border-bottom: 1px solid var(--line); display: grid; gap: clamp(2px, 0.3vw, 3px); grid-template-columns: repeat(30, minmax(2px, 1fr)); height: 4.25rem; margin-top: var(--terranet-heading-space); padding-bottom: 0.25rem; }
.terranet-history-rail > p { color: var(--muted); font-size: 0.85rem; grid-column: 1 / -1; margin: auto; }
.terranet-history-day { background: #c9c1b0; border-radius: 0.1rem 0.1rem 0 0; height: 100%; min-width: 2px; }
.terranet-history-day:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.terranet-history-key { color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: var(--terranet-flow-space); }
.terranet-history-key span { align-items: center; display: inline-flex; font-size: 0.75rem; gap: 0.35rem; }
.terranet-history-key .terranet-history-note { margin-left: auto; }

.terranet-close { column-gap: clamp(1.25rem, 2.5vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr); margin-top: var(--terranet-section-space); row-gap: var(--terranet-panel-space); }
.terranet-incidents { background: var(--terranet-warm-paper); border: 1px solid var(--terranet-surface-line); min-width: 0; padding: var(--terranet-panel-space); }
.terranet-incidents [data-incident-list] { margin-top: var(--terranet-heading-space); }
.terranet-incident { align-items: start; border-top: 1px solid var(--line); display: grid; gap: 0.5rem 0.75rem; grid-template-columns: minmax(7.5rem, 0.5fr) minmax(0, 1fr) auto; padding: 0.75rem 0; }
.terranet-incident h3,
.terranet-incident p { margin: 0; }
.terranet-incident h3 { color: var(--ink); font-family: inherit; font-size: 0.9rem; font-weight: 600; }
.terranet-incident time,
.terranet-incident p { color: var(--muted); font-size: 0.78rem; }
.terranet-incident-badge { border: 1px solid currentColor; color: var(--moss); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.15rem 0.35rem; text-transform: uppercase; }
.terranet-empty-state { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; margin: 0; padding: 0.75rem 0; }

.terranet-help { background: var(--terranet-sand); border: 1px solid var(--terranet-surface-line); padding: clamp(1rem, 2vw, 1.5rem); }
.terranet-help ol { margin: var(--terranet-heading-space) 0; padding-left: 1.25rem; }
.terranet-help li + li { margin-top: 0.2rem; }
.terranet-help a { color: var(--moss); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

@media (max-width: 48rem) {
  .terranet-page {
    --terranet-section-space: clamp(1.5rem, 5vw, 2rem);
    --terranet-flow-space: clamp(0.65rem, 3vw, 0.85rem);
    --terranet-heading-space: 0.6rem;
    --terranet-panel-space: clamp(1rem, 4vw, 1.25rem);
    padding-bottom: clamp(2.5rem, 8vw, 3.5rem);
    padding-top: clamp(1.5rem, 6vw, 2rem);
  }
  .terranet-overall { align-items: start; grid-template-columns: auto minmax(0, 1fr); }
  .terranet-freshness { grid-column: 2; text-align: left; }
  .terranet-metrics { grid-template-columns: 1fr; }
  .terranet-metrics article { min-height: 0; }
  .terranet-close { grid-template-columns: 1fr; }
}

@media (max-width: 34rem) {
  .terranet-page { padding-inline: 0.875rem; }
  .terranet-intro { align-items: start; flex-direction: column; }
  .terranet-overall { grid-template-columns: 1fr; }
  .terranet-freshness { grid-column: 1; }
  .terranet-components li { align-items: start; flex-direction: column; gap: 0.3rem; }
  .terranet-history-summary { text-align: left; }
  .terranet-history-key .terranet-history-note { margin-left: 0; width: 100%; }
  .terranet-incident { grid-template-columns: 1fr auto; }
  .terranet-incident > div { grid-column: 1 / -1; grid-row: 2; }
}