/* Modernist — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* Archivo is loaded with a <link> in each page head (see docs.html / index.html)
   so the font request starts in parallel with this stylesheet instead of
   waiting for it to parse. Google Fonts is the one third party the CSP
   allows, and only for stylesheets and font files. */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.grayscale{filter:grayscale(1) contrast(1.08)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 2px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }


/* ══════════════════════════════════════════════════════════════════════════
   Application layer — everything below is Metra MCP, not the design system.
   Two groups: the page/app chrome (.m-*) and the vocabulary the Copilot's
   model output is allowed to use (.mc-*). Keep them token-only.
   ══════════════════════════════════════════════════════════════════════ */

.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.tnum { font-variant-numeric: tabular-nums; }

@keyframes metraBlink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* — shared chrome — */
.m-page { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
.m-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.m-sq { display: block; width: 8px; height: 8px; background: var(--color-accent); flex: none; }
.m-sq-live { animation: metraBlink 2s ease-in-out infinite; }
.m-head {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 12px 24px; border-bottom: 2px solid var(--color-divider);
  background: var(--color-bg);
}
.m-brand {
  display: flex; align-items: baseline; gap: 10px; margin-right: auto;
  text-decoration: none; color: inherit;
}
.m-brand-name {
  font-family: var(--font-heading); font-weight: 800; font-size: 17px; letter-spacing: -0.01em;
}
.m-brand-sub {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.m-sec-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.m-sec-head h2 { font-size: 32px; letter-spacing: -0.02em; margin: 0; }
.m-sec-note {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* — landing page — */
.m-nav-link {
  color: inherit; text-decoration: none;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
}
.m-nav-link:hover { color: var(--color-accent-700); }
.m-btn-lg { font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; padding: 12px 20px; }
.m-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); }
.m-hero-main { padding: 56px 32px 40px; border-right: 2px solid var(--color-divider); }
.m-hero h1 {
  font-size: clamp(40px, 6vw, 76px); line-height: 0.98; letter-spacing: -0.03em;
  margin: 0 0 20px; max-width: 15ch; text-wrap: balance;
}
.m-eyebrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 28px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.m-lede {
  font-size: 17px; line-height: 1.5; max-width: 54ch; margin: 0 0 28px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); text-wrap: pretty;
}
.m-stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 16px 24px; border-bottom: 1px solid var(--color-divider);
}
.m-stat-val {
  font-family: var(--font-heading); font-weight: 800; font-size: 26px;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.m-endpoint { display: flex; align-items: stretch; border: 1px solid var(--color-divider); }
.m-endpoint code {
  flex: 1; min-width: 0; padding: 12px 14px; font-size: 13px;
  background: var(--color-surface); overflow-x: auto; white-space: nowrap;
}
.m-copy {
  border: 0; border-left: 1px solid var(--color-divider);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; min-width: 84px;
}
.m-client-pick {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; color: var(--color-text);
  border: 0; border-left: 4px solid transparent; padding: 12px 28px;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: 0.04em;
}
.m-client-pick:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.m-client-pick[aria-selected="true"] {
  border-left-color: var(--color-accent);
  color: var(--color-accent-700);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.m-pre {
  margin: 0; background: var(--color-neutral-900); color: var(--color-neutral-100);
  padding: 18px 20px; font-size: 13px; line-height: 1.6; overflow-x: auto;
}
.m-tool {
  padding: 18px 24px; display: flex; gap: 14px; align-items: flex-start;
  border-bottom: 1px solid var(--color-divider); border-right: 1px solid var(--color-divider);
}
.m-tool-num {
  font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.06em;
  color: var(--color-accent); font-variant-numeric: tabular-nums; padding-top: 2px;
}
.m-tool-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.m-tool-desc {
  font-size: 13px; line-height: 1.45; text-wrap: pretty;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}
.m-prompt-link {
  display: block; text-decoration: none; color: var(--color-text);
  border: 1px solid var(--color-divider); padding: 11px 14px; font-size: 14px;
}
.m-prompt-link:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.m-source-row {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--color-divider); font-size: 12px;
}
.m-poster { background: var(--color-accent); color: var(--color-bg); padding: 56px 32px; }
.m-poster-statement {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(24px, 4.6vw, 54px); line-height: 1.05; letter-spacing: -0.03em;
  word-break: break-all;
}
.m-foot {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  padding: 20px 32px; font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

@media (max-width: 860px) {
  .m-hero { grid-template-columns: minmax(0, 1fr); }
  .m-hero-main { border-right: 0; border-bottom: 2px solid var(--color-divider); padding: 40px 24px 32px; }
  .m-client-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .m-client-grid > :first-child { border-right: 0 !important; border-bottom: 1px solid var(--color-divider); }
  .m-split > :first-child { border-right: 0 !important; border-bottom: 1px solid var(--color-divider); }
}

/* — copilot shell — */
.m-app { height: 100vh; display: flex; flex-direction: column; }
.m-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
}
.m-thread-col {
  display: flex; flex-direction: column; min-width: 0;
  border-right: 1px solid var(--color-divider);
}
.m-thread { flex: 1; min-height: 0; overflow-y: auto; }
.m-empty { padding: 48px 32px; max-width: 720px; }
.m-empty h1 {
  font-size: clamp(32px, 5vw, 52px); line-height: 1.0; letter-spacing: -0.03em;
  margin: 0 0 16px; max-width: 18ch;
}
.m-starters { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.m-starter {
  cursor: pointer; text-align: left; background: transparent; font: inherit; font-size: 14px;
  color: var(--color-text); border: 1px solid var(--color-divider); padding: 13px 15px;
  display: flex; flex-direction: column; gap: 4px;
}
.m-starter:hover { border-color: var(--color-accent); }
.m-starter-kicker {
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent);
}
.m-msg { padding: 20px 32px; border-bottom: 1px solid var(--color-divider); }
.m-msg-user { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.m-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.m-meta-sq { display: block; width: 7px; height: 7px; background: var(--color-neutral-400); flex: none; }
.m-meta-sq-accent { background: var(--color-accent); }
.m-role {
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.m-role-accent { color: var(--color-accent-700); }
.m-stamp {
  margin-left: auto; font-size: 11px; letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.m-ask {
  font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 1.4;
  letter-spacing: -0.01em; max-width: 60ch;
}
.m-toolcall { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.m-toolcall code {
  background: var(--color-surface); border: 1px solid var(--color-divider); padding: 4px 9px;
}
.m-toolcall-args { color: color-mix(in srgb, var(--color-text) 55%, transparent); min-width: 0; }
.m-answer { max-width: 68ch; }
.m-loading { padding: 20px 32px; display: flex; align-items: center; gap: 10px; }
.m-loading-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-700);
}
.m-loading-sq { display: block; width: 5px; height: 5px; background: var(--color-accent); }
.m-composer { border-top: 2px solid var(--color-divider); padding: 14px 24px; background: var(--color-bg); }
.m-composer-row { display: flex; gap: 10px; align-items: stretch; }
.m-composer .input { flex: 1; min-height: 46px; font-size: 15px; background: var(--color-bg); }
.m-composer-hints {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 9px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.m-rail { overflow-y: auto; display: flex; flex-direction: column; }
.m-rail-line {
  cursor: pointer; background: transparent; border: 0;
  border-bottom: 1px solid var(--color-divider); padding: 11px 18px;
  font: inherit; color: var(--color-text); width: 100%; text-align: left;
  display: flex; align-items: center; gap: 10px;
}
.m-rail-line:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.m-rail-code {
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  letter-spacing: 0.06em; min-width: 46px;
}
.m-rail-term {
  font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.m-rail-sq { display: block; width: 7px; height: 7px; margin-left: auto; background: var(--color-neutral-400); flex: none; }
.m-rail-sq-alert { background: var(--color-accent); }
.m-rail-note {
  padding: 16px 18px; font-size: 11px; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

/* Below 860px the two-pane layout collapses: the whole document scrolls
   instead of the thread pane, the composer sticks to the bottom of the
   viewport, and the line rail moves below it. */
@media (max-width: 860px) {
  .m-app { height: auto; min-height: 100vh; }
  .m-body { grid-template-columns: minmax(0, 1fr); }
  .m-thread-col { border-right: 0; }
  .m-thread { overflow: visible; }
  .m-composer { position: sticky; bottom: 0; z-index: 5; }
  .m-rail { border-top: 2px solid var(--color-divider); }
  .m-msg, .m-empty, .m-loading { padding-left: 20px; padding-right: 20px; }
  .m-empty { padding-top: 32px; }
}

/* — stats dashboard — */
/* The .m-* layer sets display on several of these, which would beat the UA's
   [hidden] rule; make the attribute win so JS can toggle with el.hidden. */
[hidden] { display: none !important; }
/* Shown only when /api/stats redacts IPs, i.e. no valid stats token. */
.m-notice {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 11px 32px; border-bottom: 2px solid var(--color-divider);
  background: var(--color-accent-100);
  font-size: 13px; color: var(--color-accent-900);
}
.m-notice-label {
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-800);
}
/* Wrapping flex on purpose, not repeat(auto-fit, minmax(...)): a grid leaves
   dead tracks beside the last cell at intermediate widths, while flex-grow
   fills every row it wraps to. Applies to both the KPI band and the panels. */
.m-band { display: flex; flex-wrap: wrap; border-bottom: 2px solid var(--color-divider); }
.m-kpi {
  flex: 1 1 200px; min-width: 0; padding: 22px 24px 20px;
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.m-kpi .m-label { display: block; margin-bottom: 12px; }
.m-kpi-val {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.m-kpi-sub {
  margin-top: 9px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  min-height: 1em;
}
.m-panel {
  flex: 1 1 340px; min-width: 0;
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.m-panel-head { display: flex; align-items: baseline; gap: 12px; padding: 16px 24px 12px; }
.m-panel-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.m-panel-note {
  margin-left: auto; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.m-rank { padding: 9px 24px; border-bottom: 1px solid var(--color-divider); }
.m-rank:first-child { border-top: 1px solid var(--color-divider); }
.m-rank-row { display: flex; align-items: baseline; gap: 10px; }
.m-rank-name {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-rank-tag {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.m-rank-count {
  margin-left: auto; font-family: var(--font-heading); font-weight: 800; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
/* The one data graphic on the page: proportional to the panel's top row. */
.m-bar { height: 3px; margin-top: 7px; background: color-mix(in srgb, var(--color-text) 10%, transparent); }
.m-bar-fill { height: 100%; background: var(--color-accent); }
.m-filter-row { display: flex; gap: 10px; align-items: stretch; max-width: 560px; padding: 0 32px 16px; }
.m-filter-row .input { min-height: 38px; background: var(--color-bg); }
.m-empty-note {
  padding: 14px 24px 20px; font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
/* Both big tables scroll horizontally rather than stacking; the first and
   last cells carry the page's 32px gutter so columns line up with the rules. */
/* table-layout: fixed so the per-column widths below actually bind and the
   ellipsis on the blob/user-agent cells has something to clip against. */
.m-tablewrap { overflow-x: auto; border-top: 1px solid var(--color-divider); }
.m-tablewrap .table { table-layout: fixed; }
.m-tablewrap .table th:first-child, .m-tablewrap .table td:first-child { padding-left: 32px; }
.m-tablewrap .table th:last-child, .m-tablewrap .table td:last-child { padding-right: 32px; }
.m-cell-ts {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.m-cell-ip { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px; }
.m-cell-hidden { color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.m-cell-tool {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px; font-weight: 600;
}
.m-cell-path { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px; }
/* Long argument/detail blobs are clipped until clicked (delegated handler). */
.m-cell-blob {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-cell-blob.expanded { white-space: normal; word-break: break-all; }
.m-cell-detail { font-family: var(--font-body); font-size: 13px; }
.m-cell-num { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.m-cell-ua {
  font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.m-cell-err {
  display: block; margin-top: 3px; font-size: 11px; color: var(--color-accent-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-stats-tag { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }

/* Four cells wrap 4-up, then 2+2, then 1-up — but a bare flex-basis also
   allows 3+1 at the widths in between, which orphans the last cell into a
   full-width banner. Below the width where all four fit, force two per row. */
@media (max-width: 819px) { .m-kpi { flex-basis: 46%; } }
@media (max-width: 1359px) { .m-panel { flex-basis: 46%; } }
@media (max-width: 700px) { .m-panel { flex-basis: 100%; } }

@media (max-width: 860px) {
  .m-kpi, .m-panel-head, .m-rank, .m-empty-note { padding-left: 20px; padding-right: 20px; }
  .m-notice, .m-filter-row, .m-stats-sec-head { padding-left: 20px; padding-right: 20px; }
  .m-tablewrap .table th:first-child, .m-tablewrap .table td:first-child { padding-left: 20px; }
  .m-tablewrap .table th:last-child, .m-tablewrap .table td:last-child { padding-right: 20px; }
}

/* ── Copilot response vocabulary ──────────────────────────────────────────
   The model is told (server-side system prompt) to build fragments out of
   exactly these classes. DOMPurify strips style attributes, so a fragment
   can only ever look like the design system — a prompt-injected response
   cannot restyle the page or fake page chrome. Adding a class here widens
   what model output can render; keep the list small. */
.mc { font-size: 15px; line-height: 1.55; }
.mc > :last-child { margin-bottom: 0; }
.mc p { margin: 0 0 14px; }
.mc strong { font-weight: 600; }
.mc a { color: var(--color-accent-700); }
.mc-h {
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: 0 0 8px;
}
.mc-board { border: 1px solid var(--color-divider); margin-bottom: 14px; }
.mc-board-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 2px solid var(--color-divider);
}
.mc-board-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.mc-board-stamp {
  margin-left: auto; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.mc-row {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 12px;
  align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--color-divider);
}
.mc-row:last-child { border-bottom: 0; }
.mc-time {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.mc-dest { font-size: 14px; min-width: 0; }
.mc-alert {
  border-left: 4px solid var(--color-accent); background: var(--color-accent-100);
  padding: 12px 16px; margin-bottom: 14px;
}
.mc-alert-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent-800); margin-bottom: 5px;
}
.mc-alert-body { font-size: 14px; line-height: 1.5; color: var(--color-accent-900); }
.mc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0; border-top: 1px solid var(--color-divider); margin-bottom: 14px;
}
.mc-cell {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-divider); border-right: 1px solid var(--color-divider);
}
.mc-cell-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: 0.06em; margin-bottom: 4px;
}
.mc-list { border-top: 1px solid var(--color-divider); margin-bottom: 14px; }
.mc-item {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px;
}
.mc-key {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.mc-note {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}