/* =====================================================================================================
   yfile — image-chooser.css.  Lift step 6 (PREVIEW): the eight classes chooseImage renders.

   WHY THIS FILE IS PART OF THE STEP AND NOT AN EXTRA. Resolving `preview-viewer.js:27` only makes the
   import work. The function it resolves renders EIGHT classes that were 8 of 8 UNDEFINED in this tree,
   because the host sheet `chrome.css` was never captured — six for the picker and the camera modal at
   chrome.css:1007-1014 (.img-choose, .img-choose-b, .cam-ov, .cam-box, .cam-video, .cam-row) and two in
   a SECOND, unrelated region at chrome.css:364-365 (.btn, .btn--primary). Undefined, the picker is a
   bare popover of two unstyled buttons and the camera modal is an unpositioned <div> with a video in it:
   the import resolves and the feature is unusable. A resolved import whose UI is invisible is not a
   closed step, so this sheet lands with the carve.

   HOW IT RELATES TO THE ESTATE'S SHEET. The two regions above were READ (the served tree is read-only)
   and the RULE SET is carried one-for-one — same selectors, same properties, same layout intent, so the
   control behaves the way its verbatim JS expects. The VALUES are yfile's own, and that is not licence:

     · COLOUR. Nothing here authors a hue, a grey or an alpha that the golden-ratio palette did not
       emit. Every surface, edge and ink is a token tokens.css §3 already derived (--yf-ctl-bg,
       --yf-ctl-edge, --yf-ctl-hov, --yf-ctl-ink, --yf-panel, --yf-focus, --yf-accent), and the two raw
       blacks are ladder values with their rung named on the line. The estate's raw `rgba(0,0,0,…)`
       alphas (.55, .28, .72) are NOT carried — they are re-expressed on the alpha ladder 0.618^n, which
       is the same rule bridges.css states and follows.
     · MEASURE. Lengths come from palette.py scale(16) — 6.111 / 9.889 / 16 / 25.889 / 41.889 / 67.777 —
       spent as the --yf-s0..--yf-s3 tokens and their 1.618 multiples, so nothing here is a number
       someone liked.
     · `dvh`, NOT `vh`. chrome.css:1013 caps the camera preview at `60vh`. This tree's adaptive surface
       LAW 1 is dvh/svh only (preview-viewer.js:18-22 states it; tokens.css:136/195/220 follow it), and
       the difference is real on the phone this sheet is most needed on: with a retracting URL bar, a
       `vh` cap is measured against a viewport that is not the one the video is in.

   THE 11 INHERITED TOKENS ARE NOT RETUNED HERE, and none of them is redefined. --font is READ, because
   it is the page's type face and this control is on the page.

   ONE NOTE ON `.btn`. It is the most collidable class name in this file, so it was measured before it
   was written: across all ten stylesheets and all sixteen modules of this tree, `.btn` has exactly ONE
   renderer — image-chooser.js:64-65, the camera modal's Capture/Cancel row — and no other captured sheet
   defines it (liquid-glass.css:95 only mentions the estate's `.btn.danger` hue in a comment). It is
   therefore defined at top level, as the estate defines it, so that a later carve rendering `.btn` finds
   one authority rather than minting a second.
   ===================================================================================================== */

/* --- the picker popover (chrome.css:1007-1010) ------------------------------------------------------ */
.img-choose {
  border: none;
  border-radius: var(--yf-r2);                    /* frame radius; the estate's 14px on this tree's scale */
  padding: var(--yf-s1);
  background: var(--yf-panel);
  color: var(--yf-ctl-ink);
  /* bridges.css's toast shadow, one step up the measure scale in both offset and blur, because a popover
     in the top layer floats further off the page than a notice pinned to its corner.
     25.889 / 67.777 are scale(16) steps 4 and 6; the alpha is ladder step 1 (0.618^1). */
  box-shadow: 0 var(--yf-s3) calc(var(--yf-s3) * 2.618) calc(var(--yf-s2) * -1) rgb(0 0 0 / .618);
  display: grid;
  gap: var(--yf-s0);
  min-inline-size: 220px;
}
.img-choose::backdrop { background: rgb(0 0 0 / .236); }   /* alpha ladder step 3 */

.img-choose-b {
  border: 1px solid var(--yf-ctl-edge);
  background: var(--yf-ctl-bg);
  color: var(--yf-ctl-ink);
  border-radius: var(--yf-r1);
  padding: var(--yf-s1) var(--yf-s2);
  font: 600 var(--yf-fs)/1 var(--font);           /* one size for the whole shell — tokens.css:92-95 */
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--yf-s0);                              /* the icon() glyph and its label are siblings in one line box */
}
.img-choose-b .ico { inline-size: 1em; block-size: 1em; flex: none; }
/* The accent lives in the EDGE, not in a tinted fill. Same choice bridges.css:41-44 records: mark the
   focused choice without inventing a second background hue the palette does not define. */
.img-choose-b:hover { border-color: var(--yf-focus); background: var(--yf-ctl-hov); }
.img-choose-b:focus-visible { outline: 2px solid var(--yf-focus); outline-offset: 2px; }

/* --- the live camera modal (chrome.css:1011-1014) --------------------------------------------------- */
.cam-ov {
  position: fixed;
  inset: 0;
  /* Above everything on the page. Measured, not guessed: the captured sheets top out at z-index 300
     (vault.css) and this tree's own shell at 60 (bridges.css .yf-notes). The picker that launches this
     is a top-layer popover, but it is dismissed before the camera opens, so this scrim cannot lean on
     the top layer and carries the estate's own modal-scrim value instead. */
  z-index: 9999;
  background: rgb(0 0 0 / .618);                  /* alpha ladder step 1 — the strongest rung there is */
  display: grid;
  place-items: center;
  padding: var(--yf-s2);
}
.cam-box {
  background: var(--yf-panel);
  color: var(--yf-ctl-ink);
  border-radius: var(--yf-r2);
  padding: var(--yf-s1);
  display: grid;
  gap: var(--yf-s1);
  max-inline-size: min(92vw, 520px);
}
.cam-video {
  inline-size: 100%;
  max-block-size: 60dvh;                          /* LAW 1: dvh, never vh — see the header */
  border-radius: var(--yf-r1);
  background: #000000;                            /* grey ladder step 8 (0) — a camera preview's own ground */
  object-fit: contain;
}
.cam-row { display: flex; gap: var(--yf-s1); justify-content: center; }

/* --- the shared button pair (chrome.css:364-365) ---------------------------------------------------- */
.btn {
  cursor: pointer;
  border: 1px solid var(--yf-ctl-edge);
  border-radius: var(--yf-r1);
  padding: var(--yf-s1) var(--yf-s2);
  background: var(--yf-ctl-bg);
  color: var(--yf-ctl-ink);
  font: 600 var(--yf-fs)/1 var(--font);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--yf-s0);
}
.btn .ico { inline-size: 1em; block-size: 1em; flex: none; }
.btn:hover { background: var(--yf-ctl-hov); }
.btn:focus-visible { outline: 2px solid var(--yf-focus); outline-offset: 2px; }
.btn--primary { background: var(--yf-accent); color: #ffffff; border-color: transparent; }
.btn--primary:hover { background: var(--yf-accent2); }

/* THE FLOOR, NOT THE CEILING — tokens.css:238-251's own correction, applied to this sheet's controls.
   The estate gets this for free from mobile.css:49-62, a blanket `min-block-size: var(--ytx-tap)` over
   every actionable control; mobile.css is not captured, so without this block these buttons would be the
   only controls in the tree with no tap floor. min-, and --yf-ctl (36px), never --ytx-tap-ceil (44px). */
@media (pointer: coarse) {
  .img-choose-b, .btn { min-block-size: var(--yf-ctl); }
}
@media (prefers-reduced-motion: reduce) {
  .img-choose, .cam-ov, .cam-box { transition: none; animation: none; }
}