/* The rules the PAGE adds to the viewer's own sheet, and no more than it needs.
 *
 * `style.css` is the prototype's, byte-identical, and stays that way: the
 * operator's ruling is that the Ledger HUD is finished and is not to be
 * re-skinned by the port. Everything below exists because the page carries one
 * element the prototype's index.html does not -- a link back to the match --
 * and an anchor wearing a class written for a <button> needs three declarations
 * that a <button> gets for free.
 *
 * Loaded AFTER style.css so it can do that at equal specificity. Not folded
 * into style.css for the same reason it is a separate file at all: the next
 * viewer pass overwrites style.css from the 3D worktree, and anything of ours
 * living inside it would be overwritten with it.
 */

.backout {
  /* The three an <a> does not inherit from `.btn`. */
  text-decoration: none;
  flex: none;
  color: var(--dim);
}

.backout:hover {
  /* The viewer's own hover language for a control that is not currently doing
     anything: the border stays, the ink comes up. `.btn:hover` already supplies
     the background wash. */
  color: var(--color-text);
}

/* The touch-target floor, on the one control this page adds. The viewer's other
   icon buttons sit in the transport bar, which is a pointer surface at every
   width by construction (a range slider and a cutaway well); this one sits in
   the top bar, which is the first thing a thumb reaches for. 3px of padding
   around a 15px glyph is a 21px target, and 21px is not a target. */
@media (pointer: coarse) {
  .backout {
    padding: 11px 12px;
  }
}

/* ---------------------------------------------------------------------------
   THE EMBED (`/demo/replay3d`, web/landing_demo.py).

   One rule, and it is not cosmetic: the public map door serves the `_lite` and
   `_ultra` tiers and REFUSES the 30 MB HQ export, so the button that asks for it
   would 404 the map out from under a visitor who pressed it. A control whose
   only outcome is a broken page is not a control.

   `visibility: hidden` rather than `display: none` deliberately: `#tiers` is a
   three-button row the viewer measures nothing about, and hiding the third one
   without collapsing it keeps "Ultra-lite / Lite" sitting where they sit on the
   product's own page, which is the page this sheet's other rules are written
   against. `pointer-events` because a hidden-but-laid-out button is still a
   click target.
   --------------------------------------------------------------------------- */

.rp-embed #tiers .tbtn[data-tier="full"] {
  visibility: hidden;
  pointer-events: none;
}