/* Loopa.AI Playable Checker (/checker/). Builds on styles.css: same tokens, type and buttons.
 * Layout: upload hero, then a workbench with the check on the left (light) and the live
 * preview on the right (dark, sticky). Under 768 px a tab bar switches between them. */

:root {
  --ck-strip: 64px;
  --ck-panel-bg: #F4F4F4;
  --ck-line: #E2E2E2;
  --ck-red-text: #B8141C; /* red for body text on white (4.5:1) */
  --ck-red-dark: #FF6B6B; /* red text on black */
  --ck-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[hidden] { display: none !important; }
.checker[data-state="empty"] .ck-work,
.checker[data-state="empty"] .ck-tabs,
.checker:not([data-state="empty"]) .ck-hero { display: none; }
.ck-noscroll, .ck-noscroll body { overflow: hidden; }
.wrap-wide { padding: 0 24px; }
.site-nav a[aria-current="page"] { color: var(--blue); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* ---------- upload ---------- */
.ck-hero { padding-top: 64px; }
.ck-hero h1 { max-width: 13em; }
.ck-hero .lead { margin-top: 24px; max-width: 34em; color: var(--gray); font-size: 1.25rem; line-height: 1.55; }
.ck-drop {
  margin-top: 40px; min-height: 280px; padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--ck-panel-bg); border: 2px dashed var(--gray); border-radius: 24px;
  transition: border-color .15s, background-color .15s;
}
.ck-drop:hover, .ck-drop:focus-within { border-color: var(--blue); background: #EEF1FD; }
.ck-drop-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
.ck-drop-or { margin: 8px 0 12px; color: var(--gray); }
.ck-choose { position: relative; z-index: 1; }
#ck-file:focus-visible + .ck-drop-title, .ck-drop:focus-within .ck-choose { outline: 3px solid var(--focus); outline-offset: 3px; }
.ck-drop-small { margin-top: 16px; color: var(--gray); font-size: 1rem; }
.ck-drop.is-shake { animation: ck-shake .35s ease-in-out; }
@keyframes ck-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.ck-error {
  margin-top: 16px; padding: 14px 18px; border-left: 4px solid var(--red); background: #FDECEC;
  color: var(--ck-red-text); font-weight: 600; font-size: 1rem; border-radius: 0 12px 12px 0;
}
.ck-upload-row { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 1rem; }
.ck-check { display: inline-flex; align-items: center; gap: 10px; color: var(--gray); cursor: pointer; }
.ck-check input { width: 18px; height: 18px; accent-color: var(--blue); }
.ck-privacy { margin-top: 28px; color: var(--ink); font-size: 1rem; font-weight: 600; }
.ck-note { margin-top: 8px; color: var(--gray); font-size: .9375rem; }
.ck-rules-list { margin-top: 48px; }
.ck-rules-list .label { font-size: .8125rem; }
.ck-rules-list ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.ck-rules-list li { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid var(--ck-line); font-size: 1rem; }
.ck-rule-n { flex: none; width: 1.5em; font-weight: 800; font-variant-numeric: tabular-nums; }
.ck-dropveil {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(36, 71, 214, .92); color: var(--white); font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800;
  pointer-events: none;
}

/* ---------- workbench ---------- */
.ck-strip { position: sticky; top: 0; z-index: 30; background: var(--white); border-bottom: 1px solid var(--ck-line); border-top: 1px solid var(--ck-line); }
.ck-strip-in { min-height: var(--ck-strip); display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.ck-filechip { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.ck-fileicon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--ink); border-radius: 6px; font: 600 .6875rem var(--ck-mono); }
.ck-filename { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-filemeta { color: var(--gray); font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-strip-status { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.ck-strip-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-btn-line { background: var(--white); color: var(--ink); border-color: var(--ink); }
.ck-btn-line:hover { background: var(--ink); color: var(--white); }

.ck-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(400px, 5fr); align-items: start; }
.ck-panel { background: var(--ck-panel-bg); min-height: calc(100vh - var(--ck-strip)); }
.ck-panel-in { max-width: 760px; margin: 0 auto; padding: 40px 48px 120px; }
/* While the fixed test bench dock is up, the panel can always scroll its last rows clear of it. */
.checker[data-state="scanning"] .ck-panel-in { padding-bottom: 300px; }
.checker[data-state="scanning"] .ck-panel { min-height: calc(100vh - var(--ck-strip) + 280px); }

/* ---------- the stage (dark) ---------- */
.ck-stage {
  --focus: var(--glow);
  position: sticky; top: var(--ck-strip); height: calc(100vh - var(--ck-strip)); overflow-y: auto;
  background: var(--black); color: var(--white);
}
.ck-stage-in { display: flex; flex-direction: column; gap: 14px; min-height: 100%; padding: 24px; }
.ck-stage .label, .ck-stage .label .ts { margin: 0; color: var(--glow); }
.ck-stage-note, .ck-stage-foot { color: var(--gray-dark); font-size: .875rem; line-height: 1.45; }
.ck-stage-foot { margin-top: auto; padding-top: 8px; }
.ck-devices { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ck-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: #1A1A1A; border: 1px solid #2A2A2A; }
.ck-seg button, .ck-chip, .ck-tool, .ck-menu button, .ck-fullbar button {
  font: 600 .875rem var(--font); color: var(--white); background: transparent; border: 0; border-radius: 999px;
  padding: 8px 16px; min-height: 36px; cursor: pointer;
}
.ck-seg [aria-checked="true"] { background: var(--white); color: var(--ink); }
.ck-models { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.ck-chip { border: 1px solid #3A3A3A; padding: 6px 12px; min-height: 32px; font-size: .8125rem; color: var(--gray-dark); }
.ck-chip[aria-checked="true"] { border-color: var(--white); color: var(--white); }
.ck-model-select { display: none; font: 600 .875rem var(--font); color: var(--white); background: #1A1A1A; border: 1px solid #3A3A3A; border-radius: 999px; padding: 8px 14px; }

.ck-area { flex: 1 1 0; min-height: 280px; display: flex; align-items: safe center; justify-content: safe center; overflow: hidden; }
.ck-stage.is-one .ck-area { overflow: auto; }
.ck-fit { position: relative; flex: none; }
.ck-devlabel { text-align: center; color: var(--gray-dark); font: .75rem/1.4 var(--ck-mono); }

/* The phone: an iframe at the real CSS size, with the hardware drawn over it. */
.dev {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  padding: 10px; background: #111; border-radius: calc(var(--radius) + 10px);
  box-shadow: 0 0 0 1px #2C2C2C, 0 24px 60px rgba(0, 0, 0, .55);
}
.dev.has-bezel { padding: 72px 14px; border-radius: 48px; }
.dev-screen { position: relative; width: var(--w); height: var(--h); overflow: hidden; border-radius: var(--radius); background: #000; }
.dev-slot iframe { display: block; border: 0; background: var(--white); }
.dev-cutout, .dev-nav, .dev-status, .dev-safe { position: absolute; pointer-events: none; }
.dev[data-cutout="island"] .dev-cutout { top: 11px; left: 50%; width: 126px; height: 37px; margin-left: -63px; border-radius: 20px; background: #000; }
.dev[data-cutout="island"].is-land .dev-cutout { top: 50%; left: 11px; width: 37px; height: 126px; margin: -63px 0 0; }
.dev[data-cutout="punch"] .dev-cutout { top: 12px; left: 50%; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: #000; box-shadow: 0 0 0 2px #1A1A1A; }
.dev[data-cutout="punch"].is-land .dev-cutout { top: 50%; left: 12px; margin: -6px 0 0; }
.dev-homebutton { display: none; }
.dev.has-bezel .dev-homebutton { display: block; position: absolute; left: 50%; bottom: 12px; width: 48px; height: 48px; margin-left: -24px; border-radius: 50%; border: 2px solid #333; }
.dev-nav { display: none; left: 50%; bottom: 8px; transform: translateX(-50%); }
.dev[data-nav="home"] .dev-nav, .dev[data-nav="gesture"] .dev-nav { display: block; width: 134px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .78); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); }
.dev[data-nav="gesture"] .dev-nav { width: 108px; height: 4px; }
.dev-nav i { display: none; }
.dev[data-nav="buttons"].show-bars .dev-nav {
  display: flex; justify-content: space-around; align-items: center; left: 0; right: 0; bottom: 0; transform: none; height: 48px; background: #000;
}
.dev[data-nav="buttons"].show-bars .dev-nav i { display: block; width: 14px; height: 14px; border: 2px solid #CCC; border-radius: 3px; }
.dev[data-nav="buttons"].show-bars .dev-nav i:nth-child(2) { border-radius: 50%; }
.dev-status { display: none; top: 0; left: 0; right: 0; height: max(var(--safe-top), 24px); padding: 0 28px; align-items: center; justify-content: space-between;
  color: var(--white); font: 600 .9375rem var(--font); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.dev.show-bars .dev-status { display: flex; }
.dev-icons { width: 52px; height: 11px; background: linear-gradient(90deg, #fff 0 18px, transparent 18px 22px, #fff 22px 34px, transparent 34px 38px, #fff 38px); border-radius: 2px; }
.dev-safe { display: none; inset: 0; }
.dev.show-safe .dev-safe { display: block; }
.dev-safe i { position: absolute; background: repeating-linear-gradient(45deg, rgba(255, 194, 31, .45) 0 6px, transparent 6px 12px); }
.dev-safe .s-top { top: 0; left: 0; right: 0; height: var(--safe-top); }
.dev-safe .s-bottom { bottom: 0; left: 0; right: 0; height: var(--safe-bottom); }
.dev-safe .s-left { top: 0; bottom: 0; left: 0; width: var(--safe-left); }
.dev-safe .s-right { top: 0; bottom: 0; right: 0; width: var(--safe-right); }
.dev-safe b { /* the 44 × 44 corner where ad networks put their own close button, labelled under it */
  position: absolute; top: calc(var(--safe-top) + 6px); right: calc(var(--safe-right) + 6px); width: 96px; padding-top: 50px;
  text-align: right; font: 700 10px/1.2 var(--font); color: var(--yellow); text-shadow: 0 1px 2px #000;
}
.dev-safe b::before { content: ""; position: absolute; top: 0; right: 0; width: 44px; height: 44px; box-sizing: border-box; border: 2px dashed var(--yellow); border-radius: 8px; }
.dev-toast {
  position: absolute; left: 12px; right: 12px; bottom: 28px; z-index: 2; padding: 14px 16px; border-radius: 16px;
  background: var(--white); color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); border-left: 5px solid var(--blue);
  display: flex; flex-direction: column; gap: 2px; font-size: .9375rem;
}
.dev-toast span { color: var(--gray); font: .8125rem var(--ck-mono); overflow-wrap: anywhere; }
.dev-toast.is-bad { border-left-color: var(--red); }
.dev-toast.is-bad strong { color: var(--ck-red-text); }
.dev-blank { position: absolute; left: 16px; right: 16px; top: 45%; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .8); color: var(--white); font-size: .9375rem; text-align: center; }

.ck-toolbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ck-tool { background: #1A1A1A; border: 1px solid #333; }
.ck-tool:hover { border-color: var(--white); }
.ck-tool[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.ck-stage.is-compact .ck-tool-text { display: none; }
.ck-stage.is-compact #ck-one .ck-tool-text { display: inline; }
.ck-more { position: relative; }
.ck-more summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.ck-more summary::-webkit-details-marker { display: none; }
.ck-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; min-width: 220px; padding: 6px; border-radius: 14px; background: #1A1A1A; border: 1px solid #333; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); display: flex; flex-direction: column; }
.ck-menu button { text-align: left; border-radius: 10px; }
.ck-menu button:hover { background: #2A2A2A; }
.ck-menu [aria-pressed="true"]::after { content: " ✓"; color: var(--glow); }
.ck-playfull { display: none; align-self: center; }
.ck-errors { padding: 10px 14px; border-radius: 12px; background: #2A0D0F; border: 1px solid #5A1A1E; color: #FFD7D9; font-size: .875rem; }
.ck-errors strong { color: var(--ck-red-dark); white-space: nowrap; }
.ck-log { font-size: .875rem; color: var(--gray-dark); }
.ck-log summary { cursor: pointer; font-weight: 600; }
.ck-log ol { margin-top: 8px; max-height: 220px; overflow-y: auto; font: .75rem/1.5 var(--ck-mono); }
.ck-log li { display: flex; gap: 12px; padding: 2px 0; color: #D6D6D6; overflow-wrap: anywhere; }
.ck-log li.is-bad { color: var(--ck-red-dark); }
.ck-log-t { flex: none; width: 4.5em; color: var(--gray-dark); text-align: right; }

/* Phone fullscreen: the stage itself becomes the overlay (the iframe never moves). */
.ck-fullbar { display: none; }
.ck-stage.is-full { position: fixed; inset: 0; z-index: 100; height: auto; overflow: hidden; }
.ck-stage.is-full .ck-stage-in > :not(.ck-area):not(.ck-fullbar) { display: none; }
.ck-stage.is-full .ck-area { position: fixed; inset: 0; }
.ck-stage.is-full .ck-fit { width: 100%; height: 100%; }
.ck-stage.is-full .dev { padding: 0; border-radius: 0; box-shadow: none; background: #000; }
.ck-stage.is-full .dev-screen { border-radius: 0; }
.ck-stage.is-full .dev-cutout, .ck-stage.is-full .dev-nav, .ck-stage.is-full .dev-status, .ck-stage.is-full .dev-safe, .ck-stage.is-full .dev-homebutton { display: none; }
.ck-stage.is-full .ck-fullbar {
  display: flex; gap: 6px; position: fixed; z-index: 101; top: calc(8px + env(safe-area-inset-top)); left: 8px;
}
.ck-fullbar button { min-height: 44px; background: rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .3); }

/* ---------- phone tab bar ---------- */
.ck-tabs { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .ck-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ck-stage { position: static; height: auto; min-height: 80vh; }
  .ck-area { min-height: 60vh; }
  .ck-panel-in { padding: 32px 24px 96px; }
  .ck-models { display: none; }
  .ck-model-select { display: inline-block; }
}
@media (max-width: 899px) {
  .ck-grid { grid-template-columns: minmax(0, 1fr); }
  .checker:not([data-state="scanning"]) .ck-panel { min-height: 0; }
}
@media (max-width: 767px) {
  .ck-rules-list ol { grid-template-columns: minmax(0, 1fr); }
  .ck-drop { min-height: 220px; }
  .ck-drop-title { font-size: 1.375rem; }
  .checker:not([data-state="empty"]) { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .ck-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--white);
    border-top: 1px solid var(--ck-line); padding-bottom: env(safe-area-inset-bottom);
  }
  .ck-tabs button { flex: 1; min-height: 56px; border: 0; background: none; font: 600 1rem var(--font); color: var(--gray); cursor: pointer; }
  .ck-tabs [aria-selected="true"] { color: var(--ink); box-shadow: inset 0 3px 0 var(--ink); }
  .checker[data-tab="preview"] .ck-panel { display: none; }
  /* the stage keeps its size off screen so the ad inside never sees a 0 × 0 resize */
  .checker[data-tab="check"] .ck-stage:not(.is-full) { position: absolute; left: -200vw; width: 100vw; }
  .ck-stage { min-height: calc(100vh - var(--ck-strip) - 56px); }
  .ck-area { min-height: 52vh; }
  .ck-playfull { display: inline-flex; }
  .ck-strip { position: static; }
  .ck-strip-in { padding-left: 16px; padding-right: 16px; }
  .ck-strip-actions .btn { min-height: 40px; padding: 10px 14px; font-size: .875rem; }
  .ck-filemeta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-drop.is-shake { animation: none; }
  .ck-drop { transition: none; }
}

/* ---------- the test bench: the live test phones. Fixed and always in the viewport while a
   scan runs (browsers throttle hidden or offscreen frames). Never display:none while scanning. ---------- */
.tb {
  --tb-scale: .16;
  position: fixed; left: 16px; bottom: 16px; z-index: 25; max-width: calc(100vw - 32px);
  padding: 10px 12px 12px; border-radius: 16px; background: rgba(8, 8, 8, .94); color: var(--white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3); pointer-events: none;
}
.tb-title { font: 600 .6875rem var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--gray-dark); margin-bottom: 8px; }
.tb-slots { display: flex; align-items: flex-end; gap: 10px; }
.tb-slot { display: flex; flex-direction: column; gap: 3px; max-width: 170px; }
.tb-box {
  position: relative; overflow: hidden; border-radius: 6px; background: #000;
  width: calc(var(--w) * var(--tb-scale) * 1px); height: calc(var(--h) * var(--tb-scale) * 1px);
}
.tb-box iframe { position: absolute; left: 0; top: 0; border: 0; background: var(--white); transform: scale(var(--tb-scale)); transform-origin: 0 0; }
.tb-cap { font: 600 .75rem var(--font); }
.tb-step { font-size: .6875rem; color: var(--gray-dark); line-height: 1.3; }
.tb-probe { position: absolute; width: 1px; height: 1px; border: 0; }
@media (max-width: 767px) {
  .tb { --tb-scale: .11; left: 8px; bottom: calc(64px + env(safe-area-inset-bottom)); padding: 8px; }
  .tb-title { display: none; }
}

/* ---------- status chips: shape + word, never colour alone ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; font: 700 .75rem/1.3 var(--font); letter-spacing: .04em; text-transform: uppercase;
}
.chip-i { font-size: .8em; }
.chip-FAIL { background: var(--red); color: var(--white); }
.chip-WARN { background: var(--yellow); color: #000; }
.chip-REVIEW { border: 1.5px dashed var(--ink); color: var(--ink); background: var(--white); }
.chip-PASS { border: 1.5px solid var(--blue); color: var(--blue); background: var(--white); }
.chip-CHECKED { border: 1.5px solid var(--gray); color: var(--gray); background: var(--white); }
.chip-SKIP { border: 1.5px dashed var(--gray-dark); color: var(--gray); background: transparent; }

/* ---------- scanning ---------- */
.ck-live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(255, 194, 31, .3); }
.ck-scan-title { font-size: clamp(1.75rem, 2.4vw + .5rem, 2.5rem); }
.ck-timecode { margin-top: 16px; font: 800 clamp(2.5rem, 4vw, 3.5rem)/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ck-counters { margin-top: 12px; color: var(--gray); font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-need { margin-top: 20px; padding: 16px 18px; border-radius: 14px; background: var(--ink); color: var(--white); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ck-need p { max-width: 30em; font-size: 1rem; }
.ck-need.is-info { background: #FFF6DB; color: var(--ink); font-size: 1rem; }
.ck-phases { margin-top: 28px; border-top: 1px solid var(--ck-line); }
.ph { padding: 14px 0; border-bottom: 1px solid var(--ck-line); }
.ph-head { display: flex; align-items: center; gap: 12px; }
.ph-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gray-dark); }
.ph[data-state="running"] .ph-dot { border-color: var(--red); background: var(--red); }
.ph[data-state="done"] .ph-dot { border-color: var(--ink); background: var(--ink); }
.ph[data-state="paused"] .ph-dot, .ph[data-state="interrupted"] .ph-dot { border-style: dashed; border-color: var(--ink); }
.ph-name { font-weight: 800; }
.ph[data-state="waiting"] .ph-name { color: var(--gray); }
.ph-size { color: var(--gray); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.ph-state { margin-left: auto; color: var(--gray); font-size: .875rem; font-weight: 600; text-align: right; }
.ph-step { margin: 4px 0 0 24px; color: var(--ink); font-size: 1rem; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 24px; }
.ph-chips .chip { text-transform: none; letter-spacing: 0; font-weight: 600; }
.ck-scan-note { margin-top: 24px; color: var(--gray); font-size: 1rem; max-width: 40em; }
@media (prefers-reduced-motion: no-preference) {
  .ph[data-state="running"] .ph-dot, .ck-live-dot { animation: ck-pulse 1.2s ease-in-out infinite; }
  @keyframes ck-pulse { 50% { opacity: .35; } }
}

/* ---------- results ---------- */
.verdict { position: relative; padding: 32px 32px 28px 36px; border-radius: 20px; background: var(--white); border: 1px solid var(--ck-line); overflow: hidden; }
.verdict::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--gray-dark); }
.verdict-FAIL::before { background: var(--red); }
.verdict-WARN::before { background: var(--yellow); }
.verdict-REVIEW::before { background: var(--blue); }
.verdict-PASS::before { background: var(--blue); box-shadow: 0 0 24px 6px var(--glow); }
.verdict h2 { font-size: clamp(1.75rem, 2.4vw + .5rem, 2.75rem); }
.verdict h2:focus { outline: none; }
.verdict h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.verdict-sub { margin-top: 10px; color: var(--gray); max-width: 34em; }
.verdict-tally { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tally { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--ck-line); border-radius: 999px; background: var(--white); cursor: pointer; font: inherit; }
.tally strong { font-variant-numeric: tabular-nums; }
.tally[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.verdict-meta { margin-top: 16px; color: var(--gray); font-size: .9375rem; }
.verdict-note { margin-top: 8px; font-size: .9375rem; color: var(--ink); background: #FFF6DB; padding: 8px 12px; border-radius: 10px; }
.verdict .btn { margin-top: 16px; }
.rule0 { margin-top: 16px; font-size: 1rem; }
.rule0.is-ok { display: flex; align-items: center; gap: 10px; color: var(--gray); }
.rule0 summary { cursor: pointer; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.rule0 ul { margin-top: 10px; padding: 12px 16px; background: var(--white); border-radius: 12px; border: 1px solid var(--ck-line); }
.rule0 li { padding: 4px 0; overflow-wrap: anywhere; }
.rule0 code, .found-detail { font-family: var(--ck-mono); font-size: .8125rem; }

.rc-filter { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.rc-filter .label { margin: 0; }
.filter-btn { font: 600 .9375rem var(--font); background: none; border: 0; padding: 8px 10px; border-radius: 8px; color: var(--blue); cursor: pointer; }
.filter-btn[aria-pressed="true"] { color: var(--ink); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.rc-group-title { margin: 28px 0 10px; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gray); }
.rc { margin-bottom: 12px; border-radius: 16px; background: var(--white); border: 1px solid var(--ck-line); }
.rc[data-status="FAIL"] { border-color: var(--red); box-shadow: inset 4px 0 0 var(--red); }
.rc[data-status="WARN"] { border-color: var(--yellow); box-shadow: inset 4px 0 0 var(--yellow); }
.rc[data-status="REVIEW"] { border: 1.5px dashed var(--ink); }
.rc h3 { font-size: inherit; }
.rc-head { width: 100%; display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; border-radius: 16px; }
.rc-n { flex: none; width: 1.6em; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rc-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-title { font-size: 1.125rem; font-weight: 800; }
.rc-sum { color: var(--gray); font-size: .9375rem; line-height: 1.4; overflow-wrap: anywhere; }
.rc-caret { flex: none; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); margin: -4px 4px 0 0; }
.rc-head[aria-expanded="true"] .rc-caret { transform: rotate(-135deg); margin-top: 4px; }
.rc-body { padding: 0 20px 22px 60px; }
.rc-body h4 { margin: 18px 0 8px; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gray); }
.found-list li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px solid #EFEFEF; }
.found-list li:first-child { border-top: 0; }
.found-title { font-weight: 600; font-size: 1rem; }
.found-detail { color: var(--ink); overflow-wrap: anywhere; line-height: 1.5; margin-top: 2px; }
.approx { margin-top: 6px; font-size: .875rem; color: var(--gray); }
.approx-tag { font-weight: 700; color: var(--ink); white-space: nowrap; }
.rc-body blockquote { margin: 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--ck-line); color: var(--gray); font-size: 1rem; }
.rc-source { margin-top: 6px; font-size: .875rem; color: var(--gray); }
.rc-source a { color: var(--blue); }
.rc-fix { font-size: 1rem; }
.marks { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.marks p { font-weight: 600; font-size: 1rem; margin-right: auto; }

.strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.thumb { position: relative; flex: none; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; font: inherit; scroll-snap-align: start; }
.thumb img, .thumb-none { height: 200px; width: auto; max-width: none; border-radius: 10px; border: 1px solid var(--ck-line); background: #111; display: block; }
.thumb-none { width: 92px; display: grid; place-items: center; padding: 8px; color: var(--gray-dark); font-size: .75rem; text-align: center; }
.thumb-cap { font-size: .8125rem; color: var(--gray); max-width: 220px; }
.thumb .chip { position: absolute; top: 6px; left: 6px; }
.rule4 { margin: 14px 0 0; }
.rule4-pair { display: flex; gap: 12px; }
.rule4-pane { display: flex; flex-direction: column; gap: 4px; font-size: .8125rem; color: var(--gray); }
.rule4-pane img { height: 260px; width: auto; max-width: none; border-radius: 10px; border: 1px solid var(--ck-line); }
.rule4-bar { margin-top: 10px; display: flex; align-items: center; gap: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rule9 { margin: 14px 0 0; }
.rule9-shot { position: relative; display: inline-block; }
.rule9-shot img { height: 300px; width: auto; max-width: none; border-radius: 10px; border: 1px solid var(--ck-line); display: block; }
.rule9 figcaption { margin-top: 6px; font-size: .875rem; color: var(--gray); }
.crosshair { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid var(--red); border-radius: 50%; box-shadow: 0 0 0 3px var(--white); }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: var(--red); }
.crosshair::before { left: 50%; top: -12px; bottom: -12px; width: 3px; margin-left: -1.5px; }
.crosshair::after { top: 50%; left: -12px; right: -12px; height: 3px; margin-top: -1.5px; }

.gallery { margin-top: 48px; }
.gallery-group h3 { margin: 18px 0 8px; font-size: 1rem; }
.cant { margin-top: 48px; padding: 24px; border-radius: 16px; background: var(--white); border: 1px solid var(--ck-line); }
.cant p { font-size: 1rem; }
.cant .label { margin-bottom: 8px; }
.cant-privacy { margin-top: 8px; color: var(--gray); }
.ck-endcard { --focus: var(--glow); margin-top: 32px; padding: 36px; border-radius: 20px; background: var(--black); color: var(--white); }
.ck-endcard .label .ts { color: var(--glow); }
.ck-endcard h2 { font-size: clamp(1.5rem, 2vw + .5rem, 2.25rem); }
.ck-endcard p:not(.label) { margin: 10px 0 20px; color: var(--gray-dark); }

.ck-lightbox { width: min(96vw, 1100px); max-height: 94vh; padding: 0; border: 0; border-radius: 16px; background: var(--black); color: var(--white); }
.ck-lightbox::backdrop { background: rgba(0, 0, 0, .8); }
.ck-lightbox img { display: block; max-width: 100%; max-height: 76vh; margin: 0 auto; }
.ck-lb-bar { --focus: var(--glow); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 18px; font-size: .9375rem; }
.ck-lb-rules { display: flex; flex-wrap: wrap; gap: 10px; }
.ck-lb-rules a { color: var(--glow); }
.ck-lb-nav { margin-left: auto; display: flex; gap: 6px; }
.ck-lb-nav button { min-width: 44px; min-height: 44px; border-radius: 999px; border: 1px solid #444; background: #1A1A1A; color: var(--white); font: 600 1rem var(--font); cursor: pointer; padding: 0 14px; }
@media (max-width: 767px) {
  .rc-body { padding-left: 20px; }
  .rc-head { gap: 10px; padding: 16px; }
  .thumb img, .thumb-none, .rule4-pane img { height: 170px; }
  .rule9-shot img { height: 240px; }
  .verdict { padding: 24px 20px 22px 26px; }
}

/* ---------- recent checks, saved checks, page toasts ---------- */
.ck-recent { margin-top: 48px; }
.ck-recent-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ck-recent-head .label { margin: 0; font-size: .8125rem; }
.ck-recent-clear { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9375rem; }
.ck-recent-list { margin-top: 12px; border-top: 1px solid var(--ck-line); }
.ck-recent-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--ck-line); }
.ck-recent-name { flex: 1 1 260px; min-width: 0; }
.ck-recent-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-recent-name span { color: var(--gray); font-size: .875rem; }
.ck-recent-empty { padding: 14px 0; color: var(--gray); font-size: 1rem; }
.ck-linkbtn { font: 600 .9375rem var(--font); color: var(--blue); background: none; border: 0; padding: 8px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ck-linkbtn.is-quiet { color: var(--gray); }
.ck-stage-empty { display: none; }
.checker[data-state="recent"] .ck-stage-in > :not(.ck-stage-empty) { display: none; }
.checker[data-state="recent"] .ck-stage-empty { display: flex; flex-direction: column; gap: 14px; justify-content: center; align-items: flex-start; min-height: 60vh; max-width: 26em; margin: 0 auto; }
.ck-stage-empty h2 { font-size: 1.75rem; }
.ck-stage-empty p:not(.label) { color: var(--gray-dark); }
.ck-pagetoast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 150; max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--white); font-size: 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}