/**
 * Meridian foundation — the token vocabulary, and the primitives both surfaces use.
 *
 * WHY THIS FILE EXISTS (DL-FEAT Stage DS0).
 *
 * The tokens were declared twice, once at the top of `style.css` for the admin
 * and console pages and once at the top of `agent.css` for the floor. The two
 * blocks were byte-identical, which is the good case and also the fragile one:
 * nothing enforced it, and a token added to one surface simply did not exist on
 * the other. Four names were already being used by pages that nothing ever
 * defined, and the browser's answer to an undefined `var()` is not "fall back
 * to something sensible", it is "drop the whole declaration", so those pages
 * shipped with no border, a dark-brown panel in light mode, and two different
 * reds neither of which was the platform's red.
 *
 * So the vocabulary lives here once, and `style.css` and `agent.css` both open
 * by importing it. The extraction moved the values unchanged; the additions are
 * called out below.
 *
 * CACHE NOTE: the pages cache-bust their own <link> tags, but an @import URL is
 * cached on its own. Bump the `?v=` in BOTH importers when this file changes.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root,
html.dark {
  --bg: #0B0B0B;
  --panel: #121212;
  --panel-inner: #161616;
  --muted-bg: #101010;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.11);
  --fg: #FFFFFF;
  --muted: #A0A0A0;
  --ink-3: #6E6E6E;
  --ink-4: #4A4A4A;
  --accent: #C6A86B;
  --gold-wash: rgba(198, 168, 107, 0.10);
  --gold-line: rgba(198, 168, 107, 0.22);
  --division: #2563EB;
  --division-wash: rgba(37, 99, 235, 0.10);
  --division-line: rgba(37, 99, 235, 0.22);
  --good: var(--division);
  --pos-wash: var(--division-wash);
  --warn: #C6A86B;
  --bad: #B46A6A;
  --bad-wash: rgba(180, 106, 106, 0.10);
  --tile-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 1px 0 rgba(0, 0, 0, 0.4);

  /* ── Added by DS0: names the pages were already using ──
     Each of these appears in shipped markup with no definition anywhere. They
     are aliases rather than new colors on purpose: the platform does not need a
     second hairline or a second red, it needs the pages that asked for one to
     get the one that already exists. */
  --line: var(--border);
  --danger: var(--bad);
  --warn-wash: var(--gold-wash);

  /* The shell width. Here rather than in admin.css because `style.css` reads it
     for a bare <main>, and `style.css` is loaded by the login page, which does
     not load admin.css: leaving it there made login reference a token that did
     not exist on that page, which is the exact bug DS0 spent its commit on. */
  --shell-width: 1100px;
}

html.light {
  --bg: #FAFAF7;
  --panel: #FFFFFF;
  --panel-inner: #FFFFFF;
  --muted-bg: #F3F2EE;
  --border: rgba(11, 11, 11, 0.08);
  --border-strong: rgba(11, 11, 11, 0.14);
  --fg: #0B0B0B;
  --muted: #5A5A5A;
  --ink-3: #8A8680;
  --ink-4: #B8B4AB;
  /* Gold goes darker in light mode, and it has to. The dark-mode #C6A86B is
     the brand gold and it is beautiful on near-black; on the near-white panel
     it measures 2.3:1 against white, so every gold button label and every gold
     status word on the light theme was below the readable floor. #856C42 is
     the same hue held down to 5.0:1. The landing page had already made this
     exact call for itself with #8F774F; one vocabulary means one answer, and
     the readable one wins. Washes and lines are unchanged: they sit behind
     content rather than being read. */
  --accent: #856C42;
  --gold-wash: rgba(198, 168, 107, 0.16);
  --gold-line: rgba(198, 168, 107, 0.32);
  --division: #2563EB;
  --division-wash: rgba(37, 99, 235, 0.10);
  --division-line: rgba(37, 99, 235, 0.22);
  --good: var(--division);
  --pos-wash: var(--division-wash);
  --warn: #856C42;
  --bad: #B46A6A;
  --bad-wash: rgba(180, 106, 106, 0.08);
  --tile-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 0 rgba(0, 0, 0, 0.04);

  --line: var(--border);
  --danger: var(--bad);
  --warn-wash: var(--gold-wash);
}

/* ─────────────────────────────────────────────────────────────────────────
   CHART VOCABULARY (DL-FEAT Stage C / DS3)

   The charts carried their own palette in two copies, with a comment saying
   tokens were avoided "because the two nearest tokens were too close to tell
   apart". That reasoning is right about half the problem and it produced the
   whole of it: a chart uses colour for TWO different jobs and the copies mixed
   them, so green meant "good" on a chart while blue meant "good" three
   centimetres above it in a badge, and `--division` blue (#2563EB) rendered the
   bars while a second blue (#4a90d9) rendered the series on the same screen.

   Split by job instead.

   VERDICT colours say something is good, bad or worth watching. They are the
   product's own semantics and they come from the product's own tokens, or the
   chart contradicts the badge beside it.

   SERIES colours only tell one line from another. They mean nothing, so they
   are free to be whatever is most distinguishable, and they live here as one
   ramp rather than as two copies in two files. The ramp deliberately opens
   away from `--division` so a series never reads as a verdict.
   ───────────────────────────────────────────────────────────────────────── */
:root, html.dark, html.light {
  --chart-good: var(--good);
  --chart-warn: var(--warn);
  --chart-bad: var(--bad);
  --chart-neutral: var(--muted);

  --chart-1: #3fb8b0;
  --chart-2: #9b7ede;
  --chart-3: #e07a3a;
  --chart-4: #43b581;
  --chart-5: #d67ab1;
  --chart-6: #a3c644;
  --chart-7: #5bbccc;
  --chart-8: #b07d54;
}

/* ─────────────────────────────────────────────────────────────────────────
   Primitives shared by the admin surfaces AND the agent screen.

   Everything else in the design system is admin-only, because the agent screen
   keeps its own look. These two are here because both surfaces already use the
   class names and only one surface defined them.
   ───────────────────────────────────────────────────────────────────────── */

/**
 * A horizontal band of controls: a filter bar, a form row, a pair of buttons.
 *
 * Twenty-five of these across eleven pages carried `class="row"` while the only
 * definitions were `.add-form .row` and `.modal .row`, so a bare one laid out
 * as a block and stacked its controls vertically. The inline `gap:` and
 * `align-items:` overrides sitting on those very elements are the authors
 * saying what they expected to happen; this is that.
 */
.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
/* `label` carries a 12px bottom margin for stacked forms. Inside a row that
   margin is what the controls are aligned against, so a button next to a
   labelled input sits 12px low. The row supplies its own spacing. */
.row > label { margin-bottom: 0; }

/**
 * Context rather than content: an em dash for a missing value, a unit after a
 * number, the sentence under a heading.
 *
 * Same shape of bug DS0 found six of: `call-logs.js` has rendered
 * `<span class="muted">` on the agent's call history since it was written, and
 * nothing anywhere defined the class, so it drew at full contrast and a blank
 * field read as loudly as a real one. Here rather than in admin.css because
 * both surfaces use the name.
 */
.muted { color: var(--muted); }

/**
 * The small button. Every secondary action in the product is one of these.
 *
 * Moved here from `admin.css` unchanged, because the agent screen uses it in
 * five places (the duplicates row and the two dashboard range appliers) and
 * never loaded the file that defined it, so those five shipped as raw browser
 * buttons: outset borders, square corners, system grey, on a black screen.
 */
.sm-btn {
  padding: 0 10px;
  height: 26px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--fg);
  font-family: inherit;
  letter-spacing: -0.005em;
  transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
}
.sm-btn:hover { background: var(--panel-inner); border-color: var(--border-strong); }
.sm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sm-btn.danger { border-color: rgba(180, 106, 106, 0.32); color: var(--bad); }
.sm-btn.danger:hover { background: var(--bad-wash); }
.sm-btn.good { border-color: var(--division-line); color: var(--division); }
.sm-btn.good:hover { background: var(--division-wash); }
.sm-btn.warn { border-color: var(--gold-line); color: var(--accent); }
.sm-btn.warn:hover { background: var(--gold-wash); }

/**
 * Selected, for a group of `.sm-btn` used as a toggle set.
 *
 * The Trends view and range pickers have emitted `class="sm-btn active"` since
 * they were written and nothing ever styled it, so the selected view was
 * indistinguishable from the four you were not looking at. Division blue is the
 * platform's "this one" everywhere else, so it is that here too.
 */
.sm-btn.active {
  background: var(--division-wash);
  color: var(--division);
  border-color: var(--division-line);
}