/* TestKit — a code-isolated, dependency-free UI test overlay.
   Self-contained styling (no Horatio design tokens) so the panel can be lifted
   into another project unchanged. All classes are tk- prefixed. */
.tk-panel { position: fixed; z-index: 2147483000; top: 76px; right: 24px; width: 340px;
  max-height: 82vh; display: flex; flex-direction: column; background: #1b1d23; color: #e7e9ee;
  border: 1px solid #343845; border-radius: 12px; box-shadow: 0 18px 52px -14px rgba(0,0,0,.65);
  font-family: -apple-system, system-ui, "Segoe UI", sans-serif; font-size: 13px; line-height: 1.5; overflow: hidden; }
.tk-hidden { display: none !important; }
.tk-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: grab;
  background: #23262e; border-bottom: 1px solid #343845; user-select: none; }
.tk-head:active { cursor: grabbing; }
.tk-title { font-weight: 600; font-size: 13px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-badge { font-family: ui-monospace, monospace; font-size: 11px; color: #9aa0ad; }
.tk-x { background: none; border: none; color: #9aa0ad; cursor: pointer; font-size: 17px; line-height: 1; padding: 0 6px; border-radius: 6px; }
.tk-x:hover { background: #343845; color: #fff; }
.tk-body { padding: 12px; overflow-y: auto; }
.tk-intro { color: #c2c7d0; margin-bottom: 12px; }
.tk-pick { width: 100%; box-sizing: border-box; background: #11131a; color: #e7e9ee; border: 1px solid #343845;
  border-radius: 8px; padding: 8px; font-family: inherit; font-size: 13px; margin-bottom: 10px; }
.tk-start { width: 100%; padding: 9px 0; border-radius: 8px; border: 1px solid #3a5fa8; background: #2b4a86;
  color: #eaf1ff; font-weight: 600; cursor: pointer; }
.tk-start:hover { background: #335699; }
.tk-step-meta { font-family: ui-monospace, monospace; font-size: 11px; color: #9aa0ad; margin-bottom: 6px; }
.tk-instruction { font-weight: 500; margin-bottom: 10px; }
.tk-type { background: #11131a; border: 1px solid #343845; border-radius: 8px; padding: 8px 28px 8px 10px;
  margin-bottom: 10px; font-family: ui-monospace, monospace; font-size: 12px; color: #cfe3ff; word-break: break-word; position: relative; }
.tk-cap { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.tk-type .tk-cap { color: #6f7686; }
.tk-copy { position: absolute; top: 7px; right: 7px; font-size: 10px; background: #343845; border: none;
  color: #cfd3dc; border-radius: 5px; padding: 2px 7px; cursor: pointer; }
.tk-copy:hover { background: #444a59; }
.tk-expect { background: #12211a; border: 1px solid #245038; border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; color: #bfe9cf; }
.tk-expect .tk-cap { color: #5f9e79; }
.tk-actions { display: flex; gap: 8px; }
.tk-btn { padding: 9px 0; border-radius: 8px; border: 1px solid #343845; background: #23262e; color: #e7e9ee;
  font-size: 13px; font-weight: 600; cursor: pointer; }
.tk-pass { flex: 1; border-color: #2f6f49; color: #7ee2a4; }
.tk-pass:hover { background: #173524; }
.tk-fail { flex: 1; border-color: #7a3a3a; color: #f2a3a3; }
.tk-fail:hover { background: #3a1d1d; }
.tk-skip { flex: 0 0 auto; padding: 9px 12px; color: #9aa0ad; }
.tk-skip:hover { background: #2c303a; }
.tk-note { width: 100%; box-sizing: border-box; margin: 10px 0; background: #11131a; border: 1px solid #343845;
  border-radius: 8px; color: #e7e9ee; padding: 8px; font-family: inherit; font-size: 12px; resize: vertical; min-height: 48px; }
.tk-note:focus { outline: none; border-color: #4a6fa5; }
.tk-foot { padding: 8px 12px; border-top: 1px solid #343845; display: flex; align-items: center; gap: 10px; background: #1b1d23; }
.tk-prog { flex: 1; height: 4px; background: #343845; border-radius: 2px; overflow: hidden; }
.tk-prog-bar { height: 100%; background: #4c8bf5; width: 0; transition: width .2s; }
.tk-link { font-size: 11px; color: #7fa8f0; background: none; border: none; cursor: pointer; padding: 0; }
.tk-link:hover { text-decoration: underline; }
.tk-done { text-align: center; }
.tk-tally { font-family: ui-monospace, monospace; font-size: 14px; margin: 10px 0; }
.tk-tally .ok { color: #7ee2a4; } .tk-tally .bad { color: #f2a3a3; }
.tk-next { color: #c2c7d0; margin: 10px 0; text-align: left; }
/* Default stacks above the AI button (.aifab, bottom:24, 58px) and the feedback
   launcher (bottom:92) so the three don't overlap out of the box. Draggable
   (touch + mouse) — touch-action:none lets a finger-drag move it; position persists. */
.tk-launch { position: fixed; z-index: 2147482000; bottom: 144px; right: 18px; width: 40px; height: 40px;
  border-radius: 50%; background: #23262e; color: #cfd3dc; border: 1px solid #343845; cursor: grab;
  font-size: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.45); display: grid; place-items: center;
  touch-action: none; }
.tk-launch:hover { background: #2c303a; color: #fff; }
.tk-launch:active { cursor: grabbing; }
.tk-launch--dragging { opacity: .9; box-shadow: 0 10px 26px rgba(0,0,0,.6); }

/* Home button in the header (back to the player menu). */
.tk-headbtn { background: none; border: none; color: #9aa0ad; cursor: pointer; font-size: 15px; line-height: 1;
  padding: 0 6px; border-radius: 6px; }
.tk-headbtn:hover { background: #343845; color: #fff; }

/* Home: the current test as a tappable Play card. */
.tk-cards { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.tk-card { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: #23262e; border: 1px solid #343845; border-radius: 9px; padding: 10px 11px; color: #e7e9ee; }
.tk-card:hover { background: #2c303a; border-color: #3f4453; }
.tk-card__main { flex: 1; min-width: 0; }
.tk-card__title { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-card__sub { font-family: ui-monospace, monospace; font-size: 11px; color: #9aa0ad; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-card__act { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: #7fa8f0; align-self: flex-start; }
/* Run-aware card: last-run outcome + an optional "why it's back" revision note. */
.tk-card__status { font-size: 11px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-st-fail { color: #f2a3a3; } .tk-st-part { color: #e6c07a; } .tk-st-pass { color: #7ee2a4; } .tk-st-new { color: #9aa0ad; }
.tk-card__rev { font-size: 11px; color: #cbb6e6; margin-top: 3px; white-space: normal; }
/* Cross-run dedup banner: N steps carried from a prior run + "Run all anyway". */
.tk-carry { display: flex; flex-direction: column; gap: 7px; background: #14241c; border: 1px solid #2f6f49;
  border-radius: 8px; padding: 9px 10px; margin-bottom: 12px; color: #bfe9cf; font-size: 12px; }
.tk-carry__all { align-self: flex-start; background: #1f3a2a; border: 1px solid #3a7a52; color: #bfe9cf;
  border-radius: 7px; padding: 4px 11px; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.tk-carry__all:hover { background: #265033; }

/* Element picker (ported from the feedback overlay) */
.tk-pick { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  padding: 8px 0; margin-top: 8px; background: #1d2740; border: 1px solid #34507f; color: #cfe0ff;
  border-radius: 8px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.tk-pick:hover { background: #28406a; }
.tk-target { margin-top: 7px; background: #11131a; border: 1px solid #343845; border-radius: 8px;
  padding: 7px 9px; font-size: 11px; }
.tk-target__sel { font-family: ui-monospace, monospace; color: #9ad1ff; word-break: break-all; }
.tk-target__txt { color: #c2c7d0; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-target__clear { background: none; border: none; color: #9aa0ad; cursor: pointer; font-size: 11px;
  margin-top: 4px; padding: 0; }
.tk-target__clear:hover { color: #fff; }
.tk-hl { position: fixed; z-index: 2147483500; pointer-events: none; border: 2px solid #4c8bf5;
  background: rgba(76,139,245,.14); border-radius: 3px; transition: all .04s linear; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.tk-hl__tag { position: absolute; top: -19px; left: -2px; background: #4c8bf5; color: #fff;
  font-family: ui-monospace, monospace; font-size: 10px; padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
body.tk-picking, body.tk-picking * { cursor: crosshair !important; }