/* ============================================================================
   Design tokens — brand primitives and application semantics
   ============================================================================

   Layer 1 is the brand system extracted from the main site (see BRAND.md).
   Layer 2 derives the application's semantic tokens from it.

   THE ONE RULE THAT MATTERS HERE
   ------------------------------
   Clay and ember are reserved for INTERACTIVE elements — buttons, links,
   focus rings, selection. They are never used to indicate record status.

   That is not stylistic. The brand's primary accent (clay-500, #c17a4b) is a
   warm red-orange at hue 24°, which is where a "warning" state normally
   lives — measured separation from an amber warning is only 10–21°, and from
   a fire-engine-red danger only 26°. Any palette that uses clay for status
   produces a screen where "this is a button" and "this is broken" look the
   same. Splitting the two roles is what makes both legible; the status ramp
   below is then free to sit wherever it needs to.

   Every value carries its measured contrast against the surface it is used
   on. Nothing here is below WCAG 2.2 AA (4.5:1) for text.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- layer 1
     Brand primitives — verbatim from the main site. Do not adjust. */

  --espresso-950: #15100c;
  --espresso-900: #1c1611;
  --espresso-800: #241d17;
  --espresso-700: #2c241d;
  --espresso-600: #382d24;
  --espresso-500: #4a3d31;

  --clay-50:  #f8efe7;
  --clay-200: #e3be9a;
  --clay-300: #d9a87f;
  --clay-400: #cf8f5f;
  --clay-500: #c17a4b;
  --clay-600: #a9663c;
  --clay-700: #8a5230;

  --ember-300: #f0c08a;
  --ember-400: #e6a85f;
  --ember-500: #d98e3d;

  --cream-100: #fbf6ee;
  --cream-200: #f4ecdf;
  --cream-300: #e7dccb;
  --cream-400: #d2c4ab;
  --cream-500: #b6a589;
  --cream-600: #9a886c;

  --brand-eyebrow: #e0a877;
  --brand-placeholder: #8a7a66;

  /* Motion, verbatim from the brand */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-glow: 0 0 55px -15px rgba(217, 142, 61, 0.55);
  --shadow-glow-lg: 0 0 90px -10px rgba(217, 142, 61, 0.5);

  /* ---------------------------------------------------------------- layer 2
     Light theme semantics. The main site is dark-only, so this theme is
     derived rather than extracted — same hue families, inverted grounds. */

  --surface-base:    var(--cream-100);
  --surface-1:       #ffffff;
  --surface-raised:  #ffffff;
  --surface-sunken:  #f4ecdf;

  --text-primary:    var(--espresso-900);
  --text-secondary:  #4a3d31;
  --text-muted:      #6b5b4a;

  --border-subtle:   rgba(138, 82, 48, 0.16);
  --border-strong:   rgba(138, 82, 48, 0.34);

  /* Interactive — clay only. Never status. */
  --interactive:        var(--clay-700);   /* 5.86:1 on cream-100 */
  --interactive-hover:  #6f411f;
  --interactive-subtle: rgba(193, 122, 75, 0.10);
  --focus-ring:         var(--clay-600);

  /* Status ramp — deliberately outside the clay/ember hue region.
     Contrast measured against --surface-base (#fbf6ee). */
  --status-danger-fg:   #b3123a;   /* h345  6.37:1  38° from clay-700 */
  --status-warning-fg:  #4a4d00;   /* h62   8.30:1  39° from clay-700 */
  --status-success-fg:  #0f5c3c;   /* h155  7.46:1 132° from clay-700 */
  --status-info-fg:     #175089;   /* h210  7.67:1 173° from clay-700 */
  --status-neutral-fg:  #5a4b3d;

  --status-danger-bg:   rgba(179, 18, 58, 0.10);
  --status-warning-bg:  rgba(74, 77, 0, 0.10);
  --status-success-bg:  rgba(15, 92, 60, 0.10);
  --status-info-bg:     rgba(23, 80, 137, 0.10);
  --status-neutral-bg:  rgba(90, 75, 61, 0.08);
}

/* ---------------------------------------------------------------------------
   Dark theme — the brand's native mode.
   Contrast measured against --surface-base (#1c1611).
   --------------------------------------------------------------------------- */

.dark-theme {
  --surface-base:    var(--espresso-900);
  --surface-1:       var(--espresso-800);
  --surface-raised:  var(--espresso-700);
  --surface-sunken:  var(--espresso-950);

  --text-primary:    var(--cream-200);
  --text-secondary:  var(--cream-400);
  --text-muted:      var(--cream-500);

  --border-subtle:   rgba(193, 122, 75, 0.16);
  --border-strong:   var(--espresso-500);

  --interactive:        var(--clay-400);   /* 6.61:1 on espresso-900 */
  --interactive-hover:  var(--ember-300);
  --interactive-subtle: rgba(193, 122, 75, 0.18);
  --focus-ring:         var(--clay-400);   /* verbatim from the brand */

  /* Danger is pushed to rose (352°) rather than a true red (358°): at 358° it
     sits only 26° from clay and reads as a saturated brand accent on a warm
     ground. At 352°, with +51 saturation, it separates cleanly.

     Warning cannot be separated from ember by hue — any amber sits within
     ~20°. It is separated by LIGHTNESS instead: 12.64:1 against a ground
     where ember measures 8.64:1 and clay 5.25:1. A bright pure yellow next to
     a muted amber is unambiguous even though the hues are neighbours. */
  --status-danger-fg:   #ff5c72;   /* h352  5.99:1  32° from clay-500 */
  --status-warning-fg:  #f5d90a;   /* h53  12.64:1  ΔL 7.4 vs clay-500 */
  --status-success-fg:  #4cc38a;   /* h151  8.09:1 127° from clay-500 */
  --status-info-fg:     #7ab8f5;   /* h210  8.53:1 174° from clay-500 */
  --status-neutral-fg:  var(--cream-500);

  --status-danger-bg:   rgba(255, 92, 114, 0.14);
  --status-warning-bg:  rgba(245, 217, 10, 0.12);
  --status-success-bg:  rgba(76, 195, 138, 0.14);
  --status-info-bg:     rgba(122, 184, 245, 0.14);
  --status-neutral-bg:  rgba(182, 165, 137, 0.10);
}

/* ---------------------------------------------------------------------------
   Status must never rely on colour alone (§8.5 / WCAG 2.2 AA 1.4.1).

   Every status pill carries a shape glyph as well as a hue, so the four states
   remain distinguishable in greyscale, to a colour-blind reader, and to
   anyone comparing a yellow warning against the warm brand accent behind it.
   --------------------------------------------------------------------------- */

.status-pill::before {
  margin-right: 0.4em;
  font-weight: 700;
  speak: never;
}
.status-pill-danger::before  { content: "\00D7"; }  /* × */
.status-pill-warning::before { content: "!"; }
.status-pill-success::before { content: "\2713"; }  /* ✓ */
.status-pill-info::before    { content: "i"; }
.status-pill-neutral::before { content: "\2013"; }  /* – */

@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;
  }
}

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Analytics: stat tiles, Pareto bars, meters

   Marks are thin, anchored to a shared baseline, with rounded data-ends and a
   recessive track. The Pareto is one series, so every bar takes the same brand
   hue — colouring them differently would imply the causes are categories worth
   telling apart by colour, when the only thing that matters is which is
   biggest.
   --------------------------------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.stat-tile {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  padding: 1rem;
}
.stat-tile-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.stat-tile-value {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  margin: 0.35rem 0 0.15rem;
  color: var(--text-primary);          /* the number wears text ink, not a series colour */
  font-variant-numeric: tabular-nums;
}
.stat-tile-unit { font-size: 1rem; color: var(--text-muted); margin-left: 0.15rem; }
.stat-tile-note { font-size: 0.8125rem; color: var(--text-muted); }
.stat-tile-basis { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem; }
.stat-tile-basis summary { cursor: pointer; }

/* State is carried by a word and a glyph as well as the colour. */
.stat-tile-state { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.15rem; }
.stat-glyph { font-weight: 700; }
.stat-tone-good    .stat-tile-state { color: var(--status-success-fg); }
.stat-tone-warning .stat-tile-state { color: var(--status-warning-fg); }
.stat-tone-danger  .stat-tile-state { color: var(--status-danger-fg); }
.stat-tone-good    { border-left: 3px solid var(--status-success-fg); }
.stat-tone-warning { border-left: 3px solid var(--status-warning-fg); }
.stat-tone-danger  { border-left: 3px solid var(--status-danger-fg); }

.pareto { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0; }
.pareto-row {
  display: grid;
  grid-template-columns: minmax(6rem, 12rem) 1fr auto;
  gap: 0.75rem;
  align-items: center;
}
.pareto-label { font-size: 0.875rem; color: var(--text-secondary); }
.pareto-track {
  background: var(--surface-sunken);
  border-radius: 0.25rem;
  height: 0.75rem;
  overflow: hidden;
}
.pareto-bar {
  height: 100%;
  background: var(--interactive);
  border-radius: 0 0.25rem 0.25rem 0;   /* rounded data-end, square at the baseline */
  min-width: 2px;
}
.pareto-value { font-size: 0.875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pareto-share { color: var(--text-muted); margin-left: 0.4rem; }

.meter {
  display: inline-block;
  width: 6rem;
  height: 0.5rem;
  background: var(--surface-sunken);
  border-radius: 0.25rem;
  overflow: hidden;
  vertical-align: middle;
}
.meter-fill { height: 100%; background: var(--interactive); border-radius: 0 0.25rem 0.25rem 0; }
.meter-value { font-size: 0.8125rem; margin-left: 0.4rem; font-variant-numeric: tabular-nums; }

.chart-table { margin-top: 0.75rem; font-size: 0.875rem; }
.chart-table summary { cursor: pointer; color: var(--text-muted); }
.chart-basis { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem; }

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}
.inline-field { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; }
.inline-field .form-input { width: auto; }

@media (prefers-reduced-motion: no-preference) {
  .pareto-bar, .meter-fill { transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1); }
}

/* Management review inputs */
.review-input { margin-bottom: 1.25rem; }
.review-input-title {
  font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.4rem;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.review-input-link { font-size: 0.8125rem; margin-left: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.form-section-note { font-size: 0.8125rem; color: var(--text-muted); margin: 0 0 0.75rem; }