/* Summer-garden tokens pair botanical greens with floral, golden, and twilight complements.
 * Palette criteria and revision guidance live in docs/ui/design-system.md. */
/* The design-system foundation: semantic theme, type, spacing, shape, and motion tokens. */
:root {
  color-scheme: light dark;

  --color-page: #fff7d6;
  --color-page-warm: #ffe5a8;
  --color-atmosphere-bloom: rgba(255, 128, 130, 0.28);
  --color-atmosphere-sky: rgba(114, 203, 191, 0.32);
  --color-atmosphere-gold: rgba(249, 200, 74, 0.22);
  --color-surface: #ffffff;
  --color-surface-strong: #ffffff;
  --color-surface-muted: rgba(246, 224, 151, 0.42);
  --color-border: #8b986f;
  --color-border-strong: #3f704f;
  --color-text: #26351f;
  --color-heading: #17351f;
  --color-text-muted: #6d6f3d;
  --color-text-faint: #8c8151;
  --color-accent: #2f8f4e;
  --color-accent-soft: #7fc96a;
  --color-accent-strong: #15572e;
  --color-flower: #ee6f8c;
  --color-flower-soft: rgba(238, 111, 140, 0.15);
  --color-warning: #d89224;
  --color-sun: #f9c84a;
  --color-focus: #15572e;
  --color-danger: #bf3f52;
  --color-shadow: rgba(92, 72, 25, 0.18);
  --color-ornament: rgba(47, 143, 78, 0.18);
  --color-heading-shadow: rgba(249, 200, 74, 0.2);
  --color-mask: rgba(0, 0, 0, 0.55);
  --color-sheen: rgba(255, 255, 255, 0.18);
  --color-chart-primary: #2f8f4e;
  --color-chart-primary-fill: rgba(47, 143, 78, 0.14);
  --color-chart-secondary: #7a65b5;
  --color-chart-secondary-fill: rgba(122, 101, 181, 0.14);
  --color-chart-grid: rgba(98, 124, 67, 0.16);
  --color-chart-label: #6d6f3d;

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-size-xs: 0.66rem;
  --font-size-sm: 0.72rem;
  --font-size-md: 0.8rem;
  --font-size-body: 0.88rem;
  --font-size-lg: 1.05rem;
  --font-size-h3: 1.05rem;
  --font-size-h2: clamp(1.125rem, 1.6vw, 1.4rem);
  --font-size-h1: clamp(1.5rem, 2.4vw, 2.125rem);
  --font-size-display: clamp(3.4rem, 6vw, 6rem);
  --letter-spacing-tight: -0.025em;
  --letter-spacing-heading: -0.045em;
  --letter-spacing-display: -0.075em;
  --letter-spacing-caps: 0.08em;
  --letter-spacing-label: 0.06em;
  --letter-spacing-kicker: 0.14em;
  --underline-offset: 0.24em;
  --underline-offset-wide: 0.3em;

  --space-1: 0.25rem;
  --space-2: 0.375rem;
  --space-3: 0.5rem;
  --space-4: 0.625rem;
  --space-5: 0.75rem;
  --space-6: 1rem;
  --space-7: 1.125rem;
  --space-8: 1.25rem;
  --space-9: 1.5rem;
  --space-10: 1.75rem;
  --space-11: 2rem;
  --space-12: 2.25rem;
  --space-13: 2.5rem;
  --space-14: 3rem;
  --space-15: 4rem;
  --space-16: 4.5rem;
  --space-17: 5.5rem;
  --space-18: 6rem;
  --space-fluid-card: clamp(var(--space-8), 4vw, var(--space-12));
  --space-fluid-feature: clamp(var(--space-9), 5vw, var(--space-14));

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-2xl: 0;
  --radius-3xl: 0;
  --radius-pill: 0;
  --border-width: 1px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --control-height: 2.75rem;
  --status-dot-size: 0.4375rem;
  --content-width: 80rem;
  --copy-width: 47.5rem;
  --page-padding-block: var(--space-9);
  --shadow-panel: 0 1.375rem 4.375rem var(--color-shadow);
  --shadow-card: 0 1.75rem 5rem var(--color-shadow);
  --motion-fast: 160ms ease;

  font-family: var(--font-sans);
  background: var(--color-page);
  color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-page: #111827;
    --color-page-warm: #30243a;
    --color-atmosphere-bloom: rgba(255, 118, 148, 0.22);
    --color-atmosphere-sky: rgba(71, 190, 181, 0.2);
    --color-atmosphere-gold: rgba(242, 178, 88, 0.18);
    --color-surface: rgba(24, 39, 43, 0.88);
    --color-surface-strong: rgba(43, 37, 53, 0.96);
    --color-surface-muted: rgba(73, 57, 79, 0.48);
    --color-border: #648f82;
    --color-border-strong: #d0a558;
    --color-text: #e6eee5;
    --color-heading: #fff3d0;
    --color-text-muted: #b7c8bd;
    --color-text-faint: #9e9bb5;
    --color-accent: #7bd89a;
    --color-accent-soft: #c9e77f;
    --color-accent-strong: #70d0c4;
    --color-flower: #ff84ab;
    --color-flower-soft: rgba(255, 132, 171, 0.16);
    --color-warning: #f2b258;
    --color-sun: #ffd86b;
    --color-focus: #ffd86b;
    --color-danger: #ff766f;
    --color-shadow: rgba(4, 8, 18, 0.45);
    --color-ornament: rgba(123, 216, 154, 0.18);
    --color-heading-shadow: rgba(242, 178, 88, 0.18);
    --color-mask: rgba(0, 0, 0, 0.55);
    --color-sheen: rgba(255, 255, 255, 0.18);
    --color-chart-primary: #7bd89a;
    --color-chart-primary-fill: rgba(123, 216, 154, 0.14);
    --color-chart-secondary: #b7a7ff;
    --color-chart-secondary-fill: rgba(183, 167, 255, 0.14);
    --color-chart-grid: rgba(183, 200, 189, 0.14);
    --color-chart-label: #b7c8bd;
  }
}

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

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: 1.5;
}

h1,
h2,
h3,
p {
  margin-block-start: 0;
}

h1,
h2,
h3 {
  color: var(--color-heading);
  font-weight: 800;
  line-height: 1.15;
}

h2 {
  font-size: var(--font-size-h2);
  letter-spacing: var(--letter-spacing-tight);
}

h3 {
  font-size: var(--font-size-h3);
}

a {
  color: var(--color-accent-strong);
  text-underline-offset: var(--underline-offset);
}

a:hover {
  color: var(--color-flower);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
input[type="submit"] {
  min-height: var(--control-height);
  padding: var(--space-4) var(--space-7);
  border: var(--border-width) solid var(--color-accent-strong);
  border-radius: var(--radius-md);
  background: var(--color-accent-strong);
  color: var(--color-page);
  font-size: var(--font-size-md);
  font-weight: 800;
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover {
  border-color: var(--color-flower);
  background: var(--color-flower);
}

:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

code {
  font-family: var(--font-mono);
}

caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

/* Paints one continuous atmosphere behind global navigation and page content. */
.site-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 8%, var(--color-atmosphere-bloom), transparent 30%),
    radial-gradient(circle at 88% 10%, var(--color-atmosphere-sky), transparent 28%),
    radial-gradient(circle at 50% 100%, var(--color-atmosphere-gold), transparent 36%),
    linear-gradient(145deg, var(--color-page), var(--color-page-warm));
}

/* Shared analytical and operational page frame within the atmospheric shell. */
.app-page {
  position: relative;
  min-height: 100vh;
  padding-block: var(--page-padding-block);
  overflow: hidden;
  background: transparent;
}

.app-page::before,
.app-page::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.app-page::before {
  right: clamp(var(--space-7), 7vw, 7.5rem);
  bottom: var(--space-14);
  width: 5.125rem;
  height: 8.625rem;
  border-radius: 2.625rem 2.625rem var(--space-7) var(--space-7);
  background:
    radial-gradient(circle at 50% 18%, var(--color-flower) 0 var(--space-2), transparent var(--space-3)),
    linear-gradient(90deg, transparent 0 45%, var(--color-sheen) 46% 48%, transparent 49%),
    var(--color-ornament);
  box-shadow:
    calc(-1 * var(--space-13)) var(--space-13) 0 calc(-1 * var(--space-7)) var(--color-ornament),
    var(--space-13) var(--space-9) 0 calc(-1 * var(--space-7)) var(--color-ornament);
}

.app-page::after {
  top: var(--space-9);
  right: var(--space-10);
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-sun), transparent 68%);
  opacity: 0.42;
}

/* Frosted content container shared by cards, reports, forms, and tables. */
.surface {
  min-width: 0;
  padding: var(--space-fluid-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(var(--space-6));
}

.surface[data-layout="table"] {
  padding-block: var(--space-7);
  padding-inline: 0;
  overflow: hidden;
}

.surface[data-layout="compact"] {
  padding: var(--space-9);
}

.surface[data-tone="danger"] {
  max-width: 42.5rem;
  border-color: color-mix(in srgb, var(--color-danger), transparent 65%);
}

.surface[data-separated] {
  margin-top: var(--space-6);
}

@scope (.surface) {
  > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-9);
    margin-bottom: var(--space-6);
  }

  > header h2,
  > h2 {
    margin: 0;
  }

  > header > p,
  > header > div > p:last-child {
    margin: var(--space-1) 0 0;
    color: var(--color-text-faint);
    font-size: var(--font-size-md);
  }

  > footer[data-context] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--color-border);
    margin-top: var(--space-6);
    color: var(--color-text-faint);
    font-size: var(--font-size-md);
  }

  > footer[data-context] p {
    max-width: var(--copy-width);
    margin: 0;
  }
}

.surface[data-layout="table"] > header,
.surface[data-layout="table"] > .empty-state {
  padding-inline: var(--space-fluid-card);
}

.surface[data-layout="table"] > footer[data-context] {
  padding-inline: var(--space-fluid-card);
}

/* Compact metadata collection used above reports and charts. */
.meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@scope (.meta-list) {
  > span {
    padding: var(--space-3) var(--space-5);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
  }

  > span strong {
    color: var(--color-heading);
    font-weight: 650;
  }
}

/* Horizontal select control that collapses cleanly on narrow screens. */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-9);
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.filter-bar[aria-busy="true"] {
  opacity: 0.7;
}

@scope (.filter-bar) {
  label {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-heading);
    font-size: var(--font-size-md);
    font-weight: 700;
  }

  p {
    margin: 0;
    color: var(--color-text-faint);
    font-size: var(--font-size-sm);
  }

  select {
    min-width: 13.75rem;
    padding: var(--space-4) var(--space-12) var(--space-4) var(--space-5);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-strong);
    color: var(--color-heading);
    cursor: pointer;
  }
}

/* Shared horizontal overflow boundary for dense data tables. */
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--color-border) transparent;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* Vertically groups sibling surfaces without coupling their internals. */
.surface-stack {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

@scope (.surface-stack) {
  [data-count] {
    color: var(--color-text-faint);
    font-size: var(--font-size-md);
  }
}

/* Dense tabular presentation; cell meaning is expressed with data attributes. */
.data-table {
  width: 100%;
  min-width: 42.5rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.data-table[data-density="compact"] {
  display: inline-table;
  width: auto;
  min-width: 0;
  vertical-align: top;
}

@scope (.data-table) {
  th,
  td {
    padding: var(--space-6) var(--space-fluid-card);
    border-top: var(--border-width) solid var(--color-border);
    text-align: left;
  }

  th {
    color: var(--color-text-faint);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
  }

  td {
    color: var(--color-text);
    font-size: var(--font-size-body);
  }

  tbody tr {
    transition: background-color var(--motion-fast);
  }

  tbody tr:hover {
    background: var(--color-flower-soft);
  }

  :is(th, td)[data-numeric] {
    text-align: right;
  }

  [data-primary],
  [data-secondary],
  code {
    display: block;
  }

  code {
    color: var(--color-heading);
    font-size: var(--font-size-md);
  }

  [data-secondary] {
    margin-top: var(--space-1);
    color: var(--color-text-faint);
    font-size: var(--font-size-sm);
  }

  a {
    display: inline-block;
    font-weight: 700;
    text-decoration: none;
  }

  a:hover code {
    color: var(--color-flower);
  }
}

.data-table[data-density="compact"] :is(th, td) {
  padding: var(--space-4) var(--space-5);
  white-space: nowrap;
}

.data-table[data-density="compact"] :is(th, td):first-child {
  padding-left: var(--space-8);
}

.data-table[data-density="compact"] :is(th, td):last-child {
  padding-right: var(--space-8);
}

/* Link-shaped and button-shaped actions share one explicit root contract. */
.button {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  padding: var(--space-4) var(--space-7);
  border: var(--border-width) solid var(--color-accent-strong);
  border-radius: var(--radius-md);
  background: var(--color-accent-strong);
  color: var(--color-page);
  font-size: var(--font-size-md);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  border-color: var(--color-flower);
  background: var(--color-flower);
  color: var(--color-page);
}

.button[data-tone="secondary"] {
  border-color: var(--color-border-strong);
  background: var(--color-surface-strong);
  color: var(--color-heading);
}

.button[data-block] {
  width: 100%;
}

/* Semantic system feedback with status expressed through a tone attribute. */
.notice {
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
  color: var(--color-heading);
}

.notice[data-tone="danger"] {
  border-color: color-mix(in srgb, var(--color-danger), transparent 50%);
  background: color-mix(in srgb, var(--color-danger), transparent 90%);
  color: var(--color-danger);
}

.notice[data-tone="warning"] {
  border-color: color-mix(in srgb, var(--color-warning), transparent 50%);
  background: color-mix(in srgb, var(--color-warning), transparent 88%);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 850;
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.status-pill::before {
  width: var(--status-dot-size);
  height: var(--status-dot-size);
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.status-pill[data-status="healthy"],
.status-pill[data-status="available"],
.status-pill[data-status="succeeded"],
.status-pill[data-status="pass"] {
  border-color: color-mix(in srgb, var(--color-accent), transparent 55%);
  color: var(--color-accent-strong);
}

.status-pill[data-status="watch"],
.status-pill[data-status="queued"],
.status-pill[data-status="running"],
.status-pill[data-status="stale"] {
  border-color: color-mix(in srgb, var(--color-warning), transparent 45%);
  color: var(--color-warning);
}

.status-pill[data-status="action"],
.status-pill[data-status="failed"],
.status-pill[data-status="fail"] {
  border-color: color-mix(in srgb, var(--color-danger), transparent 45%);
  color: var(--color-danger);
}

.status-pill[data-status="unavailable"],
.status-pill[data-status="unverified"] {
  color: var(--color-text-faint);
}

.empty-state {
  padding: var(--space-10) var(--space-9);
  border-top: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
  text-align: center;
}

@scope (.empty-state) {
  h2 {
    margin: 0;
  }

  p {
    margin: var(--space-3) auto var(--space-8);
  }
}

.chart-frame {
  position: relative;
  height: 27.5rem;
}

a[data-external-link] {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: var(--space-1);
}

@media (max-width: 640px) {
  :root {
    --page-padding-block: var(--space-7);
  }

  .surface > header {
    align-items: start;
    flex-direction: column;
    margin-bottom: var(--space-8);
  }

  .surface > footer[data-context] {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .filter-bar {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-5);
  }

  .filter-bar select {
    width: 100%;
    min-width: 0;
  }

  .chart-frame {
    height: 21.25rem;
  }
}