/* QUILL AI Gateway admin dashboard styles.

Palette values and roles come from the project's dataviz skill reference
(a validated, colorblind-safe, contrast-checked palette) -- see
docs/planning/openai.md's dashboard section for the source. Status colors
(good/warning/serious/critical) are reserved and never reused as
categorical series colors; every status indicator pairs its color with an
icon and a text label, never color alone (WCAG 1.4.1).

No JavaScript is required for this stylesheet or any page that uses it --
every interactive control here is a native HTML element (link, button,
form, details/summary) that already has full keyboard and screen-reader
support without any script.
*/

:root {
  --surface-1: #fcfcfb;
  --page-plane: #f9f9f7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --gridline: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);

  --status-good: #0ca30c;
  --status-warning: #a66a00; /* darkened from the raw #fab219 for light-surface text contrast */
  --status-serious: #b6532c; /* darkened from the raw #ec835a for light-surface text contrast */
  --status-critical: #d03b3b;

  --series-blue: #2a78d6;
  --series-aqua: #1baf7a;
  --series-yellow: #a66a00;
  --series-green: #008300;
  --series-violet: #4a3aa7;

  --seq-100: #cde2fb;
  --seq-300: #6da7ec;
  --seq-500: #256abf;
  --seq-700: #0d366b;

  --link: #184f95;
  --focus-ring: #184f95;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-1: #1a1a19;
    --page-plane: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --gridline: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.10);

    --status-good: #0ca30c;
    --status-warning: #fab219;
    --status-serious: #ec835a;
    --status-critical: #e66767;

    --series-blue: #3987e5;
    --series-aqua: #199e70;
    --series-yellow: #c98500;
    --series-green: #008300;
    --series-violet: #9085e9;

    --seq-100: #184f95;
    --seq-300: #256abf;
    --seq-500: #3987e5;
    --seq-700: #cde2fb;

    --link: #86b6ef;
    --focus-ring: #86b6ef;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page-plane);
  color: var(--text-primary);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

a {
  color: var(--link);
}

/* A visible, high-contrast focus ring on every interactive element --
   keyboard navigation must always be able to see where it is. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface-1);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  z-index: 100;
  border: 2px solid var(--focus-ring);
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

header.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
}
header.site-header .wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
header.site-header nav ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
header.site-header nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
}

main {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.card > h2,
.card > h3 {
  margin-top: 0;
}

.flash {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
}
.flash[data-kind="error"] {
  border-color: var(--status-critical);
}
.flash[data-kind="success"] {
  border-color: var(--status-good);
}

/* --- Stat tile: one hero number + a labeled, textual status, never color alone --- */
.stat-tile {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.stat-tile .value {
  font-size: 2.5rem;
  font-weight: 700;
  font-variant-numeric: proportional-nums;
}
.stat-tile .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.status-badge[data-status="good"] {
  color: var(--status-good);
}
.status-badge[data-status="warning"] {
  color: var(--status-warning);
}
.status-badge[data-status="serious"] {
  color: var(--status-serious);
}
.status-badge[data-status="critical"] {
  color: var(--status-critical);
}

/* --- Accessible progress bar: native <progress> + a plain-language sentence.
   The bar is decorative reinforcement; the sentence carries the meaning,
   so nothing here depends on perceiving the bar's fill or its color. --- */
.budget-progress {
  width: 100%;
  height: 1.25rem;
  accent-color: var(--series-blue);
}
.budget-progress[data-status="warning"] {
  accent-color: var(--status-warning);
}
.budget-progress[data-status="serious"] {
  accent-color: var(--status-serious);
}
.budget-progress[data-status="critical"] {
  accent-color: var(--status-critical);
}

/* --- Bar chart built from plain HTML: an ordered list, each item a
   labeled bar. Every value is also direct-labeled in text, and a data
   table with the same numbers always follows immediately after (see
   templates) -- the chart is illustrative, never the only source of the
   numbers. --- */
.bar-chart {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.bar-chart li {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
}
.bar-chart .bar-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.bar-chart .bar-track {
  background: var(--gridline);
  border-radius: 4px;
  height: 1.5rem;
  position: relative;
}
.bar-chart .bar-fill {
  background: var(--series-blue);
  height: 100%;
  border-radius: 4px;
  min-width: 2px;
}
.bar-chart .bar-value {
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
}
table.data-table caption {
  text-align: left;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
table.data-table th,
table.data-table td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--gridline);
  font-variant-numeric: tabular-nums;
}
table.data-table th {
  color: var(--text-secondary);
  font-weight: 600;
}

form.settings-form {
  display: grid;
  gap: 0.9rem;
  max-width: 34rem;
}
form.settings-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
form.settings-form input[type="text"],
form.settings-form input[type="number"],
form.settings-form input[type="password"],
form.settings-form select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--baseline);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
}
form.settings-form .field-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0.25rem 0 0;
}
form.settings-form button,
a.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--baseline);
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
form.settings-form button.primary,
a.button.primary {
  background: var(--series-blue);
  border-color: var(--series-blue);
  color: #ffffff;
}
form.settings-form button.danger {
  background: var(--status-critical);
  border-color: var(--status-critical);
  color: #ffffff;
}

.model-list,
.flag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.model-list li,
.flag-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.model-list .model-name {
  font-weight: 600;
}
.model-list .model-meta,
.flag-list .flag-meta {
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.8rem;
  font-weight: 600;
}
.pill.is-default {
  color: var(--series-blue);
}

/* ---------------------------------------------------------------------------
   Additions for the plain-language Limits page, the read-only reference pages,
   the safety board and the per-person actions.

   Two rules run through all of it, and both are requirements rather than
   preferences:

   - **No status is ever carried by colour alone.** Every .status-badge has a
     word inside it, and the words are chosen to survive being read out of
     context ("NOT CONFIGURED", not a red dot).
   - **Focus is always visible and never removed.** The :focus-visible rule
     near the top of this file applies to everything added here; nothing below
     sets `outline: none`.
   --------------------------------------------------------------------------- */

/* Visually hidden, still read aloud. For labels on controls whose purpose is
   obvious on screen from a neighbouring cell but not to a screen reader --
   the raw-key rows on the Limits page. Never used to hide a real instruction. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Monospace for identifiers a person has to read character by character: a
   support ID, a database key, a config value. */
.code {
  font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.95em;
  padding: 0.05em 0.3em;
  border-radius: 3px;
  background: rgba(127, 127, 127, 0.14);
}

/* One tunable limit on the Limits page. The left border is decoration; the
   <h3> is what actually separates them, so heading navigation works. */
.config-row {
  padding: 1rem 0 1.25rem 1rem;
  border-left: 3px solid rgba(127, 127, 127, 0.3);
  margin: 1.25rem 0;
}
.config-row h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}
.config-current {
  margin: 0 0 0.5rem;
}
.config-key {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}
.config-form {
  margin: 0.75rem 0 0;
}

/* A checkbox that sits inline with its own label text, rather than being
   stretched by .settings-form's full-width input rule. */
.inline-checkbox {
  width: auto;
  display: inline-block;
  margin-right: 0.5rem;
}

/* A form that is one control and a button, sitting inside a table cell or
   beside prose. */
.inline-form {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0.25rem 0;
}

/* The verbatim prompt templates on the "Fixed by code" page. tabindex="0" in
   the markup makes each block focusable so a keyboard user can scroll one that
   overflows; without it an overflowing <pre> is unreachable without a mouse. */
.prompt-template {
  white-space: pre-wrap;
  word-break: break-word;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(127, 127, 127, 0.35);
  border-radius: 4px;
  background: rgba(127, 127, 127, 0.08);
  max-height: 22rem;
  overflow: auto;
  font-size: 0.92rem;
}

/* Term lists: the glossary, and the deferred-feature list. */
.glossary dt,
.card dl dt {
  font-weight: 600;
  margin-top: 1rem;
}
.glossary dd,
.card dl dd {
  margin: 0.25rem 0 0 1.25rem;
}

/* One connected computer on a person's page. */
.device-row {
  padding: 0.75rem 0 1rem 1rem;
  border-left: 3px solid rgba(127, 127, 127, 0.3);
  margin: 1rem 0;
}
.device-row h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

/* The summary of problems at the top of the safety page, and the permanent
   removal block. Both carry their meaning in their heading text; the border is
   reinforcement, not the message. */
.needs-attention {
  border-left: 5px solid;
}
.danger-zone {
  border-left: 5px solid;
  margin-top: 2.5rem;
}

.flash-area {
  margin-bottom: 1rem;
}

.site-footer {
  margin: 3rem auto 2rem;
  padding: 1rem 1.25rem 0;
  max-width: 62rem;
  border-top: 1px solid rgba(127, 127, 127, 0.3);
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   The public landing page.

   Shares this stylesheet rather than growing a second one: the two pages want
   the same table, the same skip link, the same focus ring and the same status
   colours, and one design system that both use is one place to fix a contrast
   problem. What the public page adds is reading width and a little more air --
   it is prose, where the console is a control panel.
   --------------------------------------------------------------------------- */

body.public main {
  max-width: 44rem;
}

body.public .lede {
  font-size: 1.15rem;
  margin-bottom: 2rem;
}

body.public section {
  margin: 2.5rem 0;
}

body.public h2 {
  margin-bottom: 0.5rem;
}

body.public li {
  margin: 0.35rem 0;
}

body.public ol {
  padding-left: 1.4rem;
}