/* guide-view.css: desktop full screen for the animated guides (CRod, Sept 28, 2026).
   js/guide-view.js adds .gv-desk and .gv-full to the guide while the browser is in
   full screen. The phone rules in style.css (.gv-full) lay it out; these size it up
   for a monitor: bigger round buttons, a readable caption with its title, a bigger X. */
.gv-full .gv-fs-btn { display: none !important; }
/* the caption sits in a band under the picture, like subtitles, so it never covers the drawing */
.gv-desk.gv-full > .gs-figure, .gv-desk.gv-full > .d-figure { right: 96px; bottom: 176px; }
.gv-desk.gv-nocap.gv-full > .gs-figure, .gv-desk.gv-nocap.gv-full > .d-figure { bottom: 0; }
.gv-desk.gv-full > .gs-bar, .gv-desk.gv-full > .d-bar { right: 20px; top: 104px; gap: 16px; }
.gv-desk.gv-full .gs-bar .gs-btn, .gv-desk.gv-full .d-bar .d-btn { width: 58px; height: 58px; border-width: 2px; cursor: pointer; }
.gv-desk.gv-full .gs-bar .gs-btn::before, .gv-desk.gv-full .d-bar .d-btn::before { width: 26px; height: 26px; }
.gv-desk.gv-full .gs-bar .gv-cap-btn::before, .gv-desk.gv-full .d-bar .gv-cap-btn::before { width: auto; height: auto; font-size: 16px; }
.gv-desk.gv-full .gv-cap-btn[aria-pressed="false"]::after { left: 12px; right: 12px; }
.gv-desk.gv-full .gs-bar .gs-btn:hover:not(:disabled), .gv-desk.gv-full .d-bar .d-btn:hover:not(:disabled) { border-color: #9BE77A; }
.gv-desk.gv-full .gs-bar .gs-btn:focus-visible, .gv-desk.gv-full .d-bar .d-btn:focus-visible { outline: 3px solid #4CC94A; outline-offset: 3px; }
.gv-desk.gv-full > .gv-exit { top: 24px; right: 20px; width: 58px; height: 58px; border-width: 2px; }
.gv-desk.gv-full > .gv-exit svg { width: 26px; height: 26px; }
.gv-desk.gv-full > .gs-cap, .gv-desk.gv-full > .d-cap { left: calc((100% - 96px) / 2); bottom: 20px; width: min(calc((100% - 96px) * 0.86), 1150px); height: 148px; padding: 8px 0 0; border-radius: 0; background: transparent; }
.gv-desk.gv-full .gs-cap-title, .gv-desk.gv-full .d-cap-title { display: block; color: #9BE77A; font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.gv-desk.gv-full .gs-cap-text, .gv-desk.gv-full .d-cap-text { font-size: 1.35rem; line-height: 1.45; -webkit-line-clamp: 4; }
/* title card (js/guide-view.js): fades away when the guide starts; the Play button sits in the middle of the picture */
.gv-title { pointer-events: none; transition: opacity 0.6s ease; }
.gv-title.off { opacity: 0; }
/* over the title card the Play button is a round green triangle, placed by the script in the middle of the picture */
.gv-titled .gs-playover, .gv-titled .d-playover { width: 84px; height: 84px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; background: #4CC94A; box-shadow: 0 0 0 5px rgba(255,255,255,.9), 0 10px 30px rgba(0,0,0,.4); }
.gv-titled .gs-po-label, .gv-titled .d-po-label { display: none; }
.gv-titled .gs-po-ring, .gv-titled .d-po-ring { width: 84px; height: 84px; background: transparent; }
.gv-titled .gs-po-ring::after, .gv-titled .d-po-ring::after { left: 33px; top: 25px; border-width: 17px 0 17px 27px; border-color: transparent transparent transparent #0F1C2E; }
@media (hover: hover) { .gv-titled .gs-playover:hover, .gv-titled .d-playover:hover { background: #9BE77A; } }
.gv-titled .gs-playover:focus-visible, .gv-titled .d-playover:focus-visible { outline: 3px solid #fff; outline-offset: 8px; }
@media (prefers-reduced-motion: reduce) { .gv-title { transition: none; } }
/* full screen on desktop: dark bars around the hernia drawing instead of white */
.gv-desk.gv-full > .d-figure { background: #0B1422; }
.gv-desk.gv-full #dArt > rect:first-of-type { fill: #0B1422; }