/* Shared figure rules for every Playbook post. Loaded after each post's inline <style>. */

/* Phone legibility.
   Figure SVGs are drawn on a 760-960 unit canvas. Squeezed into a ~330px phone
   column, a 10-unit label renders around 4px. Below 640px the chart keeps a
   minimum rendered width (about 0.87 of its viewBox, so 10-unit labels land
   near 8.5px) and pans sideways inside the card. Label, title, caption and
   source stay at the card width and wrap normally; only the chart pans.
   Narrow or tall figures (viewBox width under 600) are left alone. */
@media (max-width:640px){
  .figure{
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    scrollbar-color:#3a3833 transparent;
  }
  .figure::-webkit-scrollbar{height:4px}
  .figure::-webkit-scrollbar-thumb{background:#3a3833;border-radius:2px}
  .figure::-webkit-scrollbar-track{background:transparent}

  .figure > svg[viewBox^="0 0 6"]{min-width:560px}
  .figure > svg[viewBox^="0 0 7"]{min-width:660px}
  .figure > svg[viewBox^="0 0 8"]{min-width:700px}
  .figure > svg[viewBox^="0 0 9"]{min-width:820px}
  .figure > svg[viewBox^="0 0 10"]:not([viewBox^="0 0 10 "]),
  .figure > svg[viewBox^="0 0 11"]:not([viewBox^="0 0 11 "]),
  .figure > svg[viewBox^="0 0 12"]:not([viewBox^="0 0 12 "]){min-width:880px}

  /* Swipe hint, shown above the caption only when the chart actually pans. */
  .figure > svg[viewBox^="0 0 6"] + .fig-cap::before,
  .figure > svg[viewBox^="0 0 7"] + .fig-cap::before,
  .figure > svg[viewBox^="0 0 8"] + .fig-cap::before,
  .figure > svg[viewBox^="0 0 9"] + .fig-cap::before,
  .figure > svg[viewBox^="0 0 10"]:not([viewBox^="0 0 10 "]) + .fig-cap::before,
  .figure > svg[viewBox^="0 0 11"]:not([viewBox^="0 0 11 "]) + .fig-cap::before,
  .figure > svg[viewBox^="0 0 12"]:not([viewBox^="0 0 12 "]) + .fig-cap::before{
    content:'Swipe the chart \2192';
    display:block;
    margin:0 0 10px;
    font-family:'JetBrains Mono',monospace;
    font-style:normal;
    font-size:9.5px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#6f6b64;
  }
}

/* Product stills ("shots"). First used in what-is-instinct.
   .shots        three phone-width columns (portrait screens)
   .shots.two    two columns (landscape stills or charts side by side)
   .shots.one    one wide image (landscape chart or video still)
   .shot.bleed   phone screen with a rounded device-style border
   All variants break out of the text column to 900px like .figure.
   Below 640px the three- and two-column strips scroll sideways with snap;
   .shots.one stays a single full-width image. */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:36px 0 8px;align-items:start;width:min(900px,94vw);position:relative;left:50%;transform:translateX(-50%)}
.shots.two{grid-template-columns:repeat(2,1fr)}
.shots.one{grid-template-columns:1fr}
@media(max-width:980px){.shots{width:100%;left:0;transform:none}}
@media(max-width:640px){
  .shots{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .shots.two{grid-auto-columns:86%}
  .shots.one{grid-template-columns:1fr;grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible;padding-bottom:0}
  .shot{scroll-snap-align:start}
  .shots.one .shot,.shots.two .shot{padding:12px 12px 10px}
}
.shot{margin:0;background:#ece7df;border-radius:14px;padding:18px 18px 14px;min-width:0}
.shot img{width:100%;height:auto;display:block}
.shots.one .shot img,.shots.two .shot img{border-radius:6px}
.shot.bleed img{border-radius:30px;border:6px solid #141414;box-sizing:border-box}
.shot figcaption{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:#6b6760;margin-top:12px;line-height:1.55}
.shot figcaption b{display:block;color:var(--ink);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:10px;margin-bottom:3px}
.shots-cap{font-family:'Instrument Serif',serif;font-size:15px;font-style:italic;color:#8a8680;margin:6px 0 34px;text-align:center}
.shots-cap a{color:inherit}