/* ====================================================
   Endless Commerce — Status Page
   Tokens extracted from ec-client ACE design system
   (src/styles/globals.scss · tailwind.config.js)
   ==================================================== */

/* --- Fonts ------------------------------------------ */

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('fonts/PPNeueMontreal-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('fonts/PPNeueMontreal-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('fonts/PPNeueMontreal-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Design tokens ---------------------------------- */
/* Values extracted from ec-client globals.scss.
   ec-client source name is noted in each comment.     */

:root {
  /* Surface / background
     ec-client: --surface-ivory / --neutral-ivory-surface */
  --surface:        #f5f5f0;

  /* Card background
     ec-client: --card-ivory */
  --card:           #fdfdfc;

  /* Borders
     ec-client: --border-ivory */
  --border:         #e3e3d3;
  --border-subtle:  #f0f0ea;

  /* Text
     ec-client: --text-primary-forge / --text-secondary-charcoal / --neutral-ivory-dark */
  --fg:             #170303;
  --fg-secondary:   #4a453a;
  --fg-muted:       #99978a;

  /* Muted background (chips, code, tags)
     ec-client: --muted-ivory / --neutral-ivory-xlight */
  --muted-bg:       #edede4;

  /* Brand
     ec-client: --primary-charcoal / --primary-ember */
  --charcoal:       #2d2a26;
  --ember:          #ed3418;

  /* --- Status colors ---
     ec-client has palette primitives but no semantic status tokens.
     These are new tokens defined for this surface.
     Hue sources: evergreen-light, lemon-light→amber-600 (contrast fix),
                  --destructive, --neutral-ivory-dark */

  --status-operational:        #2f855a;   /* ec-client: --evergreen-light */
  --status-operational-bg:     #f0fdf4;
  --status-operational-border: #c6f6d5;
  --status-operational-text:   #1a5c38;

  --status-degraded:           #d97706;   /* amber-600; ec-client lemon (#e1c825) has insufficient contrast */
  --status-degraded-bg:        #fffbeb;
  --status-degraded-border:    #fde68a;
  --status-degraded-text:      #92400e;

  --status-down:               #dc2626;   /* ec-client: --destructive */
  --status-down-bg:            #fef2f2;
  --status-down-border:        #fecaca;
  --status-down-text:          #991b1b;

  --status-maintenance:        #99978a;   /* ec-client: --neutral-ivory-dark */
  --status-maintenance-bg:     #edede4;
  --status-maintenance-border: #e3e3d3;
  --status-maintenance-text:   #4a453a;

  /* Typography
     ec-client uses PP Neue Montreal for all UI text; the mono stack appears
     only for inline code. No serif font exists in the system. */
  --font-sans: 'PP Neue Montreal', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Consolas, 'Liberation Mono', monospace;

  /* Spacing (4px base — ec-client uses Tailwind default scale) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Border radius
     ec-client: --radius = 8px; sm/md/lg/xl computed from it */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* Shadows (ec-client tailwind.config.js boxShadow scale) */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.10);
}

/* --- Reset ------------------------------------------ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Base ------------------------------------------- */

html {
  font-size: 16px;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
  background-color: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(23, 3, 3, 0.2);
}

a:hover {
  text-decoration-color: rgba(23, 3, 3, 0.55);
}

/* --- Page shell ------------------------------------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- Header ----------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 700px;
  margin: 0 auto;
  padding: 28px 24px 20px;
  width: 100%;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.logo {
  height: 20px;
  width: auto;
  display: block;
}

.brand-status {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--fg-muted);
}

/* --- Main ------------------------------------------- */

main {
  flex: 1;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px 56px;
  width: 100%;
}

/* --- Eyebrow ---------------------------------------- */
/* Section label — PP Neue Montreal, muted, restrained (ec-client tone) */

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 10px;
}

/* --- Overall status banner -------------------------- */

.overall-status {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  margin-bottom: 36px;
  background: var(--card);
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-xs);
  transition: background 0.2s, border-color 0.2s;
}

.overall-status--operational {
  background: var(--status-operational-bg);
  border-color: var(--status-operational-border);
}

.overall-status--degraded {
  background: var(--status-degraded-bg);
  border-color: var(--status-degraded-border);
}

.overall-status--down {
  background: var(--status-down-bg);
  border-color: var(--status-down-border);
}

.overall-status--maintenance {
  background: var(--status-maintenance-bg);
  border-color: var(--status-maintenance-border);
}

.overall-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.overall-status--operational .overall-dot { background: var(--status-operational); }
.overall-status--degraded    .overall-dot { background: var(--status-degraded); }
.overall-status--down        .overall-dot { background: var(--status-down); }
.overall-status--maintenance .overall-dot { background: var(--status-maintenance); }

.overall-status--down .overall-dot,
.overall-status--degraded .overall-dot {
  animation: pulse-dot 2.2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(0.88); }
}

.overall-title {
  /* PP Neue Montreal heading — matches ec-client h1 treatment */
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.overall-status--operational .overall-title { color: var(--status-operational-text); }
.overall-status--degraded    .overall-title { color: var(--status-degraded-text); }
.overall-status--down        .overall-title { color: var(--status-down-text); }
.overall-status--maintenance .overall-title { color: var(--status-maintenance-text); }

.overall-updated {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 3px;
}

/* --- Section --------------------------------------- */

.section {
  margin-bottom: 40px;
}

/* --- Component list -------------------------------- */

.component-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.component-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.component-row:last-child {
  border-bottom: none;
}

.component-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.component-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--fg);
}

.component-desc {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.4;
  margin-top: 1px;
}

/* --- Status badge ---------------------------------- */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px 2px 6px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  white-space: nowrap;
}

.status-badge--operational {
  color: var(--status-operational-text);
  background: var(--status-operational-bg);
  border-color: var(--status-operational-border);
}

.status-badge--degraded {
  color: var(--status-degraded-text);
  background: var(--status-degraded-bg);
  border-color: var(--status-degraded-border);
}

.status-badge--down {
  color: var(--status-down-text);
  background: var(--status-down-bg);
  border-color: var(--status-down-border);
}

.status-badge--maintenance {
  color: var(--status-maintenance-text);
  background: var(--status-maintenance-bg);
  border-color: var(--status-maintenance-border);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-badge--operational .status-dot { background: var(--status-operational); }
.status-badge--degraded    .status-dot { background: var(--status-degraded); }
.status-badge--down        .status-dot { background: var(--status-down); }
.status-badge--maintenance .status-dot { background: var(--status-maintenance); }

/* --- Incident card --------------------------------- */

.incident-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: var(--shadow-xs);
}

.incident-card:last-child {
  margin-bottom: 0;
}

.incident-card--degraded { border-color: var(--status-degraded-border); }
.incident-card--down     { border-color: var(--status-down-border); }

.incident-card--resolved {
  border-color: var(--border);
  opacity: 0.8;
}

.incident-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.incident-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.incident-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.35;
  flex: 1;
}

/* Severity / resolved tag — mirrors ec-client StatusBadge (sans, text-xs, font-medium) */
.incident-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  flex-shrink: 0;
  margin-top: 1px;
}

.incident-tag--resolved {
  background: var(--status-operational-bg);
  color: var(--status-operational-text);
  border-color: var(--status-operational-border);
}

.incident-tag--degraded {
  background: var(--status-degraded-bg);
  color: var(--status-degraded-text);
  border-color: var(--status-degraded-border);
}

.incident-tag--down {
  background: var(--status-down-bg);
  color: var(--status-down-text);
  border-color: var(--status-down-border);
}

.incident-tag--maintenance {
  background: var(--status-maintenance-bg);
  color: var(--status-maintenance-text);
  border-color: var(--status-maintenance-border);
}

.incident-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--fg-muted);
}

.incident-affected {
  color: var(--fg-secondary);
}

/* --- Timeline -------------------------------------- */

.incident-timeline {
  /* no extra padding — entries handle their own */
}

.timeline-entry {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.timeline-entry:last-child {
  border-bottom: none;
}

.timeline-time {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.6;
  padding-top: 1px;
  flex-shrink: 0;
}

.timeline-body {
  font-size: 13px;
  color: var(--fg);
  line-height: 1.55;
}

.timeline-body strong { font-weight: 500; }

.timeline-body em { font-style: italic; }

.timeline-body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--muted-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
}

.timeline-body a {
  color: var(--charcoal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Maintenance card ------------------------------ */

.maintenance-card {
  border: 1px solid var(--status-maintenance-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-xs);
}

.maintenance-card:last-child {
  margin-bottom: 0;
}

.maintenance-card--active {
  border-color: var(--status-degraded-border);
  background: var(--status-degraded-bg);
}

.maintenance-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.maintenance-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
}

.maintenance-window {
  font-size: 12px;
  color: var(--fg-muted);
  white-space: nowrap;
}

.maintenance-description {
  font-size: 13px;
  color: var(--fg-secondary);
  line-height: 1.5;
  margin-top: 4px;
}

.maintenance-affected {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 8px;
}

/* --- Footer ---------------------------------------- */

.site-footer {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px 24px 28px;
  width: 100%;
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--fg-muted);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer-note {
  margin: 0;
  line-height: 1.5;
  max-width: 58ch;
}

/* --- Responsive ------------------------------------ */

@media (max-width: 560px) {
  .site-header,
  main,
  .site-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .timeline-entry {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .timeline-time {
    font-size: 10px;
  }

  .maintenance-header {
    flex-direction: column;
    gap: 2px;
  }
}