/* case-flow.css — image groups for the linked data and bulk actions case studies, which otherwise use
   the same section rail, .case-editorial and .case-figure as the CAS case studies. Tokens only.

   A row's images get a flex share equal to their width/height ratio (--a), so they share one height at
   their natural proportions. The row is capped (--sum is the ratios added up, --maxh the tallest the
   row may be) so tall phone screens stay small. Before → after pairs carry a text arrow. */
.flow-row{
  display:flex;align-items:flex-start;gap:clamp(.75rem,2vw,1.5rem);
  margin-top:2rem;
  max-width:min(1100px,calc(var(--maxh,9999px) * var(--sum,9999)));
}
.flow-row > .flow-shot{flex:var(--a,1) 1 0;min-width:0;}
.flow-shot{margin:0;line-height:0;}
.flow-shot .case-zoom-trigger img{
  height:auto;
  border-radius:clamp(8px,1.2vw,14px);
  box-shadow:var(--shadow-card-lift);
}
.case-figure .case-zoom-trigger img{
  height:auto;
  border-radius:clamp(12px,1.6vw,20px);
  box-shadow:var(--shadow-card-lift);
}
.flow-arrow{
  flex:none;align-self:center;
  font-family:var(--display-alt);font-size:clamp(1.5rem,3vw,2.5rem);line-height:1;
  color:var(--muted);
}

@media (max-width:47.99rem){
  .flow-row{flex-direction:column;align-items:stretch;max-width:none;}
  .flow-row > .flow-shot{flex:none;}
  .flow-arrow{transform:rotate(90deg);}                 /* the arrow points down when a pair stacks */
  .flow-row--phones{flex-direction:row;align-items:flex-start;}   /* phone screens stay side by side */
  .flow-row--phones > .flow-shot{flex:var(--a,1) 1 0;}
}

/* OCLC pages: the page follows the header's blue the way the CAS pages follow their green. Accents
   (headings, rail, links, bullets) use inkblue 800 and running text uses inkblue 900, the blue
   counterparts of the CAS pages' forest 700 accent and forest 900 ink. Both clear the contrast bars
   on the cream ground by a wide margin (roughly 9:1 and 14:1). */
.sfp--oclc{--accent:var(--inkblue-800);--muted:var(--inkblue-800);--ink:var(--inkblue-900);}

/* body copy on these pages is black (the site's --shade token, #000); headings, labels and links keep the accent */
.sfp--oclc .case-editorial-content p,
.sfp--oclc .case-editorial-content li{color:var(--shade);}

/* a composite of separate cards on a transparent canvas (the hover-card and side-panel variants):
   no frame or one shared shadow around the image, so each card sits on the page as its own object
   with its own shadow */
.flow-shot--free .case-zoom-trigger img{
  border-radius:0;
  box-shadow:none;
  filter:var(--shadow-shot);
}

/* phone screens: an iPhone-style frame drawn in CSS, with the screenshot scrolling inside it. The frame
   is sized in percentages of its own width, so it scales with the row. */
.phone-body{
  position:relative;display:flex;
  container-type:inline-size;             /* the status strip below is sized against the frame's width */
  aspect-ratio:9 / 19;
  padding:3%;
  background:var(--shade);
  border-radius:16% / 7.5%;
  box-shadow:var(--shadow-card-lift), inset 0 0 0 1px color-mix(in srgb,var(--apricot-50) 22%,transparent);
}
.phone-screen{
  flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  background:white;
  border-radius:13% / 6%;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--shade) 30%,transparent) transparent;
  overscroll-behavior:contain;
  line-height:0;
}
.phone-screen::before{                       /* the status-bar strip: the screenshot scrolls under it */
  content:"";display:block;position:sticky;top:0;z-index:1;
  height:12.5cqw;background:white;
}
.phone-screen img{display:block;width:100%;height:auto;}
.phone-screen:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-3px;}
.phone-body::before{                         /* the dynamic island */
  content:"";position:absolute;z-index:2;
  top:4.4%;left:50%;transform:translateX(-50%);
  width:28%;height:2.4%;
  background:var(--shade);border-radius:999px;
}
.phone-body::after{                          /* the home indicator */
  content:"";position:absolute;z-index:2;
  bottom:2.2%;left:50%;transform:translateX(-50%);
  width:32%;height:.7%;min-height:3px;
  background:color-mix(in srgb,var(--shade) 55%,transparent);border-radius:999px;
  pointer-events:none;
}