/* Sign-language page: one section per topic, each with a video player. */
.dgs-list{display:grid;gap:var(--s6);max-width:var(--reading);margin:0 auto var(--s6)}
.dgs-section h2{margin:0 0 .4rem}
.dgs-section > p{margin:0 0 1.1rem;color:var(--color-text-secondary)}

.dgs-player{overflow:hidden;border-radius:.6rem;background:var(--color-video);color:var(--color-white)}
.dgs-player [hidden]{display:none !important}
.dgs-screen{position:relative;display:grid;place-items:center;aspect-ratio:16/9;container-type:inline-size}
.dgs-screen > *{grid-area:1/1}

/* First frame: a light title card behind the controls. */
/* title still rendered by tools/make_sign_stills.py; the background fills the letterbox in fullscreen */
.dgs-frame{display:block;align-self:stretch;justify-self:stretch;width:100%;height:100%;min-height:0;object-fit:contain;background:#f5f4ed}
/* After a jump the picture is just a gray still. */
.dgs-still{align-self:stretch;justify-self:stretch;background:radial-gradient(ellipse at center,#9b9b9b,#7c7c7c)}

.dgs-play{display:grid;place-items:center;width:5.5rem;height:5.5rem;padding:0;border:0;border-radius:50%;background:rgba(26,26,26,.78);cursor:pointer;transition:background .2s,transform .2s}
.dgs-play:hover{background:rgba(26,26,26,.92);transform:scale(1.04)}
.dgs-play:focus-visible{outline:.125rem solid #1a1a1a;outline-offset:.25rem}
.dgs-retry:focus-visible{outline:.125rem solid var(--color-white);outline-offset:.25rem}
.dgs-play svg{width:2.6rem;fill:var(--color-white)}

.dgs-buffer:focus{outline:none}
.dgs-spinner{display:block;width:3.5rem;height:3.5rem;border:.25rem solid rgba(26,26,26,.15);border-top-color:#1a1a1a;border-radius:50%;animation:dgs-spin .9s linear infinite}
@keyframes dgs-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dgs-spinner{animation-duration:2.4s}}

/* The error covers the frame like a player's own error screen. */
.dgs-error{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;justify-self:stretch;padding:1.5rem;background:var(--color-video);text-align:center}
.dgs-error svg{width:2.4rem;height:2.4rem;margin-bottom:.4rem;fill:none;stroke:var(--color-white);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dgs-error p{max-width:none;margin:0}
.dgs-error-title{font:400 1.6rem/1.2 Georgia,serif}
.dgs-error-msg{margin-top:.5rem !important;font:.95rem/1.5 Consolas,'Courier New',monospace;color:rgba(255,255,255,.78)}
.dgs-error-code{margin-top:.2rem !important;font:.85rem/1.5 'Open Sans',Arial,sans-serif;color:rgba(255,255,255,.6)}
.dgs-retry{margin-top:1.1rem;padding:.45rem 1.1rem;border:1px solid rgba(255,255,255,.6);border-radius:2rem;background:none;color:var(--color-white);font:600 .85rem 'Open Sans',Arial,sans-serif;cursor:pointer}
.dgs-retry:hover{background:rgba(255,255,255,.12)}

/* Static control bar under the picture. */
.dgs-bar{display:flex;align-items:center;gap:.9rem;padding:.6rem 1rem;background:rgba(0,0,0,.3);font:.8rem 'Open Sans',Arial,sans-serif;color:rgba(255,255,255,.8)}
.dgs-bar svg{flex:none;width:1rem;height:1rem;fill:currentColor}
/* Seek slider: a thin line with a larger invisible hit area and a round head. */
.dgs-track{position:relative;flex:1;height:.25rem;border-radius:1rem;background:rgba(255,255,255,.2);cursor:pointer;touch-action:none}
.dgs-track::before{content:"";position:absolute;inset:-.65rem 0}
.dgs-track i{display:block;width:0;height:100%;border-radius:inherit;background:rgba(255,255,255,.75)}
.dgs-track b{position:absolute;top:50%;left:0;width:.8rem;height:.8rem;border-radius:50%;background:var(--color-white);transform:translate(-50%,-50%) scale(0);transition:transform .15s}
.dgs-track:hover b,.dgs-track:focus-visible b,.dgs-track.is-dragging b{transform:translate(-50%,-50%) scale(1)}
.dgs-track:focus-visible{outline:.125rem solid var(--color-white);outline-offset:.45rem}
.is-spot .dgs-track{cursor:default}
.is-spot .dgs-track b{display:none}
.dgs-time{font-variant-numeric:tabular-nums;white-space:nowrap}
.dgs-toggle,.dgs-full{display:grid;place-items:center;margin:-.4rem -.5rem;padding:.4rem .5rem;border:0;border-radius:.3rem;background:none;color:inherit;cursor:pointer}
.dgs-full{margin-left:0}
.dgs-toggle:hover,.dgs-full:hover{color:var(--color-white);background:rgba(255,255,255,.1)}
.dgs-toggle:focus-visible,.dgs-full:focus-visible{outline:.125rem solid var(--color-white);outline-offset:0}
.dgs-full .dgs-ico-exit,.is-fullscreen .dgs-full .dgs-ico-enter{display:none}
.is-fullscreen .dgs-full .dgs-ico-exit{display:block}

/* Fullscreen: the picture takes all the room above the control bar. */
.dgs-player:fullscreen{display:flex;flex-direction:column;border-radius:0}
.dgs-player:-webkit-full-screen{display:flex;flex-direction:column;border-radius:0}
.is-fullscreen .dgs-screen{flex:1;min-height:0;aspect-ratio:auto}
.is-fullscreen .dgs-screen:has(.dgs-play:not([hidden])){cursor:pointer}
.is-fullscreen .dgs-bar{padding:.8rem 1.4rem;font-size:.9rem}
@media (max-width:30rem){.dgs-bar{gap:.6rem}}

/* Ad spot: the clip fills the picture, labelled as an ad. Hooks say "spot", never "ad":
   ad blockers hide anything named like .is-ad (EasyList), which took the whole player. */
.dgs-spot{align-self:stretch;justify-self:stretch;width:100%;height:100%;object-fit:contain;background:#000}
.dgs-spot-info{align-self:stretch;justify-self:stretch;position:relative;pointer-events:none}
.dgs-spot-badge{position:absolute;top:1rem;left:1rem;padding:.2rem .55rem;border-radius:.25rem;background:#f2c94c;color:#1a1a1a;font:700 .8rem/1.3 'Open Sans',Arial,sans-serif}
.dgs-spot-note{position:absolute;right:1rem;bottom:1rem;max-width:60%;padding:.55rem .9rem;border-radius:.3rem;background:rgba(0,0,0,.72);color:var(--color-white);font:.85rem/1.4 'Open Sans',Arial,sans-serif}
.is-spot .dgs-track i{background:#f2c94c}
.dgs-bar .dgs-ico-pause,.is-playing .dgs-bar .dgs-ico-play{display:none}
.is-playing .dgs-bar .dgs-ico-pause{display:block}