/* ---------- Case study pages (shares tokens + grid from styles.css) ---------- */

/* Same top padding as the home page (120px, from .page) */
.page--case .site-nav {
  gap: 32px;
}

.case-nav-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.return-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.return-link .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("assets/icons/arrow-left.svg") center / contain no-repeat;
  mask: url("assets/icons/arrow-left.svg") center / contain no-repeat;
}

/* ---------- Intro ---------- */
.case-intro {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.case-title h1 {
  font-size: 32px;
  line-height: 1.25;
}

.case-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-title h1 {
  margin: 0;
  font-weight: 500;
}

.case-meta {
  display: flex;
  flex-direction: column;
  gap: 20px; /* space below each divider */
  margin: 0;
}

.case-meta-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  border-bottom: 1px solid var(--border);
}

.case-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 20px; /* space above each divider */
}

.case-meta-item dt {
  color: var(--text-tertiary);
}

.case-meta-item dd {
  margin: 0;
  color: var(--text-primary);
}

/* ---------- Prose ---------- */
.prose {
  color: var(--text-secondary);
}

.prose > * + * {
  margin-top: 1.5em; /* one empty line between paragraphs */
}

.prose ul,
.prose ol {
  margin-bottom: 0;
  padding-left: 21px;
}

.prose ul {
  margin-top: 0;
}

.prose a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  transition: text-decoration-color 150ms ease-out;
}

.prose a:hover {
  text-decoration-color: currentColor;
}

/* A list straight after its lead-in sentence sits tight to it */
.prose p + ol,
.prose p + ul {
  margin-top: 0.5em;
}

.prose strong {
  font-weight: 500;
  color: var(--text-primary);
}

/* ---------- Chapters ---------- */
.chapter {
  display: flex;
  flex-direction: column;
  gap: 56px;
  scroll-margin-top: 120px;
}

/* The line between chapters comes from the shared section pattern in styles.css */

.chapter-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chapter-header h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
}

.labelled {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.label {
  color: var(--text-tertiary);
}

/* ---------- Figures ---------- */
.case-figure {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.case-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.case-figure figcaption {
  color: var(--text-secondary);
  text-align: center;
}

/* ---------- Slideshow (hupo.html) ----------
   Screens stacked in one spot. The current one slides up and fades out to
   reveal the next underneath, then drops to the back of the stack (hupo.html
   script). Only the current screen shows (plus the next one while it slides out),
   so a screen waiting underneath never peeks out from behind. */
.shot-swap {
  position: relative;
  display: grid;
}

.shot-swap img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  visibility: hidden;
}

/* The next screen only appears once the current one starts sliding away, so
   a screen underneath never peeks out around the current one (Slack's
   rounded window corners, for one) */
.shot-swap img.is-current,
.shot-swap:has(.is-out) img.is-next {
  visibility: visible;
}

.shot-swap img.is-current {
  z-index: 1;
}

.shot-swap img.is-out {
  opacity: 0;
  translate: 0 -24px;
  transition: opacity 600ms ease-out, translate 600ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- Picker modes table ---------- */
.modes-table {
  width: 100%;
  margin: 24px 0; /* + the 16px .labelled gap = 40px to the paragraphs around it */
  border-collapse: collapse;
  text-align: left;
  color: var(--text-secondary);
}

.modes-table th,
.modes-table td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

/* Balanced rows: trim each cell's text to its cap height and baseline, so the
   padding is exactly the gap between the letters and the lines (22px both
   sides, header and body alike, regardless of font size). */
@supports (text-box: trim-both cap alphabetic) {
  .modes-table th,
  .modes-table td {
    text-box: trim-both cap alphabetic;
    padding-top: 22px;
    padding-bottom: 22px;
  }
}

.modes-table th:last-child,
.modes-table td:last-child {
  padding-right: 0;
}

.modes-table th {
  font-weight: 500;
  color: var(--text-tertiary);
}

.modes-table th:first-child,
.modes-table td:first-child {
  width: 216px;
}

/* Short labels in the first column (hupo.html): give the room to the modes */
.modes-table--narrow-key th:first-child,
.modes-table--narrow-key td:first-child {
  width: 120px;
}

/* ---------- Picker drawers (picker.js) ----------
   Two frames, Batch and Serial number, playing through every transaction
   document: the drawer and its name swap instantly, showing one design
   across all 16 surfaces. Positions are fractions of the 673px Figma frame. */
.drawer-frames {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.drawer-frame {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  aspect-ratio: 673 / 405; /* same height for both; the taller serial drawer is cropped */
  background: var(--placeholder);
}

.drawer-frame .eyebrow,
.drawer-frame .doc-name {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
}

.drawer-frame .eyebrow {
  top: calc(48 / 673 * 100cqw);
  color: var(--text-tertiary);
}

.drawer-frame .doc-name {
  top: calc(71 / 673 * 100cqw);
  color: var(--text-primary);
}

/* The drawer sits straight on the stitched landscape, running off the bottom.
   --top / --w are in Figma frame units (out of 673 wide). */
.drawer-frame .drawer {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  max-width: none;
  top: calc(var(--top) / 673 * 100cqw);
  width: calc(var(--w) / 673 * 100%);
}

/* Side layout (hupo.html): label top-left, the modal to its right from near
   the top, so more of each form shows. Units are fractions of the 673 frame. */
.drawer-frame--side .eyebrow,
.drawer-frame--side .doc-name {
  left: calc(36 / 673 * 100cqw);
  right: auto;
  text-align: left;
}

.drawer-frame--side .eyebrow {
  top: calc(40 / 673 * 100cqw);
}

.drawer-frame--side .doc-name {
  top: calc(63 / 673 * 100cqw); /* 23 below the eyebrow, as on the Mekari drawers */
}

.drawer-frame--side .drawer {
  left: calc(193 / 673 * 100%);
  translate: none;
  border-radius: 8px 8px 0 0;
}

/* Too narrow for side by side: label on top, modal centred underneath */
@container (max-width: 480px) {
  .drawer-frame--side .eyebrow,
  .drawer-frame--side .doc-name {
    left: 16px;
  }

  .drawer-frame--side .eyebrow { top: 12px; }
  .drawer-frame--side .doc-name { top: 33px; }

  .drawer-frame--side .drawer {
    left: 50%;
    translate: -50% 0;
    top: 76px;
    width: calc(var(--w) / 430 * 88%);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .page--case .site-nav {
    flex-direction: column;
    gap: 16px;
  }

  /* On phones the nav is just "Return"; the chapter shortcuts are hidden */
  .case-nav-links {
    display: none;
  }

  .case-meta-row {
    grid-template-columns: 1fr;
    row-gap: 20px;
    border-bottom: 0;
  }

  .case-meta-item {
    border-bottom: 1px solid var(--border);
  }

  .modes-table th:first-child,
  .modes-table td:first-child {
    width: auto;
  }

}

/* ---------- Click to expand (lightbox.js) ---------- */
.zoom-target {
  position: relative;
  display: block;
}

.is-zoomable {
  outline-offset: 4px;
  cursor: zoom-in;
}

.is-failed .is-zoomable,
.is-failed.is-zoomable {
  cursor: auto;
}

.is-zoomable:focus-visible {
  outline: 2px solid var(--text-primary);
}

/* Small expand icon in the corner, shown on hover/focus */
.zoom-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px var(--border);
  color: var(--text-primary);
  pointer-events: none;
  opacity: 0;
  scale: 0.9;
  transition: opacity 150ms ease-out, scale 150ms ease-out;
}

.is-zoomable:hover .zoom-badge,
.is-zoomable:focus-visible .zoom-badge {
  opacity: 1;
  scale: 1;
}

@media (hover: none) {
  .zoom-badge {
    opacity: 1;
    scale: 1;
  }
}

html.lightbox-open {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  cursor: zoom-out; /* a click anywhere closes it */
}

/* Large media can be clicked again to see it at actual size, and back */
.lightbox.can-zoom .lightbox-img {
  cursor: zoom-in;
}

.lightbox.can-zoom.is-zoomed .lightbox-img {
  cursor: zoom-out;
}

.lightbox::backdrop {
  background: transparent;
}

/* Scrim: black at 30% over a blurred page */
.lightbox-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.lightbox-img {
  position: absolute;
  display: block;
  max-width: none;
  transform-origin: 0 0;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

/* An expanded padded frame (grey padding + stitched landscape + media) */
.lightbox .lightbox-frame {
  position: absolute;
  margin: 0;
  transform-origin: 0 0;
}

.lightbox-img[hidden] {
  display: none;
}

.lightbox.is-zoomed .lightbox-img {
  box-shadow: none;
}

.lightbox-close {
  position: absolute;
  cursor: pointer;
  top: 24px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px var(--border);
  color: var(--text-secondary);
  transition: color 150ms ease-out;
}

.lightbox-close:hover {
  color: var(--text-primary);
}

.lightbox-close:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .lightbox-close {
    top: 12px;
    right: 12px;
  }
}