/* ===================================================================
   A2Z embeddable widgets - the stylesheet every /embed/w/{slug} frame
   loads. One file, no web fonts, no images, no framework.

   Design system v2 (2026-10): the A2Z Tools identity - navy ink, the
   blue-to-purple brand accent, warm neutral surfaces, generous radii -
   expressed with CSS custom properties so every widget, old and new,
   belongs to one family. The DOM contract is unchanged from v1: every
   class name below existed before or is an opt-in addition, so the 152
   widgets already on publishers' sites keep working, and none of them
   is taller than before (measure-embed-heights.js checks this - the
   builder's plain iframe snippet has a fixed height).

   Theme: <html data-theme="light|dark|auto">. "auto" follows the
   visitor's OS through prefers-color-scheme. The accent colour arrives
   as --e-accent set through the CSSOM by a2z-embed-core.js (the frame's
   CSP has no 'unsafe-inline' for styles, so it can never be a style
   attribute in the markup); --e-accent-ink is its contrast-checked text
   colour.

   Options map to attributes on <html>:
     data-compact="1"     tighter spacing, smaller type
     data-border="0"      no outer border
     data-style="minimal" no card surface: sits on the host page
     data-title="0"       header hidden (set by the server, not here)
   and --e-radius (0-24px) through the CSSOM.

   Opt-in primitives for widgets (all optional):
     result.cards      -> .e-rows.e-cards  metric cards instead of rows
     spec.swap         -> .e-swap          swap two fields (converters)
     .e-digits/.e-digit                    countdown digit groups
     .e-pill, .e-notice, .e-chart, .e-skel, .e-kpi
   =================================================================== */

:root {
    --e-accent: #4b5bd6;
    --e-accent-2: #7b5bf0;
    --e-accent-ink: #ffffff;
    --e-accent-fg: #3f4fc9;
    --e-coral: #f0655f;
    --e-bg: #ffffff;
    --e-surface: #f7f6fb;
    --e-surface-2: #efedf7;
    --e-line: #e6e4ee;
    --e-line-strong: #cdc9dc;
    --e-ink: #10162b;
    --e-ink-2: #454d63;
    --e-ink-3: #5f677d;
    --e-ok: #067647;
    --e-warn: #9a4a06;
    --e-bad: #b42318;
    --e-bad-soft: #fef3f2;
    --e-focus: #3f4fc9;
    --e-radius: 16px;
    --e-radius-sm: 10px;
    --e-pad: 16px;
    --e-gap: 12px;
    --e-hero: linear-gradient(120deg, #eef1fe 0%, #f3effd 100%);
    --e-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --e-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --e-ease: cubic-bezier(.2, .7, .2, 1);
    color-scheme: light;
}

html[data-theme="dark"] {
    --e-accent-fg: #aab6ff;
    --e-bg: #0f1424;
    --e-surface: #161d33;
    --e-surface-2: #1c2440;
    --e-line: #273050;
    --e-line-strong: #39446b;
    --e-ink: #eef1fb;
    --e-ink-2: #c3c9dc;
    --e-ink-3: #9aa3bd;
    --e-ok: #4ade80;
    --e-warn: #fbbf24;
    --e-bad: #fca5a5;
    --e-bad-soft: #3a1d24;
    --e-focus: #aab6ff;
    --e-hero: linear-gradient(120deg, #1b2347 0%, #221d45 100%);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --e-accent-fg: #aab6ff;
        --e-bg: #0f1424;
        --e-surface: #161d33;
        --e-surface-2: #1c2440;
        --e-line: #273050;
        --e-line-strong: #39446b;
        --e-ink: #eef1fb;
        --e-ink-2: #c3c9dc;
        --e-ink-3: #9aa3bd;
        --e-ok: #4ade80;
        --e-warn: #fbbf24;
        --e-bad: #fca5a5;
        --e-bad-soft: #3a1d24;
        --e-focus: #aab6ff;
        --e-hero: linear-gradient(120deg, #1b2347 0%, #221d45 100%);
        color-scheme: dark;
    }
}

/* A publisher accent (set by the runtime as html.e-custom-accent) tints the
   result and text accents too; color-mix keeps them readable on both themes. */
html.e-custom-accent {
    --e-accent-fg: color-mix(in srgb, var(--e-accent) 82%, #000);
    --e-focus: var(--e-accent);
    --e-hero: color-mix(in srgb, var(--e-accent) 9%, var(--e-bg));
}
html.e-custom-accent[data-theme="dark"] {
    --e-accent-fg: color-mix(in srgb, var(--e-accent) 55%, #fff);
    --e-focus: color-mix(in srgb, var(--e-accent) 55%, #fff);
    --e-hero: color-mix(in srgb, var(--e-accent) 18%, var(--e-bg));
}
@media (prefers-color-scheme: dark) {
    html.e-custom-accent[data-theme="auto"] {
        --e-accent-fg: color-mix(in srgb, var(--e-accent) 55%, #fff);
        --e-focus: color-mix(in srgb, var(--e-accent) 55%, #fff);
        --e-hero: color-mix(in srgb, var(--e-accent) 18%, var(--e-bg));
    }
}

html[data-compact="1"] { --e-pad: 11px; --e-gap: 8px; }

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute must win over every display rule below (showIf fields, toggled panels). */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; background: transparent; }

body {
    font: 15px/1.45 var(--e-font);
    color: var(--e-ink);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
html[data-compact="1"] body { font-size: 14px; }

.e-card {
    background: var(--e-bg);
    border: 1px solid var(--e-line);
    border-radius: var(--e-radius);
    padding: var(--e-pad);
    max-width: 100%;
}
html[data-border="0"] .e-card { border-color: transparent; }
html[data-style="minimal"] .e-card { background: transparent; border-color: transparent; padding-left: 2px; padding-right: 2px; }

/* ---------------- header ---------------- */
.e-head { display: flex; align-items: center; gap: 10px; margin: -2px 0 calc(var(--e-gap) - 4px); }
.e-head h1 { font-size: 1.08em; line-height: 1.3; margin: 0; font-weight: 700; letter-spacing: -.012em; color: var(--e-ink); }
.e-ico {
    flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
    background: linear-gradient(135deg, var(--e-accent) 0%, var(--e-accent-2) 100%); color: #fff;
}
html.e-custom-accent .e-ico { background: var(--e-accent); color: var(--e-accent-ink); }
.e-ico svg { width: 15px; height: 15px; }
html[data-compact="1"] .e-ico { width: 22px; height: 22px; border-radius: 7px; }
html[data-compact="1"] .e-ico svg { width: 13px; height: 13px; }
.e-head .e-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--e-accent); flex: none; }

.e-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------- form ---------------- */
.e-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e-gap); }
.e-form.e-form-1 { grid-template-columns: 1fr; }
.e-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.e-field.e-wide { grid-column: 1 / -1; }
.e-field > label, .e-field > .e-label { font-size: .84em; font-weight: 600; color: var(--e-ink-2); letter-spacing: .005em; }
.e-control { position: relative; display: flex; align-items: stretch; min-width: 0; }
.e-affix {
    display: flex; align-items: center; padding: 0 10px; font-size: .88em; color: var(--e-ink-3); white-space: nowrap;
    background: var(--e-surface); border: 1px solid var(--e-line-strong);
}
.e-affix.e-pre { border-right: 0; border-radius: var(--e-radius-sm) 0 0 var(--e-radius-sm); }
.e-affix.e-suf { border-left: 0; border-radius: 0 var(--e-radius-sm) var(--e-radius-sm) 0; }

.e-input, .e-select, .e-textarea {
    width: 100%; min-width: 0; font: inherit; color: var(--e-ink);
    background: var(--e-bg); border: 1px solid var(--e-line-strong); border-radius: var(--e-radius-sm);
    padding: 8px 11px; min-height: 40px;
    transition: border-color .15s var(--e-ease), box-shadow .15s var(--e-ease);
}
.e-input::placeholder, .e-textarea::placeholder { color: var(--e-ink-3); opacity: .85; }
.e-input:hover, .e-select:hover, .e-textarea:hover { border-color: color-mix(in srgb, var(--e-accent) 45%, var(--e-line-strong)); }
.e-input:focus, .e-select:focus, .e-textarea:focus {
    outline: none; border-color: var(--e-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--e-accent) 20%, transparent);
}
html[data-compact="1"] .e-input, html[data-compact="1"] .e-select { min-height: 36px; padding: 6px 9px; }
.e-control .e-pre ~ .e-input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.e-control.e-has-suf .e-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.e-textarea { min-height: 120px; resize: vertical; font-family: var(--e-mono); font-size: .9em; line-height: 1.45; }
.e-textarea.e-prose { font-family: var(--e-font); font-size: 1em; }
.e-select {
    appearance: none; -webkit-appearance: none; padding-right: 27px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f677d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 14px 14px;
}
html[data-theme="dark"] .e-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3bd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .e-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3bd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
}
.e-select option { background: var(--e-bg); color: var(--e-ink); }
.e-input[type="color"] { padding: 3px; height: 40px; cursor: pointer; }

.e-input:focus-visible, .e-select:focus-visible, .e-textarea:focus-visible,
.e-btn:focus-visible, .e-seg button:focus-visible, .e-foot a:focus-visible, .e-check input:focus-visible,
.e-swap:focus-visible, .e-card a:focus-visible, .e-card button:focus-visible {
    outline: 2px solid var(--e-focus); outline-offset: 2px;
}
.e-input[aria-invalid="true"], .e-textarea[aria-invalid="true"] { border-color: var(--e-bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--e-bad) 14%, transparent); }
.e-err { font-size: .8em; color: var(--e-bad); }
.e-err:empty { display: none; }
.e-help { font-size: .79em; color: var(--e-ink-3); }

.e-check { display: flex; align-items: center; gap: 8px; font-size: .92em; color: var(--e-ink-2); min-height: 40px; cursor: pointer; }
.e-check input { width: 18px; height: 18px; accent-color: var(--e-accent); cursor: pointer; }

/* Never wider or taller than the v1 control (12px padding, 34px buttons), so
   existing layouts that fitted two segment groups on one row still do. */
.e-seg { display: inline-flex; gap: 0; padding: 2px; border: 1px solid var(--e-line); border-radius: 999px; background: var(--e-surface); }
.e-seg button {
    font: inherit; font-size: .84em; font-weight: 600; border: 0; background: transparent; color: var(--e-ink-2);
    padding: 4px 11px; cursor: pointer; min-height: 30px; border-radius: 999px;
    transition: background-color .15s var(--e-ease), color .15s var(--e-ease);
}
.e-seg button + button { border-left: 0; }
.e-seg button:hover { color: var(--e-ink); }
.e-seg button[aria-pressed="true"] { background: var(--e-accent); color: var(--e-accent-ink); box-shadow: 0 1px 3px rgba(16, 22, 43, .16); }
html[data-compact="1"] .e-seg button { padding: 3px 9px; min-height: 28px; }
.e-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 var(--e-gap); }

.e-btn {
    font: inherit; font-size: .9em; font-weight: 650; cursor: pointer;
    border: 1px solid transparent; color: var(--e-accent-ink);
    background: linear-gradient(135deg, var(--e-accent) 0%, var(--e-accent-2) 100%);
    border-radius: var(--e-radius-sm); padding: 8px 16px; min-height: 38px;
    transition: transform .15s var(--e-ease), box-shadow .15s var(--e-ease), filter .15s var(--e-ease);
}
html.e-custom-accent .e-btn:not(.e-ghost) { background: var(--e-accent); }
.e-btn:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--e-accent) 28%, transparent); filter: brightness(1.04); }
.e-btn:active { transform: translateY(1px); }
.e-btn.e-ghost { background: var(--e-bg); color: var(--e-ink); border-color: var(--e-line-strong); box-shadow: none; filter: none; }
.e-btn.e-ghost:hover { border-color: var(--e-accent); color: var(--e-accent-fg); background: var(--e-surface); }
.e-btn[disabled] { opacity: .55; cursor: not-allowed; }
.e-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* converter swap (spec.swap) */
.e-swap-row { grid-column: 1 / -1; display: flex; justify-content: center; margin: -4px 0; }
.e-swap {
    display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .82em; font-weight: 600; cursor: pointer;
    color: var(--e-accent-fg); background: var(--e-surface); border: 1px solid var(--e-line); border-radius: 999px; padding: 4px 12px; min-height: 30px;
    transition: background-color .15s var(--e-ease), transform .2s var(--e-ease);
}
.e-swap:hover { background: var(--e-surface-2); }
.e-swap svg { width: 15px; height: 15px; }

/* ---------------- result ---------------- */
.e-result { margin-top: var(--e-gap); border-top: 1px solid var(--e-line); padding-top: var(--e-gap); }
.e-result:empty { display: none; }
.e-rows { display: grid; gap: 6px; margin: 0; }
.e-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.e-row dt { color: var(--e-ink-2); font-size: .92em; }
.e-row dd { margin: 0; font-weight: 650; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.e-row.e-primary { padding: 10px 13px; background: var(--e-hero); border-radius: calc(var(--e-radius-sm) + 2px); border: 1px solid color-mix(in srgb, var(--e-accent) 12%, transparent); }
.e-row.e-primary dd { font-size: 1.38em; font-weight: 750; color: var(--e-accent-fg); letter-spacing: -.015em; }
.e-row.e-primary dt { font-weight: 650; color: var(--e-ink); }
.e-hint { display: block; font-size: .78em; font-weight: 400; color: var(--e-ink-3); }

/* metric cards (result.cards) - for new widgets; old snippets keep rows */
.e-rows.e-cards { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.e-cards .e-row { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; padding: 9px 12px; background: var(--e-surface); border-radius: var(--e-radius-sm); border: 1px solid var(--e-line); }
.e-cards .e-row dt { font-size: .8em; color: var(--e-ink-3); font-weight: 600; }
.e-cards .e-row dd { text-align: left; font-size: 1.06em; }
.e-cards .e-row.e-primary { grid-column: 1 / -1; padding: 12px 14px; background: var(--e-hero); }
.e-cards .e-row.e-primary dt { font-size: .82em; text-transform: uppercase; letter-spacing: .05em; color: var(--e-ink-2); }
.e-cards .e-row.e-primary dd { font-size: 1.7em; line-height: 1.15; }

.e-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: 12px 0 6px; background: var(--e-surface-2); gap: 2px; }
.e-bar span { display: block; height: 100%; }
.e-bar span:first-child { border-radius: 999px 0 0 999px; }
.e-bar span:last-child { border-radius: 0 999px 999px 0; }
.e-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8em; color: var(--e-ink-2); }
.e-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: 0; }

.e-note { margin: 10px 0 0; font-size: .82em; color: var(--e-ink-3); }
.e-warn { margin: 10px 0 0; font-size: .85em; color: var(--e-warn); }
.e-error { margin: 0; padding: 10px 12px; border-radius: var(--e-radius-sm); background: var(--e-bad-soft); color: var(--e-bad); font-size: .9em; }
.e-empty { margin: 0; color: var(--e-ink-3); font-size: .9em; }

.e-table-wrap { margin-top: 10px; max-height: 260px; overflow: auto; border: 1px solid var(--e-line); border-radius: var(--e-radius-sm); }
.e-table { width: 100%; border-collapse: collapse; font-size: .82em; font-variant-numeric: tabular-nums; }
.e-table caption { text-align: left; padding: 7px 10px; color: var(--e-ink-2); font-weight: 650; }
.e-table th, .e-table td { padding: 5px 10px; border-bottom: 1px solid var(--e-line); text-align: right; white-space: nowrap; }
.e-table tbody tr:last-child td { border-bottom: 0; }
.e-table th:first-child, .e-table td:first-child { text-align: left; }
.e-table thead th { position: sticky; top: 0; background: var(--e-surface); color: var(--e-ink-2); font-weight: 650; }
.e-table tbody tr:hover td { background: var(--e-surface); }

.e-out {
    width: 100%; margin: 0; padding: 10px 12px; border-radius: var(--e-radius-sm); background: var(--e-surface);
    border: 1px solid var(--e-line); font: .88em/1.5 var(--e-mono); white-space: pre-wrap; overflow-wrap: anywhere;
    max-height: 320px; overflow: auto;
}
.e-big { font-size: 2.1em; font-weight: 750; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.e-center { text-align: center; }
.e-muted { color: var(--e-ink-3); }

.e-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.e-actions .e-btn { font-size: .8em; padding: 4px 12px; min-height: 30px; border-radius: 999px; font-weight: 600; }

.e-status { font-size: .82em; color: var(--e-ok); min-height: 1.2em; }

/* ---------------- opt-in primitives ---------------- */
.e-digits { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 8px; text-align: center; }
.e-digit { padding: 10px 4px 8px; border-radius: var(--e-radius-sm); background: var(--e-hero); border: 1px solid color-mix(in srgb, var(--e-accent) 12%, transparent); }
.e-digit b { display: block; font-size: 1.9em; line-height: 1.05; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--e-accent-fg); }
.e-digit span { display: block; margin-top: 3px; font-size: .72em; text-transform: uppercase; letter-spacing: .07em; color: var(--e-ink-3); font-weight: 600; }

.e-kpi { display: grid; gap: 2px; padding: 12px 14px; border-radius: calc(var(--e-radius-sm) + 2px); background: var(--e-hero); }
.e-kpi small { font-size: .78em; text-transform: uppercase; letter-spacing: .06em; color: var(--e-ink-2); font-weight: 650; }
.e-kpi strong { font-size: 1.7em; line-height: 1.15; font-weight: 750; color: var(--e-accent-fg); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.e-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .78em; font-weight: 650; background: var(--e-surface-2); color: var(--e-ink-2); }
.e-pill.e-ok { background: color-mix(in srgb, var(--e-ok) 14%, var(--e-bg)); color: var(--e-ok); }
.e-pill.e-warn { background: color-mix(in srgb, var(--e-warn) 14%, var(--e-bg)); color: var(--e-warn); }
.e-pill.e-bad { background: var(--e-bad-soft); color: var(--e-bad); }

.e-notice { margin: 10px 0 0; padding: 9px 12px; border-radius: var(--e-radius-sm); background: var(--e-surface); border: 1px solid var(--e-line); font-size: .84em; color: var(--e-ink-2); }

.e-chart { margin-top: 12px; }
.e-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.e-chart .e-axis { stroke: var(--e-line-strong); stroke-width: 1; }
.e-chart .e-grid { stroke: var(--e-line); stroke-width: 1; }
.e-chart .e-s1 { fill: none; stroke: var(--e-accent); stroke-width: 2.4; }
.e-chart .e-s2 { fill: none; stroke: var(--e-coral); stroke-width: 2.4; }
.e-chart .e-a1 { fill: color-mix(in srgb, var(--e-accent) 16%, transparent); stroke: none; }
.e-chart text { fill: var(--e-ink-3); font-size: 10px; font-family: var(--e-font); }

.e-skel { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--e-surface) 0%, var(--e-surface-2) 50%, var(--e-surface) 100%); background-size: 200% 100%; animation: e-shimmer 1.2s linear infinite; }
.e-skel + .e-skel { margin-top: 8px; }
@keyframes e-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------------- footer ---------------- */
.e-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: var(--e-gap); padding-top: 8px; border-top: 1px solid var(--e-line);
    font-size: .76em; color: var(--e-ink-3);
}
.e-foot a { color: var(--e-ink-2); text-decoration: none; font-weight: 650; }
.e-foot a:hover { color: var(--e-accent-fg); text-decoration: underline; text-underline-offset: 2px; }
.e-privacy::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--e-ok); margin-right: 6px; vertical-align: 1px; }
.e-privacy.e-server::before { background: var(--e-accent); }

.e-loading { color: var(--e-ink-3); font-size: .9em; padding: 12px 0; }

@media (max-width: 360px) {
    :root { --e-pad: 12px; }
    .e-form { grid-template-columns: 1fr; }
    .e-row.e-primary dd { font-size: 1.2em; }
    .e-cards .e-row.e-primary dd { font-size: 1.45em; }
    .e-digit b { font-size: 1.5em; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------- checker widgets (engines/checker-kit.js) ---------------- */
.ck-form { display: grid; gap: 6px; }
.ck-label { font-size: .84em; font-weight: 600; color: var(--e-ink-2); }
.ck-row { display: flex; gap: 8px; }
.ck-row .e-input { flex: 1; min-width: 0; }
.ck-out { display: grid; gap: 10px; margin-top: var(--e-gap); }
.ck-item { border: 1px solid var(--e-line); border-left-width: 4px; border-radius: var(--e-radius-sm); padding: 10px 12px; background: var(--e-surface); }
.ck-ok { border-left-color: var(--e-ok); }
.ck-warn { border-left-color: var(--e-warn); }
.ck-bad { border-left-color: var(--e-bad); }
.ck-unknown { border-left-color: var(--e-line-strong); }
.ck-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.ck-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: .8em; font-weight: 800; color: #fff; background: var(--e-ink-3); }
.ck-ok .ck-mark { background: var(--e-ok); }
.ck-warn .ck-mark { background: var(--e-warn); }
.ck-bad .ck-mark { background: var(--e-bad); }
html[data-theme="dark"] .ck-mark { color: #0f1424; }
.ck-tone { font-size: .86em; font-weight: 600; color: var(--e-ink-2); }
.ck-sum { margin: 6px 0 0; font-size: .9em; }
.ck-facts { margin: 8px 0 0; display: grid; gap: 3px; font-size: .84em; }
.ck-facts div { display: flex; justify-content: space-between; gap: 12px; }
.ck-facts dt { color: var(--e-ink-3); }
.ck-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-weight: 600; }
.ck-link { display: inline-block; margin-top: 8px; font-size: .84em; color: var(--e-accent-fg); font-weight: 650; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .ck-mark { color: #0f1424; } }
.e-field.e-toggle { justify-content: flex-end; }