/* =========================================================
   Page — Service status

   COLOUR REPEATS THE VERDICT, IT NEVER CARRIES IT. Every row
   prints a word — يعمل / بطيء / متعطّل — and the tint behind it
   only agrees. A merchant reading this on a phone in sunlight,
   or with a red-green difficulty, gets the same page as
   everybody else.

   Layer 3 only — every value below reads a token.
   ========================================================= */

/* ---------------------------------------------------------
   The verdict

   One word, large, with a dot beside it. A reader who opened
   this between two customers should have the answer before
   they scroll.

   The state colour is bound once, on the section, and every
   rule beneath reads --st-accent. Three blocks of near-identical
   declarations keyed to three modifiers is how one of them ends
   up a shade off the other two.
   --------------------------------------------------------- */
.st-head {
  --st-accent: var(--color-success);
  --st-accent-soft: var(--color-success-soft);

  padding-block: var(--space-16) var(--space-10);
}

.st-head--slow {
  --st-accent: var(--color-warning);
  --st-accent-soft: var(--color-warning-soft);
}

.st-head--down {
  --st-accent: var(--color-danger);
  --st-accent-soft: var(--color-danger-soft);
}

.st-head__inner {
  max-width: 44rem;
}

.st-head__title {
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}

.st-head__dot {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--st-accent);
  box-shadow: 0 0 0 0.4rem var(--st-accent-soft);
}

.st-head__lead {
  margin: 0 0 var(--space-6);
  color: var(--color-text-secondary);
}

.st-head__at {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   The owner's notice

   Present only while /admin/settings carries a sentence.
   --------------------------------------------------------- */
.st-notice {
  padding-block: 0 var(--space-8);
}

.st-notice__box {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-inline-start: 3px solid var(--color-gold-text);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.st-notice__box svg {
  width: 20px;
  height: 20px;
  margin-block-start: 0.1rem;
  color: var(--color-gold-text);
}

.st-notice__label {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted);
}

.st-notice__body {
  margin: 0;
  color: var(--color-text);
  line-height: var(--lh-snug);
}

/* ---------------------------------------------------------
   The four checks

   Rows rather than cards. Four tiles in a grid invite a glance
   at their colours; a stacked list is read, and the reading is
   the part that matters — «أقدمها منتظرة منذ ٤٠ دقيقة» is the
   whole message, and no tile is wide enough to carry it.
   --------------------------------------------------------- */
.st-checks__inner {
  max-width: 50rem;
}

.st-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--color-line);
}

.st-row {
  --st-accent: var(--color-success);

  padding-block: var(--space-6);
  border-block-end: 1px solid var(--color-line);
}

.st-row--slow { --st-accent: var(--color-warning); }
.st-row--down { --st-accent: var(--color-danger); }

.st-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

.st-row__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

/* The dot belongs to the row's title, drawn rather than marked
   up: it is pure decoration next to a badge that says the word. */
.st-row__title::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--st-accent);
}

.st-row__note {
  margin: var(--space-3) 0 0;
  color: var(--color-text-secondary);
  line-height: var(--lh-snug);
}

/* The number that would have made it a problem. Without it a
   reading is a figure nobody can grade: «٨٤ ميلي ثانية» means
   nothing until the line beneath says what normal is. */
.st-row__expected {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   What this page cannot see
   --------------------------------------------------------- */
.st-limits__inner {
  max-width: 50rem;
}

.st-limits__title {
  margin: var(--space-10) 0 var(--space-5);
  font-size: var(--fs-h3);
}

.st-limits__body {
  margin: 0 0 var(--space-5);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

.st-limits__outs {
  margin-block-start: var(--space-8);
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.st-limits__outs p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

@media (max-width: 720px) {
  .st-head {
    padding-block: var(--space-12) var(--space-8);
  }

  .st-head__title {
    gap: var(--space-3);
  }
}