/* Practical Topic / reusable views 0.4.0 */
.tbp-hero,.tbp-detail-hero{padding:clamp(48px,7vw,92px) 0 46px;background:#f5f7fb}
.tbp-hero h1,.tbp-detail-hero h1{font-size:clamp(30px,5vw,58px);letter-spacing:-.04em;line-height:1.15;margin:12px 0}
.tbp-hero p:not(.tb-eyebrow),.tbp-detail-hero p:not(.tb-eyebrow){color:#5f6978;max-width:650px;line-height:1.75}
.tbp-library{padding:42px 0 96px}
.tbp-controls{display:flex;gap:10px;align-items:end;flex-wrap:wrap;background:#fff;padding:17px 0 24px;margin-bottom:24px;border-bottom:1px solid #e4e8ee}
.tbp-controls label{font-size:12px;font-weight:700;color:#425066}
.tbp-controls input,.tbp-controls select{border:1px solid #ccd3df;border-radius:7px;padding:12px 14px;min-height:43px;background:#fff;color:#18263b}
.tbp-controls input{flex:1 1 250px;min-width:160px}.tbp-controls select{min-width:155px}
.tbp-controls button,.tbp-card__buttons button,.tbp-code-head button{border:1px solid #132947;border-radius:6px;background:#132947;color:#fff;padding:11px 14px;cursor:pointer;font-weight:650}
.tbp-controls button:hover,.tbp-code-head button:hover{background:#40547a}
.tbp-clear{font-size:13px;padding:10px;color:#384b68}
.tbp-list-heading{display:flex;align-items:baseline;gap:14px;margin-bottom:19px}.tbp-list-heading span{font-size:13px;color:#667184}
.tbp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tbp-card{min-width:0;border:1px solid #e2e7ed;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 4px 16px #12234408}
.tbp-card--visual-large{grid-column:span 2}.tbp-card--code-first{border-color:#bac7dc}
.tbp-card__stage{min-height:195px;background:#f8fafc;overflow:hidden}.tbp-card--visual-large .tbp-card__stage{min-height:280px}
.tbp-demo-frame{display:block;width:100%;height:205px;border:0;background:#f8fafc}
.tbp-card--visual-large .tbp-demo-frame{height:290px}
.tbp-fallback{height:205px;display:grid;place-items:center;color:#788293;font-size:13px}
.tbp-card__body{padding:18px}.tbp-card__meta{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#667184;font-weight:700}
.tbp-card h2{font-size:19px;line-height:1.4;margin:8px 0 6px;letter-spacing:-.02em}.tbp-card h2 a{color:#18263b;text-decoration:none}
.tbp-card__body > p{font-size:13px;line-height:1.7;color:#586476;margin:0 0 18px}
.tbp-card__buttons{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.tbp-card__buttons a,.tbp-card__buttons button{font-size:12px;text-decoration:none;padding:8px 12px;border-radius:5px}
.tbp-card__buttons a{color:#213c5d;background:#eaf0f8}.tbp-card__buttons button{background:white;color:#213c5d;border-color:#bac6d6}
.tbp-code-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#edf1f6;font-size:12px;color:#374861;margin-top:10px}
.tbp-code-head button{font-size:12px;padding:5px 10px}.tbp-code-block{background:#131e31;color:#e6edfa;padding:15px;overflow:auto;font:12px/1.75 Consolas,Monaco,monospace;max-height:260px;margin:0;white-space:pre;tab-size:2}
.tbp-pagination{margin:34px 0;display:flex;justify-content:center;gap:12px}.tbp-pagination a,.tbp-pagination span{padding:9px 12px;border:1px solid #e0e5ec;text-decoration:none}
.tbp-empty{text-align:center;padding:80px 20px;background:#f5f7fa;border-radius:12px}.tbp-empty h2{font-size:23px}
.tbp-detail-sections{padding-top:38px;padding-bottom:100px;max-width:1040px}
.tbp-detail-section{margin:0 0 42px;padding:0 0 35px;border-bottom:1px solid #e4e8ee}.tbp-detail-section h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.03em;margin:0 0 12px}.tbp-detail-section>p{line-height:1.8;color:#586476}
.tbp-detail-stage{border-radius:12px;border:1px solid #dfe5ed;overflow:hidden}.tbp-detail-stage .tbp-demo-frame{height:340px}.tbp-detail-section .tbp-code-block{max-height:580px;font-size:13px}
.tbp-back{font-size:13px;color:#3b5675;text-decoration:none}.tbp-home-promo{background:#f5f7fb}
@media(max-width:950px){.tbp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tbp-card--visual-large{grid-column:span 1}}
@media(max-width:620px){.tbp-grid{grid-template-columns:1fr}.tbp-card--visual-large{grid-column:auto}.tbp-controls{align-items:stretch}.tbp-controls label{width:100%}.tbp-controls input,.tbp-controls select{width:100%;flex:1 1 100%}.tbp-detail-stage .tbp-demo-frame{height:260px}}

/* Hover library: a stable demo surface with real surrounding padding.
   Visual-large remains available to other topics and single pages. */
.tbp-grid--hover .tbp-card--visual-large{grid-column:auto}
.tbp-grid--hover .tbp-card{display:flex;flex-direction:column}
.tbp-grid--hover .tbp-card__body{display:flex;flex:1;flex-direction:column}
.tbp-grid--hover .tbp-card__body>p{flex:1}
.tbp-grid--hover .tbp-card__buttons{margin-top:auto}

/* The iframe always hosts the interaction after first hover/focus.
   A size-matched resting poster remains visible until then, including in
   full-page captures, and is never shown again after activation. */
.tbp-grid--hover .tbp-card__stage{
  position:relative;
  box-sizing:border-box;
  height:292px;
  min-height:292px;
  padding:18px;
  overflow:hidden;
  background:#f8fafc;
}
.tbp-grid--hover .tbp-demo-frame,
.tbp-grid--hover .tbp-card--visual-large .tbp-demo-frame{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#f8fafc;
}
.tbp-card__poster{
  position:absolute;
  inset:18px;
  width:calc(100% - 36px);
  height:calc(100% - 36px);
  object-fit:contain;
  background:#f8fafc;
  z-index:1;
  pointer-events:none;
  transition:none;
}
/* Reveal automatically *before* entering the viewport. Never change preview
   visibility on first hover: this would interrupt the actual CSS animation. */
.tbp-card__stage.tbp-preview-ready .tbp-card__poster,
.tbp-card__stage:focus-within .tbp-card__poster{display:none}
@media (max-width:620px){
  .tbp-grid--hover .tbp-card__stage{height:282px;min-height:282px;padding:16px}
  .tbp-grid--hover .tbp-card__poster{inset:16px;width:calc(100% - 32px);height:calc(100% - 32px)}
}

/* Topic-scoped four-axis search, designed for any future Practical Tip topic. */
.tbp-finder{margin:0 0 28px;border:1px solid #e1e7ef;border-radius:12px;padding:clamp(18px,2.8vw,30px);background:#fff}
.tbp-finder__heading{margin:0 0 16px}
.tbp-finder__heading h2{margin:0 0 5px;font-size:clamp(17px,2vw,21px);color:#172840;letter-spacing:-.02em}
.tbp-finder__heading p{margin:0;color:#657184;font-size:13px;line-height:1.7}
.tbp-target-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;align-items:center}
.tbp-target-tab{display:inline-flex;gap:9px;align-items:center;text-decoration:none;color:#32445e;border:1px solid #d8e0ec;border-radius:8px;background:#f7f9fc;padding:9px 14px;font-size:13px;line-height:1.4;font-weight:650;transition:background-color .15s,border-color .15s}
.tbp-target-tab:hover,.tbp-target-tab:focus-visible{background:#e8effa;border-color:#a8bdd7;color:#152a45}
.tbp-target-tab.is-active{background:#162e4c;color:white;border-color:#162e4c}
.tbp-target-count{font-size:11px;line-height:1.4;opacity:.75;font-variant-numeric:tabular-nums}
.tbp-facet-form{display:flex;gap:12px;align-items:end;flex-wrap:wrap;background:#f8fafc;border-radius:9px;padding:16px}
.tbp-field{display:flex;flex:1 1 155px;flex-direction:column;gap:7px;min-width:130px}
.tbp-field--search{flex:2 1 225px}
.tbp-field label{color:#3a4a60;font-size:12px;font-weight:700}
.tbp-field input,.tbp-field select{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid #cbd5e3;border-radius:7px;background:white;color:#1f2d42;font-size:14px}
.tbp-field input:focus-visible,.tbp-field select:focus-visible{outline:2px solid #496ca3;outline-offset:1px}
.tbp-facet-submit{border:1px solid #162e4c;border-radius:7px;min-height:44px;background:#162e4c;color:#fff;font-size:13px;font-weight:700;padding:10px 16px;cursor:pointer}
.tbp-facet-submit:hover{background:#34516f}
.tbp-facet-form .tbp-clear{min-height:44px;display:inline-flex;align-items:center;font-size:12px;white-space:nowrap}
.tbp-active-filters{font-size:12px;color:#50617b;margin:13px 0 0;line-height:1.7}
.tbp-card__meta .tbp-card__motion{margin-left:7px;border-left:1px solid #cbd5e3;padding-left:8px}
@media(max-width:650px){.tbp-finder{padding:17px}.tbp-facet-form{padding:13px;gap:12px}.tbp-field,.tbp-field--search{flex-basis:100%}.tbp-facet-submit{flex:1}.tbp-target-tab{padding:9px 11px}}

.tbp-detail-facets{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tbp-detail-facets a{display:inline-flex;align-items:center;gap:7px;color:#1d3552;text-decoration:none;border:1px solid #d2dceb;border-radius:7px;background:#fff;padding:8px 12px;font-size:12px;font-weight:650}
.tbp-detail-facets a span{color:#68788c;font-size:11px;font-weight:500}
.tbp-detail-facets a:hover{background:#eaf0f8}


/* Detail modal v0.4.6 – native dialog, dedicated live preview and scroll. */
.tbp-detail-modal{box-sizing:border-box;width:min(960px,calc(100vw - 32px));max-width:960px;max-height:min(90dvh,960px);margin:auto;padding:0;border:1px solid #d6e0eb;border-radius:14px;background:#fff;color:#172840;box-shadow:0 22px 80px #0a182d55;overflow:hidden}
.tbp-detail-modal::backdrop{background:rgb(11 22 38 / 68%);backdrop-filter:blur(3px)}
.tbp-detail-modal__shell{display:flex;flex-direction:column;max-height:min(90dvh,960px);min-height:0}
.tbp-detail-modal__header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px clamp(18px,3vw,34px);background:#fff;border-bottom:1px solid #e5eaf1;flex:none}
.tbp-detail-modal__headings{display:flex;flex-direction:column;min-width:0;gap:5px}
.tbp-detail-modal__headings>span{font-size:10px;letter-spacing:.12em;font-weight:750;color:#728096}
.tbp-detail-modal__headings>strong{font-size:clamp(18px,2vw,23px);line-height:1.35;letter-spacing:-.025em;color:#152844}
.tbp-detail-modal__close{width:42px;height:42px;display:grid;place-items:center;font-size:28px;line-height:1;flex:none;border:1px solid #cfd9e7;border-radius:8px;background:#f7f9fc;color:#263a55;cursor:pointer}
.tbp-detail-modal__close:hover,.tbp-detail-modal__close:focus-visible{background:#e8eff8}
.tbp-detail-modal__content{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:clamp(18px,3vw,34px)}
.tbp-modal-detail__summary{font-size:14px;line-height:1.85;color:#53647a;margin:0 0 14px}
.tbp-detail-modal .tbp-detail-facets{margin:0 0 24px}
.tbp-detail-modal .tbp-detail-sections{padding:0;max-width:none}
.tbp-detail-modal .tbp-detail-section{margin:0 0 26px;padding:0 0 26px}
.tbp-detail-modal .tbp-detail-section h2{font-size:clamp(19px,2.5vw,25px)}
.tbp-detail-modal .tbp-detail-stage .tbp-demo-frame{height:280px}
.tbp-detail-modal .tbp-detail-section .tbp-code-block{max-height:300px}
.tbp-detail-modal__footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:12px clamp(18px,3vw,34px);border-top:1px solid #e5eaf1;background:#fff;flex:none}
.tbp-detail-modal__footer a{font-size:13px;color:#284e83;text-decoration:underline;text-underline-offset:3px}
.tbp-detail-modal__footer button{border:1px solid #152b4b;background:#152b4b;color:#fff;border-radius:6px;padding:9px 18px;cursor:pointer}
.tbp-modal-status{padding:35px 12px;text-align:center;font-size:14px;color:#53647a}
.tbp-ad-slot{grid-column:1 / -1;margin:25px auto;width:100%;max-width:100%;min-width:0;text-align:center;contain:layout}
@media(max-width:620px){
.tbp-detail-modal{width:calc(100vw - 12px);max-height:96dvh;border-radius:9px}
.tbp-detail-modal__shell{max-height:96dvh}
.tbp-detail-modal__header{padding:12px 16px}
.tbp-detail-modal__content{padding:16px}
.tbp-detail-modal .tbp-detail-stage .tbp-demo-frame{height:250px}
.tbp-detail-modal__footer{padding:12px 16px}
}
@media(prefers-reduced-motion:reduce){.tbp-detail-modal::backdrop{backdrop-filter:none}}

/* v0.4.7: one card CTA opens details + Source Code in the existing dialog. */
.tbp-card__buttons a[data-tbp-detail-link]{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;line-height:1.5}