/* Hook details panel (hook-detail.js) + the split view that hosts it (list 1/3 left, details 2/3 right on desktop).
   Works with site.css tokens (public pages) and app.css tokens (dashboard). */
.hd2 { --hd-serif: var(--font-display, var(--serif, "Instrument Serif", Georgia, serif)); --hd-sans: var(--font-body, var(--sans, "Inter", system-ui, sans-serif));
  --hd-lime: var(--accent, #B4E04A); --hd-lime-soft: var(--accent-soft, #EEF8D6); --hd-ink: var(--ink, #0E0F10); --hd-muted: var(--muted, #5E6672); --hd-line: rgba(14,15,16,.08);
  font-family: var(--hd-sans); color: var(--hd-ink); font-size: 14px; container-type: inline-size; }
.hd2 { max-width: 100%; }
.hd2-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 0 14px; }
.hd2-head b { font-size: 16px; }
.hd2-head span { color: var(--hd-muted); }
.hd-pill.lime { background: var(--hd-lime); }
.hd-pill { display: inline-block; padding: 5px 10px; border-radius: 999px; background: #DCEBFA; color: var(--hd-ink) !important; font: 600 12px/1.1 var(--hd-sans); }
.hd2-cols { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); grid-template-areas: "side main" "use main"; grid-template-rows: auto 1fr; gap: 14px 22px; align-items: start; }
.hd-side { grid-area: side; } .hd2-main { grid-area: main; min-width: 0; } .hd-usewrap { grid-area: use; }
/* narrow panels (home-page drawer, phones, small split panels): one column, tabs before the form */
@container (max-width: 820px) {
  .hd2-cols { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main" "use"; grid-template-rows: auto; }
  .hd-side { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: start; } /* thumbnail beside the tiles, not above them */
  .hd-side .hd-thumb { grid-row: span 3; aspect-ratio: 9 / 14; max-height: 340px; }
  .hd-thumb.playing { aspect-ratio: 9 / 16; max-height: 70vh; }
}

/* left column */
.hd-side { display: grid; gap: 12px; }
.hd-thumb { position: relative; aspect-ratio: 9 / 13; max-height: 420px; width: 100%; border-radius: 20px; overflow: hidden; background: #E9F0F7; }
.hd-ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 25% 20%, #E4F2C4, transparent 55%), radial-gradient(circle at 80% 80%, #D5E7F8, transparent 55%), #F2F5F8; }
.hd-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; border: 0; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(14,15,16,.35); cursor: pointer; z-index: 2; transition: transform .15s; }
.hd-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.hd-play svg { width: 22px; height: 22px; margin-left: 3px; }
.hd-thumb.playing { aspect-ratio: 9 / 16; background: #000; }
.hd-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hd-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hd-chip { position: absolute; padding: 6px 10px; border-radius: 999px; background: rgba(14,15,16,.78); color: #fff; font: 600 12px/1 var(--hd-sans); }
.hd-chip.bl { bottom: 10px; left: 10px; }
.hd-links { display: flex; justify-content: space-between; gap: 8px; }
.hd-links a, .hd-copy.plain { display: inline-flex; align-items: center; gap: 6px; color: #2B6FC9; font: 600 13px var(--hd-sans); text-decoration: none; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.hd-links svg { width: 15px; height: 15px; }
.hd-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* light metric tiles (white cards; engagement tinted lime) */
.hd-tiles div { background: #fff; border: 1px solid var(--hd-line); border-radius: 16px; padding: 10px 12px; box-shadow: 0 4px 14px -12px rgba(40,70,110,.45); }
.hd-tiles div.hi { background: var(--hd-lime-soft); border-color: rgba(180,224,74,.7); }
.hd-tiles span { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--hd-muted); }
.hd-tiles span svg { width: 13px; height: 13px; }
.hd-tiles b { display: block; margin-top: 2px; font: 400 26px/1.05 var(--hd-serif); }
.hd-use { background: #fff; border-radius: 18px; padding: 14px; display: grid; gap: 8px; box-shadow: 0 4px 14px -10px rgba(40,70,110,.4); }
.hd-use h3 { margin: 0; font: 400 22px/1.1 var(--hd-serif); }
.hd-use p { margin: 0; color: var(--hd-muted); font-size: 13px; }
.hd-use label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--hd-muted); }
.hd-use input, .hd-use select, .hd-remix input { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid #DCE4EC; background: #F7F9FC; font: 500 14px var(--hd-sans); color: var(--hd-ink); }
.hd-use.locked { text-align: center; justify-items: center; }
.hd-use.locked > svg { width: 22px; height: 22px; color: var(--hd-muted); }
.hd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 999px; padding: 11px 16px; background: var(--hd-ink); color: #fff; font: 600 14px var(--hd-sans); cursor: pointer; }
.hd-btn.lime { background: var(--hd-lime); color: var(--hd-ink); }
.hd-btn svg { width: 16px; height: 16px; }
.hd-btn:disabled { opacity: .5; cursor: wait; }

/* tabs */
.hd-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--hd-line); margin-bottom: 14px; position: sticky; top: var(--hd-sticky-top, 0px); background: var(--bg, #EEF4FB); z-index: 4; box-shadow: 0 -12px 0 var(--bg, #EEF4FB); } /* solid: content never shows through */
.modal:not(.split-panel) .hd-tabs { background: #fff; box-shadow: 0 -12px 0 #fff; }
.drawer .hd2 { --hd-sticky-top: 73px; } /* the drawer's own header height */
.hd-tabs button { border: 0; background: none; padding: 12px 8px; font: 600 13px var(--hd-sans); color: var(--hd-muted); cursor: pointer; border-bottom: 3px solid transparent; }
.hd-tabs button[aria-selected="true"] { color: var(--hd-ink); border-bottom-color: var(--hd-lime); }
.hd-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hd-panel[hidden] { display: none; }
.hd-sec { background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: 0 4px 14px -10px rgba(40,70,110,.35); }
.hd-sec-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.hd-sec h3 { margin: 0; font: 600 12px/1 var(--hd-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--hd-muted); }
.hd-sec h3::before { content: ""; display: inline-block; width: 4px; height: 12px; border-radius: 2px; background: var(--hd-lime); margin-right: 7px; vertical-align: -1px; }
.hd-sec h4 { margin: 12px 0 4px; font-size: 13px; } .hd-sec h4.ok { color: #3E6B0A; } .hd-sec h4.no { color: #B3261E; }
.hd-sec ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.hd-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.hd-kv dt { color: var(--hd-muted); } .hd-kv dd { margin: 0; font-weight: 600; }
.hd-why { margin: 0; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hd-why.open { display: block; }
.hd-why-full { margin: 0; white-space: pre-line; }
.hd-more-btn { border: 0; background: none; padding: 6px 0 0; font: 600 13px var(--hd-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--hd-ink); }
.hd-hook { margin: 0 0 10px; font: 400 26px/1.1 var(--hd-serif); }
.hd-tpl { position: relative; background: var(--hd-lime-soft); border: 1px dashed rgba(120,160,40,.7); border-radius: 14px; padding: 10px 90px 12px 14px; }
.hd-tpl > span { font: 600 10.5px/1 var(--hd-sans); letter-spacing: .08em; text-transform: uppercase; color: #4D6B12; }
.hd-tpl p { margin: 6px 0 0; font: 400 20px/1.2 var(--hd-serif); }
.hd-tpl .hd-copy { position: absolute; right: 10px; top: 10px; }
mark { background: none; color: #B3261E; font-weight: 600; }
.hd-copy { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hd-line); border-radius: 999px; padding: 6px 11px; background: #fff; color: var(--hd-ink); font: 600 12px/1 var(--hd-sans); cursor: pointer; white-space: nowrap; }
.hd-copy svg { width: 14px; height: 14px; }
.hd-remix { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 8px; margin-top: 10px; }
.hd-versions { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.hd-versions li p { margin: 0 0 4px; font: 400 18px/1.2 var(--hd-serif); }
.hd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hd-pair div { background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 4px 14px -10px rgba(40,70,110,.35); }
.hd-pair span { font: 600 11px/1 var(--hd-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--hd-muted); }
.hd-pair p { margin: 6px 0 0; }
.hd-table { overflow-x: auto; }
.hd-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hd-table th { text-align: left; font-size: 11.5px; color: var(--hd-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--hd-line); }
.hd-table td { vertical-align: top; padding: 8px; border-bottom: 1px solid var(--hd-line); }
.hd-table td:nth-child(2) { white-space: nowrap; color: var(--hd-muted); }
.hd-pattern { margin: 0; font: 400 22px/1.2 var(--hd-serif); }
.hd-pre { margin: 0; white-space: pre-wrap; font: 400 13.5px/1.55 var(--hd-sans); max-height: 320px; overflow: auto; background: #F7F9FC; border-radius: 12px; padding: 12px; }
.hd-raw summary { cursor: pointer; font-weight: 600; }
.hd-raw .hd-pre { margin-top: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.hd-muted { color: var(--hd-muted); margin: 0; } .hd-muted svg { width: 14px; height: 14px; vertical-align: -2px; }
.hd-fine { font-size: 12px; color: var(--hd-muted); margin: 6px 0 0; } .hd-fine a { color: inherit; }
.hd-err { color: #B3261E; margin: 8px 0 0; }
.hd-script .ok { color: #3E6B0A; font-weight: 700; margin: 6px 0; }
.hd-script ol { padding-left: 18px; margin: 6px 0 0; display: grid; gap: 6px; font-size: 13px; }
.hd-loading { display: flex; align-items: center; gap: 5px; color: var(--hd-muted); font-size: 13px; padding: 10px 2px; }
.hd-loading i { width: 7px; height: 7px; border-radius: 50%; background: var(--hd-lime); animation: hd-dot 1s infinite ease-in-out; }
.hd-loading i:nth-child(2) { animation-delay: .15s; } .hd-loading i:nth-child(3) { animation-delay: .3s; }
.hd-loading span { margin-left: 6px; }
@keyframes hd-dot { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.hd-locked { position: relative; border-radius: 18px; overflow: hidden; background: #fff; }
.hd-blur { filter: blur(5px); padding: 18px; color: var(--hd-muted); user-select: none; }
.hd-unlock { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; background: rgba(255,255,255,.55); }
.hd-unlock svg { width: 20px; height: 20px; } .hd-unlock p { margin: 0; font-weight: 600; }

/* ---------- split view: list on the left third, details on the right two thirds (desktop) ---------- */
@media (min-width: 1024px) {
  body.split-open .split-panel { overflow-x: clip; position: fixed; top: 10px; right: 10px; bottom: 10px; left: calc(33.333vw + 6px); width: auto; z-index: 41; overflow-y: auto;
    border-radius: 28px; background: var(--bg, #EEF4FB); box-shadow: 0 30px 80px rgba(20,30,45,.22); border: 1px solid rgba(14,15,16,.06); transform: none; max-height: none; }
  body.split-open .drawer-backdrop, body.split-open .modal-back { display: none !important; }
  body.split-open .split-list { width: calc(33.333vw - 30px); max-width: none; margin-left: 10px; margin-right: 0; padding-left: 10px; padding-right: 10px; }
  body.split-open .split-list .grid, body.split-open .split-list .hooks { grid-template-columns: 1fr !important; }
  body.split-open .split-hide { display: none !important; }
  .is-active-card { outline: 3px solid var(--accent, #B4E04A); outline-offset: 2px; }
}

@media (max-width: 560px) { .hd-tabs button { font-size: 11.5px; padding: 10px 4px; } .hd-remix { grid-template-columns: 1fr; } .hd-pair { grid-template-columns: 1fr; } .hd-tpl { padding-right: 14px; } .hd-tpl .hd-copy { position: static; margin-top: 8px; } }

.hd-hookmeta { margin: 0 0 4px; font-size: 12.5px; color: var(--hd-muted); }
.hd-remix select { padding: 10px 12px; border-radius: 12px; border: 1px solid #DCE4EC; background: #F7F9FC; font: 500 14px var(--hd-sans); color: var(--hd-ink); }
.hd-ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.hd-raw { border: 1px solid var(--hd-line); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.hd-raw summary { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.hd-raw summary span { color: var(--hd-muted); font-size: 12.5px; }
.hd-raw summary .hd-copy { margin-left: auto; }
.hd-raw summary .hd-copy span { color: inherit; font-size: inherit; }
.hd-tone-copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hd-line); }
.hd-tone-copy .hd-fine { margin: 0; }

.hd-loading.big { justify-content: center; padding: 60px 0; }
.hd-tiles:empty, .hd-tiles:empty + .hd-fine { display: none; }
@container (max-width: 480px) { .hd-side { grid-template-columns: 1fr; } .hd-side .hd-thumb { grid-row: auto; aspect-ratio: 16 / 10; max-height: 260px; } }