/* "What's Hot Between the Investigators" homepage widget (injected by _build/build_drama.py).
   Dark sibling of the homepage timeline strip: same ink (#1F2430), Inter, uppercase .12em label,
   cream text (#FBF8F3), timeline dot colours, and a thin connecting line with ringed dots. Deliberately small. */
.hbw{--hb-bg:#1F2430;--hb-tx:#E9E4DA;--hb-hd:#FBF8F3;--hb-mu:#9CA1AD;--hb-ln:#4A4F5C;--hb-ac:#F07F5E;
  max-width:1180px;margin:6px auto 18px;padding:0 20px;font:400 13px/1.3 Inter,system-ui,-apple-system,sans-serif}
.hbw-d{background:var(--hb-bg);color:var(--hb-tx);border-radius:14px;box-shadow:0 6px 18px rgba(20,24,34,.28)}
.hbw summary{list-style:none;display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer;
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--hb-hd);-webkit-tap-highlight-color:transparent}
.hbw summary::-webkit-details-marker{display:none}
.hbw summary::before{content:"";flex:0 0 7px;height:7px;border-radius:50%;background:var(--hb-ac)}
.hbw-t{flex:1;min-width:0}
.hbw-car{width:6px;height:6px;border-right:1.5px solid var(--hb-mu);border-bottom:1.5px solid var(--hb-mu);transform:rotate(45deg);transition:transform .15s;flex:0 0 6px;margin-top:-3px}
.hbw-d[open] .hbw-car{transform:rotate(-135deg);margin-top:3px}
.hbw-p{padding:0 14px 12px}
/* list = a short vertical timeline: thin line, ringed coloured dots, "Name vs. Name" */
.hbw-l{position:relative;list-style:none;margin:0;padding:0}
.hbw-l::before{content:"";position:absolute;left:3px;top:10px;bottom:10px;width:1px;background:var(--hb-ln)}
.hbw-l a{position:relative;display:flex;align-items:baseline;gap:8px;padding:5px 0 5px 17px;color:var(--hb-tx);text-decoration:none}
.hbw-l a:hover,.hbw-l a:focus-visible{color:#fff}
.hbw-l a:hover .hbw-n{text-decoration:underline;text-decoration-color:var(--hb-ac);text-underline-offset:3px}
.hbw-n{flex:1;min-width:0}
.hbw-dot{position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:50%;background:var(--hd,#9CA1AD);box-shadow:0 0 0 2px var(--hb-bg)}
.hbw-dt{flex:0 0 auto;font-size:10.5px;font-weight:600;color:var(--hb-mu);font-variant-numeric:tabular-nums}
/* bright dot colours (timeline palette) for the dark panel */
.hbw-dot.c-coral{--hd:#F07F5E}.hbw-dot.c-blue{--hd:#4A8FD9}.hbw-dot.c-amber{--hd:#E7A923}.hbw-dot.c-plum{--hd:#B07AD6}
.hbw-dot.c-teal{--hd:#2BA39A}.hbw-dot.c-sage{--hd:#7DB356}.hbw-dot.c-rose{--hd:#E35D9B}.hbw-dot.c-sky{--hd:#3BB0D9}
/* laptops (960-1639px): small dark pill fixed bottom-right, list opens upward over the page */
@media(min-width:960px){
  .hbw{position:fixed;right:16px;bottom:16px;z-index:15;margin:0;padding:0;width:auto;max-width:none}
  .hbw-d{display:flex;flex-direction:column-reverse;width:236px;border-radius:12px}
  .hbw-d:not([open]){width:auto;border-radius:999px}
  .hbw summary{padding:8px 14px 8px 12px;font-size:10.5px}
  .hbw-d:not([open]) .hbw-car{transform:rotate(-135deg);margin-top:3px}
  .hbw-d[open] .hbw-car{transform:rotate(45deg);margin-top:-3px}
  .hbw-d[open] summary{border-top:1px solid #333948}
  .hbw-p{padding:10px 14px 8px}
}
/* wide desktop (>=1640px, gutter >=230px): slim rail in the empty right gutter, always open */
@media(min-width:1640px){
  .hbw{top:264px;bottom:auto;right:max(16px,calc((100vw - 1180px)/2 - 230px))}
  .hbw-d,.hbw-d:not([open]){flex-direction:column;width:212px;border-radius:12px;max-height:calc(100vh - 290px);overflow:auto;scrollbar-width:thin}
  .hbw summary,.hbw-d[open] summary{cursor:default;padding:12px 14px 6px;border:0;font-size:10.5px;align-items:flex-start;line-height:1.35}
  .hbw summary::before{margin-top:4px}
  .hbw-car{display:none}
  .hbw-p{padding:2px 12px 12px}
  .hbw summary,.hbw-d[open] summary{padding-left:12px;padding-right:12px}
  .hbw-l a{font-size:12px;line-height:1.28;padding:4px 0 4px 16px}
  .hbw-dot{top:8px}
}

/* ===== themes (data/drama.json "theme": navy | charcoal | gold | red). Layout untouched; colour + depth only.
   Each: gentle vertical gradient, faint top highlight / inner glow, soft layered shadow.
   Used by the homepage widget (.hbw.hb-*) and drama.html (main.drama.hb-*: side list + Latest box). */
.hb-navy,.hb-charcoal,.hb-gold,.hb-red{--hb-ln:rgba(255,255,255,.16);--hb-mu:#A9B0C0}
.hbw.hb-navy,.drama.hb-navy{--hb-bg:#122142;--hb-tx:#EDE6D6;--hb-hd:#FBF4E4;--hb-ac:#F07F5E;
  --hb-fill:radial-gradient(120% 60% at 50% 0,rgba(130,160,230,.14),rgba(130,160,230,0) 70%),linear-gradient(180deg,#16264A 0%,#0E1A33 100%);
  --hb-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 1px 2px rgba(6,12,28,.30),0 10px 28px rgba(6,12,28,.32)}
.hbw.hb-charcoal,.drama.hb-charcoal{--hb-bg:#1B1D23;--hb-tx:#E9E6E0;--hb-hd:#F6F3EC;--hb-ac:#F07F5E;--hb-mu:#A3A7B0;
  --hb-fill:linear-gradient(180deg,rgba(255,255,255,.075) 0,rgba(255,255,255,.02) 42%,rgba(255,255,255,0) 60%),linear-gradient(180deg,#23262E 0%,#15171C 100%);
  --hb-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.30)}
.hbw.hb-gold,.drama.hb-gold{--hb-bg:#122142;--hb-tx:#EDE6D6;--hb-hd:#E4CB8E;--hb-ac:#D9B86C;--hb-ln:rgba(217,184,108,.26);
  --hb-fill:radial-gradient(120% 55% at 50% 0,rgba(217,184,108,.10),rgba(217,184,108,0) 70%),linear-gradient(180deg,#16264A 0%,#0E1A33 100%);
  --hb-shadow:inset 0 0 0 1px rgba(217,184,108,.32),inset 0 1px 0 rgba(255,236,190,.16),0 0 18px rgba(217,184,108,.10),0 10px 28px rgba(6,12,28,.32)}
.hbw.hb-red,.drama.hb-red{--hb-bg:#4A111B;--hb-tx:#F3E7E1;--hb-hd:#FBEFE8;--hb-ac:#F2B07E;--hb-mu:#D2AFA8;--hb-ln:rgba(255,215,205,.20);
  --hb-fill:radial-gradient(120% 60% at 50% 0,rgba(255,170,150,.12),rgba(255,170,150,0) 70%),linear-gradient(180deg,#5A1520 0%,#360B13 100%);
  --hb-shadow:inset 0 1px 0 rgba(255,225,215,.12),0 1px 2px rgba(30,4,8,.35),0 10px 28px rgba(30,4,8,.30)}
.hbw[class*="hb-"] .hbw-d,.drama[class*="hb-"] .dl-list,.drama[class*="hb-"] .hot{background:var(--hb-fill);box-shadow:var(--hb-shadow)}
.hbw[class*="hb-"] .hbw-d[open] summary{border-top-color:var(--hb-ln)}
.drama[class*="hb-"] .dl-item[aria-current="true"]{background:rgba(255,255,255,.07)}

/* ===== tooltip (one shared element, built by the inline script): date on top, one-line synopsis below ===== */
.hb-tip{--tb1:#1A2C55;--tb2:#0F1C3A;--tbm:#14244A;--ttx:#F1EBDD;--tdt:#F4A386;--tbd:rgba(240,127,94,.45);
  position:fixed;z-index:60;max-width:240px;padding:9px 12px 10px;border-radius:10px;pointer-events:none;
  background:linear-gradient(180deg,var(--tb1),var(--tb2));color:var(--ttx);border:1px solid var(--tbd);
  font:400 12.5px/1.4 Inter,system-ui,-apple-system,sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 4px rgba(6,10,22,.30),0 12px 28px rgba(6,10,22,.38);
  opacity:0;transform:translateY(2px);transition:opacity .12s,transform .12s}
.hb-tip.on{opacity:1;transform:none}
.hb-tip-d{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--tdt);margin-bottom:3px}
.hb-tip-s{display:block}
/* caret: small rotated square on the side facing the hovered entry (set by the script: data-side l|r|t|b, --cy / --cx) */
.hb-tip::before{content:"";position:absolute;width:9px;height:9px;background:var(--tbm);border:1px solid var(--tbd);transform:rotate(45deg)}
.hb-tip[data-side="l"]::before{right:-5.5px;top:calc(var(--cy,50%) - 5px);border-left:0;border-bottom:0}
.hb-tip[data-side="r"]::before{left:-5.5px;top:calc(var(--cy,50%) - 5px);border-right:0;border-top:0}
.hb-tip[data-side="t"]::before{bottom:-5.5px;left:calc(var(--cx,24px) - 5px);border-left:0;border-top:0;background:var(--tb2)}
.hb-tip[data-side="b"]::before{top:-5.5px;left:calc(var(--cx,24px) - 5px);border-right:0;border-bottom:0;background:var(--tb1)}
/* per theme: A navy + coral, B charcoal + coral, C navy + gold hairline, D warm muted-gold card with dark text */
.hb-tip.hb-charcoal{--tb1:#2C2F38;--tb2:#1A1C22;--tbm:#23262D;--ttx:#EEEAE3;--tdt:#F4A386;--tbd:rgba(240,127,94,.40)}
.hb-tip.hb-gold{--tb1:#1A2C55;--tb2:#0F1C3A;--tbm:#14244A;--ttx:#F1EBDD;--tdt:#E4CB8E;--tbd:rgba(217,184,108,.60)}
.hb-tip.hb-red{--tb1:#E8C766;--tb2:#DDBB5E;--tbm:#E2C162;--ttx:#2A1A08;--tdt:#4A2F0C;--tbd:#B08A34;
  box-shadow:inset 0 1px 0 rgba(255,250,225,.55),0 2px 4px rgba(40,10,10,.25),0 12px 28px rgba(40,10,10,.30)}
.hbw-l a,.dl-item{-webkit-touch-callout:none}
/* tagline under the heading: "Hover to discover…" (mouse) / "Press and hold to discover…" (touch, no hover) */
.hbw-tag{margin:0 0 7px;font-size:11px;line-height:1.35;font-style:italic;color:var(--hb-tg,rgba(233,228,218,.62))}
.hbw-tag-t{display:none}
@media (hover:none){.hbw-tag-h{display:none}.hbw-tag-t{display:inline}}
@media(min-width:1640px){.hbw-tag{font-size:10.5px;margin:0 0 6px}}
.hbw.hb-navy{--hb-tg:rgba(244,163,134,.82)}
.hbw.hb-charcoal{--hb-tg:rgba(244,163,134,.78)}
.hbw.hb-gold{--hb-tg:rgba(217,184,108,.88)}
.hbw.hb-red{--hb-tg:rgba(242,214,160,.80)}