/* Management app. Chrome (header, auth cards, toolbar, panel, buttons) comes
   from /design-system/hive-chrome.css; this sheet holds only this app's views. */

/* ⚠️ Every app defines .app-shell itself — hive-chrome.css deliberately does not.
   Matches Orders / Cash Flow / Accounting / Sales so the internal apps read as
   one product. */
.app-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}

.mg-lede { color: var(--fg-2); max-width: 46rem; margin: var(--space-5) 0 var(--space-6); }
.mg-section { margin-top: var(--space-10); }
.mg-section__heading { font-size: 1rem; font-weight: 600; color: var(--fg-1); margin: 0 0 var(--space-1); }
.mg-section__note { color: var(--fg-muted); font-size: 0.8125rem; margin: 0 0 var(--space-4); max-width: 52rem; }

/* ── Miss-tier palette ─────────────────────────────────────────────────
   Validated with the dataviz palette checker against the light surface
   (#D80812, #D97706, #2563EB): lightness band, chroma floor, CVD separation,
   normal-vision floor and contrast all PASS. Worst adjacent pair is
   amber vs red at deutan dE 10.5 / normal dE 16.2, which clears the >= 8 CVD
   target — and every segment is direct-labelled anyway, so identity never rests
   on hue alone.

   ⭐ `unknown` is deliberately NOT a fourth hue. "We have no rota configured for
   that day" is an ABSENCE, not a peer category, and giving it a competing colour
   would let a configuration gap read as a finding. It renders as a hatched
   neutral, which the checker's own guidance calls the right relief for a
   low-chroma slot. */
/* ── Outcome scale: green (best) → red (worst) ─────────────────────────
   Michael, 2026-09-02, for BOTH bar charts. Ordered, not categorical: the
   position on the ramp IS the reading, so it must survive being seen badly.

   ⚠️ A green-to-red ramp is the classic red-green CVD failure, so LIGHTNESS
   carries the order too and does so monotonically — 30% → 40% → 52% → 58% →
   45% is not perfectly monotonic at the red end, but each adjacent pair
   separates on lightness alone, which is what a deuteranope reads. Belt and
   braces on top of that: every band is direct-labelled with its count, and a
   key sits under each chart, so identity never rests on hue. That is the same
   rule the miss-tier palette below already follows.

   ⚠️ Do NOT reuse these for anything categorical. Green here means "best
   outcome", not "a category that happens to be green". */
.mg-scale-1 { --tier: #15803D; }   /* best   — deep green   */
.mg-scale-2 { --tier: #4D7C0F; }   /*        — olive        */
.mg-scale-3 { --tier: #CA8A04; }   /* middle — amber        */
.mg-scale-4 { --tier: #EA580C; }   /*        — orange       */
.mg-scale-5 { --tier: #D80812; }   /* worst  — KISS red     */

.mg-tier-covered   { --tier: #D80812; }   /* staffed, agent free — the accountable one */
.mg-tier-busy      { --tier: #D97706; }   /* agent was on another call — capacity */
.mg-tier-uncovered { --tier: #2563EB; }   /* outside the rota — scheduling, not performance */
.mg-tier-unknown   { --tier: var(--n-400); }

/* ── Stat tiles ────────────────────────────────────────────────────────
   A hero number needs no plot, so these carry no chart and no hover layer. */
.mg-tiles { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); list-style: none; margin: 0; padding: 0; }

.mg-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-top: 2px solid var(--n-300);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
/* ⚠️ RETIRED 2026-09-02, kept only so an old bookmark of a cached page does
   not lose its border. A red rule on two of four cards read as "this card is
   selected" rather than "this number is bad", so no tile applies these any
   more; the vs-previous delta beside the number carries that signal instead.
   Do not reintroduce them on a subset of the cards. */
.mg-tile--alert, .mg-tile--good { border-top-color: var(--n-300); }

.mg-tile__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); margin: 0 0 var(--space-2); }
.mg-tile__value { font-size: 1.75rem; font-weight: 600; color: var(--fg-1); line-height: 1.1; font-variant-numeric: tabular-nums; }
.mg-tile__unit  { font-size: 1rem; font-weight: 500; color: var(--fg-3); margin-left: 2px; }
/* The vs-previous chip sits to the RIGHT of the headline number. Nudged up so
   it centres against the cap height of a 1.75rem numeral rather than its
   baseline, which otherwise leaves it looking dropped. */
.mg-tile__value .mg-delta { font-size: 0.6875rem; position: relative; top: -0.45em; }
.mg-tile__sub   { font-size: 0.8125rem; color: var(--fg-muted); margin: var(--space-2) 0 0; }

/* ── Stacked tier bar ──────────────────────────────────────────────────
   One bar, one axis. 2px surface gaps between segments per the mark spec. */
/* ⚠️ NO overflow:hidden. It used to clip the segment corners, but it also
   clipped the hover tooltips the segments now carry. The end segments round
   themselves instead. */
.mg-stack { display: flex; width: 100%; height: 2.5rem; border-radius: var(--radius-sm); background: var(--bg-subtle); gap: 2px; }
.mg-stack__seg:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.mg-stack__seg:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.mg-stack__seg:only-child  { border-radius: var(--radius-sm); }
.mg-stack__seg {
  background: var(--tier);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.8125rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 2px;
  position: relative;
  cursor: help;
}
/* The legend moved INTO the bar (Michael, 2026-09-02: "can the descriptions
   and breakdowns be consolidated to when that chunk of the bar chart is
   hovered over? There's a lot of redundancy in the descriptions"). Opens
   above, because these bars sit under a heading with room to spare. */
.mg-stack__seg[data-tip]:hover { z-index: 5; }
.mg-stack__seg[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  width: max-content; max-width: 18rem;
  white-space: pre-line; text-align: left;
  background: var(--bg-surface); color: var(--fg-1);
  border: 1px solid var(--border-default); border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  padding: 8px 10px; font-size: 12px; line-height: 1.45; font-weight: 400;
  pointer-events: none; z-index: 6;
}
/* First and last segments would push their tooltip off the edge. */
.mg-stack__seg:first-child[data-tip]:hover::after { left: 0; transform: none; }
.mg-stack__seg:last-child[data-tip]:hover::after  { left: auto; right: 0; transform: none; }
/* The absence state: hatched, and its label stays ink rather than white so it
   never masquerades as a filled category. */
.mg-stack__seg.mg-tier-unknown {
  background: repeating-linear-gradient(135deg, var(--n-200) 0 6px, var(--n-100) 6px 12px);
  color: var(--fg-3);
}

/* A simple key: swatch + name, nothing else. The counts live inside the bands
   and the explanations live in their hover, so repeating either here is the
   redundancy that got the old legend removed in the first place. */
.mg-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0; padding: 0; list-style: none;
  font-size: 0.75rem; color: var(--fg-2); }
.mg-key__item { display: flex; align-items: center; gap: var(--space-2); }
.mg-key__swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--tier); flex: none; }
.mg-key__swatch.mg-tier-unknown {
  background: repeating-linear-gradient(135deg, var(--n-300) 0 3px, var(--n-100) 3px 6px); }

.mg-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); padding: 0; list-style: none; }
.mg-legend__item { display: flex; align-items: baseline; gap: var(--space-2); font-size: 0.8125rem; color: var(--fg-2); }
.mg-legend__swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--tier); flex: none; transform: translateY(1px); }
.mg-legend__swatch.mg-tier-unknown { background: repeating-linear-gradient(135deg, var(--n-300) 0 3px, var(--n-100) 3px 6px); }
.mg-legend__n { font-weight: 600; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.mg-legend__pct { color: var(--fg-2); font-variant-numeric: tabular-nums; font-weight: 500; }
.mg-legend__what { color: var(--fg-muted); }

/* ── Horizontal bucket bars (recovery latency) ─────────────────────── */
.mg-buckets { display: grid; gap: var(--space-2); margin: 0; padding: 0; }
.mg-bucket { display: grid; grid-template-columns: 7rem 1fr 3.5rem; align-items: center; gap: var(--space-3); font-size: 0.8125rem; }
.mg-bucket__label { color: var(--fg-2); }
.mg-bucket__track { background: var(--bg-subtle); border-radius: var(--radius-sm); height: 1.25rem; overflow: hidden; }
/* 4px rounded data-end, anchored to the baseline (here, the left edge). */
.mg-bucket__fill { height: 100%; background: var(--tier); border-radius: 0 4px 4px 0; min-width: 2px; }
.mg-bucket__n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fg-1); }

/* Two charts abreast. Michael wanted the recovery chart beside the missed-call
   breakdown "to consume less space"; auto-fit means they stack on a narrow
   screen rather than squeezing. */
.mg-duo { display: grid; gap: var(--space-6) var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); align-items: start; }
.mg-duo__h { font-size: 0.875rem; font-weight: 600; color: var(--fg-1); margin: 0 0 var(--space-1); }
.mg-duo__note { color: var(--fg-muted); font-size: 0.75rem; margin: 0 0 var(--space-3); }

/* ── Tables ────────────────────────────────────────────────────────── */
/* ── Definition tooltips ───────────────────────────────────────────────
   Ported from apps/support/public/kpis.css `.kpi-help`, renamed to the mg-
   prefix. Pure CSS, no JS: a `?` affordance whose data-tip becomes a wrapping
   card above it on hover. Opens ABOVE deliberately — these sit in a table
   header, and opening below would cover the first data rows.
   ⚠️ Do NOT wrap the agent table in an overflow container; it would clip
   these. Only the heatmap has overflow-x, which is why it uses its own
   cell tooltip instead. */
.mg-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 4px; vertical-align: middle;
  border: 1px solid var(--border-default); border-radius: 50%;
  font-size: 9px; font-style: normal; font-weight: 600; line-height: 1;
  color: var(--fg-muted); cursor: help; position: relative;
}
.mg-help:hover { color: var(--fg-1); border-color: var(--fg-muted); }
.mg-help[data-tip]:hover { z-index: 5; }
.mg-help[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  width: max-content; max-width: 20rem;
  white-space: normal; text-align: left;
  background: var(--bg-default, #fff); color: var(--fg-1);
  border: 1px solid var(--border-default); border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  padding: 8px 10px; font-size: 12px; line-height: 1.45; font-weight: 400;
  text-transform: none; letter-spacing: normal;
  pointer-events: none; z-index: 6;
}
/* The last columns' tooltips would overflow the right edge, so anchor them
   to their right instead of centring. */
.mg-table th:nth-last-child(-n+2) .mg-help[data-tip]:hover::after {
  left: auto; right: 0; transform: none;
}

.mg-table--sortable .mg-th--sort { cursor: pointer; user-select: none; white-space: nowrap; }
.mg-table--sortable .mg-th--sort:hover { color: var(--fg-1); }
.mg-table--sortable .mg-th--sort:focus-visible { outline: 2px solid var(--tier, #2563EB); outline-offset: -2px; }
.mg-table--sortable .is-sorted { color: var(--fg-1); font-weight: 700; }
/* Reserve the arrow's width always, so sorting does not shift the header. */
.mg-th__arrow { display: inline-block; min-width: 0.85em; margin-left: 0.15em; font-size: 0.7em; }
.mg-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.mg-table th, .mg-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-default); }
.mg-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); font-weight: 600; }
.mg-table td.num, .mg-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mg-table tbody tr:hover { background: var(--bg-subtle); }

/* The (unattributed) row. Visually set apart because it is a MEASUREMENT GAP,
   not an agent: styling it like a peer would invite reading it as a person's
   performance, and hiding it would silently credit real work to nobody. */
.mg-table tr.mg-row--gap { background: var(--warning-soft); }
.mg-table tr.mg-row--gap:hover { background: var(--warning-soft); }
.mg-table tr.mg-row--gap td { color: var(--fg-2); }

/* ── Heatmap ───────────────────────────────────────────────────────────
   Sequential, ONE hue, light to dark — never a rainbow. */
.mg-heat { border-collapse: separate; border-spacing: 2px; font-size: 0.75rem; margin: 0 auto 0 0; }
.mg-heat th { color: var(--fg-muted); font-weight: 500; padding: 0 var(--space-1); text-align: center; }
.mg-heat th[scope="row"] { text-align: right; padding-right: var(--space-2); }
/* ⚠️ Sized so a full 24-hour axis FITS without horizontal scrolling, which is
   the whole reason these two grids are stacked full width rather than sharing
   a .mg-duo row - side by side each got half the width and both overflowed.
   Enlarged 1.45rem -> 2.1rem on 2026-09-02 now that they have a line each
   ("you can make them a little bigger now that we have separate lines").
   24 x (2.1rem + 2px) + the day label is about 900px against a 1280px content
   column, so there is still headroom. smoke.js holds the budget at 1100px.
   The overflow-x wrapper stays as a last resort for a narrow viewport. */
.mg-heat td { width: 2.1rem; height: 2.1rem; text-align: center; border-radius: 2px; color: var(--fg-1); background: var(--bg-subtle); }
.mg-heat td[data-v] { color: #fff; }
.mg-heat td.mg-heat--zero { color: var(--fg-disabled); }

/* ── Banners ───────────────────────────────────────────────────────── */
.mg-banner {
  border: 1px solid var(--warning);
  background: var(--warning-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
  font-size: 0.875rem; color: var(--fg-1);
}
.mg-banner--info { border-color: var(--border-strong); background: var(--bg-subtle); }
.mg-banner__title { font-weight: 600; margin: 0 0 var(--space-1); }
.mg-banner p { margin: 0; color: var(--fg-2); }
.mg-banner a { color: var(--fg-link); }

/* ── Toolbar / range picker ────────────────────────────────────────── */
.mg-range { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.mg-range__btn {
  font: inherit; font-size: 0.8125rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default); background: var(--bg-surface);
  border-radius: var(--radius-pill); color: var(--fg-2); cursor: pointer;
}
.mg-range__btn[aria-pressed="true"] { background: var(--n-900); border-color: var(--n-900); color: #fff; }

/* ── The single-day picker ─────────────────────────────────────────────
   Sits in the same toolbar as the trailing-window pills because it is the same
   control: exactly one of them is what the page is showing, and picking either
   clears the other. The steppers earn their place — reviewing a day almost
   always means then looking at the day beside it, and a native date picker
   makes that three clicks each time. */
.mg-day { display: inline-flex; align-items: center; gap: var(--space-1); }
.mg-day__step {
  font: inherit; font-size: 1rem; line-height: 1;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default); background: var(--bg-surface);
  border-radius: var(--radius-md); color: var(--fg-2); cursor: pointer;
}
.mg-day__step:disabled { opacity: 0.4; cursor: default; }
.mg-day input[type="date"] {
  font: inherit; font-size: 0.8125rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default); background: var(--bg-surface);
  color: var(--fg-1); border-radius: var(--radius-md);
}
/* Selected reads the same way a pressed pill does, so the toolbar always shows
   which of the four is live. */
.mg-day input[type="date"][data-on="1"] { border-color: var(--n-900); color: var(--fg-1); font-weight: 600; }

/* What the page is showing, and what the arrows are measured against. Its own
   line inside the toolbar (flex-basis 100%), so it never competes with the
   controls for width. */
.mg-window { flex: 1 1 100%; margin: 0; font-size: 0.8125rem; color: var(--fg-muted); }

/* ── Coverage editor ───────────────────────────────────────────────── */
.mg-shift-form { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); align-items: end; margin-bottom: var(--space-5); }
.mg-field { display: grid; gap: var(--space-1); }
.mg-field label { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mg-field select, .mg-field input {
  font: inherit; font-size: 0.875rem;
  padding: var(--space-2); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); background: var(--bg-surface); color: var(--fg-1);
}
.mg-msg { font-size: 0.875rem; margin: var(--space-3) 0 0; }
.mg-msg--err { color: var(--error); }
.mg-msg--ok  { color: var(--success); }

/* ── Coverage month canvas ─────────────────────────────────────────────
   A month of days as rows on one shared hour axis. The rota was previously a
   table sorted by weekday name, which is unreadable for the question the page
   exists to answer — where is nobody scheduled — because a gap in a table is
   the absence of a row and nothing draws your eye to it. Here a gap is empty
   track, so it is found by looking.

   ⭐ Identity is the person, and it is carried by hue AND a direct label on
   every bar, never by hue alone. Three of the eight categorical slots sit under
   3:1 against the surface (validated: worst adjacent CVD ΔE 9.1, normal-vision
   ΔE 19.6), so the relief rule applies — hence the label inside each bar, in
   ink rather than in the series colour. The saturated left cap is the identity
   mark; the fill is a tint of it so dark text stays legible on all eight. */



/* The hour axis. Recessive by the mark spec: it locates a bar, it is not data. */

/* ⭐ The gap between weeks. Without it thirty stacked rows read as a list and
   the weekly shape of a rota — the whole thing you are editing — disappears. */


/* One gridline per hour, faint — orientation, not a reading. ⚠️ Spacing is
   driven by --cols (the number of hours the axis spans, set by the page), NOT a
   fixed fraction: the window is fitted to the month, so a hardcoded division
   puts the lines somewhere the hour LABELS are not, and a misaligned gridline
   is worse than none — it invites reading a bar off the wrong hour. */

/* The full-width click target for "add a shift here", sitting under the bars. */

/* A day with no real coverage. Tinted rather than badged: an empty row is
   already the signal, this just keeps it from reading as "not loaded yet". */

/* ── Bars ──────────────────────────────────────────────────────────────
   4px radius on the data-ends, 2px surface gap between stacked lanes. */

/* A deviation from the weekly pattern is a STATE, not another identity, so it
   is a dashed edge rather than a ninth hue — spending a categorical slot on it
   would let "this is a swap" compete with "this is Danny". */

/* An emptied slot. Hatched neutral, same reasoning as the unknown_coverage
   segment above: an absence is not a peer category and must not look like one. */


/* ── Editor dialog ─────────────────────────────────────────────────── */


/* ── vs-previous-period indicator on the KPI cards ─────────────────────────
 * Small, and deliberately not a sparkline: a KPI card answers "is this better
 * or worse than it was", and an arrow with a number answers it in less space
 * than a chart would. Colour is never the only cue — the arrow glyph carries
 * direction on its own, and the title attribute carries the previous value.
 *
 * ⚠️ Green does NOT mean "went up". `delta()` is told which direction is good,
 * because up is good for an answer rate and bad for never-called-back. A
 * dashboard that hardcodes up-is-green congratulates you for a rising failure
 * count.
 */
.mg-delta { display: inline-flex; align-items: center; gap: 0.15rem; margin-left: var(--space-2);
  padding: 1px 5px; border-radius: var(--radius-sm); font-size: 0.6875rem; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-delta--good { color: var(--success); background: color-mix(in oklab, var(--success) 12%, transparent); }
.mg-delta--bad  { color: var(--kiss-red); background: color-mix(in oklab, var(--kiss-red) 12%, transparent); }
.mg-delta--flat { color: var(--fg-muted); background: var(--bg-subtle); }

/* The team baseline row in the agent table. Held apart from the agents rather
 * than styled as a total, because it is a yardstick to read the rows against,
 * not their sum. */
.mg-row--team > td { border-top: 2px solid var(--border-strong); font-weight: 600;
  background: var(--bg-subtle); }
.mg-row__note { font-weight: 400; color: var(--fg-muted); font-size: 0.8125rem; }

/* A second, quieter subtitle line on a KPI tile. Used for the proactive card's
   reconciliation share, which is context for the headline rather than a number
   competing with it — the rate is the KPI, "how much of it came from the queue"
   is how to read the rate. */
.mg-tile__sub--quiet { color: var(--fg-muted); margin-top: 2px; }

/* ── Call log ──────────────────────────────────────────────────────────
   The Call Log's own styling (.mg-log__*, the table/toolbar/stats/drill-down
   rules) moved to packages/design-system/care-call-log.css on 2026-10-09,
   when /support/calls started sharing the same page body — those classes
   exist only for that page, in either app, so they now live in exactly one
   file rather than being duplicated here. .mg-calls-link below is NOT part
   of that move: it's the dashboard's own "See every call in this range in
   the Call log →" link (index.html), a different page, still styled here. */
.mg-calls-link { margin: var(--space-3) 0 0; font-size: 0.8125rem; }
.mg-calls-link a, .mg-table td a { color: var(--fg-link); }

/* ── Agent View (missed-call attribution, 2026-10-06) ──────────────────
   A second lens on the SAME tier bar above: who, not just how many. No new
   attribution math — this only re-slices mgmt_care_call_log's existing
   `people[].busy`, the same schedule-first field the Call log's coverage
   drill-down already reads. Clicking a band in Team View opens here,
   pre-filtered to that band's tier, via the segment's own data-tier. */
.mg-duo__h-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-1); }
.mg-duo__h-row .mg-duo__h { margin: 0; }

/* Team / Agent toggle: the same tight connected-pill group as the Call log's
   ET/PT switch (.mg-log__tz) — a two-way exclusive switch, not a set of
   independent filters like the date-range pills. */
.mg-dashview { gap: 0; }
.mg-dashview .mg-range__btn { border-radius: 0; margin-left: -1px; }
.mg-dashview .mg-range__btn:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); margin-left: 0; }
.mg-dashview .mg-range__btn:last-child  { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }

/* The tier bar's bands are now a filter, not just a hover target. */
.mg-stack__seg[data-tier] { cursor: pointer; }

/* Category chips: same four tier colours as the bar, as a clickable row
   instead of a stacked proportion — Agent View answers "who", so the WIDTH
   of each band stops being the point. */
.mg-tierchips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }
.mg-tierchip {
  font: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: var(--space-2) var(--space-3); border: 2px solid transparent; border-radius: var(--radius-md);
  background: var(--tier); color: #fff; cursor: pointer; text-align: left;
}
.mg-tierchip.mg-tier-unknown {
  background: repeating-linear-gradient(135deg, var(--n-200) 0 6px, var(--n-100) 6px 12px);
  color: var(--fg-3);
}
.mg-tierchip__label { font-size: 0.75rem; font-weight: 600; }
.mg-tierchip__n { font-size: 0.75rem; font-variant-numeric: tabular-nums; opacity: 0.9; }
.mg-tierchip.is-selected { border-color: var(--n-900); }

/* Agent / gap rows: a disclosure button per group, same idiom as the Call
   log's own "When" disclosure (.mg-log__when-btn) — expand in place rather
   than navigate away. */
.mg-agentlist { display: flex; flex-direction: column; gap: var(--space-2); }
.mg-agentrow__btn {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--space-3);
  font: inherit; font-size: 0.8125rem; text-align: left;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); background: var(--bg-surface); color: var(--fg-1); cursor: pointer;
}
.mg-agentrow__btn:hover { background: var(--bg-subtle); }
.mg-agentrow__n { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.mg-agentrow__detail { padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--bg-subtle); }
.mg-agentrow__call { margin: 0; padding: 2px 0; font-size: 0.8125rem; color: var(--fg-2); }
.mg-agentrow__time { font-variant-numeric: tabular-nums; color: var(--fg-1); font-weight: 500; }