/* Kestrel — Crawl Debugger redesign (feature layer).
   Builds on the .k-* component layer (styles.css) + app shell (shell.css).
   All debugger-specific pieces are dbg-prefixed. North star: glance and
   confirm, not configure then run. Ported from the design handoff. */

/* ── shell overrides: the two-column decision/results layout ──────────── */
.dbg-main { padding: 20px 28px; gap: 0; }
.dbg-head { margin-bottom: 12px; }
.dbg-wrap { display: grid; grid-template-columns: 568px 1fr; gap: 22px; align-items: start; }
.dbg-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dbg-caps { font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); }
@media (max-width: 1100px) {
  .dbg-wrap { grid-template-columns: 1fr; }
}

/* preview-mode banner */
.dbg-banner { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--bg-inset); margin-bottom: 12px; }
.dbg-banner-txt { font-size: var(--text-sm); color: var(--text-secondary); }
.dbg-banner-txt b { font-weight: var(--weight-semibold); color: var(--text-primary); }

/* ── (a) command bar ──────────────────────────────────────────────────── */
.dbg-cmd { display: flex; align-items: center; gap: 10px; }
.dbg-cmd-field { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; }
.dbg-cmd-glyph { position: absolute; left: 11px; color: var(--text-tertiary); display: flex; pointer-events: none; }
.dbg-cmd-url { flex: 1; height: 36px; padding-left: 32px; font-size: var(--text-sm); }
.dbg-run { height: 36px; padding: 0 18px; }
.dbg-cmd-hint { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: var(--text-sm); color: var(--text-tertiary); }

/* ── (b) visual preview — the centerpiece ─────────────────────────────── */
.dbg-preview { border: 1px solid var(--border-default); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-surface); box-shadow: var(--shadow-card); }
.dbg-preview-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px 7px 12px; border-bottom: 1px solid var(--border-hairline); background: var(--bg-raised); }
.dbg-preview-top-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dbg-preview-url { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbg-preview-frame { position: relative; height: 244px; overflow: hidden; background: var(--white); }
.dbg-preview-frame.is-doc { background: var(--n-50); }
.dbg-preview-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border-hairline); background: var(--bg-surface); }
.dbg-preview-actions { display: flex; align-items: center; gap: 4px; }
.dbg-credit { color: var(--rust-700); }

/* real captured screenshot (backbone) + live iframe (best-effort) */
.dbg-preview-shot { position: absolute; inset: 0; width: 100%; height: auto; display: block; object-fit: cover; object-position: top; }
.dbg-preview-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--white); }
.dbg-preview-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px; color: var(--text-tertiary); font-size: var(--text-sm); }

/* skeleton / loading frame */
.dbg-skel { position: absolute; inset: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 11px; }
.dbg-skel-line { height: 11px; border-radius: 4px; background: linear-gradient(90deg, var(--n-100), var(--n-50), var(--n-100)); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .dbg-skel-line { animation: dbg-shimmer 1.5s linear infinite; }
  @keyframes dbg-shimmer { to { background-position: -200% 0; } }
}
.dbg-skel-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* gradient scrim so the captured page fades at the crop edge, never a hard cut */
.dbg-preview-frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(to bottom, transparent, var(--white)); pointer-events: none; z-index: 1; }
.dbg-preview-frame.is-doc::after { background: linear-gradient(to bottom, transparent, var(--n-50)); }
.dbg-preview-frame.no-scrim::after { display: none; }

/* ── decision panel (mode + confidence + evidence) ────────────────────── */
.dbg-panel { border: 1px solid var(--border-hairline); border-radius: var(--r-lg); background: var(--bg-surface); box-shadow: var(--shadow-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.dbg-panel-row { display: flex; align-items: center; gap: 12px; }
.dbg-panel-q { font-size: var(--text-sm); color: var(--text-secondary); }

.dbg-modes { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--r-md); overflow: hidden; flex: none; background: var(--bg-surface); }
.dbg-mode-btn { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border: none; background: transparent; cursor: pointer; font: var(--weight-medium) var(--text-sm) / 1 var(--font-ui); color: var(--text-secondary); border-right: 1px solid var(--border-default); }
.dbg-mode-btn:last-child { border-right: none; }
.dbg-mode-btn:hover { background: var(--bg-raised); color: var(--text-primary); }
.dbg-mode-btn.is-active { background: var(--n-900); color: var(--text-on-ink); }
.dbg-mode-sub { font-family: var(--font-mono); font-size: var(--text-2xs); opacity: 0.7; font-weight: var(--weight-regular); }

.dbg-evidence { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dbg-evidence-txt { font-size: var(--text-sm); color: var(--text-primary); }
.dbg-evidence-txt b { font-weight: var(--weight-semibold); }
.dbg-overridden { font-size: var(--text-sm); color: var(--text-tertiary); }

/* ── (7) content-type chips ───────────────────────────────────────────── */
.dbg-types { border: 1px solid var(--border-hairline); border-radius: var(--r-lg); background: var(--bg-surface); box-shadow: var(--shadow-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.dbg-types-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dbg-types-tools { display: flex; align-items: center; gap: 4px; }
.dbg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dbg-chip { display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 10px; border-radius: var(--r-full); border: 1px solid var(--border-default); background: var(--bg-surface); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.dbg-chip:hover { border-color: var(--border-strong); }
.dbg-chip-check { width: 11px; height: 11px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); }
/* on (selected) — default state for all chips */
.dbg-chip.is-on { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-surface); }
.dbg-chip.is-on .dbg-chip-check { color: var(--ok-dot); }
/* likely — auto-highlighted hint ring (still on, just emphasized) */
.dbg-chip.is-likely { border-color: var(--accent); color: var(--rust-700); background: var(--accent-tint); box-shadow: 0 0 0 1px var(--accent); }
.dbg-chip.is-likely .dbg-chip-check { color: var(--rust-600); }
.dbg-chip-tag { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: 0.02em; color: var(--rust-600); margin-left: 1px; }
/* off — toggled out */
.dbg-chip.is-off { border-style: dashed; color: var(--text-disabled); background: transparent; }
.dbg-chip.is-off .dbg-chip-check { visibility: hidden; }
.dbg-recall { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--text-secondary); }
.dbg-recall b { font-weight: var(--weight-semibold); color: var(--text-primary); }

/* ── (c) pipeline step cards ──────────────────────────────────────────── */
.dbg-runhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dbg-steps { display: flex; flex-direction: column; gap: 10px; }
.dbg-step { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--bg-surface); }
.dbg-step.is-active { border-color: var(--proc-border); background: var(--proc-bg); }
.dbg-step.is-error { border-color: var(--danger-border); background: var(--danger-bg); }
.dbg-step-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 1px; }
.dbg-step-num { width: 22px; height: 22px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font: var(--weight-semibold) var(--text-xs) / 1 var(--font-mono); flex: none; }
.dbg-step-num--queued { background: var(--idle-bg); border: 1px solid var(--border-default); color: var(--text-tertiary); }
.dbg-step-num--active { background: var(--proc-dot); color: var(--white); }
.dbg-step-num--done { background: var(--ok-dot); color: var(--white); }
.dbg-step-num--error { background: var(--danger-dot); color: var(--white); }
.dbg-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dbg-step-top { display: flex; align-items: center; gap: 10px; }
.dbg-step-name { font-weight: var(--weight-semibold); font-size: var(--text-base); }
.dbg-step-dur { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.dbg-step-note { font-size: var(--text-sm); color: var(--text-secondary); }
.dbg-step-stage { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-tertiary); }
.dbg-adv { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--text-tertiary); cursor: pointer; padding: 4px 0; }
.dbg-adv-caret { transition: transform var(--dur-fast) var(--ease-out); }
.dbg-adv-body { margin-top: 8px; }

/* ── (d) results ──────────────────────────────────────────────────────── */
.dbg-result-card { border: 1px solid var(--border-hairline); border-radius: var(--r-lg); background: var(--bg-surface); box-shadow: var(--shadow-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.dbg-verdict { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dbg-verdict-note { font-size: var(--text-sm); color: var(--text-tertiary); }
.dbg-statrow { display: flex; gap: 22px; flex-wrap: wrap; }
.dbg-stat { display: flex; flex-direction: column; gap: 2px; }
.dbg-stat-v { font-family: var(--font-mono); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dbg-stat-l { font-size: var(--text-2xs); color: var(--text-tertiary); }

/* relevance verdict */
.dbg-rel { display: flex; flex-direction: column; gap: 10px; }
.dbg-rel-title { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--lh-md); }
.dbg-score { display: flex; align-items: center; gap: 10px; }
.dbg-score-num { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dbg-score-bar { flex: 1; height: 6px; border-radius: var(--r-full); background: var(--n-100); overflow: hidden; }
.dbg-score-fill { height: 100%; border-radius: var(--r-full); background: var(--ok-dot); }
.dbg-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.dbg-meta-k { font-size: var(--text-2xs); color: var(--text-tertiary); }
.dbg-meta-v { font-size: var(--text-sm); color: var(--text-primary); }
.dbg-why { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--text-link); cursor: pointer; }
.dbg-why-body { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--lh-sm); }
.dbg-v2 { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--bg-inset); font-size: var(--text-sm); color: var(--text-tertiary); }
.dbg-v2-tag { font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); border: 1px solid var(--border-default); border-radius: var(--r-sm); padding: 3px 6px; background: var(--bg-surface); }

/* discovered links table */
.dbg-links { border: 1px solid var(--border-hairline); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-surface); box-shadow: var(--shadow-card); }
.dbg-links-scroll { overflow-x: auto; }
.dbg-links-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 14px; border-bottom: 1px solid var(--border-hairline); }
.dbg-links-title { font-weight: var(--weight-semibold); font-size: var(--text-base); }
.dbg-links-title .dbg-links-count { font-family: var(--font-mono); color: var(--text-tertiary); font-weight: var(--weight-regular); margin-left: 6px; }
.dbg-links-meta { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-tertiary); }
.dbg-thumb { width: 58px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--border-default); overflow: hidden; position: relative; flex: none; background: var(--bg-inset); cursor: pointer; }
.dbg-thumb-strip { position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, var(--n-100) 0 5px, var(--n-50) 5px 10px); }
.dbg-thumb-clip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: var(--weight-medium) var(--text-2xs) / 1 var(--font-mono); color: var(--text-tertiary); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-full); padding: 2px 7px; white-space: nowrap; }
.dbg-thumb.has-shot .dbg-thumb-strip { background-image: none; }
.dbg-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dbg-th-title { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbg-confbar { width: 46px; height: 5px; border-radius: var(--r-full); background: var(--n-100); overflow: hidden; display: inline-block; vertical-align: middle; }
.dbg-confbar > i { display: block; height: 100%; background: var(--warn-dot); border-radius: var(--r-full); }
.dbg-cat { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); }
.dbg-method { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.dbg-table-foot { padding: 9px 14px; border-top: 1px solid var(--border-hairline); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--text-sm); color: var(--text-tertiary); }

/* ── (e) save confirm card ────────────────────────────────────────────── */
.dbg-save { border: 1px solid var(--border-default); border-radius: var(--r-lg); background: var(--bg-surface); box-shadow: var(--shadow-card); padding: 15px 16px; display: flex; flex-direction: column; gap: 11px; }
.dbg-save-intent { font-size: var(--text-base); color: var(--text-primary); line-height: var(--lh-base); }
.dbg-save-intent b { font-weight: var(--weight-semibold); }
.dbg-save-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.dbg-save-chip { font-family: var(--font-mono); font-size: var(--text-2xs); padding: 2px 8px; border-radius: var(--r-full); background: var(--bg-inset); border: 1px solid var(--border-hairline); color: var(--text-secondary); }
.dbg-save-side { font-size: var(--text-sm); color: var(--text-tertiary); line-height: var(--lh-sm); }
.dbg-save-foot { display: flex; align-items: center; gap: 10px; }
.dbg-save-progress { display: flex; align-items: center; gap: 10px; flex: 1; }
.dbg-save-est { font-size: var(--text-sm); color: var(--text-secondary); }
.dbg-save-status { font-size: var(--text-sm); border-radius: var(--r-md); padding: 9px 12px; border: 1px solid var(--border-hairline); background: var(--bg-inset); color: var(--text-secondary); line-height: var(--lh-sm); }
.dbg-save-status.is-success { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
.dbg-save-status.is-error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }

/* ── misc atoms used by the debugger ──────────────────────────────────── */
.k-dot--idle { background: var(--text-tertiary); }
.dbg-console { background: var(--n-900); color: var(--n-100); border-radius: var(--r-md); padding: 12px 14px; font: var(--weight-regular) var(--text-sm) / 1.55 var(--font-mono); white-space: pre-wrap; word-break: break-word; margin: 0; }