/* Pixel corners: square, stair-stepped corners cut with clip-path, so a button, tag or badge looks drawn on a
   pixel grid. No border-radius anywhere. Measured from craft.wild.as (teardown 09-30), rewritten with our names.

   Measured from the source (css/home.css + css/bcp.css):
   buttons, slider arrows   two 5px stairs per corner (10px deep)
   pad keys                 two 4px stairs (8px)
   tags, step numbers       two 3px stairs (6px)
   /bcp nav + buttons       one 5px notch on a body inset 5px, plus a 10px-tall nub that pokes out at mid-height
   hover                    background #0a0a0a -> #3b5bd9 over .2s (the clip never changes)

   Use: class="pxc" (+ pxc--sm / pxc--md, or set --pxc-step yourself, also on a parent: it inherits).
   The shape lives in ONE custom property, --pxc-shape, which the element clips to and the outline variant's
   inner layer re-uses; variants just swap --pxc-shape. part.js (optional) writes --pxc-shape for any stair count.
   clip-path cuts box-shadow and outline: put a shadow on a parent as filter: drop-shadow(), and use the inset
   focus ring below. */

.pxc {
  --_s: var(--pxc-step, 5px);                       /* one stair; a corner is two stairs */
  --_d: calc(var(--_s) * 2);
  --pxc-shape: polygon(
    var(--_d) 0, calc(100% - var(--_d)) 0,
    calc(100% - var(--_d)) var(--_s), calc(100% - var(--_s)) var(--_s), calc(100% - var(--_s)) var(--_d), 100% var(--_d),
    100% calc(100% - var(--_d)),
    calc(100% - var(--_s)) calc(100% - var(--_d)), calc(100% - var(--_s)) calc(100% - var(--_s)),
    calc(100% - var(--_d)) calc(100% - var(--_s)), calc(100% - var(--_d)) 100%,
    var(--_d) 100%,
    var(--_d) calc(100% - var(--_s)), var(--_s) calc(100% - var(--_s)), var(--_s) calc(100% - var(--_d)), 0 calc(100% - var(--_d)),
    0 var(--_d),
    var(--_s) var(--_d), var(--_s) var(--_s), var(--_d) var(--_s), var(--_d) 0);
  clip-path: var(--pxc-shape);
}

/* the source's three scales */
.pxc--sm { --pxc-step: 3px; }                       /* tags, number badges (6/3) */
.pxc--md { --pxc-step: 4px; }                       /* small square keys (8/4) */

/* one stair per corner: the smallest "rounding" (also what the nub variant uses) */
.pxc--1 {
  --pxc-shape: polygon(
    var(--_s) 0, calc(100% - var(--_s)) 0, calc(100% - var(--_s)) var(--_s), 100% var(--_s),
    100% calc(100% - var(--_s)), calc(100% - var(--_s)) calc(100% - var(--_s)), calc(100% - var(--_s)) 100%,
    var(--_s) 100%, var(--_s) calc(100% - var(--_s)), 0 calc(100% - var(--_s)),
    0 var(--_s), var(--_s) var(--_s));
}

/* /bcp nav + buttons: body inset one stair left and right, one notch per corner, and a two-stair-tall nub
   reaching the full width at mid-height, so the button reads like a pixel-art capsule */
.pxc--nub {
  --pxc-shape: polygon(
    var(--_d) 0, calc(100% - var(--_d)) 0, calc(100% - var(--_d)) var(--_s), calc(100% - var(--_s)) var(--_s),
    calc(100% - var(--_s)) calc(50% - var(--_s)), 100% calc(50% - var(--_s)), 100% calc(50% + var(--_s)),
    calc(100% - var(--_s)) calc(50% + var(--_s)), calc(100% - var(--_s)) calc(100% - var(--_s)),
    calc(100% - var(--_d)) calc(100% - var(--_s)), calc(100% - var(--_d)) 100%,
    var(--_d) 100%, var(--_d) calc(100% - var(--_s)), var(--_s) calc(100% - var(--_s)),
    var(--_s) calc(50% + var(--_s)), 0 calc(50% + var(--_s)), 0 calc(50% - var(--_s)), var(--_s) calc(50% - var(--_s)),
    var(--_s) var(--_s), var(--_d) var(--_s));
}

/* Outlined (ours, not in the source): the element paints the line colour, an inner layer inset by the line
   width paints the fill, both clipped to the same --pxc-shape with the same stair size, so the line is the
   same thickness along the edges AND around every stair. */
.pxc--line {
  --pxc-line: 1px;
  --pxc-line-color: currentColor;
  --pxc-fill: #fff;
  position: relative;
  isolation: isolate;                               /* keeps the inner layer under the label */
  background: var(--pxc-line-color);
}
.pxc--line::before {
  content: "";
  position: absolute;
  inset: var(--pxc-line);
  z-index: -1;
  background: var(--pxc-fill);
  clip-path: var(--pxc-shape);
  transition: inherit;
}

/* focus ring that survives the clip: an outline pulled inside the corner depth, so no stair ever cuts it */
.pxc:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: calc(var(--_d) * -1);
}