/* watch4.css — the ONE Watch view: drawing + headline + colored word cards on the board. After watch2/watch3. */
.wv4 .w-layer{align-items:flex-start;justify-content:center;padding:20px 26px;overflow:hidden}
.b4{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.b4 .b-art .sketch{max-height:min(30vh,250px)}
.b4 h2{font-family:'EB Garamond',Georgia,serif;font-size:clamp(22px,2.3vw,30px);line-height:1.15;margin:10px 0 12px;font-weight:600;color:#1c2a3d}
.b-cards{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:flex-start;max-width:100%}
.b-cards .d-phr{padding:7px 13px;border-left-width:8px;text-align:left;max-width:100%}
.b-cards .d-phr .d-en{font-size:18px}
.b-cards .d-card{padding:8px 14px;min-width:0}.b-cards .d-card b{font-size:17px}.b-cards .d-card small{font-size:13px}
.b-cards .d-chip{font-size:14px;padding:6px 13px}
.wv4 .w-text .w-now{display:none}
@media (max-width:760px){
 .wv4 .w-board{height:50vh}
 .wv4 .w-layer{padding:10px 12px}
 .b4 .b-art .sketch{max-height:15vh}
 .b4 h2{font-size:17px;margin:6px 0 8px}
 .b-cards{gap:5px}
 .b-cards .d-phr{padding:4px 9px;border-left-width:6px}.b-cards .d-phr .d-en{font-size:14.5px}.b-cards .d-phr .d-role{font-size:9px}
 .b-cards .d-card{padding:5px 9px}.b-cards .d-card b{font-size:14px}.b-cards .d-card small{font-size:11px}
 .b-cards .d-chip{font-size:12px;padding:4px 10px}
 .wv4 .w-cap{font-size:14px;min-height:40px}
}

/* natural colours in drawings (his ask 2026-10-08) */
.sketch path.wa{stroke:#3d9ad6}
.sketch path.sun{stroke:#e0a512;fill:#ffd95e;fill-opacity:0;transition:stroke-dashoffset 1.1s ease var(--d,0s),fill-opacity .6s ease 1.1s}
.sketch path.lf{fill:#b5d99a;fill-opacity:0;transition:stroke-dashoffset 1.1s ease var(--d,0s),fill-opacity .6s ease 1.1s}
.sketch path.stn{fill:#cfd3d8;fill-opacity:0;transition:stroke-dashoffset 1.1s ease var(--d,0s),fill-opacity .6s ease 1.1s}
.sketch path.soil{fill:#d9bf94;fill-opacity:0;transition:stroke-dashoffset 1.1s ease var(--d,0s),fill-opacity .6s ease 1.1s}
.w-layer.on .sketch path.sun,.w-layer.on .sketch path.lf,.w-layer.on .sketch path.stn,.w-layer.on .sketch path.soil{fill-opacity:1}
/* round 3 (2026-10-08, from Cowork's preview renderer): steps inside a scene, figures, dispute "what it means" */
.sketch g.stp{opacity:0;transition:opacity .6s ease}.sketch g.stp.in{opacity:1}
.sketch .tg{fill:#b8902a}.sketch .tw{fill:#1B2140}.sketch line.mk-cp,.sketch path.mk-cp{stroke:#2d7a3e}.sketch line.mk-cr,.sketch path.mk-cr{stroke:#b8323a}
.sketch rect.yr{fill:none;stroke:#1d2733;stroke-width:3}.sketch rect.k-navy{fill:#c9d6ee}.sketch rect.k-sky{fill:#cfe8f7}.sketch rect.k-amber{fill:#fde3b0}.sketch rect.k-leaf{fill:#d9eccd}
.b4 .b-art .sketch.wide{max-height:none;width:560px;max-width:100%;height:auto;margin:0 auto}
.d-phr small.d-means{display:block;font-size:.78em;opacity:.8;margin-top:2px;font-style:italic}
/* previous / next between Watch pages, and "Next" when the video ends (his ask 2026-10-08 11:48) */
.w-nav{display:flex;gap:8px;justify-content:flex-end}
.w-nav a{color:#e8c56a;text-decoration:none;font-weight:700;font-size:14px;padding:6px 10px;border:1px solid rgba(232,197,106,.5);border-radius:999px;white-space:nowrap;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center}
.w-nav a.dim{opacity:.6}
#wNextM{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:50;display:none;background:#1B2140;color:#fff;font:700 18px 'Source Sans 3',sans-serif;padding:14px 22px;border-radius:999px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25);white-space:nowrap}
body.ended #wNextM{display:block}
/* on a phone the pills CLIP (a long neighbour such as 'Introduction to Tekias Shofar' made 5 pages 402-431px wide, audit_home_link F):
   text-overflow needs a block box, not an inline-flex one; the nav itself may shrink (min-width:0) so the bar never widens the page */
@media(max-width:760px){.w-top{min-width:0}.w-back{flex:0 0 auto;white-space:nowrap}.w-nav{min-width:0;flex:1 1 auto;overflow:hidden}.w-nav a{display:block;line-height:32px;font-size:12px;padding:5px 8px;max-width:42vw;overflow:hidden;text-overflow:ellipsis}#wNextM{bottom:150px;font-size:16px}}
/* EMBEDDED in the Radio (watch/?embed=radio, 2026-10-08): the board alone, the host's player drives it */
body.w-embed .w-top,body.w-embed .w-cap,body.w-embed .w-bar,body.w-embed #wStart,body.w-embed #wNextM{display:none!important}
body.w-embed{background:#fffdf7}
body.w-embed .w-stage{margin:0;width:100%;border:0;border-radius:0;box-shadow:none}
/* the way home (site_chrome.home_mark) inside the Watch bar: a 44px target at every width; the long label folds on a phone */
.w-top .lm-home{display:inline-flex;align-items:center;gap:6px;color:#f4e9d2;font-weight:700;min-height:44px;min-width:44px;text-decoration:none;white-space:nowrap}
.w-top .lm-home:hover,.w-top .lm-home:focus-visible{color:#e0be6b}
.w-top .lm-home svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.w-top .lm-home .hs{display:none}
@media(max-width:760px){.w-top .lm-home .hl{display:none}.w-top .lm-home .hs{display:inline}.w-top{gap:8px;padding:8px 10px}.w-back{font-size:12px}}
/* SPEECH (2026-10-08, his 22:34): a bubble from the figure speaking, composited text, in turn */
.sketch path.bub{fill:#fffdf7;stroke:#1d2733;stroke-width:2.5;stroke-linejoin:round}.sketch rect.bub{fill:#fffdf7;stroke:#1d2733;stroke-width:2.5}
.sketch .tb{fill:#1B2140;font-family:'Source Sans 3',sans-serif;font-weight:600}
/* KEEP GOING (his 22:49): the chip, and the 3-second countdown to the next board */
#wKeep[aria-pressed="true"]{background:#1B2140;color:#fff;border-color:#1B2140}
.w-count{position:fixed;left:50%;bottom:170px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;background:#fffdf7;color:#1B2140;border:2px solid #1B2140;border-radius:999px;padding:10px 12px 10px 20px;font:700 17px 'Source Sans 3',sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.2);white-space:nowrap;max-width:94vw}
.w-count[hidden]{display:none}
.w-count b{font-size:22px;min-width:1.2em;text-align:center}
@media(max-width:760px){.w-count{bottom:210px;font-size:15px}}
/* AN INTRODUCTION IN THE CHAIN (his ruling 2026-10-09 13:15): its reveal (version A) where the board sits */
.w-board.w-introboard{height:auto!important;max-height:none!important;overflow:auto;padding:0;background:transparent}
.w-introboard iframe{display:block;width:100%;border:0;background:transparent;min-height:320px}
body.intro .w-build{display:none}body.intro #wSkip{display:none}
/* a PHONE (2026-10-19, measured at 390x844): the stage is a flex column and height:auto let the board grow to the whole
   reveal (1311px) inside a 583px stage that clips -- beats 6+ were cut off and nothing could scroll. Fill the stage, scroll inside. */
@media(max-width:760px){.w-board.w-introboard{height:auto!important;flex:1 1 0;min-height:0}
 body.intro .w-text{flex:0 0 auto}}   /* ...and the text panel, which holds only the run's name during an intro, stops taking half */