/* ===========================================================================
   status.css - сторінка стану сервісу («Стан сирен»).

   РОЗМІРНА СИСТЕМА (Типографіка):
   Три чітких кеглі з фіксованими ролями без проміжних часток:

     --fs-title (clamp(22px, 5vw, 28px) / 700) - головний заголовок стану сервісу.
     --fs-base  (13px)                           - основний інтерфейс і текст:
                                                   назви компонентів (500), відсотки
                                                   доступності, пояснювальний текст,
                                                   посилання та копірайт у підвалі.
     --fs-sm    (11px)                           - службові мітки та метадані:
                                                   шапка/час оновлення, легенда кольорів,
                                                   шкала дат (90/45 днів), підказка (tip),
                                                   позначка «моніторинг не налаштовано».

   Розрізнення елементів будується на вазі (400 / 500 / 700), кольорі та
   структурі, а не на десяткових частках кегля.
   =========================================================================== */

:root {
  /* Палітра фону та контрастності тексту */
  --bg: #E9E9E7;      /* 91% */
  --fig: #D8D8D5;     /* 84% */
  --hair: #CCCCC7;    /* 79% */
  --copy: #68685F;    /* 40% */
  --text: #65655D;    /* 38% */
  --strong: #40403B;  /* 24% */

  /* Стан дня за шкалою світлоти та кольору */
  --day-ok: #C0E7AC;      --day-ok-h: #B2DF99;    /* Зелений - без збоїв */
  --day-minor: #EEE592;   --day-minor-h: #E7DD7B; /* Жовтий - незначні збої (<1%) */
  --day-major: #FBBE86;   --day-major-h: #F7B271; /* Помаранчевий - помітні збої (1-5%) */
  --day-down: #FD9598;    --day-down-h: #FA878A;  /* Червоний - тривалі збої (>5%) */
  --day-mnt: #A4D4F4;     --day-mnt-h: #90C7EA;   /* Блакитний - планові роботи */
  --day-nodata: #D8D8D5;  --day-nodata-h: #CCCCC7;/* Сірий - немає даних */

  /* Система кеглів (Typography System) */
  --fs-title: clamp(22px, 5vw, 28px);
  --fs-base: 13px;
  --fs-sm: 11px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Шкала відступів */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s7: 56px;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
}

body {
  min-height: 100dvh;
  background: var(--bg);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(24px, 5vw, var(--s7));
  padding-top: max(clamp(24px, 5vw, var(--s7)), env(safe-area-inset-top, 0px));
  padding-right: max(clamp(16px, 4vw, var(--s7)), env(safe-area-inset-right, 0px));
  padding-bottom: max(clamp(24px, 5vw, var(--s7)), env(safe-area-inset-bottom, 0px));
  padding-left: max(clamp(16px, 4vw, var(--s7)), env(safe-area-inset-left, 0px));
}

main {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding-top: clamp(var(--s4), 6vh, var(--s7));
}

/* Шапка: заголовок — це і є стан. Дрібне службове зверху */
.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  font-size: var(--fs-sm);
  color: var(--copy);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.top a {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}

.top a:hover {
  color: var(--strong);
}

.state {
  margin: var(--s7) 0 0;
  font-size: var(--fs-title);
  font-weight: var(--weight-bold);
  color: var(--strong);
  letter-spacing: .02em;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
}

.state-sub {
  margin: 14px 0 0;
  font-size: var(--fs-base);
  font-weight: var(--weight-regular);
  color: var(--copy);
  letter-spacing: .05em;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.state-report {
  margin: 12px 0 0;
  font-size: var(--fs-base);
  font-weight: var(--weight-regular);
  color: var(--copy);
  letter-spacing: .05em;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.state-sub a,
.state-report a {
  color: var(--strong);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s ease;
}

.state-sub a:hover,
.state-report a:hover {
  color: #000;
}

.list {
  margin: var(--s7) 0 0;
  border-top: 1px solid var(--hair);
}

.comp {
  padding: 24px 0;
  border-bottom: 1px solid var(--hair);
}

.comp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: 12px;
}

.comp-name {
  font-size: var(--fs-base);
  font-weight: var(--weight-medium);
  color: var(--strong);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}

.comp-val {
  font-size: var(--fs-base);
  font-weight: var(--weight-regular);
  color: var(--copy);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Компонент без свого чека не має що показати - і не вдає, ніби має */
.comp[data-monitored="false"] .comp-val {
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
  white-space: normal;
  text-align: right;
}

/* Сигнатура сторінки: 90 днів = 90 смуг */
.bars {
  display: flex;
  gap: 2.5px;
  height: 42px;
  align-items: stretch;
}

.bar {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 1px;
  background: var(--day-ok);
  transition: background .15s ease;
  cursor: pointer;
}

.bar[data-state="minor"] { background: var(--day-minor); }
.bar[data-state="major"] { background: var(--day-major); }
.bar[data-state="down"] { background: var(--day-down); }
.bar[data-state="mnt"] { background: var(--day-mnt); }
.bar[data-state="nodata"] { background: var(--day-nodata); }

@media (hover: hover) and (pointer: fine) {
  .bar:hover { background: var(--day-ok-h); }
  .bar[data-state="minor"]:hover { background: var(--day-minor-h); }
  .bar[data-state="major"]:hover { background: var(--day-major-h); }
  .bar[data-state="down"]:hover { background: var(--day-down-h); }
  .bar[data-state="mnt"]:hover { background: var(--day-mnt-h); }
  .bar[data-state="nodata"]:hover { background: var(--day-nodata-h); }
}

.scale {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--copy);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Підпис шкали слідує за тим, скільки смуг лишила видимими медіазапитом
   секція нижче - без участі JavaScript */
.scale-short {
  display: none;
}

/* Підказка по дотику: title на сенсорному екрані не показується */
.tip {
  position: fixed;
  z-index: 100;
  padding: 6px 10px;
  border-radius: 3px;
  background: var(--strong);
  color: var(--bg);
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.tip[hidden] {
  display: none;
}



.foot {
  margin: var(--s7) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.foot-links {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.5;
  font-weight: var(--weight-regular);
  color: var(--copy);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  margin-right: -.06em;
}

.foot-links a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s ease;
  padding: 2px 0;
}

.foot-links a:hover {
  color: var(--strong);
}

.copy {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.5;
  font-weight: var(--weight-regular);
  color: var(--copy);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  margin-right: -.06em;
}

/* ==========================================================================
   МОБІЛЬНА АДАПТАЦІЯ
   ========================================================================== */

/* На вузькому екрані показуємо 45 днів замість 90 */
@media (max-width: 600px) {
  body {
    padding: max(clamp(24px, 5vw, var(--s7)), env(safe-area-inset-top, 24px))
             max(16px, env(safe-area-inset-right, 16px))
             max(clamp(24px, 5vw, var(--s7)), env(safe-area-inset-bottom, 24px))
             max(16px, env(safe-area-inset-left, 16px));
  }

  main {
    padding-top: clamp(var(--s4), 6vh, var(--s7));
  }

  .state {
    margin-top: var(--s7);
  }

  .list {
    margin-top: var(--s7);
  }

  .comp {
    padding: 18px 0;
  }

  .comp-head {
    margin-bottom: 10px;
    gap: 8px;
  }

  .bar:nth-child(-n+45) {
    display: none;
  }

  .scale-full {
    display: none;
  }

  .scale-short {
    display: inline;
  }

  .bars {
    height: 36px;
    gap: 2px;
  }

  .scale {
    margin-top: 8px;
    letter-spacing: .05em;
  }

  .top, .state-sub, .state-report {
    letter-spacing: .04em;
  }

  .foot {
    margin-top: var(--s7);
    gap: 8px;
  }

  .copy, .foot-links {
    letter-spacing: .04em;
    margin-right: -.04em;
  }
}

/* Ультра-вузькі екрани (наприклад, iPhone SE 1st gen або компактні вікна <= 360px) */
@media (max-width: 360px) {

  .comp-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .comp[data-monitored="false"] .comp-val {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bar {
    transition: none;
  }
}