/* Beacon stylesheet.
 *
 * Colour tokens are defined once for light, then redefined for dark twice:
 * once under prefers-color-scheme for people who never touch the toggle, and
 * once under [data-theme="dark"] so the toggle wins in both directions.
 *
 * Every status colour below has been checked against its background:
 * foreground tokens clear 4.5:1 for text, solid tokens clear 3:1 for shapes
 * and borders.
 */

:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --surface: #f6f8fa;
  --surface-2: #eef1f4;
  --border: #d0d7de;
  --fg: #1f2328;        /* 15.8:1 on --bg */
  --fg-muted: #656d76;  /*  5.2:1 on --bg */
  --focus: #0969da;     /*  5.1:1 on --bg */
  --link: #0a58ca;
  --danger: #cf222e;

  /* Status text and icons. All at least 4.5:1 on --bg. */
  --st-0-fg: #1a7f37;
  --st-1-fg: #9a6700;
  --st-2-fg: #bc4c00;
  --st-3-fg: #cf222e;

  /* Status fills and borders. All at least 3:1 on --bg. */
  --st-0-solid: #1f883d;
  --st-1-solid: #b08000;
  --st-2-solid: #d1660c;
  --st-3-solid: #d1242f;
  --st-neutral: #848d97;

  --radius: 8px;
  --radius-sm: 5px;
  --gap: 1rem;
  --measure: 68ch;
  --header-height: 4.25rem;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117;
    --surface: #161b22;
    --surface-2: #1c2129;
    --border: #30363d;
    --fg: #e6edf3;
    --fg-muted: #9198a1;
    --focus: #58a6ff;
    --link: #79c0ff;
    --danger: #ff7b72;

    --st-0-fg: #3fb950;
    --st-1-fg: #d29922;
    --st-2-fg: #f0883e;
    --st-3-fg: #ff7b72;

    --st-0-solid: #3fb950;
    --st-1-solid: #d29922;
    --st-2-solid: #f0883e;
    --st-3-solid: #ff7b72;
    --st-neutral: #6e7681;
  }
}

:root[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #1c2129;
  --border: #30363d;
  --fg: #e6edf3;
  --fg-muted: #9198a1;
  --focus: #58a6ff;
  --link: #79c0ff;
  --danger: #ff7b72;

  --st-0-fg: #3fb950;
  --st-1-fg: #d29922;
  --st-2-fg: #f0883e;
  --st-3-fg: #ff7b72;

  --st-0-solid: #3fb950;
  --st-1-solid: #d29922;
  --st-2-solid: #f0883e;
  --st-3-solid: #ff7b72;
  --st-neutral: #6e7681;
}

/* --------------------------------------------------------------- reset --- */

*,
*::before,
*::after { box-sizing: border-box; }

/* Our button and utility rules set display, which would otherwise beat the
   browser's own [hidden] { display: none }. Controls that only make sense with
   JavaScript are rendered hidden and unhidden by the script, so this rule is
   what keeps them out of the page for anyone without it. */
[hidden] { display: none !important; }

html { scroll-padding-top: calc(var(--header-height) + 1rem); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 1rem/1.6 var(--font);
  -webkit-text-size-adjust: 100%;
}

/* Never fix a height on anything holding text: user stylesheets that widen
   line height and letter spacing must not clip it. (WCAG 1.4.12) */
p, li, td, th, dd, dt, label, .banner, .flash, .service { height: auto; min-height: 0; }
p, li, td, th, dd { overflow-wrap: break-word; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; margin-top: 2rem; }
h3 { font-size: 1.1rem; margin-top: 1.5rem; }
p { margin: 0 0 1rem; }

a { color: var(--link); }
a:hover { text-decoration-thickness: 2px; }

img, svg { max-width: 100%; }

code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); padding: 0.1em 0.35em; border-radius: 3px; }

/* --------------------------------------------------------- foundations --- */

.wrap { width: min(100% - 2rem, 62rem); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2rem, 34rem); }

.lede { color: var(--fg-muted); max-width: var(--measure); }
.muted { color: var(--fg-muted); }
.empty { color: var(--fg-muted); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: 1rem; }
.note { color: var(--fg-muted); font-size: 0.9rem; }
.section { margin-block: 2.5rem; }
.stack > * + * { margin-top: 1.25rem; }

/* The only correct visually hidden recipe: still read out, still focusable
   when it needs to be, and it never collapses whitespace between words. */
.visually-hidden:not(:focus):not(:active) {
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--bg);
  color: var(--focus);
  border: 2px solid var(--focus);
  border-radius: 0 0 var(--radius-sm) 0;
  transform: translateY(-120%);
  font-weight: 600;
}
.skip-link:focus { transform: translateY(0); }

/* Browsers follow the element's own border-radius when drawing an outline,
   so setting one here would square off pills and badges as they are focused. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* The sticky header must not end up covering whatever has just been focused
   (WCAG 2.2, Focus Not Obscured). scroll-padding-top on the scrolling element
   above does the whole job; adding scroll-margin-top to every [id] as well
   would double the offset and overshoot every anchor. */

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

/* -------------------------------------------------------------- header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  min-height: var(--header-height);
  padding-block: 0.5rem;
}
.brand { font-weight: 700; font-size: 1.1rem; color: var(--fg); text-decoration: none; }
.brand:hover { text-decoration: underline; }
.site-header__end { display: flex; gap: 0.5rem; align-items: center; margin-left: auto; }

.admin-nav ul,
.footer-links,
.subnav ul,
.filter-nav ul,
.breadcrumb ol,
.pagination ul,
.plain-list { list-style: none; margin: 0; padding: 0; }

.admin-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.admin-nav a {
  display: inline-block;
  padding: 0.5rem 0.25rem;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.admin-nav a:hover { text-decoration: underline; }
.admin-nav a[aria-current="page"] { border-bottom-color: var(--focus); font-weight: 600; }

.subnav ul, .filter-nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.subnav a, .filter-nav a {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg);
  text-decoration: none;
  min-height: 24px;
}
.subnav a:hover, .filter-nav a:hover { background: var(--surface); }
.subnav a[aria-current="page"],
.filter-nav a[aria-current="true"] { background: var(--surface-2); border-color: var(--fg-muted); font-weight: 600; }

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.9rem; margin-bottom: 1rem; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--fg-muted); }

/* -------------------------------------------------------------- footer --- */

.site-footer {
  margin-top: 4rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 0.9rem;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
/* Lists of links need the 24px minimum target; the exception for links inside
   a sentence does not apply here. */
.footer-links a, .breadcrumb a { display: inline-block; padding-block: 0.2rem; min-height: 24px; }
.footer-note { margin: 0.75rem 0 0; }

/* -------------------------------------------------- status: the basics --- */

/* The shape carries the meaning as much as the colour does, so the page
   still works in greyscale and for anyone who cannot separate red from
   green. Shapes ascend in pointiness with severity. */
.st-icon { flex: none; fill: currentColor; vertical-align: -0.15em; }
.st-icon__cut { fill: var(--bg); }

[data-level="0"] { --st-fg: var(--st-0-fg); --st-solid: var(--st-0-solid); }
[data-level="1"] { --st-fg: var(--st-1-fg); --st-solid: var(--st-1-solid); }
[data-level="2"] { --st-fg: var(--st-2-fg); --st-solid: var(--st-2-solid); }
[data-level="3"] { --st-fg: var(--st-3-fg); --st-solid: var(--st-3-solid); }

/* Outlined rather than filled, which keeps the text on the page background
   where its contrast is already known to pass. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.6em;
  min-height: 24px;
  border: 1px solid var(--st-solid, var(--border));
  border-radius: 999px;
  background: var(--bg);
  color: var(--st-fg, var(--fg));
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.5rem 0 0.5rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--st-solid, var(--border));
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--st-fg, var(--fg));
  font-size: 1.25rem;
  font-weight: 700;
}
.banner .st-icon { width: 22px; height: 22px; }
/* Not flex: this is a sentence with a button after it, and flex would make
   the full stop its own item with a gap in front of it. */
.banner-meta { color: var(--fg-muted); font-size: 0.9rem; }
.banner-meta .btn { margin-left: 0.75rem; vertical-align: baseline; }

.pill {
  display: inline-block;
  padding: 0.15em 0.6em;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.85rem;
  white-space: nowrap;
}
.pill--resolved, .pill--completed { border-color: var(--st-0-solid); color: var(--st-0-fg); }
.pill--investigating, .pill--scheduled { border-color: var(--st-1-solid); color: var(--st-1-fg); }
.pill--identified, .pill--in_progress { border-color: var(--st-2-solid); color: var(--st-2-fg); }
.pill--monitoring { border-color: var(--st-neutral); }

/* ------------------------------------------------------------ services --- */

.service-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.service {
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.service__head { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; }
.service__name { display: flex; flex-direction: column; gap: 0.15rem; min-width: 12rem; }
.service__name > a, .service__name > span:first-child { font-weight: 600; }
.service__desc { color: var(--fg-muted); font-size: 0.9rem; font-weight: 400; }
.group__desc { color: var(--fg-muted); margin-top: -0.25rem; }

/* -------------------------------------------------------------- uptime --- */

.uptime { margin-top: 0.85rem; }
.uptime-strip {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 34px;
  padding-block: 2px;
}
.ubar {
  flex: 1 1 0;
  min-width: 2px;
  height: 100%;
  border-radius: 1px;
  background: var(--st-neutral);
}
/* Height drops as severity rises, so the strip still reads without colour. */
.ubar[data-level="0"] { height: 100%; background: var(--st-0-solid); }
.ubar[data-level="1"] { height: 72%;  background: var(--st-1-solid); }
.ubar[data-level="2"] { height: 48%;  background: var(--st-2-solid); }
.ubar[data-level="3"] { height: 26%;  background: var(--st-3-solid); }
.ubar[data-level="none"] { height: 40%; background: var(--st-neutral); opacity: 0.45; }

.uptime-legend {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--fg-muted);
}
.uptime-detail { margin-top: 0.5rem; font-size: 0.9rem; }

details > summary {
  cursor: pointer;
  padding: 0.4rem 0;
  min-height: 24px;
}
details > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.status-key { margin-bottom: 1.5rem; }
.status-key dl { margin: 0.5rem 0 0; }
.status-key__row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.status-key dt { min-width: 12rem; }
.status-key dd { margin: 0; color: var(--fg-muted); flex: 1 1 16rem; }

/* ----------------------------------------------------------- incidents --- */

.incident {
  margin-block: 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.incident__title { margin-top: 0; font-size: 1.15rem; }
.incident__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.incident__time, .incident__services { color: var(--fg-muted); font-size: 0.9rem; margin-bottom: 0.25rem; }

.timeline { list-style: none; margin: 1rem 0 0; padding: 0 0 0 1.1rem; border-left: 3px solid var(--border); }
.timeline__item { padding: 0 0 1rem 0.9rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__head { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.25rem; }
.timeline__head time { color: var(--fg-muted); font-size: 0.9rem; }

.detail-list { display: grid; gap: 0.5rem; margin: 1rem 0 2rem; }
.detail-list > div { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.detail-list dt { font-weight: 600; min-width: 12rem; }
.detail-list dd { margin: 0; }

/* --------------------------------------------------------------- forms --- */

.field { margin-bottom: 1.25rem; max-width: 40rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.field__optional { font-weight: 400; color: var(--fg-muted); }
.field__hint { margin: 0 0 0.4rem; color: var(--fg-muted); font-size: 0.9rem; }
/* Text that belongs beside a field but deliberately stays out of its
   aria-describedby, so it is not read out again on every visit to the box. */
.field__note { margin: 0.4rem 0 0; color: var(--fg-muted); font-size: 0.9rem; }
.field__note code { overflow-wrap: anywhere; }
.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.4rem 0 0;
  color: var(--st-3-fg);
  font-weight: 600;
}
.field__error .st-icon { margin-top: 0.25em; }

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="number"], input[type="search"], input[type="datetime-local"],
select, textarea {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  min-height: 44px;
}
textarea { min-height: 6rem; resize: vertical; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--st-3-solid);
  border-width: 2px;
}

fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin: 0 0 1.5rem; }
legend { font-weight: 700; padding-inline: 0.4rem; }

.field--check { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.6rem; align-items: start; margin-bottom: 1rem; }
.field--check input { width: 1.15rem; height: 1.15rem; margin-top: 0.3rem; }
.field--check label { margin: 0; font-weight: 500; }
.field--check .field__hint { grid-column: 2; margin: 0; }

.radio-set { display: grid; gap: 0.5rem; }
.radio { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.radio input { width: 1.15rem; height: 1.15rem; margin-top: 0.35rem; }
.radio label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; font-weight: 600; }
.radio__note { flex-basis: 100%; font-weight: 400; color: var(--fg-muted); font-size: 0.9rem; }
.radio:has(input:checked) { border-color: var(--focus); background: var(--surface); }

.check-set { display: grid; gap: 0.35rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

.password-row { display: flex; gap: 0.5rem; align-items: stretch; }
.password-row input { flex: 1 1 auto; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.level-block { padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.level-block h2 { margin-top: 0; font-size: 1.1rem; }

.error-summary {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 2px solid var(--st-3-solid);
  border-radius: var(--radius);
  background: var(--surface);
}
.error-summary h2 { margin-top: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--st-3-fg); }
.error-summary ul { margin: 0; padding-left: 1.25rem; }
.error-summary li + li { margin-top: 0.35rem; }
.error-summary a { color: var(--st-3-fg); }

/* ------------------------------------------------------------- buttons --- */

.btn, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover, button:hover { background: var(--surface-2); }
.btn:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--bg);
}
button[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* White on #0969da is 5.20:1. The dark theme's lighter blue needs dark text
   instead, which is 7.53:1. Both overrides are scoped the same way the colour
   tokens are, so no combination of theme and system preference can fall
   through to the wrong pairing. */
.btn--primary { background: var(--focus); border-color: var(--focus); color: #ffffff; }
.btn--primary:hover { filter: brightness(0.92); background: var(--focus); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--primary { color: #06111f; }
}
:root[data-theme="dark"] .btn--primary { color: #06111f; }

.btn--danger { border-color: var(--st-3-solid); color: var(--st-3-fg); }
.btn--danger:hover { background: var(--surface-2); }
.btn--quiet { background: transparent; border-color: transparent; text-decoration: underline; }
.btn--quiet:hover { background: var(--surface); }
.btn--small { min-height: 32px; padding: 0.3rem 0.7rem; font-size: 0.9rem; }

/* Icon-only controls get a real 44px target rather than the 24px minimum. */
.icon-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 1.1rem;
}

.button-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-block: 1rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.inline-form .field { margin-bottom: 0; }
.theme-form { display: contents; }

/* -------------------------------------------------------------- tables --- */

.table-wrap { overflow-x: auto; margin-block: 1rem; border: 1px solid var(--border); border-radius: var(--radius); }
.table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

table { border-collapse: collapse; width: 100%; }
caption {
  text-align: left;
  padding: 0.85rem 1rem;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.caption-meta { display: block; font-weight: 400; font-size: 0.85rem; color: var(--fg-muted); }
th, td { text-align: left; padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { background: var(--surface); font-size: 0.9rem; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: none; }
tbody th[scope="row"] { font-weight: 600; }
.cell-note { display: block; font-weight: 400; color: var(--fg-muted); font-size: 0.9rem; }
.cell-detail { font-size: 0.85rem; color: var(--fg-muted); max-width: 22rem; }
.cell-order form { display: flex; gap: 0.25rem; }
/* This class lands on a <td>. Giving a table cell display:flex takes it out
   of the table layout, so its borders stop lining up with the rest of the
   row, and in several browsers it also strips the cell of its table
   semantics, which breaks screen reader table navigation. Keep it a cell and
   space the buttons as inline boxes instead. */
.row-actions { display: table-cell; }
.row-actions > * { margin: 0 0.5rem 0.3rem 0; }
.row-actions > *:last-child { margin-right: 0; }
.level-form { flex-wrap: nowrap; align-items: center; }
.level-form select { min-width: 9rem; }

.stat-row { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; padding: 0; }
.stat {
  flex: 1 1 9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.stat__value { display: block; font-size: 1.6rem; font-weight: 700; }
.stat__label { color: var(--fg-muted); font-size: 0.9rem; }

.plain-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

/* ------------------------------------------------- flashes and notices --- */

.flash, .notice {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 1.25rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--surface);
}
.flash__text, .notice p { margin: 0; }
.flash__close { margin-left: auto; min-height: 32px; min-width: 32px; padding: 0.2rem 0.5rem; border-color: transparent; background: transparent; font-size: 1.2rem; }
.flash--success { border-left-color: var(--st-0-solid); color: var(--st-0-fg); }
.flash--error { border-left-color: var(--st-3-solid); color: var(--st-3-fg); }
.flash--warning { border-left-color: var(--st-1-solid); color: var(--st-1-fg); }
.flash--info { border-left-color: var(--focus); }
.flash a, .notice a { color: inherit; }
.notice { border-left-color: var(--st-1-solid); }
.notice--ok { border-left-color: var(--st-0-solid); }

.help { margin: 1.5rem 0; padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.help ol { margin: 0.5rem 0; padding-left: 1.3rem; }

/* ------------------------------------------------------------- dialogs --- */

dialog {
  max-width: 34rem;
  width: calc(100% - 2rem);
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
}
dialog::backdrop { background: rgb(0 0 0 / 0.55); }
dialog h2 { margin-top: 0; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; }

/* ---------------------------------------------------------- pagination --- */

.pagination { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; margin-block: 1.5rem; }
.pagination__status { margin: 0; color: var(--fg-muted); }
.pagination ul { display: flex; gap: 1rem; }
.pagination__off { color: var(--fg-muted); }
.result-count { color: var(--fg-muted); }
.subscribe-alt { color: var(--fg-muted); font-size: 0.9rem; }

/* ---------------------------------------------- Windows High Contrast --- */

/* In forced colours mode the browser throws away our palette. The bar height
   and the icon shapes are what keep the strip meaningful there. */
@media (forced-colors: active) {
  .status-badge { border: 1px solid CanvasText; forced-color-adjust: none; color: CanvasText; background: Canvas; }
  .st-icon { fill: CanvasText; }
  .st-icon__cut { fill: Canvas; }
  .banner { border: 2px solid CanvasText; color: CanvasText; }
  /* A border on a two pixel bar is all border, so the fill has to carry the
     difference. Height still separates levels 1, 2 and 3. */
  .ubar { forced-color-adjust: none; border: none; }
  .ubar[data-level="0"] { background: Highlight; }
  .ubar[data-level="1"] { background: GrayText; }
  .ubar[data-level="2"], .ubar[data-level="3"] { background: CanvasText; }
  .ubar[data-level="none"] { background: Canvas; border: 1px solid GrayText; }
  :focus-visible { outline: 2px solid CanvasText; }
  .btn--primary { border: 2px solid CanvasText; }
}

/* ------------------------------------------------------------- narrow --- */

@media (max-width: 40rem) {
  h1 { font-size: 1.5rem; }
  .banner { font-size: 1.1rem; }
  .service__head { align-items: flex-start; }
  .detail-list dt, .status-key dt { min-width: 100%; }
  .row-actions > * { display: flex; width: 100%; margin-right: 0; }
  .level-form { flex-wrap: wrap; }

  /* At 320px the admin header wraps to three or four rows. Left sticky it
     would swallow the viewport and cover anything the user jumped to. */
  .site-header { position: static; }
  :root { scroll-padding-top: 1rem; }

  /* 90 bars at 2px plus 2px gaps needs 358px, which is wider than the page.
     Halving both fits, and the strip is clipped rather than pushing the
     document sideways. Nothing is lost: the bars are decorative to assistive
     technology, and the real figures live in the table below them. */
  .uptime-strip { gap: 1px; overflow: hidden; }
  .ubar { min-width: 1px; }

  /* Level labels are set by the operator and can be 24 characters. Let them
     wrap rather than push the row wider than the screen. */
  .status-badge { white-space: normal; }
}