/* Design tokens. Generated from internal/ui/tokens.go; edit the table there. */
:root{
  color-scheme: light dark;
  /* surface: the planes a screen is built from, back to front */
  --ui-bg: #f5f6f8;
  --ui-surface: #ffffff;
  --ui-surface-raised: #ffffff;
  --ui-surface-sunken: #ebedf1;
  /* text: foreground weights, most to least prominent */
  --ui-text: #15181d;
  --ui-text-muted: #4c545f;
  --ui-text-subtle: #666e7a;
  /* line: separations and the focus ring */
  --ui-border: #d8dce3;
  --ui-border-strong: #b3bac5;
  --ui-focus: #0b5fce;
  /* accent: Pinggy's one brand colour, in the two roles it can safely take */
  --ui-accent: #c2410c;
  --ui-accent-strong: #9a3412;
  --ui-accent-soft: #fdece0;
  --ui-accent-text: #9a3412;
  --ui-on-accent: #ffffff;
  /* status: the monitoring vocabulary: one colour per state, identical everywhere it appears */
  --ui-up: #1a7f37;
  --ui-up-soft: #e4f4e8;
  --ui-down: #b42318;
  --ui-down-soft: #fdeceb;
  --ui-degraded: #8a5300;
  --ui-degraded-soft: #fcf1da;
  --ui-info: #1f5fa8;
  --ui-info-soft: #e7f0fb;
  --ui-neutral: #5b6371;
  --ui-neutral-soft: #edeff3;
  /* type: one sans stack, one mono stack, and a small modular scale */
  --ui-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ui-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ui-text-xs: 0.75rem;
  --ui-text-sm: 0.875rem;
  --ui-text-base: 1rem;
  --ui-text-lg: 1.125rem;
  --ui-text-xl: 1.375rem;
  --ui-text-2xl: 1.75rem;
  --ui-leading-tight: 1.25;
  --ui-leading-normal: 1.55;
  --ui-weight-medium: 500;
  --ui-weight-semibold: 600;
  /* space: a single spacing scale; a layout that needs a value between two steps needs a different layout */
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.5rem;
  --ui-space-6: 2rem;
  --ui-space-7: 3rem;
  /* shape: corner radii and the one border width */
  --ui-radius-sm: 4px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 14px;
  --ui-radius-pill: 999px;
  --ui-border-width: 1px;
  /* elevation: the two shadows; a dark surface needs a heavier one to read at all */
  --ui-shadow-sm: 0 1px 2px rgba(16, 18, 21, 0.08);
  --ui-shadow-md: 0 8px 24px rgba(16, 18, 21, 0.10);
  /* layout: the measurements the shell and the controls are built to */
  --ui-layout-max: 76rem;
  --ui-layout-reading: 62rem;
  --ui-layout-gutter: clamp(1rem, 3vw, 2rem);
  --ui-control-height: 2.25rem;
  --ui-control-padding: 0.45rem 0.7rem;
  --ui-cell-padding: 0.5rem 0.7rem;
  --ui-focus-width: 2px;
  --ui-focus-offset: 2px;
  --ui-field-max: 32rem;
}
@media (prefers-color-scheme: dark){
  :root:not(.theme-light){
    color-scheme: dark;
    --ui-bg: #0f1114;
    --ui-surface: #171a1f;
    --ui-surface-raised: #1e222a;
    --ui-surface-sunken: #0b0d10;
    --ui-text: #e9ebef;
    --ui-text-muted: #b3bac4;
    --ui-text-subtle: #8c94a1;
    --ui-border: #2a2f38;
    --ui-border-strong: #3e4650;
    --ui-focus: #7cb8ff;
    --ui-accent: #f97316;
    --ui-accent-strong: #fb8b3c;
    --ui-accent-soft: #3a2109;
    --ui-accent-text: #fdba74;
    --ui-on-accent: #1b1205;
    --ui-up: #63cf7a;
    --ui-up-soft: #12301b;
    --ui-down: #ff8c85;
    --ui-down-soft: #3b1512;
    --ui-degraded: #f9d65f;
    --ui-degraded-soft: #3a2c08;
    --ui-info: #84bdf2;
    --ui-info-soft: #10263d;
    --ui-neutral: #a4acb9;
    --ui-neutral-soft: #22262e;
    --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55);
    --ui-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.60);
  }
}
.theme-dark{
  color-scheme: dark;
    --ui-bg: #0f1114;
    --ui-surface: #171a1f;
    --ui-surface-raised: #1e222a;
    --ui-surface-sunken: #0b0d10;
    --ui-text: #e9ebef;
    --ui-text-muted: #b3bac4;
    --ui-text-subtle: #8c94a1;
    --ui-border: #2a2f38;
    --ui-border-strong: #3e4650;
    --ui-focus: #7cb8ff;
    --ui-accent: #f97316;
    --ui-accent-strong: #fb8b3c;
    --ui-accent-soft: #3a2109;
    --ui-accent-text: #fdba74;
    --ui-on-accent: #1b1205;
    --ui-up: #63cf7a;
    --ui-up-soft: #12301b;
    --ui-down: #ff8c85;
    --ui-down-soft: #3b1512;
    --ui-degraded: #f9d65f;
    --ui-degraded-soft: #3a2c08;
    --ui-info: #84bdf2;
    --ui-info-soft: #10263d;
    --ui-neutral: #a4acb9;
    --ui-neutral-soft: #22262e;
    --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55);
    --ui-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.60);
}
.theme-light{
  color-scheme: light;
}

/*
 * Pinggy control-plane stylesheet.
 *
 * Hand-authored plain CSS: there is no build step, no preprocessor, and no
 * client-side framework. Every colour, size, spacing, and radius below is a
 * custom-property reference to a token declared in internal/ui/tokens.go, and
 * the declarations for those tokens are prepended to this file at process
 * start. A literal colour here is a design-system leak and fails this
 * package's tests.
 *
 * Order: reset, document shell, navigation, typography, layout primitives,
 * components, controls, tables, legacy status vocabulary, responsive and
 * accessibility adaptations. Nothing in this file depends on JavaScript.
 */

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

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

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

body {
  margin: 0;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--ui-font-sans);
  font-size: var(--ui-text-base);
  line-height: var(--ui-leading-normal);
}

:where(h1, h2, h3, h4, p, ul, ol, figure, table, pre) {
  margin: 0;
}

/* A visible focus ring on every focusable thing, in one place, never removed. */
:focus-visible {
  outline: var(--ui-focus-width) solid var(--ui-focus);
  outline-offset: var(--ui-focus-offset);
}

/* --- document shell ----------------------------------------------------- */

.ui-skip-link {
  position: absolute;
  left: var(--ui-space-2);
  top: calc(var(--ui-space-2) * -8);
  z-index: 10;
  padding: var(--ui-control-padding);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-accent);
  color: var(--ui-on-accent);
  text-decoration: none;
}

.ui-skip-link:focus {
  top: var(--ui-space-2);
}

.ui-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ui-surface-raised);
  border-bottom: var(--ui-border-width) solid var(--ui-border);
  box-shadow: var(--ui-shadow-sm);
}

.ui-topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-3) var(--ui-space-5);
  max-width: var(--ui-layout-max);
  margin: 0 auto;
  padding: var(--ui-space-3) var(--ui-layout-gutter);
}

.ui-brand {
  margin: 0;
  font-size: var(--ui-text-lg);
  font-weight: var(--ui-weight-semibold);
  letter-spacing: 0.02em;
  line-height: var(--ui-leading-tight);
}

.ui-brand a {
  color: var(--ui-text);
  text-decoration: none;
}

.ui-brand a::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: var(--ui-space-2);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent);
  vertical-align: baseline;
}

/* The navigation takes a row of its own beneath the brand and the tenant
 * switcher: there are enough destinations that sharing a row with them wraps
 * badly at every width worth designing for. */
.ui-nav {
  flex: 1 0 100%;
  order: 2;
  min-width: 0;
}

.ui-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-1) var(--ui-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-nav-link {
  display: inline-block;
  padding: var(--ui-space-1) var(--ui-space-3);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  text-decoration: none;
}

.ui-nav-link:hover {
  background: var(--ui-neutral-soft);
  color: var(--ui-text);
}

.ui-nav-link[aria-current="page"] {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text);
  font-weight: var(--ui-weight-medium);
}

.ui-tenant-form {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0 0 0 auto;
  order: 1;
}

.ui-tenant-form label {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
  color: var(--ui-text-subtle);
  font-size: var(--ui-text-sm);
}

.ui-tenant-form select {
  margin: 0;
  max-width: 14rem;
}

.ui-main {
  max-width: var(--ui-layout-max);
  margin: 0 auto;
  padding: var(--ui-space-6) var(--ui-layout-gutter) var(--ui-space-7);
}

.ui-main > * + * {
  margin-top: var(--ui-space-4);
}

.ui-main > :is(h2, h3) {
  margin-top: var(--ui-space-6);
}

.ui-footer {
  max-width: var(--ui-layout-max);
  margin: 0 auto;
  padding: var(--ui-space-4) var(--ui-layout-gutter) var(--ui-space-6);
  border-top: var(--ui-border-width) solid var(--ui-border);
  color: var(--ui-text-subtle);
  font-size: var(--ui-text-sm);
}

/* --- typography --------------------------------------------------------- */

h2 {
  font-size: var(--ui-text-xl);
  font-weight: var(--ui-weight-semibold);
  line-height: var(--ui-leading-tight);
}

h3 {
  font-size: var(--ui-text-lg);
  font-weight: var(--ui-weight-semibold);
  line-height: var(--ui-leading-tight);
}

h4 {
  font-size: var(--ui-text-base);
  font-weight: var(--ui-weight-semibold);
  line-height: var(--ui-leading-tight);
}

p {
  max-width: 72ch;
}

a {
  color: var(--ui-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

code,
pre,
samp {
  font-family: var(--ui-font-mono);
  font-size: var(--ui-text-sm);
}

code {
  padding: 0 var(--ui-space-1);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-sunken);
}

pre {
  overflow-x: auto;
  padding: var(--ui-space-3);
  border: var(--ui-border-width) solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-sunken);
  color: var(--ui-text-muted);
}

hr {
  height: 0;
  margin: var(--ui-space-5) 0;
  border: 0;
  border-top: var(--ui-border-width) solid var(--ui-border);
}

/* --- layout primitives -------------------------------------------------- */

/* Vertical rhythm without margins on the children themselves. */
.ui-stack > * + * {
  margin-top: var(--ui-space-3);
}

/* A row that wraps instead of overflowing: actions, filters, badge rows. */
.ui-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2) var(--ui-space-3);
}

/* An as-many-as-fit grid: summary cards, stat tiles, definition panels. */
.ui-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--ui-space-4);
}

/* Forms that must sit on one line beside their neighbours (row actions). */
.ui-inline-form {
  display: inline-block;
  margin: 0 var(--ui-space-1) 0 0;
}

/* --- components --------------------------------------------------------- */

.ui-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-3) var(--ui-space-5);
  padding-bottom: var(--ui-space-3);
  border-bottom: var(--ui-border-width) solid var(--ui-border);
}

.ui-page-heading {
  min-width: 0;
}

.ui-page-title {
  font-size: var(--ui-text-2xl);
  font-weight: var(--ui-weight-semibold);
  line-height: var(--ui-leading-tight);
}

.ui-page-description {
  margin-top: var(--ui-space-1);
  color: var(--ui-text-subtle);
  font-size: var(--ui-text-sm);
}

.ui-back-link {
  display: inline-block;
  margin-bottom: var(--ui-space-1);
  color: var(--ui-text-subtle);
  font-size: var(--ui-text-sm);
}

.ui-card {
  padding: var(--ui-space-4);
  border: var(--ui-border-width) solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

.ui-card-title {
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-medium);
}

.ui-stat-label {
  color: var(--ui-text-subtle);
  font-size: var(--ui-text-sm);
}

.ui-stat-value {
  margin-top: var(--ui-space-1);
  font-size: var(--ui-text-2xl);
  font-weight: var(--ui-weight-semibold);
  line-height: var(--ui-leading-tight);
}

.ui-stat-detail {
  margin-top: var(--ui-space-1);
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

.ui-badge {
  display: inline-block;
  padding: 0 var(--ui-space-2);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-neutral-soft);
  color: var(--ui-neutral);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-weight-medium);
  line-height: 1.6;
  white-space: nowrap;
}

.ui-badge-up {
  background: var(--ui-up-soft);
  color: var(--ui-up);
}

.ui-badge-down {
  background: var(--ui-down-soft);
  color: var(--ui-down);
}

.ui-badge-degraded {
  background: var(--ui-degraded-soft);
  color: var(--ui-degraded);
}

.ui-badge-info {
  background: var(--ui-info-soft);
  color: var(--ui-info);
}

.ui-badge-accent {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text);
}

.ui-notice {
  padding: var(--ui-space-3) var(--ui-space-4);
  border: var(--ui-border-width) solid var(--ui-border);
  border-left: var(--ui-space-1) solid var(--ui-accent);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  color: var(--ui-text-muted);
}

.ui-notice-title {
  color: var(--ui-text);
  font-size: var(--ui-text-base);
  font-weight: var(--ui-weight-semibold);
}

.ui-notice-up {
  border-left-color: var(--ui-up);
}

.ui-notice-down {
  border-left-color: var(--ui-down);
}

.ui-notice-degraded {
  border-left-color: var(--ui-degraded);
}

.ui-notice-info {
  border-left-color: var(--ui-info);
}

.ui-notice-accent {
  border-left-color: var(--ui-accent);
}

.ui-empty {
  padding: var(--ui-space-6) var(--ui-space-4);
  border: var(--ui-border-width) dashed var(--ui-border-strong);
  border-radius: var(--ui-radius-lg);
  color: var(--ui-text-subtle);
  text-align: center;
}

.ui-empty-title {
  color: var(--ui-text);
  font-size: var(--ui-text-lg);
  font-weight: var(--ui-weight-semibold);
}

/* A proportion bar. The fill's width comes from a generated .ui-bar-fill-N
 * class rather than a style attribute, which is what lets the page's policy
 * forbid inline style entirely. */
.ui-bar {
  min-width: 4rem;
  height: 0.75rem;
  overflow: hidden;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface-sunken);
}

.ui-bar-fill {
  height: 100%;
  min-width: 3px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent);
}

.ui-bar-fill-0 {
  min-width: 0;
}

/* The history screen's SVG marks: a state or an incident window painted with
 * the same status vocabulary as everywhere else, as a class rather than a
 * fill attribute, so the chart follows the light/dark presentation instead of
 * carrying a colour fixed at authoring time (P7-02). */
.ui-chart-up {
  fill: var(--ui-up);
}

.ui-chart-down {
  fill: var(--ui-down);
}

.ui-chart-degraded {
  fill: var(--ui-degraded);
}

.ui-chart-neutral {
  fill: var(--ui-neutral);
}

.ui-chart-neutral-dim {
  fill: var(--ui-neutral);
  opacity: 0.7;
}

.ui-chart-neutral-faint {
  fill: var(--ui-neutral);
  opacity: 0.4;
}

.ui-chart-accent {
  fill: var(--ui-accent);
}

.ui-chart-axis {
  stroke: var(--ui-border-strong);
}

/* --- controls ----------------------------------------------------------- */

label {
  display: block;
  margin: var(--ui-space-3) 0;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-medium);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  display: block;
  width: 100%;
  max-width: var(--ui-field-max);
  min-height: var(--ui-control-height);
  margin: var(--ui-space-1) 0;
  padding: var(--ui-control-padding);
  border: var(--ui-border-width) solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
  color: var(--ui-text);
  font: inherit;
  font-size: var(--ui-text-sm);
}

/* A checkbox and a radio are drawn by the platform; they are tinted with the
 * accent and otherwise left alone, because a control nobody recognises is
 * worse than one that looks like the system it is running on. */
input[type="checkbox"],
input[type="radio"] {
  width: 1rem;
  height: 1rem;
  margin: 0 var(--ui-space-2) 0 0;
  accent-color: var(--ui-accent);
  vertical-align: -0.15em;
}

textarea {
  max-width: none;
  font-family: var(--ui-font-mono);
}

.ui-textarea {
  width: 100%;
}

::placeholder {
  color: var(--ui-text-subtle);
}

button {
  min-height: var(--ui-control-height);
  padding: var(--ui-control-padding);
  border: var(--ui-border-width) solid var(--ui-accent);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-accent);
  color: var(--ui-on-accent);
  font: inherit;
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-medium);
  cursor: pointer;
}

button:hover:not(:disabled) {
  background: var(--ui-accent-strong);
  border-color: var(--ui-accent-strong);
}

button:disabled {
  border-color: var(--ui-border);
  background: var(--ui-neutral-soft);
  color: var(--ui-text-subtle);
  cursor: not-allowed;
}

/* A link that must read as an action sits beside buttons in an action row. */
.ui-action {
  display: inline-block;
  min-height: var(--ui-control-height);
  padding: var(--ui-control-padding);
  border: var(--ui-border-width) solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-medium);
  text-decoration: none;
}

.ui-action:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent-text);
}

.ui-action-primary {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: var(--ui-on-accent);
}

.ui-action-primary:hover {
  border-color: var(--ui-accent-strong);
  background: var(--ui-accent-strong);
  color: var(--ui-on-accent);
}

fieldset {
  margin: var(--ui-space-4) 0;
  padding: var(--ui-space-3) var(--ui-space-4);
  border: var(--ui-border-width) solid var(--ui-border);
  border-radius: var(--ui-radius-md);
}

legend {
  padding: 0 var(--ui-space-2);
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-medium);
}

details {
  margin: var(--ui-space-3) 0;
  padding: var(--ui-space-2) var(--ui-space-3);
  border: var(--ui-border-width) solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
}

summary {
  cursor: pointer;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-medium);
}

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

.ui-table-scroll,
.table-scroll {
  overflow-x: auto;
  border: var(--ui-border-width) solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ui-text-sm);
}

caption {
  padding: var(--ui-space-2) var(--ui-space-3);
  color: var(--ui-text-subtle);
  font-size: var(--ui-text-sm);
  text-align: left;
}

th,
td {
  padding: var(--ui-cell-padding);
  border-bottom: var(--ui-border-width) solid var(--ui-border);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--ui-surface-sunken);
  color: var(--ui-text-muted);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

tr:last-child td {
  border-bottom: 0;
}

figure {
  margin: var(--ui-space-3) 0;
}

figcaption {
  color: var(--ui-text-subtle);
  font-size: var(--ui-text-sm);
}

/* --- status vocabulary -------------------------------------------------- */
/*
 * The class names the screens already use for consensus states. They are part
 * of the design system rather than leftovers: a state has one colour, and it is
 * the same colour in a table cell, a heading, and a summary line.
 */

.up {
  color: var(--ui-up);
  font-weight: var(--ui-weight-medium);
}

.down {
  color: var(--ui-down);
  font-weight: var(--ui-weight-medium);
}

.degraded {
  color: var(--ui-degraded);
  font-weight: var(--ui-weight-medium);
}

.unknown,
.paused,
.unmonitored {
  color: var(--ui-neutral);
}

.ui-text-info {
  color: var(--ui-info);
}

.ui-text-accent {
  color: var(--ui-accent-text);
}

.summary {
  color: var(--ui-text-muted);
}

.explanation {
  color: var(--ui-text-subtle);
  font-size: var(--ui-text-sm);
}

.notice,
.failure {
  padding: var(--ui-space-3) var(--ui-space-4);
  border: var(--ui-border-width) solid var(--ui-border);
  border-left: var(--ui-space-1) solid var(--ui-accent);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  color: var(--ui-text-muted);
}

.failure {
  border-left-color: var(--ui-down);
  background: var(--ui-down-soft);
  color: var(--ui-down);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--ui-space-4);
}

.card {
  padding: var(--ui-space-4);
  border: var(--ui-border-width) solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

.card h4 {
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-medium);
}

.metric-value {
  margin: var(--ui-space-1) 0;
  font-size: var(--ui-text-2xl);
  font-weight: var(--ui-weight-semibold);
  line-height: var(--ui-leading-tight);
}

.range-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.range-nav a {
  padding: var(--ui-space-1) var(--ui-space-3);
  border: var(--ui-border-width) solid var(--ui-border);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  text-decoration: none;
}

.range-nav a[aria-current] {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text);
  font-weight: var(--ui-weight-medium);
}

.timeline-svg,
.latency-svg {
  width: 100%;
  height: auto;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-sunken);
}

.sr-only,
.ui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- responsive and accessibility adaptations --------------------------- */

@media (max-width: 48rem) {
  .ui-topbar-inner {
    align-items: stretch;
    flex-direction: column;
    gap: var(--ui-space-2);
  }

  .ui-tenant-form {
    flex-wrap: wrap;
  }

  .ui-main {
    padding-top: var(--ui-space-4);
  }

  .ui-page-header {
    flex-direction: column;
  }
}

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

@media (forced-colors: active) {
  .ui-badge,
  .ui-nav-link[aria-current="page"],
  button,
  .ui-action {
    border: var(--ui-border-width) solid;
  }

  .ui-bar-fill {
    forced-color-adjust: none;
  }
}

/* Proportion-bar widths. Generated; see internal/ui/stylesheet.go. */
.ui-bar-fill-0{width:0%}
.ui-bar-fill-1{width:1%}
.ui-bar-fill-2{width:2%}
.ui-bar-fill-3{width:3%}
.ui-bar-fill-4{width:4%}
.ui-bar-fill-5{width:5%}
.ui-bar-fill-6{width:6%}
.ui-bar-fill-7{width:7%}
.ui-bar-fill-8{width:8%}
.ui-bar-fill-9{width:9%}
.ui-bar-fill-10{width:10%}
.ui-bar-fill-11{width:11%}
.ui-bar-fill-12{width:12%}
.ui-bar-fill-13{width:13%}
.ui-bar-fill-14{width:14%}
.ui-bar-fill-15{width:15%}
.ui-bar-fill-16{width:16%}
.ui-bar-fill-17{width:17%}
.ui-bar-fill-18{width:18%}
.ui-bar-fill-19{width:19%}
.ui-bar-fill-20{width:20%}
.ui-bar-fill-21{width:21%}
.ui-bar-fill-22{width:22%}
.ui-bar-fill-23{width:23%}
.ui-bar-fill-24{width:24%}
.ui-bar-fill-25{width:25%}
.ui-bar-fill-26{width:26%}
.ui-bar-fill-27{width:27%}
.ui-bar-fill-28{width:28%}
.ui-bar-fill-29{width:29%}
.ui-bar-fill-30{width:30%}
.ui-bar-fill-31{width:31%}
.ui-bar-fill-32{width:32%}
.ui-bar-fill-33{width:33%}
.ui-bar-fill-34{width:34%}
.ui-bar-fill-35{width:35%}
.ui-bar-fill-36{width:36%}
.ui-bar-fill-37{width:37%}
.ui-bar-fill-38{width:38%}
.ui-bar-fill-39{width:39%}
.ui-bar-fill-40{width:40%}
.ui-bar-fill-41{width:41%}
.ui-bar-fill-42{width:42%}
.ui-bar-fill-43{width:43%}
.ui-bar-fill-44{width:44%}
.ui-bar-fill-45{width:45%}
.ui-bar-fill-46{width:46%}
.ui-bar-fill-47{width:47%}
.ui-bar-fill-48{width:48%}
.ui-bar-fill-49{width:49%}
.ui-bar-fill-50{width:50%}
.ui-bar-fill-51{width:51%}
.ui-bar-fill-52{width:52%}
.ui-bar-fill-53{width:53%}
.ui-bar-fill-54{width:54%}
.ui-bar-fill-55{width:55%}
.ui-bar-fill-56{width:56%}
.ui-bar-fill-57{width:57%}
.ui-bar-fill-58{width:58%}
.ui-bar-fill-59{width:59%}
.ui-bar-fill-60{width:60%}
.ui-bar-fill-61{width:61%}
.ui-bar-fill-62{width:62%}
.ui-bar-fill-63{width:63%}
.ui-bar-fill-64{width:64%}
.ui-bar-fill-65{width:65%}
.ui-bar-fill-66{width:66%}
.ui-bar-fill-67{width:67%}
.ui-bar-fill-68{width:68%}
.ui-bar-fill-69{width:69%}
.ui-bar-fill-70{width:70%}
.ui-bar-fill-71{width:71%}
.ui-bar-fill-72{width:72%}
.ui-bar-fill-73{width:73%}
.ui-bar-fill-74{width:74%}
.ui-bar-fill-75{width:75%}
.ui-bar-fill-76{width:76%}
.ui-bar-fill-77{width:77%}
.ui-bar-fill-78{width:78%}
.ui-bar-fill-79{width:79%}
.ui-bar-fill-80{width:80%}
.ui-bar-fill-81{width:81%}
.ui-bar-fill-82{width:82%}
.ui-bar-fill-83{width:83%}
.ui-bar-fill-84{width:84%}
.ui-bar-fill-85{width:85%}
.ui-bar-fill-86{width:86%}
.ui-bar-fill-87{width:87%}
.ui-bar-fill-88{width:88%}
.ui-bar-fill-89{width:89%}
.ui-bar-fill-90{width:90%}
.ui-bar-fill-91{width:91%}
.ui-bar-fill-92{width:92%}
.ui-bar-fill-93{width:93%}
.ui-bar-fill-94{width:94%}
.ui-bar-fill-95{width:95%}
.ui-bar-fill-96{width:96%}
.ui-bar-fill-97{width:97%}
.ui-bar-fill-98{width:98%}
.ui-bar-fill-99{width:99%}
.ui-bar-fill-100{width:100%}