/* =====================================================================
   Gearshift - the card material

   Loaded AFTER gs-theme.css and before any page stylesheet. It does one
   thing: it turns every panel in the product from a flat slab into a piece
   of frosted glass — the iOS widget treatment — without touching the forty
   rules that draw those panels.

   WHY A SEPARATE FILE RATHER THAN A BLOCK AT THE END OF gs-theme.css
     gs-theme.css records, rule by rule, why the product went flat. That
     reasoning is still right for everything INSIDE a card: rows, wells,
     dividers and chips stay flat, because a list of glass rows inside a
     glass card is glass on glass and reads as noise. What changed is the
     card itself. Keeping the change in one short file means the decision
     can be read — and reverted — as one decision, by removing one <link>.

   THE MATERIAL, AND WHAT EACH LAYER IS FOR
     fill      a translucent gradient: the page's three light pools show
               through it, which is what makes it read as glass at all.
     blur      the backdrop, blurred and saturated, so what shows through is
               colour rather than detail.
     grain     a fine turbulence tile over the fill. Without it translucent
               reads as "unfinished"; with it, it reads as a material.
     edge      a 1px light catch along the top and a darker hairline at the
               foot, both INSET so they never change the card's size.
     shadow    two stages: a tight contact shadow and a long soft one. The
               long one is what lifts the card off the ground; the tight one
               stops it looking like it is floating.

   Every value is a token in tokens.css. Nothing here names a colour.
   ===================================================================== */

.gs-card,
.gs-stat,
.gs-kpi,
.gs-metric,
.gs-notepanel,
.gs-soon,
.gs-storepick,
.gx-card {
  background: var(--gs-card-noise), var(--gs-card-fill);
  background-blend-mode: overlay, normal;
  -webkit-backdrop-filter: var(--gs-card-blur);
  backdrop-filter: var(--gs-card-blur);
  border: 1px solid var(--gs-card-line);
  border-radius: var(--gs-card-radius);
  box-shadow: var(--gs-card-edge), var(--gs-card-shadow);
}

/* A card's own head band keeps its hairline, in the glass's line colour so
   it does not draw a harder rule than the card's edge. */
.gs-card__head { border-bottom-color: var(--gs-card-line); }

/* The live panel keeps its brighter hairline: it is the one card on a
   screen allowed to say "there is work here", and it says it by value. */
.gs-card--live,
.gs-metric--live { border-color: var(--gs-live-line); }

/* The tab strip is a small piece of glass, not a card: same material, the
   smaller radius, no long shadow under something that is only 44px tall. */
.gs-pagetabs {
  background: var(--gs-card-noise), var(--gs-card-fill);
  background-blend-mode: overlay, normal;
  -webkit-backdrop-filter: var(--gs-card-blur);
  backdrop-filter: var(--gs-card-blur);
  border: 1px solid var(--gs-card-line);
  border-radius: var(--gs-card-radius-sm);
  box-shadow: var(--gs-card-edge);
}

/* ── the reconciliation report and ticket board ───────────────────────
   `recon/report.html` was the one screen still drawn in slabs: a solid
   frame (`.rcx-panel`) around solid tiles and solid cards, and the ticket
   board's tabs and the report's notices sat on the page in the `well`
   surface, which is meant for things INSIDE a card. They are cards, so
   they get the card material, and the frame stops being a box of its own
   and becomes the layout it always was: glass cards straight on the
   picture, the way every other screen is built. What is inside them (rows,
   the chart, the head band's text) stays flat, as it does everywhere. */
.rcx-panel {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0;
}
.rcx-strip,
.rcx-hero,
.rcx-tile,
.rcx-card,
.rcx-note,
.rc-tab {
  background: var(--gs-card-noise), var(--gs-card-fill);
  background-blend-mode: overlay, normal;
  -webkit-backdrop-filter: var(--gs-card-blur);
  backdrop-filter: var(--gs-card-blur);
  border: 1px solid var(--gs-card-line);
  border-radius: var(--gs-card-radius);
  box-shadow: var(--gs-card-edge), var(--gs-card-shadow);
}
/* The one-line strips and the tabs are small pieces of glass: the smaller
   radius and no long shadow, like the page tab strip. */
.rcx-strip,
.rc-tab { border-radius: var(--gs-card-radius-sm); box-shadow: var(--gs-card-edge); }
/* The headline figure was padded by the frame; it is its own card now. */
.rcx-hero { padding: var(--gs-space-5) var(--gs-space-6); }
/* The four figures were one box ruled into quarters by a 1px gap on a
   line-coloured ground; they are four cards with a gutter now, the same
   as the dashboard's figures. */
.rcx-tiles {
  gap: var(--gs-space-3); background: none; border: 0; border-radius: 0;
  overflow: visible;
}
/* A card's head band keeps its hairline, in the glass's line colour, and
   loses the solid fill that made it a slab inside the glass. */
.rcx-card__head { background: none; border-bottom-color: var(--gs-card-line); }
/* The selected tab keeps its tint, laid over the glass. */
.rc-tab.is-on {
  background: var(--gs-card-noise),
              linear-gradient(var(--gs-accent-wash), var(--gs-accent-wash)),
              var(--gs-card-fill);
  border-color: var(--gs-accent-line);
}

/* Browsers with no backdrop blur get an opaque fill instead of a
   see-through one. Translucent WITHOUT the blur is the failure the notice
   panel once had: a table read straight through it. */
@supports not ((backdrop-filter: blur(1px)) or
               (-webkit-backdrop-filter: blur(1px))) {
  .gs-card, .gs-stat, .gs-kpi, .gs-metric, .gs-notepanel, .gs-soon,
  .gs-storepick, .gx-card, .gs-pagetabs,
  .rcx-strip, .rcx-hero, .rcx-tile, .rcx-card, .rcx-note, .rc-tab {
    background: var(--gs-card-noise), var(--gs-surface);
  }
}

/* ── light theme: one glass for everything that reads as a card ───────
   On dark, the dialogs and the plates set INTO a card (branch rows, tiles,
   check cards, setting/role/feature cards, part cards) all sit close enough
   to the card glass that the page reads as one material. On light they did
   not: the dialogs were 86% white with opaque head and foot bands, and the
   plates were opaque `--gs-surface-2` / `--gs-well`, so every one of them
   read as a white slab against the tinted glass around it. On light they
   all take the card material itself.

   Plates get the edge but not the long shadow, like the tab strip: they
   are inside a card, and a lifted shadow would make one panel a stack.
   State variants (checked, locked, held, done, hover) keep their own fill,
   which is why those are excluded or win on specificity.

   Written twice, like every light-only rule: `[data-theme]` and the OS
   media query are two different scopes. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  [data-theme='light'] .gs-modal {
    background: var(--gs-card-noise), var(--gs-card-fill);
    background-blend-mode: overlay, normal;
    -webkit-backdrop-filter: var(--gs-card-blur);
    backdrop-filter: var(--gs-card-blur);
    border-color: var(--gs-card-line);
    box-shadow: var(--gs-card-edge), var(--gs-card-shadow);
  }
  @media (prefers-color-scheme: light) {
    :root:where(:not([data-theme='dark'])) .gs-modal {
      background: var(--gs-card-noise), var(--gs-card-fill);
      background-blend-mode: overlay, normal;
      -webkit-backdrop-filter: var(--gs-card-blur);
      backdrop-filter: var(--gs-card-blur);
      border-color: var(--gs-card-line);
      box-shadow: var(--gs-card-edge), var(--gs-card-shadow);
    }
  }
}
/* Clear glass over a 45% black scrim reads as grey, not frosted: the dim
   behind a light dialog is a light ink wash instead. */
[data-theme='light'] .gs-modal::backdrop { background: rgb(12 50 58 / .22); }
[data-theme='light'] .gs-modal__head,
[data-theme='light'] .gs-modal__foot {
  background: none; border-color: var(--gs-card-line);
}
[data-theme='light'] .gs-task:not(.gs-task--done),
[data-theme='light'] .gs-tile,
[data-theme='light'] .gs-checkcard:not(.is-locked),
[data-theme='light'] .gs-setrow,
[data-theme='light'] .gs-featurecard:not(.is-held),
[data-theme='light'] .gs-rolecard,
[data-theme='light'] .gx-partcard {
  background: var(--gs-card-noise), var(--gs-card-fill);
  background-blend-mode: overlay, normal;
  border-color: var(--gs-card-line);
  box-shadow: var(--gs-card-edge);
}
@media (prefers-color-scheme: light) {
  :root:where(:not([data-theme='dark'])) .gs-modal::backdrop { background: rgb(12 50 58 / .22); }
  :root:where(:not([data-theme='dark'])) .gs-modal__head,
  :root:where(:not([data-theme='dark'])) .gs-modal__foot {
    background: none; border-color: var(--gs-card-line);
  }
  :root:where(:not([data-theme='dark'])) .gs-task:not(.gs-task--done),
  :root:where(:not([data-theme='dark'])) .gs-tile,
  :root:where(:not([data-theme='dark'])) .gs-checkcard:not(.is-locked),
  :root:where(:not([data-theme='dark'])) .gs-setrow,
  :root:where(:not([data-theme='dark'])) .gs-featurecard:not(.is-held),
  :root:where(:not([data-theme='dark'])) .gs-rolecard,
  :root:where(:not([data-theme='dark'])) .gx-partcard {
    background: var(--gs-card-noise), var(--gs-card-fill);
    background-blend-mode: overlay, normal;
    border-color: var(--gs-card-line);
    box-shadow: var(--gs-card-edge);
  }
}