/* Shared styles for the server-side checker tools (templates/tools/checker.html).
   Prefixed with ck- so nothing collides with styles.css. */

.ck-hero { background: radial-gradient(120% 120% at 82% -10%, var(--accent-wash) 0%, transparent 46%), var(--surface); border-bottom: 1px solid var(--line); }
.ck-hero .wrap { padding: 56px 32px 44px; }
.ck-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 9px; }
.ck-eyebrow-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 3px oklch(0.52 0.11 158 / 0.2); }
.ck-hero h1 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; color: var(--navy); max-width: 26ch; }
.ck-lede { margin-top: 16px; font-size: 17px; color: var(--ink-soft); max-width: 60ch; text-wrap: pretty; }

.ck-tool { padding: 48px 0 72px; }
.ck-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ck-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); }
.ck-panel-head h4 { font-size: 15px; font-weight: 700; color: var(--navy); }
.ck-tag { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-faint); }

.ck-input-stage { padding: 22px; }
.ck-input-row { display: flex; gap: 10px; }
.ck-input-row input,
.ck-input-row textarea { flex: 1; min-width: 0; font-family: 'IBM Plex Mono', monospace; font-size: 14.5px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; transition: border-color .14s; }
.ck-input-row textarea { resize: vertical; line-height: 1.6; }
.ck-input-row input:focus,
.ck-input-row textarea:focus { outline: none; border-color: var(--accent); }
.ck-input-row button { font-family: inherit; font-size: 14px; font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 10px; padding: 12px 20px; cursor: pointer; transition: background .14s; white-space: nowrap; align-self: flex-start; }
.ck-input-row button:hover { background: var(--accent-deep); }
.ck-input-row button:disabled { opacity: .6; cursor: progress; }
.ck-hint { margin-top: 10px; font-size: 12.5px; color: var(--ink-faint); }
.ck-err { margin-top: 10px; font-size: 13.5px; color: var(--danger); display: none; }
.ck-err.on { display: block; }

.ck-loading { padding: 0 22px 22px; font-size: 14px; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; }
.ck-loading[hidden] { display: none; }
.ck-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: ck-spin .7s linear infinite; }
@keyframes ck-spin { to { transform: rotate(360deg); } }

.ck-results:empty { display: none; }
.ck-results { border-top: 1px solid var(--line-soft); }

.ck-examples { padding: 16px 22px 22px; border-top: 1px solid var(--line-soft); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ck-lbl { font-size: 12.5px; color: var(--ink-faint); margin-right: 4px; }
.ck-chip { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: all .14s; }
.ck-chip:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-wash); }

.ck-related { margin-top: 22px; display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; font-size: 14px; }
.ck-related a { color: var(--accent-deep); font-weight: 600; }
.ck-related a:hover { color: var(--navy); }

/* ---- client-side tools ---- */
.ck-client { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ck-client { grid-template-columns: 1fr 1fr; } }
.ck-fields { padding: 22px; display: grid; gap: 16px; align-content: start; }
@media (min-width: 900px) { .ck-fields { border-right: 1px solid var(--line-soft); } }
.ck-outputs { padding: 22px; display: grid; gap: 18px; align-content: start; background: var(--bg); }
@media (max-width: 899px) { .ck-outputs { border-top: 1px solid var(--line-soft); } }
.ck-field label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.ck-field input[type=text], .ck-field input[type=number], .ck-field input[type=datetime-local], .ck-field select, .ck-field textarea,
.ck-out input[type=text], .ck-out textarea { width: 100%; font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; transition: border-color .14s; }
.ck-field select { font-family: inherit; }
.ck-field textarea, .ck-out textarea { resize: vertical; line-height: 1.55; }
.ck-field input:focus, .ck-field select:focus, .ck-field textarea:focus { outline: none; border-color: var(--accent); }
.ck-check { display: flex !important; align-items: center; gap: 10px; font-weight: 500 !important; color: var(--ink-soft) !important; cursor: pointer; margin-bottom: 0 !important; }
.ck-check input { width: 17px; height: 17px; accent-color: var(--accent); }
.ck-help { margin-top: 5px; font-size: 12.5px; color: var(--ink-faint); }
.ck-out-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.ck-out-btns { display: inline-flex; gap: 6px; }
.ck-out input[readonly], .ck-out textarea[readonly] { background: var(--surface); }
.ck-out-html { font-size: 14px; color: var(--ink-soft); }
.ck-out-html:empty { display: none; }
.ck-examples-inline { padding: 0; border-top: none; }
.ck-qr { display: grid; place-items: center; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.ck-qr canvas, .ck-qr svg { max-width: 100%; height: auto; }

/* compare + report tables */
.ck-cmp { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 13.5px; }
.ck-cmp th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); background: var(--bg); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ck-cmp td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); font-family: 'IBM Plex Mono', monospace; word-break: break-all; vertical-align: top; }
.ck-cmp td:first-child { font-family: inherit; font-weight: 600; color: var(--navy); white-space: nowrap; }
.ck-cmp tr:last-child td { border-bottom: none; }
.ck-cmp .diff { background: oklch(0.97 0.035 85); }
.ck-cmp .miss { color: var(--ink-faint); font-style: italic; font-family: inherit; }
.ck-verdict { padding: 12px 14px; border-radius: 10px; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.ck-verdict.same { background: var(--accent-wash); color: var(--accent-deep); }
.ck-verdict.near { background: oklch(0.96 0.04 85); color: oklch(0.42 0.1 70); }
.ck-verdict.diff { background: oklch(0.96 0.03 25); color: var(--danger); }
.ck-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ck-tags code { font-family: 'IBM Plex Mono', monospace; font-size: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; color: var(--ink-soft); }
.ck-note-warn { margin-top: 8px; font-size: 13px; color: oklch(0.45 0.1 70); }

/* ---- results: summary + notes ---- */
.ck-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.ck-stat { background: var(--surface); padding: 14px 22px; }
.ck-stat .k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.ck-stat .v { margin-top: 4px; font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }

.ck-dest { padding: 20px 22px; border-bottom: 1px solid var(--line-soft); background: var(--accent-wash); }
.ck-dest .k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-deep); }
.ck-dest .v { margin-top: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 15.5px; color: var(--navy); word-break: break-all; font-weight: 600; }
.ck-dest .row { margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.ck-notes { list-style: none; padding: 14px 22px; border-bottom: 1px solid var(--line-soft); display: grid; gap: 8px; }
.ck-notes li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.ck-notes .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--ink-faint); }
.ck-notes .ok .dot { background: var(--accent); }
.ck-notes .warn .dot { background: oklch(0.72 0.15 75); }
.ck-notes .error .dot { background: var(--danger); }

.ck-sub-head { padding: 14px 22px 4px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.ck-mini-btn { font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent-deep); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.ck-mini-btn:hover { border-color: var(--accent); }

/* ---- hop timeline ---- */
.ck-hops { padding: 6px 22px 22px; }
.ck-hop { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 14px 0; position: relative; }
.ck-hop + .ck-hop { border-top: 1px dashed var(--line); }
.ck-code { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 15px; text-align: center; border-radius: 8px; padding: 7px 0; height: fit-content; background: var(--bg); color: var(--ink-soft); border: 1px solid var(--line); }
.ck-code.s2 { background: var(--accent-wash); color: var(--accent-deep); border-color: oklch(0.85 0.05 158); }
.ck-code.s3 { background: oklch(0.96 0.04 85); color: oklch(0.45 0.1 70); border-color: oklch(0.86 0.07 85); }
.ck-code.s4, .ck-code.s5 { background: oklch(0.96 0.03 25); color: var(--danger); border-color: oklch(0.86 0.07 25); }
.ck-hop .url { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--ink); word-break: break-all; }
.ck-hop .meta { margin-top: 5px; display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-faint); }
.ck-hop .meta b { color: var(--ink-soft); font-weight: 600; }
.ck-hop .to { margin-top: 6px; font-size: 12.5px; color: var(--ink-faint); }

/* ---- key/value rows (headers, meta tags) ---- */
.ck-kv { border-bottom: 1px solid var(--line-soft); }
.ck-kv-row { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 12px 22px; border-top: 1px solid var(--line-soft); align-items: start; }
.ck-kv-row:first-child { border-top: none; }
.ck-kv-row .k { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; color: var(--accent-deep); word-break: break-word; }
.ck-kv-row .v { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; color: var(--ink); word-break: break-all; }
.ck-kv-row .v.empty { font-family: inherit; font-style: italic; color: var(--ink-faint); }
.ck-kv-row .why { grid-column: 2; font-family: inherit; font-size: 12.5px; color: var(--ink-faint); margin-top: -8px; }

.ck-pill { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 9px; border-radius: 999px; background: var(--bg); color: var(--ink-soft); border: 1px solid var(--line); vertical-align: middle; margin-left: 8px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.ck-pill.good { background: var(--accent-wash); color: var(--accent-deep); border-color: oklch(0.85 0.05 158); }
.ck-pill.warn { background: oklch(0.96 0.04 85); color: oklch(0.45 0.1 70); border-color: oklch(0.86 0.07 85); }
.ck-pill.bad { background: oklch(0.96 0.03 25); color: var(--danger); border-color: oklch(0.86 0.07 25); }

/* ---- generic table (bulk status) ---- */
.ck-rtable { width: 100%; border-collapse: collapse; }
.ck-rtable th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); background: var(--bg); padding: 10px 22px; border-bottom: 1px solid var(--line); }
.ck-rtable td { padding: 12px 22px; font-size: 14px; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.ck-rtable td.u { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ink); word-break: break-all; }
.ck-rtable-wrap { overflow-x: auto; }

/* ---- share previews ---- */
.ck-previews { padding: 22px; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ck-pv-label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.ck-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); max-width: 520px; }
.ck-card .img { aspect-ratio: 1.91 / 1; background: var(--bg) center / cover no-repeat; display: grid; place-items: center; color: var(--ink-faint); font-size: 13px; border-bottom: 1px solid var(--line-soft); }
.ck-card .txt { padding: 10px 14px 12px; background: oklch(0.965 0.004 250); }
.ck-card .dom { font-size: 11.5px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); }
.ck-card .ttl { margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ck-card .dsc { margin-top: 3px; font-size: 13px; color: var(--ink-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ck-card.small { display: grid; grid-template-columns: 110px 1fr; }
.ck-card.small .img { aspect-ratio: auto; border-bottom: none; border-right: 1px solid var(--line-soft); min-height: 96px; }
.ck-serp { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--surface); max-width: 620px; }
.ck-serp .site { font-size: 13px; color: oklch(0.38 0.02 250); }
.ck-serp .ttl { margin-top: 4px; font-size: 19px; color: oklch(0.42 0.14 255); line-height: 1.3; }
.ck-serp .dsc { margin-top: 4px; font-size: 14px; color: oklch(0.38 0.02 250); line-height: 1.5; }

/* ---- content sections ---- */
.ck-cta { background: radial-gradient(120% 160% at 50% -20%, var(--accent-wash) 0%, transparent 55%), var(--surface); text-align: center; padding: 72px 0; border-top: 1px solid var(--line); }
.ck-cta h2 { font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.02em; font-weight: 700; max-width: 22ch; margin: 0 auto; line-height: 1.1; color: var(--navy); }
.ck-cta p { margin: 16px auto 0; font-size: 17px; color: var(--ink-soft); max-width: 52ch; }
.ck-cta-actions { margin-top: 28px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ck-btn { font-family: inherit; font-size: 15px; font-weight: 600; border-radius: var(--radius); border: 1px solid transparent; padding: 12px 22px; display: inline-block; transition: all .15s; }
.ck-btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
.ck-btn-primary:hover { background: var(--accent-deep); }
.ck-btn-line { color: var(--navy); border-color: var(--line); }
.ck-btn-line:hover { border-color: var(--navy); }

.ck-block { padding: 72px 0; border-top: 1px solid var(--line); }
.ck-block.ck-alt { background: var(--surface); }
.ck-sec-head { display: grid; gap: 12px; max-width: 64ch; }
.ck-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); }
.ck-sec-head h2 { font-size: clamp(26px, 3.6vw, 34px); letter-spacing: -0.02em; font-weight: 700; line-height: 1.12; color: var(--navy); }
.ck-sub { font-size: 16.5px; color: var(--ink-soft); }
.ck-prose { margin-top: 28px; max-width: 68ch; }
.ck-prose p { font-size: 16px; color: var(--ink-soft); }
.ck-prose p + p { margin-top: 14px; }

.ck-table-wrap { margin-top: 36px; border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; background: var(--surface); }
.ck-table-wrap table { width: 100%; border-collapse: collapse; min-width: 560px; }
.ck-table-wrap th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); background: var(--bg); padding: 12px 18px; border-bottom: 1px solid var(--line); }
.ck-table-wrap td { padding: 12px 18px; font-size: 14.5px; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.ck-table-wrap tr:last-child td { border-bottom: none; }
.ck-table-wrap td.ck-mono { color: var(--navy); font-weight: 700; font-family: 'IBM Plex Mono', monospace; white-space: nowrap; }

.ck-faq { margin-top: 36px; border-top: 1px solid var(--line); max-width: 84ch; }
.ck-faq details { border-bottom: 1px solid var(--line); }
.ck-faq summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 16.5px; font-weight: 600; color: var(--navy); }
.ck-faq summary::-webkit-details-marker { display: none; }
.ck-chev { flex: none; color: var(--accent-deep); transition: transform .2s; font-size: 19px; }
.ck-faq details[open] .ck-chev { transform: rotate(45deg); }
.ck-faq details p { padding: 0 0 20px; color: var(--ink-soft); font-size: 15px; max-width: 68ch; }

@media (max-width: 640px) {
  .ck-hero .wrap { padding: 40px 20px 32px; }
  .ck-input-row { flex-direction: column; }
  .ck-input-row button { align-self: stretch; }
  .ck-kv-row { grid-template-columns: 1fr; gap: 4px; }
  .ck-kv-row .why { grid-column: 1; margin-top: 0; }
  .ck-hop { grid-template-columns: 46px 1fr; gap: 10px; }
  .ck-card.small { grid-template-columns: 1fr; }
  .ck-card.small .img { border-right: none; border-bottom: 1px solid var(--line-soft); min-height: 140px; }
}