/* Components. Every colour and size references a §12.2 token from
   tokens.css — no literals. */

/* ---- Substitution picker ---- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  /* `flex-start` + `margin-top: auto` on the sheet, NOT `align-items: flex-end`.
     They put the sheet in the same place, but only this pair survives the sheet
     being taller than the overlay: flex-end distributes the overflow to the
     START edge, where it is unreachable — no scrolling gets you above the top of
     a flex container. The auto margin collapses to zero the moment there is no
     free space, leaving the top reachable. --h-sheet should stop that case
     arising at all; this is what makes it harmless if it ever does. */
  align-items: flex-start;
  justify-content: center;
  background: var(--veil);
  /* A scroll container that contains: `overscroll-behavior` only applies to one,
     so without `overflow-y` a drag on the backdrop chains straight through to
     the page behind. There is nothing here to scroll — the sheet is capped at
     88vh — which is the point: it absorbs the gesture rather than passing it on. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The page behind a sheet must not scroll. Set on the root, not on body: the
   viewport takes its overflow from `html` here (tokens.css gives it
   `overflow-x: clip`, which is not `visible`, so body's overflow no longer
   propagates), and locking body alone would do nothing.

   This is the one place `overflow: hidden` on the root is correct despite
   §12.4's warning about it killing sticky. That warning is about the PERSISTENT
   rule; this one lasts only while a sheet is open, and everything sticky is
   behind the veil for that whole time. core/sheet.js reference-counts it so a
   nested sheet closing cannot unlock the page under the one still open. */
.sheet-open,
.sheet-open body {
  overflow: hidden;
}

/* The scroll container every sheet gets, built by core/sheet.js so no caller can
   forget it. `min-height: 0` is load-bearing — a flex item's default minimum is
   its content, so without it the container grows to fit the form and overflows
   the sheet instead of scrolling inside it, which is exactly the wt-v30 defect. */
.sheet-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: min(var(--w-sheet), 100%);
  max-height: var(--h-sheet);
  margin-top: auto; /* bottom-anchors it — see .overlay */
  padding: var(--card-pad);
  padding-bottom: max(var(--card-pad), env(safe-area-inset-bottom));
  background: var(--bg);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--elev-2);
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}

.sheet-title {
  font-size: var(--fs-name);
  font-weight: 650;
  text-transform: capitalize;
}

/* The §7.1 title is a muscle-group name and wants capitalising; the §7.3 one
   is a sentence and does not. */
.sheet-title--plain {
  text-transform: none;
}

.sheet-sub {
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.pick-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}

/* No `overflow-y` here any more — `.sheet-scroll` owns the scrolling now, and a
   scroller nested inside a scroller gives the sheet two scrollbars and a
   gesture that stops halfway down. */
.pick-results {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.pick-group--muted {
  opacity: var(--op-muted);
}

.pick-group-head {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-1) 0;
  background: none;
  border: none;
  border-bottom: var(--hair) solid var(--line-soft);
  color: var(--text-dim);
  font: inherit;
  font-size: var(--fs-label);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  cursor: pointer;
}

.pick-group-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-top: var(--s-1);
}

.pick-row {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-left: var(--edge-active) solid transparent;
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pick-row:hover {
  border-color: var(--accent-line);
}

.pick-row--dim {
  opacity: var(--op-dim);
}

.pick-row--current {
  border-left-color: var(--accent);
}

.pick-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.pick-name {
  font-size: var(--fs-name);
  font-weight: 550;
  overflow-wrap: anywhere;
}

.pick-meta,
.pick-note,
.ex-meta,
.note {
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.pick-meta {
  margin-top: var(--s-1);
}

.pick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-1);
}

.pick-note {
  margin-top: var(--s-1);
  font-style: italic;
}

/* ---- §7.2a region filter ---- */

.regions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.regions:empty { display: none; }

.regions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.region {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  padding-top: var(--s-1);
  border-top: var(--hair) solid var(--line-soft);
}

.region-facets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.region-btn {
  min-width: var(--w-mg-label);
  font-weight: 600;
}

.region-btn--on {
  border-color: var(--accent-line);
  color: var(--accent);
}

/* Some but not all of the region's muscles are on. */
.region-btn--partial {
  border-color: var(--accent-line);
  color: var(--text);
}

.btn-on {
  border-color: var(--accent-line);
  color: var(--accent);
}