/**
 * demo-kit.css: the shared shell for every product demo on the site.
 *
 * Replaces watch-demo.css and cleanup-demo.css, which had drifted into two
 * different pictures of the same product and both leaned on the same tired
 * device: a fake macOS window with three traffic-light dots. That detail is
 * the single strongest "stock illustration" tell on a page, and it was doing
 * no work. The shell here is a thin bar with a domain in it, which is what a
 * real screen recording of a browser actually looks like once cropped.
 *
 * Everything is prefixed .dk- and nothing reuses a dossier.css class name. The
 * demos depict software rather than page furniture, so site type and colour
 * must not leak in. Colours are taken from scan-results.html and the extension
 * popup so a demo looks like a recording of the real thing.
 *
 * Controls are descendant-scoped (`.dk .dk-x`) wherever dossier.css styles the
 * same element type: an element selector like `input[type=search]` is (0,1,1)
 * and beats a lone class at (0,1,0), which once rendered a control at full
 * site scale inside a 320px pane.
 */

/* ── frame ──────────────────────────────────────────────────────────────── */
.dk{ margin:var(--s-4) 0 0; }

.dk-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-3); margin-bottom:var(--s-2);
}
.dk-title{
  font-size:var(--t-sm); font-weight:600; color:var(--ink); margin:0;
}
.dk-replay{
  flex-shrink:0; background:none; border:1px solid var(--rule); border-radius:3px;
  color:var(--ink-2); font-family:var(--sans); font-size:var(--t-xs);
  padding:0.2rem 0.55rem; cursor:pointer; opacity:0; transition:opacity .2s ease;
}
.dk-replay.on{ opacity:1; }
.dk-replay:hover{ border-color:var(--rule-strong); color:var(--ink); }

.dk-stage{
  position:relative; border-radius:10px; overflow:hidden;
  border:1px solid rgba(20,44,68,.22);
  box-shadow:0 10px 34px -18px rgba(10,25,45,.5);
  background:#fff; font-family:var(--sans);
  /* Contains the absolutely positioned cursor. */
  contain:paint;
}

/* A thin address strip. No traffic lights: see the file header. */
.dk-bar{
  display:flex; align-items:center; gap:7px;
  background:#eef2f7; border-bottom:1px solid rgba(20,44,68,.10);
  padding:7px 11px;
}
.dk-lock{ width:9px; height:9px; flex-shrink:0; opacity:.55; }
.dk-host{
  font-family:var(--mono); font-size:10.5px; color:#5b6b80;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dk-tag{
  margin-left:auto; flex-shrink:0; font-family:var(--mono); font-size:9px;
  letter-spacing:.1em; text-transform:uppercase; color:#93a3b8;
}

.dk-body{ position:relative; background:#f5f8fb; }

/* ── the cursor ─────────────────────────────────────────────────────────── */
/* The point of the whole kit: you can see what is being clicked. */
.dk-cursor{
  position:absolute; left:0; top:0; width:20px; height:20px;
  pointer-events:none; z-index:6; opacity:0;
  transform:translate(-40px,-40px);
  transition:transform .52s cubic-bezier(.33,.02,.2,1), opacity .2s ease;
  will-change:transform;
}
.dk-cursor.on{ opacity:1; }
.dk-cursor.press{ transform-origin:2px 2px; }
.dk-cursor svg{ display:block; filter:drop-shadow(0 1px 2px rgba(10,25,45,.45)); }

.dk-ring{
  position:absolute; left:0; top:0; width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%; border:2px solid #1f6ba3; pointer-events:none; z-index:5;
  opacity:0; transform:scale(.2);
}
.dk-ring.go{ animation:dk-ping .5s ease-out; }
@keyframes dk-ping{
  0%{ opacity:.85; transform:scale(.25); }
  100%{ opacity:0; transform:scale(1.5); }
}

/* Anything the cursor is about to hit gets a brief highlight, so the click
   reads even if the pointer is small on a phone. */
.dk-hot{ box-shadow:0 0 0 3px rgba(31,107,163,.22) !important; transition:box-shadow .15s ease; }

@media (prefers-reduced-motion: reduce){
  .dk-cursor{ transition:opacity .2s ease; }
  .dk-ring.go{ animation:none; }
}

/* ── caption ────────────────────────────────────────────────────────────── */
.dk-cap{
  min-height:2.4em; margin:var(--s-2) 0 0;
  font-size:var(--t-xs); color:var(--ink-3); line-height:1.55;
}
.dk-cap b{ color:var(--ink-2); font-weight:600; }

/* ── play scrim ─────────────────────────────────────────────────────────── */
.dk-scrim{
  position:absolute; inset:0; z-index:8; display:grid; place-items:center;
  background:rgba(240,244,249,.72);
  -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px);
}
.dk-scrim[hidden]{ display:none; }
.dk-play{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:#142c44; color:#fff; border:0; border-radius:6px;
  font-family:var(--sans); font-size:var(--t-xs); font-weight:600;
  padding:0.5rem 0.95rem; box-shadow:0 8px 24px -10px rgba(15,42,71,.75);
}
.dk-tri{
  width:0; height:0; border-left:8px solid #fff;
  border-top:5px solid transparent; border-bottom:5px solid transparent;
}

/* ── report furniture, shared by every demo ─────────────────────────────── */
.dk-pane{ padding:11px; }

.dk-card{
  background:#fff; border:1px solid #e3e7ec; border-radius:7px;
  padding:9px 11px; margin-bottom:8px;
}
.dk-card:last-child{ margin-bottom:0; }
.dk-card.good{ background:#f2f9f4; border-color:#cde3d5; }
.dk-card.gone{ opacity:.35; }

.dk-eyebrow{
  font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase;
  color:#1f6ba3; display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.dk-card.good .dk-eyebrow{ color:#3f6f5a; }
.dk-eyebrow em{ font-style:normal; color:#93a3b8; letter-spacing:.05em; text-transform:none; }

.dk-lede{ font-size:11.5px; color:#3c5570; line-height:1.5; margin:5px 0 0; }
.dk-lede b{ color:#142c44; font-weight:600; }

.dk-row{
  display:flex; align-items:center; justify-content:space-between; gap:9px;
  border:1px solid #edeff2; border-radius:6px; padding:7px 9px; margin-top:7px;
}
.dk-rowmain{ min-width:0; }
.dk-name{ font-size:11.5px; font-weight:600; color:#142c44; display:block; }
.dk-sub{
  font-size:10px; color:#8b95a5; display:block; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.dk-btn{
  flex-shrink:0; font-family:inherit; font-size:10px; font-weight:600;
  color:#fff; background:#142c44; border:0; border-radius:5px; padding:4px 9px;
  cursor:default;
}
.dk-btn.ghost{ background:#fff; color:#1f6ba3; border:1px solid #d3dbe4; }
.dk-btn.done{ background:#e6f0eb; color:#3f6f5a; }

.dk-pill{
  font-size:9px; font-weight:600; padding:1px 5px; border-radius:3px;
  border:1px solid transparent; white-space:nowrap;
}
.dk-pill.red{ background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.dk-pill.amber{ background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.dk-pill.grey{ background:#f7f8f9; color:#52525b; border-color:#e4e4e7; }
.dk-pill.green{ background:#e6f0eb; color:#3f6f5a; border-color:#cde3d5; }

/* ── the extension popup, for the cleanup demos ─────────────────────────── */
/* The popup FLOATS over the page; it is not a column in it.
   Rendered flush against the page content it read as an in-page side panel,
   which is a thing this extension does not do and a thing a store reviewer
   will call out. A gap, a shadow and a rounded edge make it read as what it
   is: the toolbar popup, open on top of the tab. */
.dk-split{
  display:grid; grid-template-columns:minmax(0,1fr) 236px;
  gap:12px; padding:0 12px 12px; background:#eef2f7;
}
.dk-left{
  background:#fff; min-width:0; border:1px solid rgba(20,44,68,.10);
  border-radius:0 0 6px 6px;
}
.dk-right{
  background:#f5f8fb; border:1px solid rgba(20,44,68,.16); border-radius:8px;
  display:flex; flex-direction:column; align-self:start; margin-top:10px;
  box-shadow:0 12px 30px -10px rgba(10,25,45,.34);
}
.dk-pop{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border-bottom:1px solid rgba(20,44,68,.11);
  padding:7px 9px; font-size:10.5px; color:#0f1a29; font-weight:600;
}
.dk-pop .dk-nl{ color:#1f6ba3; font-weight:400; }
.dk-pop em{ font-style:normal; font-weight:400; font-size:9.5px; color:#7d8b9d; }
.dk-popbody{ padding:9px; display:flex; flex-direction:column; gap:7px; flex:1; min-width:0; }

.dk-field{
  font-family:inherit; font-size:11px; color:#0f1a29; background:#fff;
  border:1px solid rgba(20,44,68,.2); border-radius:5px; padding:5px 8px;
}
.dk-field .dk-caret{
  display:inline-block; width:1px; height:11px; background:#142c44;
  vertical-align:-2px; margin-left:1px; animation:dk-blink 1s step-end infinite;
}
@keyframes dk-blink{ 50%{ opacity:0; } }
.dk-hint{ font-size:9.5px; color:#8b95a5; }

/* the platform's own list, on the left */
.dk-item{
  display:flex; align-items:center; gap:9px; padding:7px 11px;
  border-bottom:1px solid #f0f2f4; font-size:11px; color:#111;
}
.dk-item:last-child{ border-bottom:0; }
.dk-item.dim{ opacity:.3; }
.dk-item.cut .dk-text{ color:#9aa5b1; }
.dk-tick{
  width:15px; height:15px; border-radius:50%; border:1.5px solid #c7c7c7;
  flex-shrink:0; position:relative;
}
.dk-tick.on{ background:#1f6ba3; border-color:#1f6ba3; }
.dk-tick.on::after{
  content:""; position:absolute; left:3.5px; top:4px; width:6px; height:3px;
  border-left:1.5px solid #fff; border-bottom:1.5px solid #fff; transform:rotate(-45deg);
}
.dk-text{ min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dk-when{ font-size:9.5px; color:#8b95a5; flex-shrink:0; font-variant-numeric:tabular-nums; }

.dk-listhead{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 11px; border-bottom:1px solid #e9edf1;
  font-size:11px; font-weight:600; color:#142c44;
}
.dk-listhead em{ font-style:normal; font-weight:400; font-size:10px; color:#8b95a5; }

@media (max-width: 720px){
  .dk-split{ grid-template-columns:minmax(0,1fr); }
  .dk-right{ margin-top:0; }
}