/* site/system/case.css: page CSS for the five case studies, and for those five only.
 *
 * ONE FILE FOR FIVE PAGES, deliberately. They are one page type with one shape: a stamp, a title, a
 * frame, four figures, an index, then context, bet, decisions, what shipped and what was learned.
 * Five near-identical stylesheets is five places to fix one padding value, and the load-order rule
 * does not care how many pages a page CSS serves.
 *
 * Linked LAST in the head (S2), so a rule here can override a component without raising specificity.
 *
 * S1, and gate group 6 treats this file as a consumer exactly as it treats components.css: contract
 * tokens only, no colour literal, no pack primitive, no bare px on padding, margin, gap,
 * border-radius or font-size. No @import either, since an @import is invisible to the S2 order check.
 */

/* ---- The head of the page ---- */

.cs-crumb {
  font-size: var(--type-caption);
  color: var(--color-fg-muted);
  margin-bottom: var(--spacing-sm);
}
.cs-crumb a:hover { color: var(--color-fg); }

.cs-stamp {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-bottom: var(--spacing-md);
}

.cs-sub {
  max-width: 60ch;
}

/* The frame note takes a rule rather than a box, the same shape work.css gives its outbound note: it
   is a fact the reader needs about what they are looking at, not a warning that needs a container. */
.cs-frame-note {
  font-size: var(--type-caption);
  line-height: 1.6;
  color: var(--color-fg-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
  max-width: 60ch;
}

/* ---- The four numbers ----
   column-reverse, because the <dl> is authored label-then-value to match every other label/value
   pair in this build (the briefing, the replay fields, the decision card) and the eye wants the
   number first. The order the screen reader reads is the order the markup carries. */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  margin: var(--spacing-2xl) 0 0;
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}
.cs-stat {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--spacing-xs);
}
.cs-stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-h3);
  color: var(--color-fg);
  line-height: 1.1;
}
.cs-stat dt {
  font-size: var(--type-caption);
  line-height: 1.4;
  color: var(--color-fg-muted);
}

/* ---- The in-page index ---- */

.cs-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md) var(--spacing-lg);
  margin-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}
.cs-jump a {
  font-size: var(--type-caption);
  color: var(--color-fg-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2px;
}
.cs-jump a:hover {
  color: var(--color-fg);
  border-bottom-color: var(--color-border-strong);
}

/* ---- The sections ----
   scroll-margin-top clears the sticky header when a jump link lands, so the heading it targets is
   not sitting underneath the navigation, which is sticky at every width. */
.cs-section {
  margin-top: var(--spacing-3xl);
  scroll-margin-top: var(--spacing-4xl);
}
.cs-h {
  margin-bottom: var(--spacing-lg);
}
.cs-p {
  max-width: 68ch;
  margin-bottom: var(--spacing-md);
}
.cs-p:last-child { margin-bottom: 0; }

/* ---- The screenshots ----
   auto-fit rather than a fixed three, because two of the five case studies ship portrait phone
   captures and three ship landscape dashboards, and a track sized for one crops the other. */
.cs-figure {
  margin: var(--spacing-3xl) 0 0;
}
.cs-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
  align-items: start;
}
.cs-shot {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  overflow: hidden;
  transition: border-color var(--motion-base) var(--motion-ease);
}
.cs-shot:hover { border-color: var(--color-border-strong); }
.cs-shots img {
  display: block;
  width: 100%;
  height: auto;
}
.cs-fig-hint {
  color: var(--color-fg-muted);
}
.cs-figure figcaption {
  font-size: var(--type-caption);
  line-height: 1.6;
  color: var(--color-fg-muted);
  max-width: 68ch;
  margin-top: var(--spacing-md);
}

/* ---- The decisions, as a disclosure list ----
   <details> rather than a scripted accordion: it opens, closes and is keyboard-operable with no
   module loaded, which is the same standard every control on this site is held to. */
.cs-item {
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-md) 0;
  max-width: 68ch;
}
.cs-item:last-of-type {
  border-bottom: 1px solid var(--color-border);
}
.cs-item summary {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--font-weight-ui);
  color: var(--color-fg);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.cs-item summary::-webkit-details-marker { display: none; }
/* The marker is authored here rather than in markup, so the summary carries the sentence and nothing
   else: a screen reader announces the disclosure state itself and does not need a plus sign read to
   it as well. */
.cs-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--color-fg-muted);
  flex-shrink: 0;
}
.cs-item[open] summary::after { content: "\2212"; }
.cs-item summary:hover { color: var(--color-accent); }
.cs-item-body {
  padding-top: var(--spacing-sm);
  color: var(--color-fg-muted);
  line-height: 1.6;
}


/* ---------- The viewer ----------
   Authored by site/system/lightbox.mjs and appended to <body>, so none of this exists until a
   reader asks for it. A native <dialog> carries the focus containment, the inert background and
   Escape from the platform; what is left is making it look like the rest of the site.

   THE DIALOG IS THE SCRIM. It fills the viewport and carries the dimming as an ordinary background,
   and the visible panel is .lb-frame inside it. Two other shapes were tried and measured first: a
   ::backdrop background, which resolves no custom property in engines whose ::backdrop has no
   parent, and a box shadow spread from the panel, which computed correctly and painted nothing
   through this page's overflow clipping. Both fail silently, which is exactly how a scrim should
   not fail. ::backdrop is cleared so the platform default cannot sit on top of this one. */
.lb {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  padding: var(--spacing-lg);
  border: 0;
  background: color-mix(in srgb, var(--color-bg-inverse) 78%, transparent);
}
.lb::backdrop { background: transparent; }
.lb[open] {
  display: grid;
  place-items: center;
}

/* The capture is the whole point, so the panel gives it everything: the bar and the caption take
   the edges and the picture takes the middle, sized to the viewport rather than to its own pixels,
   because a 2000px screen shown at 2000px is the raw-file problem again. */
.lb-frame {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--spacing-md);
  width: min(96vw, 1400px);
  max-height: 92vh;
  min-height: 0;
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-fg);
  overflow: hidden;
}

.lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.lb-count {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-muted);
}
.lb-controls {
  display: flex;
  gap: var(--spacing-sm);
}
/* 40px of target on every control, which is what a thumb needs and what three 16px glyphs would
   otherwise not give it. */
.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  color: var(--color-fg);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease);
}
.lb-btn:hover { border-color: var(--color-border-strong); }
.lb-btn[hidden] { display: none; }

.lb-stage {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--spacing-md);
  margin: 0;
  min-height: 0;
}
.lb-stage img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
}
.lb-caption {
  font-size: var(--type-caption);
  line-height: 1.6;
  color: var(--color-fg-muted);
  max-width: 80ch;
}

@media (max-width: 700px) {
  .cs-stats { grid-template-columns: repeat(2, 1fr); }
  .lb { padding: var(--spacing-sm); }
  .lb-frame { padding: var(--spacing-md); }
}