/* --- Bootstack tokens, in the triplet form Tailwind resolves ----------
   `html:root` and `html:root.dark`, not `:root` and `.dark`. Gatus links
   custom.css BEFORE app.css, so an equally specific selector loses the
   cascade to the stylesheet it is meant to override — measured: a plain
   `:root` block left --background at Tailwind's white. One extra element
   in the selector settles it without a single !important.

   Both halves are defined in full. Gatus's dashboard follows the reader's
   prefers-color-scheme, so neither theme is the fallback for the other and
   a token defined in only one of them inherits Tailwind's default in the
   other — which is how a navy page ends up with a white card. */
html:root {
  --background: 214.3 46.7% 97.1%;      /* paper        #F4F7FB */
  --foreground: 216 61.4% 11.2%;        /* ink          #0B192E */
  --card: 0 0% 100%;                    /* surface      #FFFFFF */
  --card-foreground: 216 61.4% 11.2%;
  --popover: 0 0% 100%;
  --popover-foreground: 216 61.4% 11.2%;
  /* The text-safe teal, not #0CC9AB. The bright teal is a 1.9:1 fill on
     paper and unreadable as text or as a hairline; §4.4 pins #097560 for
     exactly this, and it carries 5.3:1 on the page and 5.6:1 on a card. */
  --primary: 168.3 85.7% 24.7%;         /* brand, light #097560 */
  --primary-foreground: 0 0% 100%;
  --secondary: 212.3 44.8% 94.3%;       /* subtle       #EAF0F7 */
  --secondary-foreground: 216 61.4% 11.2%;
  --muted: 212.3 44.8% 94.3%;
  --muted-foreground: 224.7 21.8% 38.6%; /* muted ink   #4D5878, 6.6:1 */
  --accent: 212.3 44.8% 94.3%;          /* shadcn's hover wash, not the brand */
  --accent-foreground: 216 61.4% 11.2%;
  --destructive: 4.2 76.5% 40%;         /* #B42318 */
  --destructive-foreground: 0 0% 100%;
  --border: 216 32.3% 87.8%;            /* line         #D6DEEA */
  --input: 216 32.3% 87.8%;
  --ring: 168.3 85.7% 24.7%;
  --radius: 0.625rem;

  /* --- the operational colours -------------------------------------
     Deliberately NOT the brand accent, in either theme. Teal is what
     Bootstack uses for "ours and interactive" — every button, link and
     icon on the marketing site is teal — so a green history strip in the
     same teal would read as decoration rather than as a measurement, and
     a reader could not tell a healthy square from a link. Up is a grass
     green two hue-steps away from the teal (#1A7F37 here, #4ADE80 in
     dark), and it is never used for anything that is not a measured
     state. Contrast on the badge ink: 5.1:1 light, 10.1:1 dark. */
  --bs-up: #1a7f37;
  --bs-down: #b42318;                   /* white on it: 6.6:1 */
  --bs-unknown: #c3ccda;
  --bs-badge-ink: #ffffff;
}
html:root.dark {
  --background: 216 61.4% 11.2%;        /* navy ground  #0B192E */
  --foreground: 225 66.7% 88.2%;        /* ink          #CDD7F5, 12.3:1 */
  --card: 214.7 48.4% 18.2%;            /* surface      #182B45 */
  --card-foreground: 225 66.7% 88.2%;
  --popover: 214.7 48.4% 18.2%;
  --popover-foreground: 225 66.7% 88.2%;
  --primary: 170.5 88.7% 41.8%;         /* brand teal   #0CC9AB, 8.4:1 */
  --primary-foreground: 216 61.4% 11.2%; /* navy on teal, 8.4:1 */
  --secondary: 195.6 71.1% 14.9%;       /* deep surface #0B3341 */
  --secondary-foreground: 225 66.7% 88.2%;
  --muted: 195.6 71.1% 14.9%;
  --muted-foreground: 224.7 31.4% 73.1%; /* muted ink   #A5B0D0, 8.2:1 */
  --accent: 216.2 49.6% 24.9%;          /* raised line  #20395F */
  --accent-foreground: 225 66.7% 88.2%;
  --destructive: 4.1 92.5% 68.8%;       /* #F97066, 6.3:1 on the ground */
  --destructive-foreground: 216 61.4% 11.2%;
  --border: 216.2 49.6% 24.9%;          /* line         #20395F */
  --input: 216.2 49.6% 24.9%;
  --ring: 170.5 88.7% 41.8%;

  --bs-up: #4ade80;
  --bs-down: #f97066;
  --bs-unknown: #2c4770;
  --bs-badge-ink: #0b192e;
}

/* --- type ------------------------------------------------------------
   Bootstack's faces are Instrument Sans and IBM Plex Mono, self-hosted by
   the web application. Gatus ships its own build and this stylesheet may
   fetch nothing from another host — ADR 0014, and validate-status.sh
   refuses an external asset reference in this very block, which is also
   why this sentence does not spell one out. So both faces are NAMED first
   and fall through to the reader's system faces: a visitor who has them
   installed gets the real pairing, and everybody else gets a stack that is
   close in metrics and never a fallback to Times. */
html:root {
  --bs-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono",
    Menlo, Consolas, "Liberation Mono", monospace;
}
body, #global {
  font-family: var(--bs-sans);
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { letter-spacing: -0.02em; }

/* Hostnames, milliseconds and "9 seconds ago" are the machine talking, and
   the brand rule for that is mono (frontpage-spec §4.5). The two hooks are
   `.endpoint-header` and `.endpoint-content`, which are Gatus's own
   semantic class names rather than Tailwind utilities — verified in the
   rendered DOM on 2026-08-21, where the hostname is the `span[title]` next
   to the heading and both the average response time and the two footer
   timestamps sit under `.text-xs`. If an upstream release renames them the
   page loses a font, not a layout. */
.endpoint-header h3 + div span[title],
.endpoint-content .text-xs {
  font-family: var(--bs-mono);
}

/* The masthead's second line. Gatus renders the literal string "System
   Monitoring Dashboard" there — it is hardcoded in the header component and
   ui.login-subtitle does NOT reach it (measured: the value is present in
   window.config and the header still prints the constant). It is another
   product's name sitting directly under the Bootstack wordmark, so it is
   removed rather than relabelled; a CSS `content` swap would leave the
   original string in the accessibility tree, which is worse than nothing.
   Gatus's attribution stays where it belongs, in the footer. */
#global > div > header h1 + p { display: none; }

/* --- the standing honesty notice -------------------------------------
   Gatus renders ui.dashboard-subheading as the paragraph immediately after
   the dashboard's <h1>. This styles that paragraph into a bordered notice
   so it reads as a caveat rather than as a tagline. The sentence itself is
   served in the HTML (it lives in ui.dashboard-subheading above) — this
   stylesheet only frames it, and a reader with CSS disabled still gets the
   words. */
.dashboard-container h1 + p {
  max-width: 60rem;
  margin-top: 0.9rem;
  padding: 0.85rem 1.05rem;
  border: 1px solid hsl(var(--border));
  border-inline-start: 3px solid hsl(var(--primary));
  border-radius: var(--radius);
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  font-size: 0.94rem;
  line-height: 1.6;
}

/* --- status is never colour alone ------------------------------------
   The per-endpoint badge already carries the words "Healthy"/"Unhealthy",
   so the cards are fine. The uptime history strip is not: it is a row of
   coloured rectangles whose only non-visual affordance is a hover tooltip,
   which is no affordance at all on a touch screen or under a colour-vision
   deficiency. Giving the failing squares a distinct SHAPE — a downward
   notch — makes a bad interval findable by scanning rather than by hue.
   See README.md "Not colour alone". */
.endpoint [class*="bg-green-"] {
  background-color: var(--bs-up) !important;
}
.endpoint [class*="bg-red-"] {
  background-color: var(--bs-down) !important;
  clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%);
}
.endpoint [class*="bg-gray-"] {
  background-color: var(--bs-unknown) !important;
  opacity: 0.45;
}
/* The health badge is a pill with a dot and a word. It is inside the same
   .endpoint subtree, so it picks up the fills above; what it also needs is
   its own ink, and it must NOT pick up the notch — a clipped pill loses
   its bottom edge and the word with it. */
.endpoint .rounded-full[class*="bg-green-"],
.endpoint .rounded-full[class*="bg-red-"],
.endpoint .rounded-full[class*="bg-gray-"] {
  clip-path: none;
  opacity: 1;
  color: var(--bs-badge-ink) !important;
}

/* --- cards ------------------------------------------------------------ */
.endpoint {
  box-shadow: 0 1px 2px rgb(11 25 46 / 7%), 0 8px 24px -16px rgb(11 25 46 / 26%);
}
.dark .endpoint {
  box-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -16px rgb(0 0 0 / 70%);
}
/* The default lifts and scales every card on hover, which turns a page of
   twenty-eight rows into a page that moves whenever the pointer crosses it.
   ADR 0019 limits motion to transform and opacity; this removes the scale
   and keeps the shadow, which is the part that communicates focus. */
.endpoint.hover\:scale-\[1\.01\]:hover { transform: none; }

/* Focus is the one place the bright teal is right in both themes: it is
   drawn on top of whatever it surrounds rather than read through. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

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