/*
 * Small stylesheet that complements Tailwind: focus visibility, the response
 * time chart and a few details Tailwind utilities cannot express inline.
 * Everything else is utility classes in the templates.
 */

/* ---------------------------------------------------------------- theme ---
 * Every colour the interface uses is a variable here, as space separated RGB
 * channels so Tailwind's opacity modifiers (bg-up/10, ring-line/60) still work
 * through rgb(var(--c-x) / <alpha-value>) - see the config in partials/head.
 *
 * Three ways in, one result:
 *   :root                         the light palette, always defined
 *   :root:not([data-theme=light]) under a dark OS, i.e. the "system" setting
 *   :root[data-theme=dark]        an explicit choice, whatever the OS says
 *
 * "ink" is the text colour and flips to near-white in the dark theme, so a
 * solid dark block (primary buttons, the active pill, the marketing sections)
 * cannot share it. That role is "invert": dark in both themes, always paired
 * with white text, which is what keeps every existing text-white correct.
 */
:root {
  color-scheme: light;

  --c-ink:          16 22 25;
  --c-ink-soft:     76 90 99;
  --c-ink-muted:    98 111 120;

  --c-paper:       251 250 248;
  --c-paper-deep:  244 242 238;
  --c-surface:     255 255 255;
  --c-invert:       16 22 25;

  --c-line:        227 224 217;
  --c-line-strong: 207 203 194;

  --c-accent-50:   237 246 243;
  --c-accent-100:  211 233 226;
  --c-accent-400:   47 156 131;
  --c-accent-500:   23 131 107;
  --c-accent-600:   15 107 88;
  --c-accent-700:   12  86 71;
  --c-accent-900:    8  53 44;

  --c-up:           21 127 74;
  --c-down:        180  35 24;
  --c-warn:        181  71  8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --c-ink:        236 239 240;
    --c-ink-soft:   170 181 187;
    --c-ink-muted:  125 139 147;

    --c-paper:       15  20  23;
    --c-paper-deep:  10  14  16;
    --c-surface:     22  28  32;
    --c-invert:      43  52  57;

    --c-line:        37  45  50;
    --c-line-strong: 56  67  74;

    --c-accent-50:   13  38  34;
    --c-accent-100:  19  64  58;
    --c-accent-400:  85 196 168;
    --c-accent-500:  60 178 149;
    --c-accent-600:  47 156 131;
    --c-accent-700: 130 214 186;
    --c-accent-900: 185 227 213;

    --c-up:          70 192 127;
    --c-down:       240 122 109;
    --c-warn:       224 151  63;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --c-ink:        236 239 240;
  --c-ink-soft:   170 181 187;
  --c-ink-muted:  125 139 147;

  --c-paper:       15  20  23;
  --c-paper-deep:  10  14  16;
  --c-surface:     22  28  32;
  --c-invert:      43  52  57;

  --c-line:        37  45  50;
  --c-line-strong: 56  67  74;

  --c-accent-50:   13  38  34;
  --c-accent-100:  19  64  58;
  --c-accent-400:  85 196 168;
  --c-accent-500:  60 178 149;
  --c-accent-600:  47 156 131;
  --c-accent-700: 130 214 186;
  --c-accent-900: 185 227 213;

  --c-up:          70 192 127;
  --c-down:       240 122 109;
  --c-warn:       224 151  63;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Never remove focus outlines - just make them match the design. */
:focus-visible {
  outline: 2px solid rgb(var(--c-accent-600));
  outline-offset: 2px;
  border-radius: 4px;
}

body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* ---------------------------------------------------------------- chart --- */
.chart-point {
  transition: r 120ms ease-out;
}

.chart-hit:hover + .chart-point,
.chart-hit:focus-visible + .chart-point {
  r: 4.5;
}

.chart-tooltip {
  pointer-events: none;
  position: absolute;
  z-index: 20;
  white-space: nowrap;
  transform: translate(-50%, -125%);
  transition: opacity 120ms ease-out;
}

/* ------------------------------------------------------------- uptime bar - */
.day-bar {
  transition: opacity 120ms ease-out;
}

.day-bar:hover {
  opacity: 0.75;
}

/* ------------------------------------------------------------------ misc -- */
details > summary {
  list-style: none;
  cursor: pointer;
}

details > summary::-webkit-details-marker {
  display: none;
}

details[open] .faq-plus {
  transform: rotate(45deg);
}

.faq-plus {
  transition: transform 150ms ease-out;
}

/* Keep long URLs from blowing up narrow layouts. */
.break-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}