/* ─────────────────────────────────────────────────────────────────────────
   surfaces/skymap/kit.css — the component kit for Overhead.

   Ether, 2026-08-13: "do a design revamp on Prahar, Overhead, Umbra and Yuti
   … deploy uiverse heavily on each one of them."

   ── IT USED TO BE surfaces/almanac/kit.css's TWIN, AND IT IS NOT NOW ──────
   Everything down to "1 · THE SHELL FURNITURE" was copied VERBATIM from that
   file — the motion scale and the atmosphere, ~110 identical lines in two
   places, with nothing in the network able to tell if one of them was tuned.
   Both are gone. The tokens live in `surfaces/_shell/shell.css` beside
   `--mo-skin`, which is where they always belonged; they were here because
   `_shell` was held by another wave (I1470) on the day this was written, and a
   design edit inside somebody else's live claim is how I352 happens.

   Moved 2026-08-13 (I1523). What is left in this file is Overhead's own, and
   an edit to it is an edit to Overhead alone.

   ── WHY OVERHEAD'S HALF IS SHORTER THAN THE ALMANAC'S ─────────────────────
   Prahar, Umbra and Yuti are documents: cards, tables, forms, prose. Overhead
   is a live sky with a HUD over it, and almost none of the almanac kit applies
   — there is no form, no table of times, no grid of eight cards. What Overhead
   needs from a component library is glass that works on the floor device, a
   button that answers a thumb in the dark, and nothing that draws the eye off
   the sky. Sections 2 and 3 are that, and they are all of it.

       python3 surfaces/_shell/check_css.py
   before committing.
   ───────────────────────────────────────────────────────────────────────── */

/* ══ THE SCALE AND THE ATMOSPHERE LIVE IN THE SHELL NOW ════════════════════
   Moved 2026-08-13 (I1523). `--dur-tap/-move/-enter/-sweep`,
   `--ease-out/-move/-press`, `--rise-1/-2/-3`, `--edge-lit`, `--edge-grad`,
   their day values, their Plain overrides and the reduced-motion clamp are
   declared once in `surfaces/_shell/shell.css`, beside `--mo-skin`.

   They were HERE and identical in the other kit at the same time, because
   `_shell` was held when I1521 landed. Every rule below still reads them
   exactly as it did; nothing about this sheet's behaviour changed. If a token
   below resolves to nothing, the shell did not load — and on this network a
   kit without its shell is a page with no palette either, so it will not be a
   subtle failure.
   ─────────────────────────────────────────────────────────────────────── */


/* ══ 1 · THE SHELL FURNITURE, LIFTED ═══════════════════════════════════════
   `.sh-card` and `.sh-btn` are shell classes on every page of every surface —
   eight cards on Overhead's about page, ten buttons on its index. Restyling
   them from a surface sheet is the sanctioned override: build.py links a
   surface's stylesheets AFTER shell.css precisely so a surface can, and its
   comment at `styles =` says so.

   NOTHING HERE REDECLARES THE SHELL'S GEOMETRY. Padding, margin, radius and
   type are all still the shell's. What is added is depth, and only depth.

   THIS IS THE SAME BLOCK THE ALMANAC'S KIT CARRIES, minus the card's gradient
   hairline. Overhead's cards live below the fold on a page whose whole first
   screen is a photograph of the sky; a lit edge on a card down there is
   detail nobody is looking for, and the shadow alone does the job of
   separating one card from the next. */
.sh-card{box-shadow:var(--rise-1),var(--edge-lit);}

/* THE BUTTON. Overhead's ten controls are all `.sh-btn`, and this page is the
   reason the press state matters more here than anywhere else in the network:
   a sky map is used one-handed, outdoors, in the dark, with the other arm in
   the air. A control that gives nothing back when a thumb lands on it is a
   control the reader presses twice.

   `outline-offset` IS THE HOVER, from `rrr63_empty-cow-96` — it reads on a
   touch screen, where a hover shadow does not, and it costs no layout, which
   on a row that scrolls horizontally is the difference between a press and a
   reflow.
       https://uiverse.io/rrr63/empty-cow-96  (MIT)

   THE `:active` SCALE IS THE ONE THAT ACTUALLY SHIPS HERE. Hover does not
   exist on the device this page is designed for; `translateY(1px) scale(.985)`
   under `--dur-tap` is what a thumb gets, and it is 120ms because anything
   slower than that stops reading as the control moving and starts reading as
   the page being slow. */
.sh-btn{
  outline:1px solid transparent;
  outline-offset:0;
  box-shadow:var(--rise-1);
  transition:
    outline-offset var(--dur-move) var(--ease-out),
    outline-color  var(--dur-move) var(--ease-out),
    border-color   var(--dur-move) var(--ease-out),
    background     var(--dur-move) var(--ease-out),
    box-shadow     var(--dur-move) var(--ease-out),
    transform      var(--dur-tap)  var(--ease-press);}
.sh-btn:hover{
  outline-color:color-mix(in srgb,var(--moon) 26%,transparent);
  outline-offset:3px;
  box-shadow:var(--rise-2);}
.sh-btn:focus-visible{outline:2px solid var(--moon);outline-offset:3px;}
.sh-btn:active{transform:translateY(1px) scale(.985);}
.sh-btn[disabled]:hover{outline-offset:0;outline-color:transparent;
  box-shadow:var(--rise-1);}
.sh-btn[disabled]:active{transform:none;}

/* The primary pill — "Use my location" — gets the sweep from
   `KINGFRESS_nice-deer-12`, in ink over moon.
       https://uiverse.io/KINGFRESS/nice-deer-12  (MIT)

   ONE BUTTON ON THIS PAGE IS THE POINT OF IT and this is that button: a sky
   map with no location is a sky map of nowhere. `overflow:hidden` is added
   here and not on `.sh-btn`, so the other nine do not pay a clip to give this
   one a highlight. */
.sh-btn.primary{position:relative;overflow:hidden;}
.sh-btn.primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    transparent 20%,
    color-mix(in srgb,var(--ink) 24%,transparent) 50%,
    transparent 80%);
  transform:translateX(-100%);
  transition:transform var(--dur-sweep) var(--ease-move);
  pointer-events:none;}
.sh-btn.primary:hover::after{transform:translateX(100%);}
.sh-btn.primary > *{position:relative;z-index:1;}

/* ══ 2 · THE GLASS, AND THE FLOOR DEVICE ═══════════════════════════════════
   ⚠ THIS IS A BUG FIX, NOT A DESIGN CHANGE, and it is the most load-bearing
   line in this file.

   `.sky-first .sky-read` — the readout, the largest type on the page and the
   thing the whole product exists to print — declares `backdrop-filter` with
   NO `-webkit-` form. Unprefixed `backdrop-filter` is Safari 18.0. This
   network's floor is iOS Safari 16.4, measured from the app's own CSS and
   printed by `./uv`. So on the floor device that rule has been doing NOTHING:
   the readout is a 62%-translucent panel laid over a photograph of the Milky
   Way with no blur behind it, which is the one background translucency cannot
   survive.

   `./uv` prices "missing -webkit- forms" as an adoption cost for exactly this,
   and its note is the whole story: *backdrop-filter works on iOS only with the
   prefix, and a Chrome author never notices.* The Browser pane is Chromium and
   can never be evidence about iOS, so this was never going to be caught by
   looking at it.

   IT IS ALREADY WRITTEN CORRECTLY TWICE IN THIS REPO — `skymap.css:394` on
   the layer drawer, and every one of the nine occurrences in
   `product/app/app.css`, which always writes both forms. The readout is the
   one that was missed.

   THE PREFIXED FORM GOES FIRST so the unprefixed one wins wherever both are
   understood. It is applied HERE rather than in skymap.css so that the fix and
   the reasoning arrive together, and so `:root[data-skin="7"] *`'s global
   `backdrop-filter:none !important` — which Plain relies on — is not the only
   thing standing between the floor skin and a blur it does not want. Plain is
   handled below in its own right, because `!important` on the unprefixed
   property does not touch the prefixed one. THAT is the trap this file's
   comment exists to stop: adding `-webkit-backdrop-filter` anywhere in the
   network re-opens a hole in Plain unless it is closed in the same change. */
.sky-first .sky-read{
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);}

/* Plain paints flat, and shell.css's global rule only covers the unprefixed
   property. Every place the network gains a `-webkit-` form needs its Plain
   counterpart, and this is the network's second one. */
:root[data-skin="7"] .sky-first .sky-read{-webkit-backdrop-filter:none;}

/* `.sh-btn` USED TO BE PATCHED HERE and no longer is. It is a shell class, it
   is on every page of every surface, and a fix that only Overhead loads left
   the same hole open on the almanac and on everything after it. Both forms —
   and Plain's counterpart — now live in `surfaces/_shell/shell.css` beside the
   declaration itself, together with `.sh-skinname`, which had the same defect.
   Nothing shell-owned is prefixed from a surface stylesheet again. */

/* ══ 3 · THE READOUT, LIT ══════════════════════════════════════════════════
   Overhead's one hero, and the only element in the network that sits directly
   on a photograph rather than on a palette ground.

   IT DOES NOT GET `.uv-aura`. A halo behind a glass panel over a starfield is
   a smear over the exact pixels the product is asking the reader to look at,
   and the aura's own rule — one card per page, and only where there is
   something to make luminous — points the other way here: the luminous thing
   is the sky, and it is real.

   WHAT IT GETS IS AN EDGE AND A LIFT. `--rise-2` under a glass panel is what
   separates it from the sky behind it without tinting a single pixel of that
   sky, and the lit top hairline is what makes it read as a pane held in front
   of the view rather than a hole cut in it. Both are `none` on Plain, which is
   the floor skin and carries its look on edges. */
.sky-first .sky-read{box-shadow:var(--rise-2),var(--edge-lit);}