:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f4f7fb;
  color: #172033;
}

* { box-sizing: border-box; }

body { margin: 0; min-height: 100vh; }

.shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.card {
  width: min(680px, 100%);
  border: 1px solid #d8e0ec;
  border-top: 6px solid #66809f;
  border-radius: 18px;
  background: #fff;
  padding: clamp(28px, 6vw, 52px);
  box-shadow: 0 22px 60px rgb(31 50 76 / 12%);
}

.card[data-tone="normal"] { border-top-color: #16845b; }
.card[data-tone="scheduled"] { border-top-color: #2563eb; }
.card[data-tone="active"] { border-top-color: #d97706; }
.card[data-tone="unavailable"] { border-top-color: #b42318; }

.brand { font-weight: 800; letter-spacing: -.02em; color: #1f5f99; }
.eyebrow { margin: 32px 0 8px; color: #667085; font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.75rem, 5vw, 3rem); line-height: 1.08; letter-spacing: -.035em; }
.message { margin: 20px 0 0; color: #475467; font-size: 1.05rem; line-height: 1.65; }
.details { margin: 30px 0 0; display: grid; gap: 14px; }
.details[hidden] { display: none; }
.details div { border-radius: 12px; background: #f7f9fc; padding: 14px 16px; }
dt { color: #667085; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
dd { margin: 5px 0 0; font-weight: 650; }
.updated { min-height: 1.25em; margin: 28px 0 0; color: #667085; font-size: .82rem; }