/* ============================================================
   12 Tells panel — toolbar row + video-tutorial trigger
   Splits the old full-width "Open the 12 Tells Workbench" bar
   into a row: the real workbench button at its natural size on
   the left, a video-tutorial trigger on the right. Purely a
   layout change — #openTool keeps its id, classes, and click
   behavior untouched; diagnostic.js needs nothing new here.
   ============================================================ */

.tp-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 18px 16px;
  padding-top:16px;
  border-top:1px solid rgba(122,164,255,.14);
}

/* Override the production !important width/centering rules so the
   real workbench button sits at its natural size on the left,
   instead of stretching to fill the row. */
#tellList .tp-toolbar .more-tells{
  width:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:13px 20px !important;
  justify-content:center !important;
  flex:0 0 auto;
  border:1px solid #2b80ff !important;
  background:linear-gradient(180deg,#2b80ff,#0758f0) !important;
  color:#fff !important;
  box-shadow:0 14px 32px rgba(18,104,255,.32),inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition:transform .2s ease,box-shadow .2s ease !important;
}
#tellList .tp-toolbar .more-tells:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(18,104,255,.4),inset 0 1px 0 rgba(255,255,255,.3) !important;
}
#tellList .tp-toolbar .more-tells span:last-child{ color:#fff !important; }

.tp-video-trigger{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 16px 8px 8px; border-radius:999px;
  border:1px solid rgba(122,164,255,.28);
  background:linear-gradient(180deg,rgba(15,28,51,.7),rgba(7,14,28,.78));
  color:#cfe4ff; cursor:pointer; flex:0 0 auto;
  font-family:var(--font); font-size:.82rem; font-weight:700; letter-spacing:-.01em;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.tp-video-trigger:hover,.tp-video-trigger:focus-visible{
  border-color:rgba(69,215,255,.5);
  background:linear-gradient(180deg,rgba(20,43,78,.82),rgba(8,19,38,.86));
  transform:translateY(-1px);
}
.tp-video-circle{
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(180deg,#2b80ff,#0758f0);
  color:#fff; box-shadow:0 6px 18px rgba(18,104,255,.35);
}
.tp-video-circle svg{ margin-left:1.5px; } /* optical centering for the play triangle */

@media (max-width:560px){
  .tp-toolbar{ flex-direction:column; align-items:stretch; gap:10px; }
  #tellList .tp-toolbar .more-tells{ width:100% !important; }
  .tp-video-trigger{ justify-content:center; }
}

/* ── Video modal — a lightweight lightbox, ready for a real embed later.
   Fixed positioning so the panel's own overflow:hidden never clips it. ── */
.tp-video-modal{
  position:fixed; inset:0; z-index:2147483000; isolation:isolate;
  display:none; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(2,5,12,.78);
  backdrop-filter:blur(3px);
}
.tp-video-modal.tp-open{ display:flex; }
.tp-video-modal-inner{
  position:relative; z-index:1; width:min(880px,100%); aspect-ratio:16/9;
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(122,164,255,.28);
  background:linear-gradient(160deg,rgba(10,22,42,.97),rgba(3,8,18,.98));
  box-shadow:0 40px 100px rgba(0,0,0,.55);
}
.tp-video-stage{ position:absolute; inset:0; display:grid; place-items:center; }
.tp-video-stage video,
.tp-video-stage iframe {
  width:100%;
  height:100%;
  border:0;
}

.tp-video-stage video {
  display:block;
  object-fit:contain;
  background:#02050b;
}
.tp-video-placeholder{
  margin:0; font-family:var(--mono); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:#7188a9;
}
.tp-video-close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background:rgba(3,8,18,.7); color:#fff; font-size:1.2rem; line-height:1; cursor:pointer;
}
.tp-video-close:hover{ background:rgba(3,8,18,.92); border-color:rgba(255,255,255,.34); }