/*
 * THE CARD LOOK — one definition, every card (Ryan's W89, 2026-09-03).
 *
 * ═══ WHAT RYAN ASKED FOR ═══
 *
 * On the accessories step: "Cards get the installer-card lift — same drop
 * shadow." And, in the same breath, the standing invitation this file is the
 * answer to: STANDARDISE THE CARD LOOK — border, radius, shadow — as a shared
 * definition. It is the same ruling as the pop-up shell's ("in the future when
 * I say modal or popup, let's reuse this shared component. Consistency"),
 * applied one level down: a card is a card.
 *
 * ═══ WHY A STATIC SHEET, AND WHY THIS SHAPE ═══
 *
 * Same mechanism and same reasoning as `chrome.css`, `modal.css` and the rest:
 * a static asset under `public/`, pulled in by a hoisted `<link>` with a
 * `precedence` (`card-styles.tsx`), so it never attaches to the shared
 * `[brand]` layout chunk and never appears on a page that draws no card.
 *
 * IT IS DELIBERATELY THE MODAL SHELL'S DUAL-CLASS PATTERN, not a new one. Every
 * card wears TWO classes — `sf-card` AND its own block class
 * (`sf-inst-card` / `sf-flow-acc__card`). The shared class carries every FRAME
 * property; the block class carries what genuinely differs (padding, columns,
 * a rank badge's positioning context) and keeps the recorded gates' selectors.
 *
 * AND THE SPLIT IS NOT COSMETIC — IT IS WHAT AVOIDS A CASCADE RACE. `.sf-card`
 * and `.sf-inst-card` have the SAME specificity, in two different `<link>`ed
 * sheets, and which one wins a contested property is decided by whichever sheet
 * React hoisted last. So a block class must never re-declare a property this
 * file owns. The shell's own header records this trap in the same words; it is
 * repeated here because this is the second place it applies and the first place
 * a new card author will read.
 *
 * ═══ THE NUMBERS ARE THE INSTALLER CARD'S, TO THE PIXEL ═══
 *
 * W39 (2026-09-02) gave the installer cards their lift and recorded where every
 * value came from: `0 1px 2px / 6%` is the contact shadow `chrome.css` already
 * puts under a raised control, and `0 6px 18px / 8%` is the lightest of the
 * three ambient lifts this storefront uses (`chrome.css` and `category.css`
 * both draw it). Two layers rather than one, because a single large blur with
 * no contact layer makes a card look like it is floating rather than sitting.
 *
 * Standardising ONTO those values rather than onto a new average is what makes
 * this a no-op for the installer card: `instgate` and `instmodal` measure the
 * same computed border, radius and shadow after this change as before it. The
 * accessories step is what MOVES, which is what Ryan asked to move.
 *
 * THE BORDER STAYS AND THE SHADOW SITS UNDER IT. In a flat house the edge is
 * what makes a card crisp; the shadow is only what lifts it off the ground.
 * Dropping the hairline and leaning on the shadow alone is the material-design
 * move and it reads soft — the corners stop being a line and become a gradient.
 *
 * NO HOVER TRANSITION. These cards are not pressable — the controls inside them
 * are — and a card that lifts under the pointer promises a press that never
 * comes.
 *
 * IT COSTS NO GEOMETRY. `box-shadow` paints outside the border box without
 * participating in layout, so every recorded MEASURE on a card that adopts this
 * is the number it was; what moves is paint.
 *
 * ═══ HOW TO USE IT ═══
 *
 *   <article className="sf-flow-acc__card sf-card">      // markup
 *   .sf-flow-acc__card { display: flex; padding: 18px; } // block: NOT the frame
 *
 * A card that needs to change a frame property does it through the CUSTOM
 * PROPERTIES below, on its own block class — a longhand override would lose to
 * this file's shorthand on whichever sheet was hoisted last. The one live
 * example is the accessories card's ADDED state, which composes an inset accent
 * ring on top of `--sf-card-lift` rather than replacing the `box-shadow`.
 *
 * NOT COMPILER-CHECKED, like every sheet under `public/`: after editing, sweep
 * for orphaned `sf-` classes and re-count the brace balance.
 */

:root {
  /* The card's ground. `surface`, which is what a card is by definition here. */
  --sf-card-ground: var(--brand-color-surface, #ffffff);
  /* The hairline edge, as one shorthand so a caller can restate it whole. */
  --sf-card-edge: 1px solid var(--brand-color-line, #e8e7e3);
  /* The house corner. Every card on this site has always drawn this one. */
  --sf-card-radius: var(--radius-control, 6px);
  /* W39's two layers: contact, then the lightest ambient lift. */
  --sf-card-lift:
    0 1px 2px rgb(23 24 26 / 6%),
    0 6px 18px rgb(23 24 26 / 8%);
}

.sf-card {
  background: var(--sf-card-ground);
  border: var(--sf-card-edge);
  border-radius: var(--sf-card-radius);
  box-shadow: var(--sf-card-lift);
}