/*
 * ChromaMark theme — maps semantic tones to real colors and styles every
 * rendered construct. Tones are theme-owned: switch light/dark and colors
 * follow. Load alongside HTML produced by @chromamark/renderer.
 *
 * Theme resolution order: explicit [data-theme] wins; otherwise the reader's
 * prefers-color-scheme is honored.
 */

:root {
  --cm-success-fg:#1a7f37; --cm-success-bg:#dafbe1; --cm-success-bd:#2da44e;
  --cm-danger-fg:#cf222e;  --cm-danger-bg:#ffebe9;  --cm-danger-bd:#ff8182;
  --cm-warning-fg:#9a6700; --cm-warning-bg:#fff8c5; --cm-warning-bd:#d4a72c;
  --cm-info-fg:#0969da;    --cm-info-bg:#ddf4ff;    --cm-info-bd:#54aeff;
  --cm-tip-fg:#0f7b6c;     --cm-tip-bg:#d3f5f0;     --cm-tip-bd:#3bc4b0;
  --cm-muted-fg:#656d76;   --cm-muted-bg:#f6f8fa;   --cm-muted-bd:#d0d7de;
  --cm-neutral-bg:#f6f8fa; --cm-neutral-bd:#d0d7de;
  --cm-content-fg:#1f2328;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cm-success-fg:#3fb950; --cm-success-bg:#12261e; --cm-success-bd:#238636;
    --cm-danger-fg:#f85149;  --cm-danger-bg:#25171c;  --cm-danger-bd:#da3633;
    --cm-warning-fg:#d29922; --cm-warning-bg:#272115; --cm-warning-bd:#9e6a03;
    --cm-info-fg:#58a6ff;    --cm-info-bg:#0d2233;    --cm-info-bd:#1f6feb;
    --cm-tip-fg:#56d4c3;     --cm-tip-bg:#0c2620;     --cm-tip-bd:#1c6f63;
    --cm-muted-fg:#8b949e;   --cm-muted-bg:#161b22;   --cm-muted-bd:#30363d;
    --cm-neutral-bg:#161b22; --cm-neutral-bd:#30363d;
    --cm-content-fg:#e6edf3;
  }
}

[data-theme="dark"] {
  --cm-success-fg:#3fb950; --cm-success-bg:#12261e; --cm-success-bd:#238636;
  --cm-danger-fg:#f85149;  --cm-danger-bg:#25171c;  --cm-danger-bd:#da3633;
  --cm-warning-fg:#d29922; --cm-warning-bg:#272115; --cm-warning-bd:#9e6a03;
  --cm-info-fg:#58a6ff;    --cm-info-bg:#0d2233;    --cm-info-bd:#1f6feb;
  --cm-tip-fg:#56d4c3;     --cm-tip-bg:#0c2620;     --cm-tip-bd:#1c6f63;
  --cm-muted-fg:#8b949e;   --cm-muted-bg:#161b22;   --cm-muted-bd:#30363d;
  --cm-neutral-bg:#161b22; --cm-neutral-bd:#30363d;
  --cm-content-fg:#e6edf3;
}

/* Map a tone onto the generic --fg/--bg/--bd consumed by every component. */
[data-tone="success"]{--fg:var(--cm-success-fg);--bg:var(--cm-success-bg);--bd:var(--cm-success-bd);}
[data-tone="danger"] {--fg:var(--cm-danger-fg); --bg:var(--cm-danger-bg); --bd:var(--cm-danger-bd);}
[data-tone="warning"]{--fg:var(--cm-warning-fg);--bg:var(--cm-warning-bg);--bd:var(--cm-warning-bd);}
[data-tone="info"]   {--fg:var(--cm-info-fg);   --bg:var(--cm-info-bg);   --bd:var(--cm-info-bd);}
[data-tone="tip"]    {--fg:var(--cm-tip-fg);    --bg:var(--cm-tip-bg);    --bd:var(--cm-tip-bd);}
[data-tone="muted"]  {--fg:var(--cm-muted-fg);  --bg:var(--cm-muted-bg);  --bd:var(--cm-muted-bd);}

/* Custom color (color=…): derive a tinted bg/border from the chosen --fg. */
.cm-custom {
  --bg:transparent;
  --bd:currentColor;
}
@supports (color:color-mix(in srgb, red, blue)) {
  .cm-custom {
    --bg:color-mix(in srgb, var(--fg) 12%, transparent);
    --bd:color-mix(in srgb, var(--fg) 45%, transparent);
  }
}

/* ---- Colored block / callout ---- */
.cm-block {
  border:1px solid var(--bd, var(--cm-neutral-bd)); border-left-width:4px;
  background:var(--bg, var(--cm-neutral-bg));
  color:var(--cm-content-fg, inherit);
  border-radius:8px; padding:10px 14px; margin:12px 0;
}
.cm-block > .cm-title { font-weight:700; color:var(--fg, inherit); }
.cm-block > .cm-body > :first-child { margin-top:0; }
.cm-block > .cm-body > :last-child { margin-bottom:0; }

/* ---- Pill / badge ---- */
.cm-pill {
  display:inline-block; color:var(--fg); background:var(--bg); border:1px solid var(--bd);
  border-radius:999px; padding:0 .55em; font-size:.82em; font-weight:600; line-height:1.7;
  white-space:nowrap;
}

/* ---- Inline colored text (tint, no fill) ---- */
.cm-text { color:var(--fg); font-weight:600; }

/* ---- Progress meter ---- */
.cm-meter { display:inline-flex; align-items:center; gap:8px; vertical-align:middle; }
.cm-meter .cm-track {
  width:120px; height:8px; border-radius:999px; background:var(--cm-neutral-bg);
  border:1px solid var(--cm-neutral-bd); overflow:hidden;
}
.cm-meter .cm-fill { display:block; height:100%; background:var(--fg, var(--cm-info-fg)); }
.cm-meter .cm-val { font-size:.82em; font-weight:600; color:var(--fg); }

/* ---- Fields (key/value) ---- */
.cm-fields {
  display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin:12px 0;
  border:1px solid var(--cm-neutral-bd); border-radius:8px; padding:12px 14px;
  background:var(--cm-neutral-bg);
  color:var(--cm-content-fg, inherit);
}
.cm-fields dt { font-weight:600; opacity:.75; }
.cm-fields dd { margin:0; }

/* ---- Collapsible ---- */
.cm-details { border:1px solid var(--bd); border-radius:8px; margin:12px 0; overflow:hidden;
  color:var(--cm-content-fg, inherit); }
.cm-details > summary {
  cursor:pointer; padding:8px 14px; font-weight:600; list-style:none; background:var(--cm-neutral-bg);
}
.cm-details[data-tone] > summary, .cm-details.cm-custom > summary { color:var(--fg); background:var(--bg); }
.cm-details > summary::-webkit-details-marker { display:none; }
.cm-details > summary::before {
  content:"\25B8"; display:inline-block; margin-right:8px; transition:transform .15s ease;
}
.cm-details[open] > summary::before { transform:rotate(90deg); }
.cm-details > .cm-body { padding:10px 14px; }
.cm-details > .cm-body > :first-child { margin-top:0; }
.cm-details > .cm-body > :last-child { margin-bottom:0; }

/* ---- Inline diff (CriticMarkup) ---- */
.crit-add { background:var(--cm-success-bg); color:var(--cm-success-fg); text-decoration:none; border-radius:3px; padding:0 2px; }
.crit-del { background:var(--cm-danger-bg); color:var(--cm-danger-fg); text-decoration:line-through; border-radius:3px; padding:0 2px; }
.crit-mark { background:var(--cm-warning-bg); border-radius:3px; padding:0 2px; }
.crit-comment { color:var(--cm-muted-fg); font-style:italic; }

/* ---- Collapsible table rows ---- */
.cm-row-toggle {
  appearance:none; background:none; border:0; padding:0; margin-right:6px; cursor:pointer;
  color:inherit; font:inherit; line-height:1; display:inline-block; visibility:hidden;
}
.cm-row-toggle::before { content:"\25B8"; display:inline-block; opacity:.7; transition:transform .15s ease; }
.cm-row-toggle[aria-expanded="true"]::before { transform:rotate(90deg); }
/* Until the enhancer runs there is nothing to toggle, so the control stays
   invisible and every row remains visible (conformance level 1). It keeps its
   box so revealing it never reflows the row — incremental previews re-render
   constantly, and a late layout shift makes host scroll-sync jump. */
[data-cm-rowgroups="ready"] .cm-row-toggle { visibility:visible; }
.cm-row-child > td:first-child { padding-left:calc(6px + var(--cm-row-indent, 1.25em)); }
.cm-row[data-cm-depth="2"] > td:first-child { --cm-row-indent:2.5em; }
.cm-row[data-cm-depth="3"] > td:first-child { --cm-row-indent:3.75em; }
.cm-row[data-cm-depth="4"] > td:first-child { --cm-row-indent:5em; }
.cm-row[hidden] { display:none; }