/* ───────────────────────────────────────────────────────────
       Status page · brand v0.4.0 · Sprint 1 P1 #17
       Reuses marketing.css for nav + base. All status-specific
       elements are scoped here to avoid bleeding into the landing.
       ─────────────────────────────────────────────────────────── */

    main.status-main {
      max-width: 880px;
      margin: 0 auto;
      padding: 48px clamp(16px, 4vw, 48px) 96px;
    }

    /* ───── Hero banner — overall status ───── */
    .status-banner {
      border-radius: 14px;
      padding: 28px 32px;
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 12px;
      border: 1px solid var(--line);
      background: var(--bg-1);
    }
    .status-banner.operational {
      border-color: var(--success);
      background: linear-gradient(135deg, color-mix(in oklab, var(--success) 8%, var(--bg-1)) 0%, var(--bg-1) 100%);
    }
    .status-banner.degraded {
      border-color: var(--accent);
      background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 8%, var(--bg-1)) 0%, var(--bg-1) 100%);
    }
    .status-banner.outage {
      border-color: var(--error, #FF6B6B);
      background: linear-gradient(135deg, color-mix(in oklab, var(--error, #FF6B6B) 8%, var(--bg-1)) 0%, var(--bg-1) 100%);
    }
    .status-banner.loading,
    .status-banner.unknown {
      border-color: var(--line);
      background: var(--bg-1);
    }
    .status-banner .dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      flex: none;
      background: var(--text-3);
    }
    .status-banner.operational .dot { background: var(--success); box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 25%, transparent); }
    .status-banner.degraded .dot    { background: var(--accent);  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent); }
    .status-banner.outage .dot      { background: var(--error, #FF6B6B); box-shadow: 0 0 0 4px color-mix(in oklab, var(--error, #FF6B6B) 25%, transparent); }
    .status-banner h1 {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin: 0 0 4px;
    }
    .status-banner .sub {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-3);
      letter-spacing: 0.01em;
    }

    .checked-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 40px;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-3);
    }
    .refresh-btn {
      background: var(--bg-1);
      border: 1px solid var(--line);
      color: var(--text-2);
      padding: 6px 12px;
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 11px;
      cursor: pointer;
      transition: border-color 160ms var(--ease), color 160ms var(--ease);
    }
    .refresh-btn:hover { border-color: var(--line-2); color: var(--text); }

    /* ───── Component list ───── */
    section.components { margin-bottom: 48px; }
    section.components h2 {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.005em;
      margin: 0 0 16px;
      color: var(--text);
    }
    .component-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .component {
      display: grid;
      grid-template-columns: 14px 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 14px 18px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--bg-1);
    }
    .component .pill-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--text-3);
    }
    .component[data-status="operational"] .pill-dot { background: var(--success); }
    .component[data-status="degraded"]    .pill-dot { background: var(--accent); }
    .component[data-status="outage"]      .pill-dot { background: var(--error, #FF6B6B); }
    .component .meta { min-width: 0; }
    .component .name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.3;
    }
    .component .desc {
      font-size: 12px;
      color: var(--text-3);
      margin-top: 2px;
    }
    .component .label {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-3);
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--bg-2);
    }
    .component[data-status="operational"] .label { color: var(--success); border-color: color-mix(in oklab, var(--success) 35%, var(--line)); }
    .component[data-status="degraded"]    .label { color: var(--accent);  border-color: color-mix(in oklab, var(--accent) 35%, var(--line)); }
    .component[data-status="outage"]      .label { color: var(--error, #FF6B6B); border-color: color-mix(in oklab, var(--error, #FF6B6B) 35%, var(--line)); }

    /* ───── Incidents list ───── */
    section.incidents h2 {
      font-size: 16px;
      font-weight: 600;
      margin: 0 0 16px;
      color: var(--text);
    }
    .incident {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 18px 20px;
      margin-bottom: 12px;
      background: var(--bg-1);
    }
    .incident-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 8px;
    }
    .incident-head .title {
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
    }
    .incident-head .status {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--text-3);
    }
    .incident-head .status[data-state="resolved"]      { color: var(--success); border-color: color-mix(in oklab, var(--success) 35%, var(--line)); }
    .incident-head .status[data-state="monitoring"]    { color: var(--accent);  border-color: color-mix(in oklab, var(--accent) 35%, var(--line)); }
    .incident-head .status[data-state="investigating"] { color: var(--error, #FF6B6B); border-color: color-mix(in oklab, var(--error, #FF6B6B) 35%, var(--line)); }
    .incident-meta {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-3);
      margin-bottom: 12px;
    }
    .incident-updates {
      border-top: 1px solid var(--line);
      padding-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .incident-update {
      display: grid;
      grid-template-columns: 140px 1fr;
      gap: 14px;
      font-size: 13px;
      color: var(--text-2);
      line-height: 1.5;
    }
    .incident-update .when {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-3);
      padding-top: 2px;
    }

    .empty-state {
      padding: 32px 24px;
      text-align: center;
      border: 1px dashed var(--line);
      border-radius: 10px;
      color: var(--text-3);
      font-size: 14px;
    }

    .skeleton-name,
    .skeleton-desc {
      background: var(--bg-2);
      border-radius: 4px;
    }
    .skeleton-name {
      height: 14px;
      width: 40%;
    }
    .skeleton-desc {
      height: 11px;
      width: 60%;
      margin-top: 6px;
    }

    @media (max-width: 600px) {
      .status-banner { padding: 20px 22px; }
      .status-banner h1 { font-size: 20px; }
      .component { grid-template-columns: 12px 1fr; }
      .component .label { grid-column: 2; justify-self: start; margin-top: 6px; }
      .incident-update { grid-template-columns: 1fr; gap: 4px; }
    }