/* ═══════════════════════════════════════════════════════════════════════════
   Qlynic · system status
   The page checks the website and the database when it loads. Here the
   result reads like a monitor at a bedside: one trace per check, steady and
   green while it answers, flat and red when it does not. The traces are the
   script's; without it the page says the same in words.
   ═══════════════════════════════════════════════════════════════════════════ */

.sst {
  position: relative;
  isolation: isolate;
  padding-block-end: clamp(3.5rem, 2rem + 5vw, 7rem);
  background: var(--ql-bg);
  color: var(--ql-text-body);
}

/* ── the question ─────────────────────────────────────────────────────────── */

.sst-top {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(2.25rem, 1.3rem + 3.4vw, 4.75rem) clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
}
/* the paper a trace is drawn on, very faint, behind the words */
.sst-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgb(var(--ql-white-rgb) / .045) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(180deg, rgb(var(--ql-white-rgb) / .045) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgb(var(--ql-white-rgb) / .02) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(180deg, rgb(var(--ql-white-rgb) / .02) 0 1px, transparent 1px 8px);
  -webkit-mask-image: radial-gradient(90% 100% at 78% 40%, #000 0%, rgb(0 0 0 / .4) 45%, transparent 80%);
  mask-image: radial-gradient(90% 100% at 78% 40%, #000 0%, rgb(0 0 0 / .4) 45%, transparent 80%);
}
.sst-intro {
  display: grid;
  justify-items: start;
  row-gap: var(--ql-sp-7);
  max-inline-size: 52rem;
}
.sst-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-5);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.sst-eyebrow .ql-quad { gap: 2px; }
.sst-eyebrow .ql-quad i { background: var(--q); box-shadow: 0 0 6px -1px var(--q); }
.sst-eyebrow .ql-quad i:nth-child(1) { --q: var(--ql-q-tl); }
.sst-eyebrow .ql-quad i:nth-child(2) { --q: var(--ql-q-tr); }
.sst-eyebrow .ql-quad i:nth-child(3) { --q: var(--ql-q-bl); }
.sst-eyebrow .ql-quad i:nth-child(4) { --q: var(--ql-q-br); }
.sst-top h1 {
  margin: 0;
  max-inline-size: 13em;
  font-size: clamp(2.5rem, .95rem + 4.8vw, 5.4rem);
  line-height: .98;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.046em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.sst-lead {
  margin: 0;
  max-inline-size: 46ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.22rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}

/* ── the monitor ──────────────────────────────────────────────────────────── */

.sst-monitor {
  position: relative;
  padding: clamp(1.1rem, .6rem + 2vw, 2.25rem);
  border: 1px solid transparent;
  border-radius: var(--ql-r-xl);
  background:
    linear-gradient(180deg, var(--ql-ink-150), var(--ql-ink-100) 60%) padding-box,
    linear-gradient(180deg, rgb(var(--ql-white-rgb) / .15), rgb(var(--ql-white-rgb) / .05)) border-box;
  box-shadow: var(--ql-el-4);
}
/* the Q, unfolded, along its top edge */
.sst-monitor::before {
  content: "";
  position: absolute;
  inset-inline: 12%;
  inset-block-start: -1px;
  block-size: 1px;
  background: var(--ql-grad-signature);
  opacity: .6;
  pointer-events: none;
}

/* the reading: the answer in one line, and when it was taken */
.sst-banner {
  --sst-c: var(--ql-success);
  --sst-rgb: var(--ql-success-rgb);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ql-sp-5) var(--ql-sp-7);
  padding: clamp(1rem, .7rem + 1.2vw, 1.6rem) clamp(1rem, .7rem + 1.2vw, 1.6rem);
  border: 1px solid rgb(var(--sst-rgb) / .26);
  border-radius: var(--ql-r-lg);
  background:
    radial-gradient(120% 160% at 0% 50%, rgb(var(--sst-rgb) / .10), transparent 60%),
    rgb(var(--ql-black-rgb) / .35);
}
.sst-banner.is-down { --sst-c: var(--ql-danger); --sst-rgb: var(--ql-danger-rgb); }
.sst-dot {
  position: relative;
  flex: none;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--sst-c);
  box-shadow: 0 0 0 4px rgb(var(--sst-rgb) / .16), 0 0 18px rgb(var(--sst-rgb) / .55);
}
.sst-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgb(var(--sst-rgb) / .6);
  opacity: 0;
}
/* the dot beats with the first trace */
.sst-dot.is-beat::after { animation: sst-beat .9s var(--ql-ease-out); }
@keyframes sst-beat {
  0%   { opacity: .9; transform: scale(.6); }
  100% { opacity: 0; transform: scale(2.1); }
}
.sst-banner__txt {
  flex: 1 1 14rem;
  min-inline-size: 0;
  margin: 0;
  font-size: clamp(1.15rem, .98rem + .7vw, 1.6rem);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ql-text-strong);
}
.sst-banner__time {
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-2xs);
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ql-text-muted);
}
@media (max-width: 559px) {
  .sst-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--ql-sp-6);
    row-gap: var(--ql-sp-3);
  }
  .sst-dot { margin-block-start: .5em; align-self: start; }
  .sst-banner__time { grid-column: 2; }
}

.sst-h2 {
  margin: clamp(1.5rem, 1rem + 1.6vw, 2.25rem) 0 var(--ql-sp-5);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}

/* one channel per check */
.sst-list {
  display: grid;
  row-gap: var(--ql-sp-4);
}
.sst-ch {
  --sst-c: var(--ql-success);
  --sst-rgb: var(--ql-success-rgb);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "txt state";
  align-items: center;
  gap: var(--ql-sp-5) var(--ql-sp-7);
  padding: var(--ql-sp-7);
  border: 1px solid var(--ql-line);
  border-radius: var(--ql-r-md);
  background: rgb(var(--ql-black-rgb) / .28);
}
.sst-ch.is-down { --sst-c: var(--ql-danger); --sst-rgb: var(--ql-danger-rgb); border-color: rgb(var(--ql-danger-rgb) / .3); }
.sst-ch__txt { grid-area: txt; display: grid; row-gap: 4px; min-inline-size: 0; }
.sst-ch__name {
  font-size: var(--ql-fs-md);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.35;
  color: var(--ql-text-strong);
}
.sst-ch__detail {
  font-size: var(--ql-fs-sm);
  line-height: 1.5;
  color: var(--ql-text-muted);
}
.sst-ch__state {
  grid-area: state;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-3);
  block-size: 26px;
  padding-inline: var(--ql-sp-5);
  border: 1px solid rgb(var(--sst-rgb) / .3);
  border-radius: var(--ql-r-xs);
  background: rgb(var(--sst-rgb) / .1);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sst-c);
}
.sst-ch__state::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* the trace (the script adds it) */
.sst-ch__wave {
  grid-area: wave;
  position: relative;
  display: block;
  block-size: 72px;
  min-inline-size: 0;
  overflow: hidden;
  border-radius: var(--ql-r-sm);
  border: 1px solid rgb(var(--ql-white-rgb) / .06);
  background:
    repeating-linear-gradient(90deg, rgb(var(--sst-rgb) / .09) 0 1px, transparent 1px 25px),
    repeating-linear-gradient(180deg, rgb(var(--sst-rgb) / .09) 0 1px, transparent 1px 25px),
    repeating-linear-gradient(90deg, rgb(var(--ql-white-rgb) / .025) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(180deg, rgb(var(--ql-white-rgb) / .025) 0 1px, transparent 1px 5px),
    rgb(var(--ql-black-rgb) / .5);
}
.sst-ch__wave canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}
.sst-js .sst-ch {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "txt state" "wave wave";
}
@media (max-width: 559px) {
  /* a phone: the result under the name, the trace under both */
  .sst-ch,
  .sst-js .sst-ch {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "txt" "state";
  }
  .sst-js .sst-ch { grid-template-areas: "txt" "state" "wave"; }
  .sst-ch__state { justify-self: start; }
}
@media (min-width: 900px) {
  .sst-js .sst-ch {
    grid-template-columns: minmax(13rem, 19rem) minmax(0, 1fr) 9.5rem;
    grid-template-areas: "txt wave state";
  }
}

/* ── when it is not working ───────────────────────────────────────────────── */

.sst-help { padding-block-start: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.sst-desk {
  display: grid;
  row-gap: var(--ql-sp-4);
  max-inline-size: 46rem;
  padding-inline-start: var(--ql-sp-7);
  border-inline-start: 2px solid var(--ql-line-strong);
}
.sst-desk .sst-h2 {
  margin: 0;
  font-family: var(--ql-font-sans);
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem);
  font-weight: var(--ql-fw-semibold);
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--ql-text-strong);
}
.sst-text {
  margin: 0;
  font-size: clamp(1rem, .96rem + .14vw, 1.08rem);
  line-height: 1.7;
  color: var(--ql-text-body);
}
.sst-text a {
  color: var(--ql-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: rgb(var(--ql-accent-text-rgb) / .45);
  transition: color var(--ql-d-fast) var(--ql-ease), text-decoration-color var(--ql-d-fast) var(--ql-ease);
}
.sst-text a:hover { color: var(--ql-text-strong); text-decoration-color: currentColor; }
.sst-text a:focus-visible { outline: none; box-shadow: var(--ql-ring); border-radius: 3px; }

/* ── motion off, colours forced, paper ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sst-dot.is-beat::after { animation: none; }
}
@media (forced-colors: active) {
  .sst-monitor, .sst-banner, .sst-ch, .sst-ch__state { border: 1px solid CanvasText; }
  .sst-top::before, .sst-ch__wave { display: none; }
}
@media print {
  .sst-top::before, .sst-monitor::before, .sst-ch__wave { display: none !important; }
  .sst, .sst-monitor, .sst-banner, .sst-ch { background: #fff !important; box-shadow: none !important; }
  .sst-top h1, .sst-banner__txt, .sst-ch__name, .sst-ch__detail, .sst-text, .sst-lead, .sst-banner__time { color: #000 !important; }
}