/* HK Ads Desk - the Inspector page and its chip in the top bar.
   Calm by design: one slow scanning beam over the account grid, a status ring, check cards that open. */

/* ---------- the chip (top bar, every page) ---------- */
.insp-chip{--c:var(--good);display:flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 9px;border:0;border-radius:9px;cursor:pointer;
  font:500 12px/1 var(--sans);color:var(--soft);background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--hair2);white-space:nowrap;
  transition:color .15s,background .15s,box-shadow .15s}
.insp-chip .ic{width:15px;height:15px;color:var(--c)}
.insp-chip:hover{color:var(--text);background:rgba(255,255,255,.06)}
.insp-chip[data-s=watch]{--c:var(--warn)}
.insp-chip[data-s=you]{--c:var(--bad);color:var(--text);box-shadow:inset 0 0 0 1px rgba(255,95,87,.45)}
.insp-chip[data-s=you] .ic{animation:blink 1.4s infinite}
@media (max-width:1000px){.insp-chip span{display:none}.insp-chip{padding:0 8px}}

/* ---------- page ---------- */
.insp-kick{display:flex;align-items:center;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--accent);margin-bottom:10px}
.insp-kick i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.insp-head .acts .btn.busy .ic{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.insp-band{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:0;margin:6px 0 16px;border-radius:var(--r);overflow:hidden;
  background:#0a0b0d;box-shadow:var(--edge),0 0 0 1px var(--hair)}
.insp-verdict{--c:var(--good);--p:0;display:flex;align-items:center;gap:18px;padding:22px 22px;border-right:1px solid var(--hair)}
.insp-verdict[data-s=watch]{--c:var(--warn)}
.insp-verdict[data-s=you]{--c:var(--bad)}
.insp-ring{position:relative;flex:none;width:96px;height:96px}
.insp-ring>svg{width:100%;height:100%;transform:rotate(-90deg)}
.insp-ring circle{fill:none;stroke-width:6}
.insp-ring .trk{stroke:rgba(255,255,255,.06)}
.insp-ring .arc{stroke:var(--c);stroke-linecap:round;stroke-dasharray:calc(var(--p) * 100) 100;transition:stroke-dasharray 1s var(--ease),stroke .4s;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 60%,transparent))}
.insp-shield{position:absolute;inset:0;display:grid;place-items:center;color:var(--c)}
.insp-shield .ic{width:34px;height:34px}
.insp-vt h2{margin:0;font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.insp-vt p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.45}

.insp-scan{position:relative;padding:18px 18px 14px;overflow:hidden;min-width:0}
.insp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(20px,1fr));gap:6px;position:relative;z-index:1}
.insp-grid .c{display:block;aspect-ratio:1;border-radius:5px;cursor:pointer;background:rgba(62,207,142,.28);box-shadow:inset 0 0 0 1px rgba(62,207,142,.35);
  transition:transform .15s,background .3s,box-shadow .3s}
.insp-grid .c:hover{transform:scale(1.35);z-index:2}
.insp-grid .c.fixed{background:rgba(169,216,240,.3);box-shadow:inset 0 0 0 1px rgba(169,216,240,.6)}
.insp-grid .c.old{background:rgba(240,180,76,.35);box-shadow:inset 0 0 0 1px rgba(240,180,76,.7);animation:insPulse 2.2s ease-in-out infinite}
.insp-grid .c.you{background:rgba(255,95,87,.45);box-shadow:inset 0 0 0 1px rgba(255,95,87,.85),0 0 10px rgba(255,95,87,.5)}
.insp-grid .c.idle{background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.insp-grid .c.hid{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 2px,transparent 2px 5px)}
@keyframes insPulse{50%{opacity:.45}}
.insp-beam{position:absolute;top:0;bottom:0;left:0;width:90px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(169,216,240,.10) 60%,rgba(169,216,240,.32) 96%,rgba(255,255,255,.55) 100%);
  animation:insBeam 5.5s cubic-bezier(.45,0,.55,1) infinite}
@keyframes insBeam{0%{transform:translateX(-120px)}100%{transform:translateX(calc(100vw))}}
.insp-key{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font:400 11px/1.3 var(--mono);color:var(--muted)}
.insp-key span{display:inline-flex;align-items:center;gap:6px}
.insp-key .k{width:9px;height:9px;border-radius:3px;background:rgba(62,207,142,.5)}
.insp-key .k.fixed{background:rgba(169,216,240,.6)}.insp-key .k.old{background:rgba(240,180,76,.7)}.insp-key .k.you{background:rgba(255,95,87,.8)}
.insp-key .k.hid{background:repeating-linear-gradient(135deg,rgba(255,255,255,.25) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.insp-key .k.idle{background:rgba(255,255,255,.08)}

.insp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.insp-stat{padding:14px 16px;border-radius:12px;background:var(--s1);box-shadow:var(--edge),0 0 0 1px var(--hair)}
.insp-stat b{display:block;font-size:28px;font-weight:300;letter-spacing:-.04em;line-height:1.05}
.insp-stat span{font-size:12.5px;color:var(--muted)}
.insp-stat[data-t=good] b{color:var(--good)}.insp-stat[data-t=ice] b{color:var(--accent)}.insp-stat[data-t=warn] b{color:var(--warn)}.insp-stat[data-t=bad] b{color:var(--bad)}

.insp-checks{display:grid;gap:8px}
.insp-ck{border-radius:12px;background:var(--s1);box-shadow:var(--edge),0 0 0 1px var(--hair);overflow:hidden;transition:box-shadow .2s}
.insp-ck[data-s=you]{box-shadow:var(--edge),0 0 0 1px rgba(255,95,87,.45)}
.insp-ck[data-s=watch]{box-shadow:var(--edge),0 0 0 1px rgba(240,180,76,.35)}
.insp-ck.chg{animation:insChg 1.6s var(--ease)}
@keyframes insChg{0%{background:rgba(169,216,240,.14)}100%{background:var(--s1)}}
.insp-ck-h{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 14px;border:0;background:transparent;
  color:var(--text);cursor:pointer;text-align:left;font-family:var(--sans)}
.insp-ck-h:hover{background:rgba(255,255,255,.025)}
.insp-ck-h>.ic{color:var(--muted);transition:transform .2s}
.insp-ck.open .insp-ck-h>.ic{transform:rotate(180deg)}
.insp-st{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent);--c:var(--good)}
.insp-st.ice{--c:var(--accent)}.insp-st.warn{--c:var(--warn)}.insp-st.bad{--c:var(--bad)}.insp-st.idle{--c:var(--soft)}
.insp-st .ic{width:17px;height:17px}
.insp-ck-t{min-width:0;display:grid;gap:2px}
.insp-ck-t b{font-size:14px;font-weight:500}
.insp-ck-t small{font-size:12.5px;color:var(--muted);line-height:1.35}
.insp-ck-b{display:none;padding:0 14px 14px 58px}
.insp-ck.open .insp-ck-b{display:block}
.insp-ck-b p{margin:0 0 8px;color:var(--soft);font-size:13px;line-height:1.5}
.insp-ck-b ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.insp-ck-b li{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:12px;font-size:12.5px;padding:6px 10px;border-radius:7px;background:rgba(255,255,255,.025)}
.insp-ck-b li a,.insp-ck-b li b{color:var(--text);font-weight:500;text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insp-ck-b li a:hover{color:var(--accent)}
.insp-ck-b li span{color:var(--muted);font-family:var(--mono);font-size:11.5px;letter-spacing:-.02em;overflow-wrap:anywhere}

.insp-log{margin-top:22px}
.insp-log h3{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;margin:0 0 10px}
.insp-logl{display:grid;gap:2px}
.insp-li{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:12px;align-items:center;padding:7px 10px;border-radius:7px;font-size:12.5px;color:var(--soft)}
.insp-li:nth-child(odd){background:rgba(255,255,255,.02)}
.insp-li i{width:7px;height:7px;border-radius:50%;background:var(--good)}
.insp-li.no i{background:var(--warn)}
.insp-li time{font:400 11px var(--mono);color:var(--muted)}
.insp-show{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13px;color:var(--soft);cursor:pointer}
.insp-show input{width:auto}

@media (max-width:820px){
  .insp-band{grid-template-columns:1fr}
  .insp-verdict{border-right:0;border-bottom:1px solid var(--hair);padding:18px}
  .insp-ring{width:78px;height:78px}
  .insp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .insp-ck-b{padding:0 12px 12px}
  .insp-ck-b li{grid-template-columns:1fr;gap:2px}
  .insp-ck-h{grid-template-columns:auto minmax(0,1fr) auto;gap:10px}
  .insp-ck-h>.ic{display:none}
  .insp-grid{grid-template-columns:repeat(auto-fill,minmax(15px,1fr));gap:5px}
}
@media (prefers-reduced-motion:reduce){.insp-beam,.insp-grid .c.old,.insp-chip[data-s=you] .ic{animation:none}}
@media (pointer:coarse){.insp-beam{animation-duration:9s}}

/* ---------- marks the Inspector leaves on the rest of the desk ---------- */
.tile .oldtag{position:absolute;right:9px;bottom:8px;font:500 9.5px/1 var(--mono);letter-spacing:.06em;color:var(--warn);text-transform:uppercase}
.tile.old{background-image:repeating-linear-gradient(135deg,rgba(240,180,76,.06) 0 6px,transparent 6px 12px)}
.reel .igold{margin-left:6px;color:var(--warn);font:400 11px var(--mono)}
.cc-v.boostonly{font-size:13px;color:var(--soft)}
.hid-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 4px;padding:11px 14px;border-radius:12px;font-size:12.5px;line-height:1.45;color:var(--muted);
  background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px var(--hair)}
.hid-note.hidden{display:none}
.hid-note>.ic{flex:none;color:var(--accent)}
.hid-note>span{flex:1 1 240px;min-width:0}
.hid-note>.btn{flex:none}