/* TPAL Explainer Deck: exact look & feel */
.tpa-xdeck{ --brand:#1133AF; --ink:#111; --muted:#e9ecf7; --ring:rgba(17,51,175,.12); --bg:#fff; --border:#eef2ff;
  font:16px/1.45 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:var(--ink);
  background:linear-gradient(180deg,#fff, #fafbff); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.04), 0 0 0 6px var(--ring); padding:1rem; margin:1rem 0 1.25rem; }
.tpa-xdeck .hdr{ display:flex; gap:.75rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.tpa-xdeck .title{ display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--brand); }
.tpa-xdeck .title .dot{ width:10px;height:10px;border-radius:999px;background:var(--brand); box-shadow:0 0 0 3px var(--muted); }

/* horizontal strip */
.tpa-xdeck .bar-wrap{ position:relative; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; cursor:grab; -webkit-overflow-scrolling:touch; padding:.25rem 0 .5rem; }
.tpa-xdeck .bar-wrap:focus{ outline:none; box-shadow:none; }
.tpa-xdeck .bar-wrap.is-dragging{ cursor:grabbing }
.tpa-xdeck .bar{ display:flex; gap:.6rem; padding:.25rem .25rem; }
.tpa-xdeck .chip{ scroll-snap-align:start; background:#fff; border:1px solid var(--border); border-radius:12px; padding:.7rem .8rem; min-width:260px; max-width:340px; flex:0 0 auto; box-shadow:0 1px 2px rgba(0,0,0,.03); }

/* make cards feel tappable but keep links selectable */
.tpa-xdeck .chip { cursor:pointer; user-select:none; }
.tpa-xdeck .chip .link {
  cursor: pointer;
  user-select: text;
}

@media (min-width:680px){ .tpa-xdeck .chip{ min-width:300px } }
/* JS will set a fixed width on desktop so exactly 4 are visible */

.tpa-xdeck .term{ font-weight:700; margin-bottom:.15rem }
.tpa-xdeck .plain{ color:#1f2937; font-size:.95rem; white-space:pre-line }
.tpa-xdeck .link{ font-size:.85rem; color:var(--brand); text-underline-offset:2px; }
.tpa-xdeck .tools{ margin-top:.4rem; display:flex; gap:.45rem; flex-wrap:wrap }

/* breadcrumbs */
.tpa-xdeck .crumbs{ display:flex; justify-content:center; gap:.35rem; margin-top:.5rem }
.tpa-xdeck .crumbs .dot{ width:8px; height:8px; border-radius:999px; background:#c7d2fe; transition:transform .2s ease }
.tpa-xdeck .crumbs .dot[aria-current="true"]{ background:var(--brand); transform:scale(1.2) }
@media (max-width: 680px){
  .tpa-xdeck .deck-actions .crumbs{ display:none; }
}

/* actions */
.tpa-xdeck .deck-actions{ position:relative; display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:.6rem; padding:.2rem 0; min-height:2.2rem; }
.tpa-xdeck .deck-actions .crumbs{ margin:0 auto; }
.tpa-xdeck .deck-actions .definition-toggle{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:#fff;
  color:var(--brand);
  border:1px solid rgba(17,51,175,.2);
  border-radius:999px;
  padding:.42rem .85rem;
  font-weight:700;
  font-size:.85rem;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(12,23,67,.14);
  transition:color .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tpa-xdeck .deck-actions .definition-toggle__input{
  width:14px;
  height:14px;
  margin:0;
  border:2px solid var(--brand);
  border-radius:4px;
  background:#fff;
  display:inline-block;
  position:relative;
  appearance:none;
}
.tpa-xdeck .deck-actions .definition-toggle__input:checked{
  background:var(--brand);
  border-color:var(--brand);
}
.tpa-xdeck .deck-actions .definition-toggle__input:checked::after{
  content:'';
  position:absolute;
  left:3px;
  top:0px;
  width:4px;
  height:7px;
  border:2px solid #fff;
  border-top:0;
  border-left:0;
  transform:rotate(45deg);
}
.tpa-xdeck .deck-actions .definition-toggle:hover{
  background:var(--brand);
  color:#fff;
  border-color:transparent;
  box-shadow:0 14px 30px rgba(12,23,67,.18);
}
.tpa-xdeck .deck-actions .definition-toggle:hover .definition-toggle__input{
  border-color:#fff;
  background:#fff;
}
.tpa-xdeck .deck-actions .definition-toggle:hover .definition-toggle__input:checked::after{
  border-color:var(--brand);
}
.tpa-xdeck .deck-actions .definition-toggle:focus-within{
  box-shadow:0 0 0 3px rgba(17,51,175,.2), 0 12px 28px rgba(12,23,67,.14);
}
.tpa-xdeck .deck-actions .expand-btn{ position:absolute; right:0; top:50%; transform:translateY(-50%); margin:0; }
.tpa-xdeck .expand-btn,
.tpa-xdeck .shrink-btn{
  background:#fff;
  color:var(--brand);
  border:1px solid rgba(17,51,175,.2);
  border-radius:999px;
  padding:.42rem .95rem;
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(12,23,67,.14);
  transition:color .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tpa-xdeck .expand-btn:hover,
.tpa-xdeck .shrink-btn:hover{
  background:var(--brand);
  color:#fff;
  border-color:transparent;
  box-shadow:0 14px 30px rgba(12,23,67,.18);
}
.tpa-xdeck .expand-btn:active,
.tpa-xdeck .shrink-btn:active{
  box-shadow:0 6px 16px rgba(12,23,67,.14);
}
.tpa-xdeck .shrink-wrap{ display:none; margin-top:.8rem; justify-content:center; }
.tpa-xdeck .shrink-wrap .shrink-btn{ padding-left:1.3rem; padding-right:1.3rem; }

/* expanded mode */
.tpa-xdeck.is-expanded .deck-actions{ display:none; }
.tpa-xdeck.is-expanded .shrink-wrap{ display:flex; }
.tpa-xdeck.is-expanded .bar-wrap{ overflow:visible; scroll-snap-type:none; cursor:auto; }
.tpa-xdeck.is-expanded .bar{ flex-wrap:wrap; }
.tpa-xdeck.is-expanded .chip{ flex:1 1 300px; min-width:260px; max-width:100%; cursor:default; }
.tpa-xdeck.is-expanded .tools{ margin-top:.6rem; }

/* glossary highlights + popover */
.tpal-glossary-trigger{
  cursor:help;
  text-decoration:none;
  color:#1133AF;
  font-weight:600;
  border-bottom:2px solid rgba(17,51,175,.4);
  padding:0 4px;
  margin:0 -4px;
  border-radius:4px;
  transition:all .2s ease-in-out;
  -webkit-tap-highlight-color:rgba(30,91,215,.18);
}
.tpal-glossary-trigger:focus{
  background-color:rgba(17,51,175,.2);
  outline:2px solid #1133AF;
  outline-offset:2px;
  border-bottom-color:transparent;
}

.tpal-glossary-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.25);
  z-index:999998;
}
.tpal-glossary-popover{
  display:none;
  position:fixed;
  left:50%;
  top:14%;
  transform:translateX(-50%);
  width:min(760px, calc(100vw - 24px));
  max-height:min(70vh, 700px);
  overflow:auto;
  background:#fff;
  border:1px solid rgba(0,0,0,.18);
  border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.25);
  padding:14px;
  z-index:999999;
  -webkit-overflow-scrolling:touch;
}
.tpal-glossary-popover .tpal-glossary-hdr{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.tpal-glossary-popover .tpal-glossary-title{
  font-weight:700;
  font-size:1rem;
  line-height:1.2;
}
.tpal-glossary-popover .tpal-glossary-close{
  border:0;
  background:transparent;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  padding:2px 6px;
  margin:-2px -6px 0 0;
}
.tpal-glossary-popover .tpal-glossary-content p{
  margin:0 0 .75rem;
  white-space:pre-line;
}
@media (prefers-color-scheme: dark){
  .tpal-glossary-popover{
    background:#111;
    color:#eee;
    border-color:rgba(255,255,255,.14);
    box-shadow:0 14px 40px rgba(0,0,0,.55);
  }
  .tpal-glossary-backdrop{ background:rgba(0,0,0,.45); }
}

/* auto-hide empty decks (if duplicated without terms) */
.tpa-xdeck[data-empty="true"]{ display:none }

/* Sidebar controls (editor) */
.tpal-term-item{
	border:1px solid #e0e0e0;
	padding:12px;
	margin-bottom:12px;
	border-radius:6px;
	background:#fff;
}
.tpal-term-item .components-base-control{ margin-bottom:8px; }
.tpal-term-actions{ display:flex; gap:6px; justify-content:flex-end; margin-top:8px; }
.tpal-term-item .components-textarea-control__input{ min-height:72px; }