/* The approved public example retains its original canvas palette. */
#agent-open{margin-left:auto;display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:var(--blue-wash);color:var(--blue);white-space:nowrap;font-size:12px;font-weight:550}#agent-open svg{width:16px;height:16px}#agent-open:hover,#agent-open[aria-expanded=true]{box-shadow:inset 0 0 0 1px var(--blue)}.filterbar>#search-open{margin-left:0}.filterbar{gap:8px}@media(max-width:1100px){.filter{font-size:11px;padding-left:6px;padding-right:6px}.filterbar{padding:0 18px}.filter-divider{margin:0 2px}}@media(max-width:800px){.filters{overflow:auto;min-width:0;flex:1}.filterbar{padding:0 12px}}

#sound-toggle{font:11px var(--sans);white-space:nowrap;color:var(--muted);padding:6px 9px;border-left:1px solid var(--line);margin-left:4px}#sound-toggle[aria-pressed=true]{color:var(--blue)}#sound-toggle:hover{color:var(--ink)}

/* Jeremy, 2026-09-17: make the header and Saucepad footer easier to read. */
.topbar{height:84px}
.wordmark{font-size:34px;letter-spacing:-2px}
.brand-dot{width:7px;height:7px}
.board-name{font-size:18px}
.viewonly{font-size:13px;padding:5px 11px}
.top-actions{font-size:15px}
.top-divider{height:28px}
#viewport{top:140px}
.credit{font-size:clamp(16px,1.15vw,24px);padding:6px 16px;gap:12px;max-width:calc(100% - 32px)}
@media(max-width:760px){
 .topbar{height:72px}
 .wordmark{font-size:29px}
 .top-actions>button:first-child{font-size:13px}
 #viewport{top:120px}
 .credit{font-size:12px;line-height:1.4;flex-wrap:wrap;gap:0 7px;width:auto;max-width:calc(100% - 24px);white-space:normal;text-align:center;padding:4px 8px}
 .credit .slashes{font-size:12px}
 .credit>span:last-child{flex-basis:100%}
}
.closing-snapshot{top:365px;width:680px;color:var(--ink);letter-spacing:0;font-weight:400}
.closing-kicker{font:14px var(--mono);letter-spacing:.06em;color:var(--muted);margin:0 0 20px}
.closing-snapshot h2{font-size:68px;line-height:1.05;letter-spacing:-3px;font-weight:650;margin:0 0 38px}
.closing-stats{display:grid;grid-template-columns:1fr 1fr;gap:35px}
.closing-stat{border-left:1px solid var(--line);padding-left:20px;display:flex;flex-direction:column;align-items:flex-start}
.closing-label{font:13px var(--mono);letter-spacing:.03em;color:var(--muted)}
.closing-stat strong{font-size:45px;letter-spacing:-1.8px;line-height:1.2;margin:12px 0 6px}
.closing-change{font-size:22px;font-weight:550;line-height:1.5}
.closing-change small{font-size:15px;color:var(--muted);font-weight:400}
.closing-change.positive{color:var(--blue)}.closing-change.negative{color:var(--accent)}
.closing-stat p{font-size:15px;line-height:1.6;color:var(--muted);margin:12px 0 8px}
.closing-stat a{font-size:14px;line-height:1.8;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.closing-question{font-size:25px;line-height:1.4;letter-spacing:-.5px;margin:36px 0 18px}
.closing-date{font:12px/1.7 var(--sans);color:var(--muted);margin:0}

/* On-demand campaign films share the original detail panel's media area. */
#detail-video{width:100%;aspect-ratio:16/9;background:#151815}
#detail-video iframe{display:block;width:100%;height:100%;border:0}
.detail-image.has-video .detail-image-caption{position:static;padding:20px 24px 0;margin:0}
@media(max-width:760px){.detail-image.has-video .detail-image-caption{display:block;padding:12px 18px;font-size:10px}}

/* Jeremy, 2026-09-17: a smaller credit shares the zoom/navigation row. */
.credit{pointer-events:auto}
@media(min-width:761px){
 .navigator{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content}
 .navigator .credit{position:static;transform:none;display:block;min-width:0;max-width:none;padding:0 8px;background:transparent;border-radius:0;font-size:clamp(10px,.72vw,14px);line-height:1.4;white-space:normal;text-align:center}
 .navigator .credit .slashes{margin:0 6px}
}