/*
 * Baked nine-slice texture generated by
 * desktop/scripts/texture-card/generate-card-texture.mjs.
 *
 * The source is 2×: 416 asset pixels = 208 CSS pixels. The image includes a
 * 96 CSS-pixel transparent outer powder band. `border-image` keeps corners
 * fixed and repeats edge texture while the white center fills any card size.
 */
.buzz-card-textured {
  --buzz-card-textured-source: url("./assets/card-texture.png");
  --buzz-card-textured-slice: 416;
  --buzz-card-textured-width: 208px;
  --buzz-card-textured-outset: 96px;
  --buzz-card-textured-min-size: 224px;
  /*
   * The asset has three zones, from outside in:
   *   1. transparent powder bleed (outside the layout box, via outset)
   *   2. feathered fade (inside the layout edge, white is NOT fully opaque)
   *   3. solid white center (safe for content)
   *
   * `--buzz-card-textured-safe-inset` is the distance from the layout edge
   * to zone 3. `Card variant="textured"` applies it as default padding so
   * content always lands on solid fill. Features may add more padding,
   * never less — and must never layer an opaque surface on top of the
   * texture; the baked white center IS the surface.
   */
  --buzz-card-textured-safe-inset: 5rem;
  border: 0 solid transparent;
  /*
   * Each border-image band is 208px wide but extends 96px outside the layout
   * box (outset), leaving 112px per edge inside it. Below 224px (2 × 112px)
   * on either axis the opposing bands collapse into each other: the solid
   * white center region disappears and the bands meet on a semi-transparent
   * row of the fade, which shows the page background through as a thin seam
   * line. Keep 224px as the default floor. Compact decorative cards may opt
   * into a smaller height with `--buzz-card-textured-min-height` when the
   * center seam is acceptable for that deliberately compressed surface.
   */
  min-height: var(
    --buzz-card-textured-min-height,
    var(--buzz-card-textured-min-size)
  );
  min-width: var(
    --buzz-card-textured-min-width,
    var(--buzz-card-textured-min-size)
  );
  border-image-source: var(--buzz-card-textured-source);
  border-image-slice: var(--buzz-card-textured-slice) fill;
  border-image-width: var(--buzz-card-textured-width);
  border-image-outset: var(--buzz-card-textured-outset);
  border-image-repeat: repeat;
}

/* Dark backup surfaces use a separately baked fill so their content stays
 * bright; applying `filter: brightness()` to the element would dim children. */
.buzz-card-textured-dark {
  --buzz-card-textured-source: url("./assets/card-texture-dark.png");
}

/*
 * Popovers, confirmations, and compact callouts need the same powder edge
 * without the full card's 96px bleed or 224px floor. This independently baked
 * nine-slice keeps the edge legible at overlay scale.
 */
.buzz-card-textured-compact {
  --buzz-card-textured-source: url("./assets/card-texture-compact.png");
  --buzz-card-textured-slice: 136;
  --buzz-card-textured-width: 68px;
  --buzz-card-textured-outset: 24px;
  --buzz-card-textured-safe-inset: 1.75rem;
  --buzz-card-textured-min-size: 136px;
}

.buzz-card-textured-dark.buzz-card-textured-compact {
  --buzz-card-textured-source: url("./assets/card-texture-dark-compact.png");
}