/* gb-story.css: the gallbladder animated guide. Site tokens only; the
   drawing keeps its own anatomy colors inside the SVG. */
.gs-band { padding: 72px 0 88px; background: var(--paper-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gs-band h2 { max-width: 30ch; }
.gs-band .section-lead { max-width: 680px; margin-bottom: 24px; }
.gs { display: grid; gap: 14px; }
.gs-chapters { display: none; flex-wrap: wrap; gap: 8px; }
.gs.is-live .gs-chapters { display: flex; }
.gs-chapters button { font: 600 0.9rem/1 var(--sans); height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-dark); background: var(--paper); color: var(--ink); cursor: pointer; }
.gs-chapters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gs-chapters button:focus-visible, .gs-btn:focus-visible, .gs-script summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gs-figure { margin: 0; background: #f6efe1; border: 1px solid var(--line); overflow: hidden; }
.gs-figure svg { display: none; width: 100%; height: auto; }
.gs.is-live .gs-figure svg { display: block; }
.gs-poster { display: block; width: 100%; height: auto; }
.gs.is-live .gs-poster { display: none; }
.gs-note { font-size: 0.85rem; color: var(--ink-faint); padding: 8px 14px 10px; border-top: 1px solid var(--line); background: var(--paper); }
#gsAnat, .gs-photo { transition: opacity 0.5s ease; }
.gs-cap { display: none; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 18px 22px 20px; min-height: 10rem; }
.gs.is-live .gs-cap { display: block; }
.gs-cap-num { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.gs-cap-title { font-size: 1.3rem; margin-bottom: 6px; }
.gs-cap-text { font-size: 1.12rem; line-height: 1.6; max-width: 75ch; color: var(--ink); }
.gs-bar { display: none; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.gs.is-live .gs-bar { display: flex; }
.gs-btn { font: 600 1rem/1 var(--sans); height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.gs-btn.gs-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.gs-btn.gs-quiet { border-color: var(--line); color: var(--ink-soft); }
.gs-btn:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) {
  .gs-btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
  .gs-btn.gs-primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
}
.gs-progress { margin-left: auto; width: 200px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.gs-progress span { display: block; height: 100%; background: var(--accent); width: 0; transition: width 0.4s ease; }
.gs-script { border-top: 2px solid var(--ink); padding-top: 14px; }
.gs-script summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.gs-script ol { margin: 16px 0 0; padding-left: 1.4em; display: grid; gap: 10px; }
.gs-script li { padding-left: 4px; }
.gs-script li.here { color: var(--accent-dark); }
.gs-script p { max-width: 75ch; color: var(--ink-soft); }
.gs-script li::marker { color: var(--ink-faint); }
.gs-progress span.w0 { width: 0%; }
.gs-progress span.w1 { width: 5%; }
.gs-progress span.w2 { width: 10%; }
.gs-progress span.w3 { width: 15%; }
.gs-progress span.w4 { width: 20%; }
.gs-progress span.w5 { width: 25%; }
.gs-progress span.w6 { width: 30%; }
.gs-progress span.w7 { width: 35%; }
.gs-progress span.w8 { width: 40%; }
.gs-progress span.w9 { width: 45%; }
.gs-progress span.w10 { width: 50%; }
.gs-progress span.w11 { width: 55%; }
.gs-progress span.w12 { width: 60%; }
.gs-progress span.w13 { width: 65%; }
.gs-progress span.w14 { width: 70%; }
.gs-progress span.w15 { width: 75%; }
.gs-progress span.w16 { width: 80%; }
.gs-progress span.w17 { width: 85%; }
.gs-progress span.w18 { width: 90%; }
.gs-progress span.w19 { width: 95%; }
.gs-progress span.w20 { width: 100%; }
/* motion inside the drawing, only when the device allows it */
@media (prefers-reduced-motion: no-preference) {
  .gs-flow { animation: gs-flow 1.1s linear infinite; }
  @keyframes gs-flow { to { stroke-dashoffset: -18; } }
  .gs-ring { transform-box: fill-box; transform-origin: center; animation: gs-ring 1.6s ease-out infinite; }
  .gs-r1 { animation-delay: 0.5s; } .gs-r2 { animation-delay: 1s; }
  @keyframes gs-ring { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
  .gs-pulse { animation: gs-pulse 1.8s ease-in-out infinite; }
  @keyframes gs-pulse { 50% { opacity: 0.25; } }
  .gs-drop { transform-box: fill-box; transform-origin: center; animation: gs-drop 1.8s ease-in-out infinite; }
  .gs-d1 { animation-delay: 0.3s; } .gs-d2 { animation-delay: 0.6s; } .gs-d3 { animation-delay: 0.9s; }
  @keyframes gs-drop { 50% { transform: scale(1.35); } }
  .gs-squeeze.on { animation: gs-squeeze 1s ease-in-out infinite; }
  @keyframes gs-squeeze { 50% { opacity: 0.35; } }
  .gs-bug { transform-box: fill-box; transform-origin: center; animation: gs-bug 2.2s ease-in-out infinite; }
  .gs-b1 { animation-delay: 0.4s; } .gs-b2 { animation-delay: 0.8s; }
  @keyframes gs-bug { 50% { transform: translate(2px, -2px) rotate(25deg); } }
  .gs-photo.on { transform-box: fill-box; transform-origin: center; animation: gs-ken 16s ease-out forwards; }
  @keyframes gs-ken { from { transform: scale(1); } to { transform: scale(1.06); } }
}
@media (max-width: 700px) {
  .gs-band { padding: 52px 0 64px; }
  .gs-progress { margin-left: 0; width: 100%; }
  .gs-btn { padding: 0 18px; }
  .gs-cap { padding: 16px; min-height: 13rem; }
  .gs-cap-text { font-size: 1.05rem; }
}

/* v50 (Sep 25, 2026): drawing and caption side by side on wider screens, so
   the step can be read while it plays. Phones keep the stacked layout, with
   the drawing capped so the caption starts on the same screen. */
.gs-band { padding: 56px 0 64px; }
.gs-chapters button { font-family: var(--text); border-color: var(--line); }
.gs-cap { border-radius: 0 var(--r-md) var(--r-md) 0; border-left-color: var(--saffron); }
.gs-cap-title { font-family: var(--display); }
.gs-figure { border-radius: var(--r-md); }
@media (min-width: 980px) {
  .gs.is-live { grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); grid-template-areas: "chap chap" "fig cap" "fig bar" "script script"; grid-template-rows: auto auto 1fr auto; column-gap: 22px; align-items: start; }
  .gs.is-live .gs-chapters { grid-area: chap; }
  .gs.is-live .gs-figure { grid-area: fig; }
  .gs.is-live .gs-cap { grid-area: cap; min-height: 0; }
  .gs.is-live .gs-bar { grid-area: bar; align-self: start; }
  .gs.is-live .gs-script { grid-area: script; margin-top: 8px; }
  .gs.is-live .gs-cap-text { font-size: 1.04rem; line-height: 1.55; }
  .gs.is-live .gs-progress { margin-left: 0; width: 100%; order: 5; }
  .gs.is-live .gs-btn { height: 44px; padding: 0 18px; }
}
@media (max-width: 979px) {
  .gs.is-live .gs-figure svg { max-height: 46vh; }
  .gs-cap { min-height: 0; }
}

/* chapter card (js/gb-story.js adds it when a new part begins) */
.gs-figure { position: relative; }
.gs-card { position: absolute; left: 0; right: 0; top: 0; bottom: 38px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 0 8%; background: rgba(33, 29, 23, 0.97); color: var(--paper); opacity: 0; visibility: hidden; pointer-events: none; border-radius: var(--r-md) var(--r-md) 0 0; }
.gs-card::before { content: ""; width: 56px; height: 5px; border-radius: 3px; background: var(--saffron); margin-bottom: 6px; }
.gs-card-eb { font-family: var(--display); font-weight: 750; font-size: clamp(0.72rem, 1.4vw, 0.92rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--saffron); margin: 0; }
.gs-card-t { font-family: var(--display); font-stretch: 110%; font-weight: 800; font-size: clamp(1.6rem, 4.2vw, 3.3rem); line-height: 1.04; letter-spacing: -0.02em; max-width: 18ch; margin: 0; text-wrap: balance; }
.gs-card.on { visibility: visible; animation: gs-card 2.6s var(--ease-out, ease-out) both; }
@keyframes gs-card { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.gs-card.on .gs-card-t { animation: gs-card-t 2.6s var(--ease-out, ease-out) both; }
@keyframes gs-card-t { 0% { transform: translateY(14px); } 25% { transform: none; } 100% { transform: none; } }
@media (min-width: 980px) { .gs.is-live .gs-card-t { font-size: clamp(1.6rem, 2.9vw, 3.1rem); } }

/* closing summary (last step) */
.gs-summary { position: absolute; left: 0; right: 0; top: 0; bottom: 38px; display: none; flex-direction: column; justify-content: center; padding: 3% 6%; background: var(--ink); color: var(--paper); border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; }
.gs-summary.on { display: flex; }
.gs-sum-eb { font-family: var(--display); font-weight: 750; font-size: clamp(0.66rem, 1.1vw, 0.82rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--saffron); margin: 0 0 4px; }
.gs-sum-cov { font-size: clamp(0.78rem, 1.2vw, 0.95rem); color: #BDB4A3; margin: 0 0 3%; }
.gs-sum-t { font-family: var(--display); font-stretch: 110%; font-weight: 800; font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1; margin: 0 0 3%; }
.gs-sum-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gs-sum-list li { background: #2F2A22; border-left: 4px solid var(--saffron); border-radius: 0 10px 10px 0; padding: 10px 14px; }
.gs-sum-list b { display: block; font-family: var(--display); font-weight: 780; font-size: clamp(0.85rem, 1.5vw, 1.15rem); line-height: 1.2; }
.gs-sum-list span { display: block; font-size: clamp(0.75rem, 1.15vw, 0.92rem); color: #D8CFBF; }
@media (prefers-reduced-motion: no-preference) {
  .gs-summary.on { animation: gs-sum 0.6s var(--ease-out, ease-out) both; }
  @keyframes gs-sum { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 600px) {
  .gs-summary { padding: 12px 14px; }
  .gs-sum-eb, .gs-sum-cov { display: none; }
  .gs-sum-list { gap: 6px; }
  .gs-sum-list li { padding: 5px 8px; }
}
@media (min-width: 980px) { .gs.is-live .gs-sum-t { font-size: clamp(1.6rem, 2.6vw, 2.6rem); } .gs.is-live .gs-sum-list b { font-size: clamp(0.85rem, 1.05vw, 1.1rem); } }

/* Sept 26: the summary's blog and phone lines are links */
.gs-summary { z-index: 3; }
.gs-summary a.gs-sum-link { color: var(--saffron, #E3A33B); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; pointer-events: auto; }
.gs-summary a.gs-sum-link:hover { color: #fff; }
.gs-summary a.gs-sum-link:focus-visible { outline: 3px solid var(--saffron, #E3A33B); outline-offset: 3px; }

/* Sept 27, 2026: big Play button over the drawing, shown until the guide starts
   (same button as the hernia guide, css/descent.css .d-playover) */
.gs-playover { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 28px 0 12px; border: 0; border-radius: 999px; background: var(--navy-text, var(--accent)); color: #fff; font: 700 1.15rem/1 var(--sans); cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,0.22); z-index: 2; }
.gs-playover[hidden] { display: none; }
.gs-po-ring { width: 44px; height: 44px; border-radius: 50%; background: #fff; position: relative; flex: none; }
.gs-po-ring::after { content: ""; position: absolute; left: 17px; top: 13px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--navy-text, var(--accent)); }
@media (hover: hover) { .gs-playover:hover { background: var(--dress, var(--accent-dark)); } }
.gs-playover:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 700px) {
  .gs-playover { height: 54px; font-size: 1.05rem; padding: 0 22px 0 10px; }
  .gs-po-ring { width: 36px; height: 36px; }
  .gs-po-ring::after { left: 14px; top: 10px; border-width: 8px 0 8px 12px; }
}

/* Sept 27, 2026: on narrower screens, cap the drawing so the caption and the
   buttons fit on the same screen once the guide is scrolled into view */
@media (max-width: 979px) {
  .gs.is-live .gs-figure svg { max-height: max(200px, min(46vh, calc(100vh - 430px))); }
}