/* Topic guides (/topics/) and the guide links added to released tools and watch pages.
   Daylight tokens come from daylight.css (inlined on tool pages); every rule is scoped to .tg-*. */

/* ---------- Breadcrumbs ---------- */
.tg-crumbs{margin:-12px 0 14px;font:600 14px/1.3 var(--dl-body);color:var(--dl-muted)}
.tg-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none}
.tg-crumbs li{display:inline-flex;align-items:center;min-width:0;margin:0}
.tg-crumbs li+li::before{content:'';flex:none;width:6px;height:6px;margin:0 10px 0 6px;border-top:1.5px solid var(--dl-line-2);border-right:1.5px solid var(--dl-line-2);transform:rotate(45deg)}
.tg-crumbs a,.tg-crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px}
.tg-crumbs a{color:var(--dl-ink-2);text-decoration:none}
.tg-crumbs a:hover{color:var(--dl-cobalt-deep);text-decoration:underline;text-underline-offset:3px}
.tg-crumbs [aria-current]{color:var(--dl-ink)}
/* On a tool, the trail is one quiet line above the question, so the stage keeps its place. */
.tg-crumbs.is-tool{margin:-12px 0 -8px;font-size:13px}
.tg-crumbs.is-tool ol{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.tg-crumbs.is-tool ol::-webkit-scrollbar{display:none}
.tg-crumbs.is-tool li{flex:none;white-space:nowrap}
.tg-crumbs.is-tool li+li::before{margin:0 8px 0 4px}
.tg-crumbs.is-tool a:focus-visible{outline-offset:-3px}
.tg-crumbs.is-watch{margin:-24px 0 10px}

/* ---------- Guide: question, short answer, figure ---------- */
.tg{color:var(--dl-ink)}
.tg-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:start;padding:6px 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--dl-line)}
.tg-hero .dl-eyebrow{margin:0 0 14px}
.editorial-main .tg h1{max-width:15em;margin:0 0 22px;font:700 clamp(36px,4.4vw,58px)/1.04 var(--dl-display);letter-spacing:-.045em;color:var(--dl-ink);text-wrap:balance}
.tg-answer{max-width:36em;margin:0;font-size:clamp(18px,1.55vw,20.5px);line-height:1.62;color:var(--dl-ink)}
.tg-answer a,.tg-note a,.tg-meta a,.tg-faq-list a,.tg-figure-more a{color:var(--dl-cobalt-deep);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.tg-answer a:hover,.tg-note a:hover,.tg-meta a:hover,.tg-faq-list a:hover,.tg-figure-more a:hover{color:var(--dl-cobalt)}
.tg-meta{margin:20px 0 0;font-size:14px;color:var(--dl-muted)}
.tg-glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:26px 0 0;padding:0}
.tg-glance div{min-width:0;padding:14px 16px;border-radius:16px;background:var(--dl-card);border:1px solid var(--dl-line)}
.tg-glance dt{font:700 11px/1.3 var(--dl-body);letter-spacing:.13em;text-transform:uppercase;color:var(--dl-muted)}
.tg-glance dd{margin:6px 0 0;font:600 24px/1.1 var(--dl-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--dl-ink)}
.tg-glance.is-words dd{font:600 16px/1.35 var(--dl-body);letter-spacing:0}
.tg-glance-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:12px 0 0;font-size:14px;color:var(--dl-muted)}
/* A dated note: true for its date, never a floating "this weekend". */
.tg-note{margin:24px 0 0;padding:18px 20px 18px 24px;border-radius:18px;background:var(--dl-card);border:1px solid var(--dl-line);box-shadow:inset 5px 0 0 var(--dl-sun)}
.tg-note .tg-note-k{margin:0;font:700 12px/1.3 var(--dl-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dl-ink-2)}
.tg-note p{margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--dl-ink-2)}
.tg-note strong{color:var(--dl-ink)}
.tg-note .tg-note-src{font-size:14px;color:var(--dl-muted)}
.tg-figure{min-width:0;margin:0;background:var(--dl-card);border:1px solid var(--dl-line);border-radius:var(--dl-r);overflow:hidden}
.tg-figure-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--dl-night)}
.tg-figure-media img{display:block;width:100%;height:100%;object-fit:cover}
.tg-figure.is-diagram .tg-figure-media{aspect-ratio:auto;background:var(--dl-paper)}
.tg-figure.is-night .tg-figure-media{background:var(--dl-night)}
.tg-figure.is-diagram .tg-figure-media img,.tg-svg{display:block;width:100%;height:auto}
.tg-figure-body{padding:18px 20px 20px;font-size:15.5px;line-height:1.55;color:var(--dl-ink-2)}
.tg-figure-body p{margin:0}
.tg-figure-body .tg-figure-title{margin:4px 0 6px;font:700 24px/1.12 var(--dl-display);letter-spacing:-.03em;color:var(--dl-ink)}
.tg-figure-actions{margin-top:16px}
.tg-figure-body .tg-figure-tag{margin-top:14px}
.tg-figure-body .tg-figure-more{margin-top:8px}
.tg-figure-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.tg-kind{display:block;font:700 11px/1.3 var(--dl-body);letter-spacing:.13em;text-transform:uppercase;color:var(--dl-cobalt-deep)}
.tg-legend{display:grid;gap:10px;margin:0;padding:0;list-style:none;font-size:15px;line-height:1.5;color:var(--dl-ink-2)}
.tg-legend li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;margin:0}
.tg-legend b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--dl-ink);color:#fff;font:700 13px/1 var(--dl-display)}

/* ---------- Guide: contents rail and question sections ---------- */
.tg-main{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(8px,2vw,24px)}
.tg-toc{position:sticky;top:24px;padding-top:26px}
.tg-toc .dl-eyebrow{margin:0 0 10px}
.tg-toc ol{margin:0;padding:0;list-style:none;border-left:2px solid var(--dl-line)}
.tg-toc li{margin:0}
.tg-toc a{display:flex;align-items:center;min-height:44px;margin-left:-2px;padding:6px 0 6px 14px;border-left:2px solid transparent;font-size:14.5px;line-height:1.3;color:var(--dl-ink-2);text-decoration:none}
.tg-toc a:hover{color:var(--dl-ink)}
.tg-toc a[aria-current]{border-left-color:var(--dl-cobalt);color:var(--dl-ink);font-weight:700}
.tg-body{min-width:0;max-width:740px}
.tg-sec{border-bottom:1px solid var(--dl-line);scroll-margin-top:16px}
.tg-sec>summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px;padding:22px 0;cursor:pointer;list-style:none}
.tg-sec>summary::-webkit-details-marker{display:none}
.tg-sec>summary::after{content:'';flex:none;width:10px;height:10px;margin:0 6px 6px 0;border-right:2px solid var(--dl-ink-2);border-bottom:2px solid var(--dl-ink-2);transform:rotate(45deg);transition:transform .2s}
.tg-sec[open]>summary::after{margin:6px 6px 0 0;transform:rotate(-135deg)}
.tg-sec>summary h2{margin:0;font:700 clamp(23px,2.2vw,29px)/1.15 var(--dl-display);letter-spacing:-.035em;color:var(--dl-ink)}
.tg-sec>summary:hover h2{text-decoration:underline;text-decoration-color:var(--dl-sun);text-decoration-thickness:4px;text-underline-offset:4px}
.tg-prose{padding:0 0 30px;font-size:18px;line-height:1.72;color:var(--dl-ink-2)}
.tg-prose p{margin:0 0 16px}
.tg-prose>:last-child{margin-bottom:0}
.tg-prose a{color:var(--dl-cobalt-deep);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.tg-prose a:hover{color:var(--dl-cobalt)}
.tg-prose strong,.tg-prose b{color:var(--dl-ink)}
.tg-steps{display:grid;gap:10px;margin:0 0 20px;padding:0;list-style:none}
.tg-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;align-items:start;margin:0;padding:14px 16px;border-radius:16px;background:var(--dl-card);border:1px solid var(--dl-line)}
.tg-steps .dl-step{margin-top:3px;white-space:nowrap}
.tg-prose .tg-steps p{margin:0;font-size:16.5px;line-height:1.55}
.tg-watch{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:22px;align-items:center;margin:4px 0 0;padding:18px;border-radius:var(--dl-r);background:var(--dl-paper-2)}
.tg-watch video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:16px;background:var(--dl-night)}
.tg-watch figcaption{font-size:15.5px;line-height:1.55;color:var(--dl-ink-2)}

/* ---------- Guide: related work, questions, sources ---------- */
.tg-explore,.tg-faq{padding-top:clamp(40px,5vw,60px)}
.tg-h2{margin:0;font:700 clamp(27px,2.8vw,36px)/1.06 var(--dl-display);letter-spacing:-.04em;color:var(--dl-ink)}
.tg-lead{max-width:42em;margin:10px 0 0;font-size:17px;line-height:1.6;color:var(--dl-ink-2)}
.tg-group{margin-top:30px}
.tg-group h3{margin:0;font:700 19px/1.25 var(--dl-display);letter-spacing:-.02em;color:var(--dl-ink)}
.tg-group-why{max-width:44em;margin:6px 0 0;font-size:15.5px;line-height:1.55;color:var(--dl-ink-2)}
.tg-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0 0;padding:0;list-style:none}
.tg-card{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;background:var(--dl-card);border:1px solid var(--dl-line);border-radius:18px;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.tg-card:hover{border-color:var(--dl-line-2);box-shadow:0 14px 32px rgba(21,26,45,.09)}
.tg-card-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--dl-night)}
.tg-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tg-card-media img[src^="/media/visuals/"]{object-fit:contain}
.tg-card-media.is-paper{background:var(--dl-paper)}
.tg-card-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:14px 16px 16px}
.tg-card-title{font:700 18px/1.22 var(--dl-display);letter-spacing:-.02em;color:var(--dl-ink);text-decoration:none}
.tg-card-title::after{content:'';position:absolute;inset:0;z-index:1}
.tg-card:hover .tg-card-title{color:var(--dl-ink);text-decoration:underline;text-decoration-color:var(--dl-sun);text-decoration-thickness:4px;text-underline-offset:2px}
.tg-card-text{font-size:15px;line-height:1.5;color:var(--dl-ink-2)}
.tg-card-by{margin-top:auto;padding-top:4px;font-size:14px;line-height:1.4;color:var(--dl-muted)}
.tg-card-by a{position:relative;z-index:2;display:inline-block;margin:-12px 0;padding:12px 0;font-weight:700;color:var(--dl-ink-2);text-decoration:underline;text-decoration-color:var(--dl-line-2);text-underline-offset:3px}
.tg-card-by a:hover{color:var(--dl-cobalt-deep)}
.tg-card-go{margin-top:auto;padding-top:6px;font-size:15px;font-weight:700;color:var(--dl-cobalt-deep)}
.tg-card-go::after{content:' →'}
.tg-card.is-guide{background:var(--dl-cobalt-soft);border-color:var(--dl-cobalt)}
.tg-card.is-guide .tg-card-title{font-size:20px;letter-spacing:-.03em}
.tg-faq-list{margin:18px 0 0;border-top:1px solid var(--dl-line)}
.tg-faq-list details{border-bottom:1px solid var(--dl-line)}
.tg-faq-list summary{position:relative;display:block;min-height:56px;padding:16px 44px 16px 0;cursor:pointer;list-style:none;font:600 18px/1.35 var(--dl-display);letter-spacing:-.015em;color:var(--dl-ink)}
.tg-faq-list summary::-webkit-details-marker{display:none}
.tg-faq-list summary::after{content:'';position:absolute;right:10px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--dl-ink-2);border-bottom:2px solid var(--dl-ink-2);transform:rotate(45deg);transition:transform .2s}
.tg-faq-list details[open]>summary::after{margin-top:-2px;transform:rotate(-135deg)}
.tg-faq-list summary:hover{color:var(--dl-cobalt-deep)}
.tg-faq-list details p{max-width:40em;margin:0 0 20px;font-size:17px;line-height:1.65;color:var(--dl-ink-2)}
.tg-sources{margin-top:clamp(36px,4vw,52px);border-top:1px solid var(--dl-line)}
.tg-src{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.tg-src li{margin:0;padding:14px 16px;border-radius:14px;background:var(--dl-card);border:1px solid var(--dl-line);font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.tg-prose .tg-src a{font-weight:700}
.tg-src-note{display:block;margin-top:4px;font-size:14px;color:var(--dl-muted)}
.tg-prose .tg-fine{margin-top:16px;font-size:14px;line-height:1.5;color:var(--dl-muted)}

/* ---------- /topics/ ---------- */
.tg-index-head{max-width:780px;margin:0 0 clamp(36px,5vw,56px)}
.tg-index-head .dl-eyebrow{margin:0 0 14px}
.tg-guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none}
.tg-guide{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;background:var(--dl-card);border:1px solid var(--dl-line);border-radius:var(--dl-r);overflow:hidden;transition:box-shadow .2s}
.tg-guide:hover{box-shadow:0 18px 40px rgba(21,26,45,.1)}
.tg-guide-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--dl-night)}
.tg-guide-media img,.tg-guide-media svg{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.tg-guide-media.is-paper{background:var(--dl-paper)}
.tg-guide-media.is-paper img{object-fit:contain}
.tg-guide-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:20px 22px 22px}
.tg-guide-body .dl-eyebrow{margin:0}
.tg-guide h2{margin:0;font:700 clamp(21px,1.9vw,25px)/1.14 var(--dl-display);letter-spacing:-.035em}
.tg-guide h2 a{color:var(--dl-ink);text-decoration:none}
.tg-guide h2 a::after{content:'';position:absolute;inset:0;z-index:1}
.tg-guide:hover h2 a{text-decoration:underline;text-decoration-color:var(--dl-sun);text-decoration-thickness:4px;text-underline-offset:3px}
.tg-guide-sum{margin:0;font-size:15.5px;line-height:1.55;color:var(--dl-ink-2)}
.tg-inside{display:grid;gap:6px;margin:4px 0 0;padding:0;list-style:none;font-size:14.5px;line-height:1.4;color:var(--dl-ink-2)}
.tg-inside li{position:relative;margin:0;padding-left:16px}
.tg-inside li::before{content:'';position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--dl-cobalt)}
.tg-guide-count{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--dl-line);font:700 12px/1.3 var(--dl-body);letter-spacing:.12em;text-transform:uppercase;color:var(--dl-muted)}
.tg-how{max-width:740px;margin-top:clamp(48px,6vw,80px);padding-top:clamp(32px,4vw,44px);border-top:1px solid var(--dl-line)}
.tg-how .tg-prose{padding:14px 0 0}

/* ---------- Learn more, below a released tool or a Short's watch page ---------- */
.tg-more{max-width:1360px;margin:0 auto;padding:clamp(32px,4vw,48px) 32px clamp(28px,3vw,40px);border-top:1px solid var(--dl-line);font-family:var(--dl-body);color:var(--dl-ink)}
.tg-more .dl-eyebrow{margin:0}
.tg-more h2{max-width:26em;margin:8px 0 0;font:700 clamp(25px,2.8vw,34px)/1.06 var(--dl-display);letter-spacing:-.04em;color:var(--dl-ink);text-wrap:balance}
.tg-more-lead{max-width:46em;margin:10px 0 0;font-size:16.5px;line-height:1.55;color:var(--dl-ink-2)}
.tg-more .tg-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.editorial-main>.tg-more{max-width:none;margin-top:40px;padding-left:0;padding-right:0}
/* The catalog player shows the tool alone (see EMBED_FLAG in scripts/topic-learning.mjs). */
html.tg-embedded .tg-embed-hide{display:none!important}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
 .tg-main{grid-template-columns:minmax(0,1fr)}
 .tg-toc{display:none}
 .tg-body{max-width:760px}
}
@media (max-width:900px){
 .tg-hero{grid-template-columns:minmax(0,1fr);gap:28px}
 .tg-figure{max-width:620px}
 .tg-guides{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
 .tg-more{padding-left:24px;padding-right:24px}
 .tg-more .tg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
 .tg-crumbs{margin-top:-14px}
 .tg-crumbs.is-watch{margin-top:-18px}
 .editorial-main .tg h1{margin-bottom:16px;font-size:clamp(31px,8.6vw,40px)}
 .tg-answer{font-size:17.5px}
 .tg-glance{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-top:20px}
 .tg-glance dd{font-size:21px}
 .tg-prose{font-size:17px}
 .tg-sec>summary{min-height:60px;padding:16px 0}
 .tg-sec>summary h2{font-size:21px}
 .tg-guides{grid-template-columns:minmax(0,1fr)}
 .tg-more{padding:28px 16px 24px}
}
@media (max-width:620px){
 .tg-cards,.tg-more .tg-cards{grid-template-columns:minmax(0,1fr);gap:10px}
 .tg-card{display:grid;grid-template-columns:104px minmax(0,1fr);border-radius:16px}
 .tg-card.is-text{display:flex}
 .tg-card-media{aspect-ratio:auto;min-height:100%}
 .tg-card-body{gap:4px;padding:12px 14px 14px}
 .tg-card-title{font-size:17px}
 .tg-card.is-guide .tg-card-title{font-size:18px}
 .tg-card-text{font-size:14.5px}
 .tg-watch{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:16px}
 .tg-watch video{max-width:220px}
}
@media (max-width:380px){
 .tg-steps li{grid-template-columns:minmax(0,1fr)}
 .tg-steps .dl-step{justify-self:start}
 .tg-card{grid-template-columns:84px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
 .tg-card,.tg-guide,.tg-sec>summary::after,.tg-faq-list summary::after{transition:none}
}
@media (forced-colors:active){
 .tg-card.is-guide,.tg-note{border:1px solid CanvasText}
 .tg-toc a[aria-current]{border-left-color:Highlight}
}