/* ── Notch Button Component ──────────────────────────────────────
   Black fill, white label, bottom-right corner clipped (the "flag notch").
   Comes in four sizes: --lg, --md, --sm, --xs. Notch scales with size.

   Used by:
     • case studies modal close button → .btn-notch--md
     • contact flag close button       → .btn-notch--sm (rendered in SVG; values mirror these)

   When you need a button, pick the size — don't roll a one-off.
*/

.btn-notch {
  font-family: "Press Start 2P", monospace;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.btn-notch:hover         { background: #333; }
.btn-notch:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

/* ── Size variants ────────────────────────────────────────────── */

.btn-notch--lg {
  width: 44px; height: 44px;
  font-size: 16px;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - 11px),
    calc(100% - 11px) calc(100% - 11px),
    calc(100% - 11px) 100%,
    0 100%
  );
}

.btn-notch--md {
  width: 32px; height: 32px;
  font-size: 12px;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%
  );
}

.btn-notch--sm {
  width: 24px; height: 24px;
  font-size: 9px;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - 6px),
    calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) 100%,
    0 100%
  );
}

.btn-notch--xs {
  width: 16px; height: 16px;
  font-size: 7px;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) 100%,
    0 100%
  );
}

.btn-notch--wide {
  width: 100%; height: 32px;
  font-size: 9px;
  letter-spacing: 0.05em;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%
  );
}

/* ── SVG-rendered notch buttons ──────────────────────────────────
   When a notch button has to live inside an SVG scene (contact flag
   card), it's drawn with a <polygon>. The JS constants mirror these
   sizes in SVG units at the scene's typical scale (~5 SVG units = 24px,
   i.e. 1 unit ≈ 5px on a 1200px viewport).

     SM:  BS = 5,   BN = 1.2   → matches .btn-notch--sm
     XS:  BS = 4,   BN = 1.0   → matches .btn-notch--xs
*/

/* Suppress browser default focus ring on SVG interactive groups
   (WebKit's amber ring on click). Show a real ring only on keyboard focus. */
.scene g[role="button"] {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.scene g[role="button"]:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}