/* ==========================================================================
   METIS — the screenshots' containment, and the page's two controls
   CLAUDE.md §7: each case study keeps its own brand system, contained.

   ITS OWN FILE, LOADED ONLY BY ITS OWN PAGE. Not shared with
   brand-eikira.css, even though both hold EIKIRA's ink: that file belongs to
   a brand page and this one to a product page, and a change to one must not
   be able to move the other.

   THE GOLD IS IN THE SCREENSHOTS AND NOWHERE ELSE. Metis is set in EIKIRA
   gold on EIKIRA ink, so every capture on this page carries gold. The plate
   below is the hard edge around them. Nothing in this file is gold, and
   nothing here references --kumkumam either: the shell's accent fails on
   this ground (2.4:1), so the controls inside the plate are paper on ink.

   CONTRAST, measured against Ink #14151A:
     Paper #F4EEE2          15.4 : 1   active tab, slider labels, knob
     Paper at 72%            8.6 : 1   inactive tabs
     Paper at 78% (caption)  9.9 : 1   project.css's contained caption
   ========================================================================== */

.metis-plate {
  /* EIKIRA ink, not the site's --ink. The site's is a warm brown-black
     (#241C18), and beside these cool captures it read as a brown band with
     screens dropped on it. The captures' own ground is darker still, so each
     screen keeps a visible edge against the plate. */
  --metis-ink: #14151A;
  --metis-paper: #F4EEE2;
  --metis-edge: rgba(237, 230, 214, 0.16);
  background: var(--metis-ink);
}

.metis-plate .frame {
  --frame-bg: var(--metis-ink);
  /* No mat. The frame's ground is the plate's, so padding would only show
     as a gap between a capture and its caption. */
  --frame-pad: 0px;
}

/* Every desktop capture here is 2880 x 1800, so the wide frame takes that
   ratio rather than the 1.5 bucket. The bucket exists to absorb odd source
   shapes; with one shape throughout, it only added a band of plate under
   each screen that read as a missing caption. */
.metis-plate .frame--wide { --frame-ratio: 1.6; }

/* FILL THE FRAME. layout.css sizes a framed image with width: auto, which
   for an image with srcset means its intrinsic width is the sizes value, not
   its pixels — so a capture came out 1152px wide in a 1216px frame, and the
   wipe's labels, laid over the frame, sat off the edge of the screen. Every
   frame here takes its capture's own ratio, so filling it is exact; contain
   keeps the one near-miss (the phone row's 0.46 bucket against 0.4618)
   from cropping. */
.metis-plate .frame > img,
.metis-plate .frame > picture > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A hairline on every capture, so a screen reads as a screen and not as a
   patch of the plate. Outline rather than border: it takes no layout, so a
   capture is never shrunk by 2px to make room for its own edge. */
.metis-plate .frame img { outline: 1px solid var(--metis-edge); }

/* Two captures side by side share one ratio, as everywhere on the site. */
.metis-plate .row + .pj-caption,
.metis-plate .frame + .pj-caption { margin-block-start: var(--sp-s); }

/* --- Rhythm --------------------------------------------------------------
   This page follows its source file's order, where the screens close each
   section rather than open it. project.css assumes the other order — a
   section after a figure is that figure's body copy, so it pulls in tight —
   which here would crush every section head up against the plate above it.
   So: prose to its own plate is tight, and a plate to the NEXT section is a
   new unit and loose. The one exception is the download line, which belongs
   to the plate above it. */
.pj > .pj-section + .metis-plate { margin-block-start: var(--stack-tight); }
.pj > .metis-plate + .pj-section { margin-block-start: var(--stack-loose); }
.pj > .metis-plate + .metis-after { margin-block-start: var(--stack-tight); }

/* --- The position --------------------------------------------------------
   §2's quote is the page's thesis, so it takes the lead treatment — display
   face, larger than body — in the site's own type on paper. Wider than a
   lead's 34ch: it is three sentences, and at 34ch it ran nine lines. */
.metis-position {
  max-width: 40ch;
  margin-block-end: var(--sp-l);
}
.metis-position p { max-width: none; margin: 0; }

/* --- The download line, and the one outbound link in §12 ------------------ */
.metis-download {
  margin: 0 auto;
  text-align: center;
  font-size: var(--type-small);
  color: var(--ink-muted);
}

/* Inside §12's body it follows the last paragraph, so it takes a little
   more than the paragraph gap: it is a pointer out, not a sentence of the
   argument. */
.pj-body > p + .metis-outbound { margin-block-start: var(--sp-l); }

/* ==========================================================================
   BEFORE / AFTER
   Real screenshots behind a real control. Without JavaScript the pair is
   simply two labelled figures, one above the other. With it, the two stack
   in one cell and a range input wipes between them: arrow keys, Home and
   End, Page Up and Down all work because the control is a native range.
   ========================================================================== */

.metis-ba { display: grid; gap: var(--sp-m); }

.metis-ba__layer { margin: 0; }

/* The frame takes the captures' own ratio, not a bucket: the two layers must
   register pixel for pixel, and letterboxing would only add a band both
   sides of the wipe. The desktop captures are 1.6; the phone captures,
   served below 46rem, are 750 x 1624. */
.metis-ba .frame {
  --frame-ratio: 1.6;
  --frame-pad: 0px;
}

@media (max-width: 46rem) {
  /* The whole pair narrows, not just the frames, so the live control laid
     over it still covers exactly the captures. */
  .metis-ba { max-width: 22rem; margin-inline: auto; }
  .metis-ba .frame { --frame-ratio: 0.4618; }
}

.metis-ba__label {
  margin: 0 0 var(--sp-2xs);
  text-align: center;
  font-size: var(--type-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--metis-paper);
}

/* --- Live -----------------------------------------------------------------
   metis.js wraps the two layers in a viewport and puts a label row above it.
   The labels never sit on a capture: over the screen they covered the app's
   own header — the retired build's name over the Metis mark, "Today" over
   the account menu. */
.metis-ba.is-live {
  display: block;
  --pos: 50%;
  /* The knob and its focus ring stay inside the frame at both ends: half the
     knob, plus the ring's width and offset. */
  --knob: 2.75rem;
  --knob-inset: calc(var(--knob) / 2 + 5px);
}

.metis-ba.is-live .metis-ba__label { display: none; }

.metis-ba__legend {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-s);
  margin: 0 0 var(--sp-2xs);
  font-size: var(--type-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--metis-paper);
}

.metis-ba__legend-side { transition: opacity var(--t-quick) var(--ease); }
.metis-ba__legend-side--after { text-align: right; }

/* A side the wipe has closed completely is not on screen, so its name is not
   either: dimmed, not removed, so the row keeps its two ends. */
.metis-ba__legend-side.is-off { opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  .metis-ba__legend-side { transition: none; }
}

.metis-ba__viewport {
  position: relative;
  display: grid;
}

.metis-ba__viewport > .metis-ba__layer { grid-area: 1 / 1; }

/* Today is revealed from the right; the retired build holds the left. */
.metis-ba__viewport > .metis-ba__layer--after {
  clip-path: inset(0 0 0 var(--pos));
}

/* The stage: the wipe's own box, laid over the viewport, which is exactly
   the two captures. */
.metis-ba__stage {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.metis-ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  /* A vertical swipe that starts on the image still scrolls the page. */
  touch-action: pan-y;
}

.metis-ba__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(1px, var(--pos), calc(100% - 1px));
  width: 2px;
  margin-left: -1px;
  background: var(--metis-paper);
  pointer-events: none;
}

/* The knob follows the divider but stops short of each edge, so at either
   end it sits whole inside the frame rather than half off it. */
.metis-ba__knob {
  position: absolute;
  top: 50%;
  left: clamp(var(--knob-inset), var(--pos), calc(100% - var(--knob-inset)));
  width: var(--knob);
  height: var(--knob);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background: var(--metis-paper);
  color: var(--metis-ink);
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.1em;
  pointer-events: none;
}

/* The range is invisible, so its focus is drawn on the knob it moves. */
.metis-ba__range:focus-visible ~ .metis-ba__knob {
  outline: 2px solid var(--metis-paper);
  outline-offset: 3px;
}

.metis-ba__hint {
  margin: var(--sp-s) auto 0;
  text-align: center;
  font-size: var(--type-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--metis-paper) 72%, transparent);
}

/* ==========================================================================
   THE RAIL'S FOUR TABS
   A real tab list swapping four real captures. Without JavaScript every
   panel shows, labelled, one after another. With it, one panel at a time.
   ========================================================================== */

.metis-tabs__panel { margin: 0; }
.metis-tabs__panel + .metis-tabs__panel { margin-block-start: var(--sp-l); }

.metis-tabs__name {
  margin: 0 0 var(--sp-2xs);
  text-align: center;
  font-size: var(--type-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--metis-paper);
}

.metis-tabs .frame { --frame-ratio: 1.6; --frame-pad: 0px; }
@media (max-width: 46rem) {
  .metis-tabs .frame { --frame-ratio: 0.4618; max-width: 22rem; margin-inline: auto; }
}

.metis-tabs__panel .pj-caption { margin-block-start: var(--sp-s); }

/* The rail today follows the trifold in the same plate: one band for the
   section's screens, as every other section has, rather than two bands with
   a strip of paper between them. */
.metis-plate .pj-contained__inner + .pj-contained__inner { margin-block-start: var(--sp-xl); }

/* --- Live ----------------------------------------------------------------- */
.metis-tabs.is-live .metis-tabs__name { display: none; }
.metis-tabs.is-live .metis-tabs__panel + .metis-tabs__panel { margin-block-start: 0; }

.metis-tabs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2xs) var(--sp-s);
  margin: 0 0 var(--sp-m);
}

.metis-tabs__tab {
  appearance: none;
  background: none;
  border: 0;
  border-block-end: 2px solid transparent;
  padding: 0.55em 0.2em;
  font: inherit;
  font-size: var(--type-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--metis-paper) 72%, transparent);
  cursor: pointer;
}

/* Four labels in one row at 375: the desktop gap and tracking put Synopsis
   on a line of its own, which read as a fifth, separate control. */
@media (max-width: 46rem) {
  .metis-tabs__list { gap: var(--sp-2xs) var(--sp-2xs); }
  .metis-tabs__tab { letter-spacing: 0.1em; }
}
/* Below that there is no room for four in a row, so two by two, evenly,
   rather than three and an orphan. */
@media (max-width: 23rem) {
  .metis-tabs__list { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; column-gap: var(--sp-m); }
}

.metis-tabs__tab:hover { color: var(--metis-paper); }

/* Selected is paper at full strength with a paper rule under it — the state
   is carried by weight and the rule, so it never depends on color alone. */
.metis-tabs__tab[aria-selected="true"] {
  color: var(--metis-paper);
  border-block-end-color: var(--metis-paper);
}

.metis-tabs__tab:focus-visible {
  outline: 2px solid var(--metis-paper);
  outline-offset: 3px;
}

/* A <picture> is a block in base.css, which would leave the image's
   max-height resolving against an auto height. Taken out of the box tree so
   the image is the frame's flex child, as a bare <img> is. */
.metis-plate .frame > picture { display: contents; }