/* The Craig result panel: the extension's injected panel, ported at its native sizes.
   Values are the extension's; only the colors are rewritten to tokens. Spacing inside the
   panel is a verbatim port and is exempt from the 8px page rhythm. Every rule is scoped to
   .craig-panel so nothing leaks into or out of the page. */
.craig-panel { background: var(--paper); border: var(--border); box-shadow: var(--shadow-panel); box-sizing: border-box; color: var(--ink); font: 15px/1.55 var(--font-ui); padding: 18px; }
/* Like the extension's panel, a long result scrolls inside the panel instead of stretching the page. */
.craig-panel { max-height: min(720px, calc(100vh - 120px)); overflow-y: auto; overscroll-behavior: auto; }
.craig-panel:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.craig-panel .panel-mark { float: right; height: 80px; image-rendering: pixelated; margin: 0 0 8px 12px; width: 56px; }
.craig-panel .panel-eyebrow { color: var(--quiet); display: block; font: 700 10px/1 var(--font-mono); letter-spacing: .14em; margin-bottom: 9px; }
.craig-panel h2 { border: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0; max-width: none; padding: 0; }
.craig-panel p { color: var(--quiet); margin: 8px 0 12px; }
.craig-panel .coverage { border-bottom: var(--hairline); border-top: var(--border); color: var(--ink); font: 600 12px/1.45 var(--font-mono); margin: 13px 0; padding: 9px 0; }

/* Gauge: a 240-degree ring; the dash length on each circle carries the score. */
.craig-panel .gauge { color: var(--ink); display: flex; justify-content: center; margin: 4px 0 10px; }
.craig-panel .gauge svg { height: 130px; width: 168px; }
.craig-panel .gauge-track { fill: none; stroke: var(--foam); stroke-width: 12; }
.craig-panel .gauge-progress { fill: none; stroke: currentColor; stroke-width: 12; }
.craig-panel .gauge-value { fill: currentColor; font: 800 34px/1 var(--font-mono); }
.craig-panel .gauge.low { color: var(--state-low); }
.craig-panel .gauge.caution { color: var(--state-caution); }
.craig-panel .gauge.elevated { color: var(--state-elevated); }
.craig-panel .gauge.high { color: var(--state-high); }

.craig-panel .group-heading { border-top: var(--border); color: var(--ink); font: 700 11px/1 var(--font-mono); letter-spacing: .1em; margin: 18px 0 9px; padding-top: 11px; text-transform: uppercase; }

/* Findings */
.craig-panel .check-case { background: var(--paper); border: 1px solid var(--ink); margin-top: 8px; }
.craig-panel .check-case summary { align-items: center; cursor: pointer; display: flex; font-weight: 650; gap: 10px; list-style: none; padding: 10px 11px; }
.craig-panel .check-case summary::-webkit-details-marker { display: none; }
.craig-panel .check-case summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.craig-panel .check-case[open] summary { border-bottom: 1px solid var(--ink); }
.craig-panel .case-title { color: var(--ink); min-width: 0; }
.craig-panel .case-state { border: 1px solid var(--ink); color: var(--ink); font: 700 10px/1.5 var(--font-mono); letter-spacing: .06em; margin-left: auto; padding: 2px 6px; text-align: right; text-transform: uppercase; }
.craig-panel .check-case.danger { border-color: var(--danger); }
.craig-panel .check-case.danger[open] summary { border-bottom-color: var(--danger); }
.craig-panel .check-case.danger .case-state { background: var(--danger); border-color: var(--danger); color: var(--paper); }
.craig-panel .check-case.caution { border-color: var(--state-caution); }
.craig-panel .check-case.caution[open] summary { border-bottom-color: var(--state-caution); }
.craig-panel .check-case.caution .case-state { background: var(--state-caution); border-color: var(--state-caution); color: var(--paper); }
.craig-panel .check-case.positive { border-color: var(--positive); }
.craig-panel .check-case.positive[open] summary { border-bottom-color: var(--positive); }
/* The extension colors this label green too, but #2f8a35 on paper is 4.16:1, under the 4.5:1 minimum for small text. The dashed green border carries the state; the text stays ink. */
.craig-panel .check-case.positive .case-state { border-color: var(--positive); border-style: dashed; color: var(--ink); }

.craig-panel .case-body { padding: 11px; }
.craig-panel .case-body > p { color: var(--quiet); font-size: 13px; margin: 0; }
.craig-panel .text-match, .craig-panel .image-match { border-top: var(--hairline); margin-top: 11px; padding-top: 11px; }
.craig-panel .text-match:first-child, .craig-panel .image-match:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.craig-panel .text-match > p:first-child, .craig-panel .image-match > p { font: 700 11px/1.4 var(--font-mono); letter-spacing: .06em; margin: 0 0 7px; text-transform: uppercase; }
.craig-panel .text-excerpt { color: var(--quiet); font-size: 13px; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.craig-panel mark { background: var(--ink); color: var(--paper); font-weight: 700; padding: 1px 4px; }
.craig-panel .image-pair { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.craig-panel figure { margin: 0; min-width: 0; }
.craig-panel figure img { aspect-ratio: 4 / 3; background: var(--foam); border: 1px solid var(--ink); display: block; height: auto; object-fit: cover; width: 100%; }
.craig-panel figcaption { color: var(--quiet); font: 11px/1.4 var(--font-mono); margin-top: 5px; }
.craig-panel .image-unavailable { align-items: center; border: 1px dashed var(--ink); box-sizing: border-box; color: var(--quiet); display: flex; font-size: 11px; margin: 0; min-height: 96px; padding: 8px; }
.craig-panel .match-source { color: var(--ink); display: block; font-size: 12px; overflow-wrap: anywhere; text-decoration: underline; }

/* Verified execution log */
.craig-panel .trace { clear: both; }
.craig-panel .trace-note { font-size: 12px; margin: 0 0 8px; }
.craig-panel pre { background: var(--ink); color: var(--paper); font: 11px/1.55 var(--font-mono); margin: 8px 0 0; max-height: 230px; overflow: auto; padding: 11px; white-space: pre-wrap; word-break: break-word; }

/* Actions */
.craig-panel .panel-actions { border-top: var(--border); display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; }
.craig-panel .panel-button { background: var(--paper); border: var(--border); color: var(--ink); cursor: pointer; font: 700 12px/1 var(--font-mono); letter-spacing: .06em; padding: 9px 12px; text-decoration: none; text-transform: uppercase; }
.craig-panel .panel-button:hover, .craig-panel .panel-button:focus-visible { background: var(--ink); color: var(--paper); }
.craig-panel .panel-button-inverted { background: var(--ink); color: var(--paper); }
.craig-panel .panel-button-inverted:hover, .craig-panel .panel-button-inverted:focus-visible { background: var(--paper); color: var(--ink); }
.craig-panel .panel-button-quiet { margin-left: auto; }

/* Disclaimer: the extension's closing note under every result */
.craig-panel .disclaimer { color: var(--quiet); font-size: 11px; line-height: 1.45; margin: 12px 0 0; }