/* Thought Leadership Enhancer · Dollarous blog post, before and after.
   Everything is scoped to .tl. Enhancements are opt-in classes on .tl-post
   (on-dropcap, on-stats, on-vocab, on-bands, on-lists) plus blocks the app
   mounts conditionally. Off state must read as a plain wall of text. */

.tl { display: grid; grid-template-columns: minmax(0, 1fr) 20.5rem; align-items: start; background: var(--d-bg); }
@media (max-width: 900px) { .tl { grid-template-columns: 1fr; } }

/* ---------- the reading pane ---------- */
.tl-view { position: relative; min-width: 0; border-right: 1px solid var(--d-line); }
@media (max-width: 900px) { .tl-view { border-right: 0; border-bottom: 1px solid var(--d-line); } }
.tl-scroll { height: 42rem; overflow-y: scroll; overflow-x: hidden; background: var(--d-paper); scrollbar-width: thin; scrollbar-color: #BEC5B7 #F1F3EE; }
.tl-scroll::-webkit-scrollbar { width: 12px; }
.tl-scroll::-webkit-scrollbar-track { background: #F1F3EE; }
.tl-scroll::-webkit-scrollbar-thumb { background: #BEC5B7; border: 3px solid #F1F3EE; }
.tl-view::after { content: ""; position: absolute; z-index: 4; left: 0; right: 12px; bottom: 0; height: 3.4rem; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.95) 70%, #FFF); pointer-events: none; transition: opacity 240ms ease; }
.tl-cue { position: absolute; z-index: 5; left: 50%; bottom: 0.7rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--d-font-ui); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--d-paper); background: var(--d-ink); padding: 0.3rem 0.6rem; pointer-events: none; transition: opacity 240ms ease, transform 240ms ease; }
.tl-cue .ar { animation: tlNudge 1.5s ease-in-out infinite; }
@keyframes tlNudge { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
.tl-view.gone::after, .tl-view.gone .tl-cue { opacity: 0; }
.tl-view.gone .tl-cue { transform: translateX(-50%) translateY(6px); }

/* ---------- article shell ---------- */
.tl-post { font-family: var(--d-font-body); color: var(--d-ink); }
.tl-band { padding: clamp(1.4rem, 3.4vw, 2.4rem) clamp(1.2rem, 4vw, 3rem); }
.tl-post.on-bands .tl-band.alt { background: #F4F6F1; }
.tl-post.on-bands .tl-band { transition: background 300ms ease; }

.tl-head { padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.2rem, 4vw, 3rem) 0; }
.tl-head h1 { font-family: var(--d-font-display); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.7rem); font-weight: 500; letter-spacing: -0.022em; line-height: 1.12; margin: 0; text-wrap: balance; }
.tl-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; margin-top: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--d-line); }
.tl-byline .face { width: 2.6rem; height: 2.6rem; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--d-line); }
.tl-byline .face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-byline .who { font-family: var(--d-font-display); font-size: 0.98rem; font-weight: 600; }
.tl-byline .role { font-family: var(--d-font-display); font-style: italic; font-size: 0.88rem; color: var(--d-ink-45); }
.tl-byline .meta { font-family: var(--d-font-ui); font-size: 0.74rem; color: var(--d-ink-45); margin-left: auto; }

.tl-post h2 { font-family: var(--d-font-display); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem); font-weight: 600; letter-spacing: -0.016em; line-height: 1.2; margin: 0 0 0.9rem; }
.tl-post p { font-size: 1.02rem; line-height: 1.72; margin: 0 0 1.05rem; max-width: 36em; text-wrap: pretty; }
.tl-post p:last-child { margin-bottom: 0; }

/* drop cap */
.tl-post.on-dropcap .tl-lede::first-letter { float: left; font-family: var(--d-font-display); font-size: 3.9em; line-height: 0.82; font-weight: 500; color: var(--d-green); padding: 0.06em 0.09em 0 0; }

/* inline stat highlight: present in markup always, inert until switched on */
.tl-stat { padding: 0.04em 0.05em; }
.tl-post.on-stats .tl-stat { font-weight: 600; background: #DCEAE1; box-shadow: 0.14em 0 0 #DCEAE1, -0.14em 0 0 #DCEAE1; color: var(--d-green); transition: background 260ms ease; }

/* vocabulary: inert until switched on. The definition itself is painted by
   .tl-pop, which lives outside the scroll box so it cannot be clipped. */
.tl-vocab { position: relative; }
.tl-post.on-vocab .tl-vocab { border-bottom: 1px dashed var(--d-green-bright); cursor: help; color: var(--d-green-mid); }

/* lists: plain by default, brand counters when on */
.tl-post ol, .tl-post ul { margin: 0 0 1.1rem; padding-left: 1.4rem; max-width: 36em; display: grid; gap: 0.55rem; }
.tl-post li { font-size: 1rem; line-height: 1.62; }
.tl-post li b { font-weight: 600; }
.tl-post.on-lists ol { list-style: none; padding-left: 0; gap: 0.85rem; counter-reset: tlnum; }
.tl-post.on-lists ol > li { position: relative; padding-left: 2.6rem; counter-increment: tlnum; }
.tl-post.on-lists ol > li::before { content: counter(tlnum); position: absolute; left: 0; top: 0.06em; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; background: var(--d-green); color: var(--d-paper); font-family: var(--d-font-ui); font-size: 0.82rem; font-weight: 700; }
.tl-post.on-lists ul { list-style: none; padding-left: 0; gap: 0.7rem; }
.tl-post.on-lists ul > li { position: relative; padding-left: 2.6rem; }
.tl-post.on-lists ul > li::before { content: ""; position: absolute; left: 0.56rem; top: 0.55em; width: 0.62rem; height: 0.62rem; background: var(--d-green-bright); }

/* ---------- listen bar ---------- */
.tl-tts { display: flex; align-items: center; gap: 0.75rem; margin: 0 clamp(1.2rem, 4vw, 3rem) 0; padding: 0.7rem 0.85rem; background: var(--d-green); color: var(--d-paper); }
.tl-tts button.pl { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex-shrink: 0; background: var(--d-paper); color: var(--d-green); border: 0; cursor: pointer; }
.tl-tts button.pl svg { width: 0.95rem; height: 0.95rem; }
.tl-tts .lab { font-family: var(--d-font-ui); font-size: 0.79rem; font-weight: 600; }
.tl-tts .lab span { display: block; font-weight: 400; font-size: 0.71rem; opacity: 0.75; margin-top: 0.1rem; }
.tl-tts .bar { flex: 1; height: 3px; background: rgba(255,255,255,0.28); min-width: 3rem; cursor: pointer; }
.tl-tts .bar i { display: block; height: 100%; background: var(--d-paper); width: 0; transition: width 400ms linear; }
.tl-tts .dur { font-family: var(--d-font-logo); font-size: 0.76rem; opacity: 0.85; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- key takeaways ---------- */
.tl-take { margin: 1.3rem clamp(1.2rem, 4vw, 3rem) 0; padding: 1.1rem 1.25rem; background: #F1F3EE; box-shadow: inset 0 0 0 1px var(--d-line); }
.tl-take h3 { font-family: var(--d-font-ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--d-green); margin: 0 0 0.7rem; }
.tl-take ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; max-width: none; }
.tl-take li { position: relative; padding-left: 1.65rem; font-size: 0.97rem; line-height: 1.55; }
.tl-take li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.55rem; height: 0.55rem; background: var(--d-green-bright); }

/* ---------- testimonial: plain, then not ---------- */
.tl-quote-plain { max-width: 36em; margin: 0 0 1.05rem; padding: 0 0 0 1rem; border-left: 2px solid var(--d-line-2); }
.tl-quote-plain p { font-style: italic; color: var(--d-ink-70); }
.tl-quote-plain .attr { font-family: var(--d-font-ui); font-size: 0.78rem; color: var(--d-ink-45); }

.tl-quote { position: relative; overflow: hidden; padding: clamp(1.3rem, 3vw, 2rem); background: var(--d-green); color: var(--d-paper); }
.tl-quote blockquote { margin: 0; font-family: var(--d-font-display); font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.42rem); font-style: italic; line-height: 1.45; letter-spacing: -0.01em; min-height: 6.2em; }
.tl-quote .caret { display: inline-block; width: 0.06em; height: 1.05em; margin-left: 0.06em; background: #8FD9B4; vertical-align: -0.16em; animation: tlBlink 900ms steps(2, start) infinite; }
.tl-quote.done .caret { display: none; }
@keyframes tlBlink { 50% { opacity: 0; } }
.tl-quote .attr { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.2rem; }
.tl-quote.in .attr { animation: tlFade 500ms ease both; }
@keyframes tlFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tl-quote .shot { display: grid; place-items: center; width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.38); font-family: var(--d-font-display); font-size: 1.1rem; font-weight: 600; color: #FFFFFF; }
.tl-quote .attr .n { font-family: var(--d-font-ui); font-size: 0.79rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.tl-quote .attr .n span { display: block; font-weight: 400; letter-spacing: 0.02em; text-transform: none; opacity: 0.78; margin-top: 0.15rem; }
@media (prefers-reduced-motion: reduce) { .tl-quote .attr, .tl-quote .caret { animation: none !important; } }

/* ---------- chart ---------- */
.tl-chart-plain { max-width: 36em; }
.tl-chart { max-width: 40em; padding: 1.2rem 1.3rem; background: var(--d-paper); box-shadow: inset 0 0 0 1px var(--d-line); }
.tl-chart h4 { font-family: var(--d-font-display); font-size: 1.05rem; font-weight: 600; margin: 0 0 0.2rem; }
.tl-chart .sub { font-family: var(--d-font-ui); font-size: 0.78rem; color: var(--d-ink-45); margin: 0 0 1.1rem; }
.tl-chart-body { display: grid; grid-template-columns: 10.5rem 1fr; gap: 1.4rem; align-items: center; }
@media (max-width: 560px) { .tl-chart-body { grid-template-columns: 1fr; } }
.tl-donut { position: relative; width: 10.5rem; height: 10.5rem; }
.tl-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tl-donut circle { fill: none; stroke-width: 20; cursor: pointer; transition: opacity 200ms ease, stroke-width 200ms ease; }
.tl-donut.focus circle { opacity: 0.28; }
.tl-donut.focus circle.on { opacity: 1; stroke-width: 25; }
.tl-donut .mid { position: absolute; inset: 26%; display: grid; place-items: center; text-align: center; opacity: 0; transition: opacity 200ms ease; }
.tl-donut.focus .mid { opacity: 1; }
.tl-donut .mid b { display: block; font-family: var(--d-font-logo); font-size: 1.35rem; line-height: 1; color: var(--d-ink); }
.tl-donut .mid span { display: block; font-family: var(--d-font-ui); font-size: 0.6rem; line-height: 1.25; color: var(--d-ink-45); margin-top: 0.25rem; }
.tl-legend { display: grid; gap: 1px; }
.tl-legend button { display: grid; grid-template-columns: 0.7rem 1fr auto; align-items: center; gap: 0.6rem; padding: 0.42rem 0.3rem; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--d-font-ui); transition: opacity 200ms ease, background 160ms ease; }
.tl-legend button:hover { background: #F4F6F1; }
.tl-legend button i { width: 0.7rem; height: 0.7rem; }
.tl-legend button .k { font-size: 0.85rem; color: var(--d-ink-70); }
.tl-legend button .v { font-family: var(--d-font-logo); font-size: 0.85rem; color: var(--d-ink); }
.tl-legend.focus button { opacity: 0.4; }
.tl-legend.focus button.on { opacity: 1; }
.tl-legend.focus button.on .k, .tl-legend.focus button.on .v { font-weight: 700; color: var(--d-ink); }
.tl-src { margin: 1.1rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--d-line); font-family: var(--d-font-ui); font-size: 0.72rem; font-style: normal; line-height: 1.55; color: var(--d-ink-45); max-width: none; }

/* ---------- mini slides ----------
   The deck has to read as an embedded object, not as more article, so it sits
   on its own warm paper stock with a rule and a lifted edge. */
.tl-slides { max-width: 32rem; background: var(--d-paper); border: 1px solid var(--d-line-2); box-shadow: 0 12px 26px -16px rgba(12,16,13,0.42); }
.tl-slides-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: #3A3D3B; }
.tl-slides-bar .mk { width: 1rem; height: 1rem; flex-shrink: 0; background: url('../assets/dollarous-icon-white.png') center / contain no-repeat; }
.tl-slides-bar .who { font-family: var(--d-font-logo); font-size: 0.72rem; color: #FFFFFF; }
.tl-slides-bar .n { margin-left: auto; font-family: var(--d-font-logo); font-size: 0.72rem; color: rgba(255,255,255,0.62); }

/* square on every slide, whatever the content */
.tl-stage { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.tl-slide { position: absolute; inset: 0; padding: clamp(1.3rem, 4.5%, 2.2rem); display: grid; align-content: center; gap: 0.4rem; background: #FCFAF3; }
/* paper grain, so the slide reads as printed stock against the article ground */
.tl-slide::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.115; mix-blend-mode: multiply; pointer-events: none; }
.tl-slide > * { position: relative; }
.tl-slide .rule { width: 2.4rem; height: 2px; background: var(--d-green-bright); margin-bottom: 0.5rem; }
.tl-slide h5 { font-family: var(--d-font-display); font-size: clamp(1.1rem, 4.4%, 1.45rem); font-weight: 600; line-height: 1.24; margin: 0.5rem 0 0; color: var(--d-ink); }
.tl-slide .big { font-family: var(--d-font-logo); font-size: clamp(3rem, 15%, 4.6rem); line-height: 0.95; color: var(--d-green); margin: 0.4rem 0 0.15rem; }
.tl-slide .cap { font-family: var(--d-font-display); font-size: 1rem; font-weight: 600; color: var(--d-ink); }
.tl-slide p { font-size: 0.93rem; line-height: 1.6; color: var(--d-ink-70); margin: 0.6rem 0 0; max-width: 26em; }
.tl-slide .src { font-family: var(--d-font-ui); font-size: 0.69rem; font-style: italic; color: var(--d-ink-45); margin-top: 1rem; }

/* rhythm through the deck comes from stock tone and rule weight, not from
   dropping a saturated block into the middle of a light article */
.tl-slide.g { background: #F6F2E7; }
.tl-slide.g .rule { width: 4.2rem; background: var(--d-green); }
.tl-slide.k { background: #F1EEE3; }
.tl-slide.k .rule { width: 100%; background: var(--d-ink); }

/* click-through zones with directional cursors */
.tl-zone { position: absolute; top: 0; bottom: 0; width: 40%; z-index: 3; background: none; border: 0; padding: 0; }
.tl-zone.l { left: 0; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M20 7 11 15l9 8' fill='none' stroke='%23000' stroke-opacity='.45' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 7 11 15l9 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 15 15, w-resize; }
.tl-zone.r { right: 0; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M11 7l9 8-9 8' fill='none' stroke='%23000' stroke-opacity='.45' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 7l9 8-9 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 15 15, e-resize; }
.tl-zone::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,16,13,0.09), transparent); opacity: 0; transition: opacity 180ms ease; }
.tl-zone.r::after { background: linear-gradient(270deg, rgba(12,16,13,0.09), transparent); }
.tl-zone:hover::after { opacity: 1; }
.tl-zone:focus-visible { outline: 2px solid #8FD9B4; outline-offset: -3px; }

.tl-slides-foot { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; background: #F1F3EE; box-shadow: inset 0 1px 0 var(--d-line); }
.tl-dots { display: flex; gap: 0.35rem; }
.tl-dots button { width: 0.45rem; height: 0.45rem; padding: 0; border: 0; background: var(--d-line-2); cursor: pointer; }
.tl-dots button.on { background: var(--d-green); }
.tl-slides-foot .dl { margin-right: auto; margin-left: 0.4rem; display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--d-font-ui); font-size: 0.72rem; font-weight: 600; color: var(--d-green-mid); background: none; border: 0; cursor: pointer; }
.tl-slides-foot .dl:hover { color: var(--d-ink); }
.tl-slides-foot .dl svg { width: 0.8rem; height: 0.8rem; }
.tl-arrows { display: flex; gap: 0.35rem; }
.tl-arrows button { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; background: var(--d-paper); border: 1px solid var(--d-line-2); cursor: pointer; color: var(--d-ink-70); }
.tl-arrows button:hover { border-color: var(--d-ink); color: var(--d-ink); }
.tl-arrows svg { width: 0.8rem; height: 0.8rem; }

/* ---------- share row ---------- */
.tl-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; padding: clamp(1.3rem, 3vw, 2rem) clamp(1.2rem, 4vw, 3rem) clamp(2.4rem, 5vw, 3.4rem); border-top: 1px solid var(--d-line); }
.tl-share .lab { font-family: var(--d-font-ui); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-ink-45); margin-right: 0.2rem; }
.tl-share a { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; color: var(--d-ink-70); border: 1px solid var(--d-line-2); text-decoration: none; transition: color 150ms ease, border-color 150ms ease, background 150ms ease; }
.tl-share a:hover { color: var(--d-paper); background: var(--d-green); border-color: var(--d-green); }
.tl-share a svg { width: 1rem; height: 1rem; }

/* ---------- one shared popup, mounted outside the scroll box ----------
   Both the vocabulary definitions and the rationale cards render here, so
   neither can be clipped by .tl-scroll at any scroll position. */
.tl-pop { position: absolute; z-index: 40; left: 0; top: 0; width: 17.5rem; max-width: calc(100% - 1.5rem); padding: 0.62rem 0.72rem; font-family: var(--d-font-ui); font-size: 0.78rem; font-weight: 400; font-style: normal; line-height: 1.5; letter-spacing: 0; text-align: left; text-transform: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 150ms ease; }
.tl-pop.def { color: var(--d-paper); background: var(--d-ink); }
.tl-pop.why { width: 19rem; color: var(--d-ink); background: #FFFDF4; box-shadow: 0 0 0 1px #E4D9A8, 0 10px 24px -12px rgba(12,16,13,0.35); }
.tl-pop.up { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .tl-pop { transition: none; } }

/* the anchors keep their hover affordance; the card itself is .tl-pop */
.tl-post.no-why [data-tlwhy] { --tl-why-off: 1; }

/* ---------- full screen ---------- */
.tl-fs { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--d-font-ui); font-size: 0.72rem; font-weight: 600; padding: 0.24rem 0.55rem; background: transparent; border: 1px solid rgba(255,255,255,0.34); color: rgba(255,255,255,0.85); cursor: pointer; }
.tl-fs:hover { border-color: #FFFFFF; color: #FFFFFF; }
.tl-fs svg { width: 0.82rem; height: 0.82rem; }
.tl-frame-acts { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.tl-frame.is-fs #tl-app { overflow: hidden; }
.tl-frame.is-fs #tl-app, .tl-frame.is-fs .tl { height: 100%; min-height: 0; }
.tl-frame.is-fs .tl-scroll { height: 100%; }
.tl-frame.is-fs .tl-panel { max-height: 100%; height: 100%; }
.tl-frame:fullscreen { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; overflow: hidden; background: var(--d-bg); }
.tl-frame:fullscreen .dlr-frame-foot { display: none; }
.tl-frame:fullscreen #tl-app, .tl-frame:fullscreen .tl { height: 100%; min-height: 0; }
.tl-frame:fullscreen .tl-scroll { height: 100%; }
.tl-frame:fullscreen .tl-panel { max-height: 100%; height: 100%; }

/* ---------- the frame header, dark on this page ---------- */
.tl-frame .dlr-frame-bar { background: linear-gradient(105deg, #2B2E2C 0%, #3E4341 46%, #55605A 100%); border-bottom-color: #4C514E; }
.tl-frame .dlr-frame-bar .dlr-mark { color: #FFFFFF; }
.tl-frame .dlr-frame-bar .dlr-glyph { background-color: transparent; background-size: contain; }
.tl-frame .dlr-frame-bar .dlr-slogan { color: rgba(255,255,255,0.72); }
.tl-frame .dlr-frame-bar .dlr-lockup .dlr-slogan::before { background: rgba(255,255,255,0.32); }
.tl-frame .dlr-frame-bar .dlr-chip { background: transparent; border-color: rgba(255,255,255,0.34); color: rgba(255,255,255,0.85); }

/* ---------- the enhancement panel ---------- */
.tl-panel { position: sticky; top: 0; align-self: start; max-height: 42rem; overflow-y: auto; background: var(--d-green); color: #DDE9E1; font-family: var(--d-font-ui); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; }
.tl-panel::-webkit-scrollbar { width: 10px; }
.tl-panel::-webkit-scrollbar-track { background: rgba(0,0,0,0.14); }
.tl-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.26); }
@media (max-width: 900px) { .tl-panel { position: static; max-height: none; } }
.tl-panel-head { position: sticky; top: 0; z-index: 2; padding: 0.9rem 1rem 0.8rem; background: var(--d-green); border-bottom: 1px solid rgba(255,255,255,0.16); }
.tl-panel-head h3 { font-family: var(--d-font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -0.014em; margin: 0; color: #FFFFFF; }
.tl-panel-head .c { display: block; font-size: 0.73rem; color: rgba(255,255,255,0.66); margin-top: 0.2rem; }
.tl-panel-acts { display: flex; gap: 0.4rem; margin-top: 0.75rem; }
.tl-panel-acts button { flex: 1; font-family: var(--d-font-ui); font-size: 0.76rem; font-weight: 600; padding: 0.45rem 0.5rem; border: 1px solid rgba(255,255,255,0.34); background: transparent; color: rgba(255,255,255,0.85); cursor: pointer; }
.tl-panel-acts button:hover { border-color: #FFFFFF; color: #FFFFFF; }
.tl-panel-acts button.pri { background: #FFFFFF; border-color: #FFFFFF; color: var(--d-green); }
.tl-panel-acts button.pri:hover { background: #B6E3CC; border-color: #B6E3CC; color: var(--d-green); }

.tl-enh { display: grid; }
.tl-enh > div { padding: 0.8rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.13); }
.tl-enh-top { display: flex; align-items: flex-start; gap: 0.6rem; width: 100%; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.tl-enh-top .t { font-family: var(--d-font-display); font-size: 0.98rem; font-weight: 600; color: rgba(255,255,255,0.74); line-height: 1.25; transition: color 180ms ease; }
.tl-enh-top:hover .t { color: #FFFFFF; }
.tl-sw { position: relative; flex-shrink: 0; width: 2rem; height: 1.1rem; margin-top: 0.1rem; background: rgba(255,255,255,0.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28); transition: background 180ms ease, box-shadow 180ms ease; }
.tl-sw i { position: absolute; top: 2px; left: 2px; width: 0.85rem; height: calc(1.1rem - 4px); background: rgba(255,255,255,0.75); transition: transform 180ms cubic-bezier(0.3, 0.9, 0.3, 1), background 180ms ease; }
.tl-enh > div.on .tl-sw { background: #F0A93C; box-shadow: inset 0 0 0 1px #F0A93C; }
.tl-enh > div.on .tl-sw i { transform: translateX(0.95rem); background: #4A2E06; }
.tl-enh > div.on .tl-enh-top .t { color: #FFFFFF; }
.tl-enh .why { font-size: 0.79rem; line-height: 1.55; color: rgba(255,255,255,0.56); margin: 0.5rem 0 0; padding-left: 2.6rem; transition: color 180ms ease; }
.tl-enh > div.on .why { color: rgba(255,255,255,0.82); }
.tl-panel-foot { padding: 0.9rem 1rem 1.1rem; }
.tl-panel-foot p { font-size: 0.74rem; line-height: 1.55; color: rgba(255,255,255,0.56); margin: 0; }
.tl-panel-foot label { color: rgba(255,255,255,0.85); font-weight: 600; }
.tl-panel-foot input { accent-color: #F0A93C; }

/* ---------- the social-icon nudge ---------- */
.tl-poke { flex-basis: 100%; max-width: 30rem; margin-top: 0.55rem; padding: 0.6rem 2rem 0.6rem 0.7rem; position: relative; font-family: var(--d-font-ui); font-size: 0.79rem; line-height: 1.5; color: var(--d-ink); background: #FFF6E2; box-shadow: 0 0 0 1px #EBCF95; opacity: 0; transform: translateY(-4px); visibility: hidden; transition: opacity 200ms ease, transform 200ms ease; }
.tl-poke b { font-weight: 700; color: #8A5A08; }
.tl-poke.up { opacity: 1; transform: none; visibility: visible; }
.tl-poke button { position: absolute; top: 0.2rem; right: 0.3rem; width: 1.4rem; height: 1.4rem; font-size: 1rem; line-height: 1; color: var(--d-ink-45); background: none; border: 0; cursor: pointer; }
.tl-poke button:hover { color: var(--d-ink); }

/* ---------- before / after tally ---------- */
.tl-tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--d-line); border: 1px solid var(--d-line); margin-top: 1.8rem; }
@media (max-width: 700px) { .tl-tally { grid-template-columns: 1fr; } }
.tl-tally > div { background: var(--d-paper); padding: 1rem 1.05rem; display: grid; gap: 0.3rem; align-content: start; }
.tl-tally .n { font-family: var(--d-font-logo); font-size: 1.6rem; line-height: 1; color: var(--d-green-bright); }
.tl-tally .l { font-family: var(--d-font-ui); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-ink-45); }
.tl-tally .d { font-size: 0.85rem; line-height: 1.5; color: var(--d-ink-70); }