/* Gemstone Shape Icons
   Pure CSS icon system for gemstone calculator shape/cut selection.
   Usage:
   <span class="gem-shape gem-shape--round-faceted" aria-hidden="true"></span>

   Generated from gemstone_weight_calculator_data.json shape_formulas.
*/

:root {
    --gem-icon-size: clamp(3.25rem, 12vw, 6.5rem);
    --gem-fill-1: #ffffff;
    --gem-fill-2: #dbeafe;
    --gem-fill-3: #93c5fd;
    --gem-stroke: rgba(15, 23, 42, .72);
    --gem-line: rgba(15, 23, 42, .23);
    --gem-glow: rgba(59, 130, 246, .28);
    --gem-selected: #2563eb;
  }
  
  .gem-shape {
    inline-size: var(--gem-icon-size);
    aspect-ratio: 1 / 1;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    background:
      radial-gradient(circle at 32% 22%, rgba(255,255,255,.95), transparent 24%),
      linear-gradient(145deg, var(--gem-fill-1), var(--gem-fill-2) 48%, var(--gem-fill-3));
    border: max(1px, .06em) solid var(--gem-stroke);
    box-shadow:
      inset 0 0 0 .06em rgba(255,255,255,.45),
      inset 0 -.45em 1.2em rgba(15,23,42,.10),
      0 .45em 1.1em var(--gem-glow);
    overflow: hidden;
    transform-origin: center;
  }
  
  .gem-shape::before,
  .gem-shape::after {
    content: "";
    position: absolute;
    inset: 12%;
    pointer-events: none;
  }
  
  .gem-shape::before {
    background:
      linear-gradient(90deg, transparent 49%, var(--gem-line) 50%, transparent 51%),
      linear-gradient(0deg, transparent 49%, var(--gem-line) 50%, transparent 51%),
      linear-gradient(45deg, transparent 49%, var(--gem-line) 50%, transparent 51%),
      linear-gradient(-45deg, transparent 49%, var(--gem-line) 50%, transparent 51%);
    opacity: .8;
  }
  
  .gem-shape::after {
    border: .06em solid rgba(255,255,255,.48);
    opacity: .75;
    clip-path: inherit;
  }
  
  .gem-shape-card {
    display: grid;
    place-items: center;
    gap: .45rem;
    padding: .85rem;
    min-block-size: 8.25rem;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 1rem;
    background: rgba(255,255,255,.72);
    cursor: pointer;
  }
  
  .gem-shape-card:hover,
  .gem-shape-card:focus-within,
  .gem-shape-card.is-selected {
    border-color: var(--gem-selected);
    box-shadow: 0 .7rem 1.7rem rgba(37,99,235,.14);
  }
  
  .gem-shape-card.is-selected .gem-shape {
    --gem-stroke: var(--gem-selected);
    --gem-glow: rgba(37,99,235,.38);
  }
  
  .gem-shape-label {
    font-size: clamp(.72rem, 2vw, .88rem);
    line-height: 1.2;
    text-align: center;
    color: #0f172a;
  }
  
  @media (max-width: 640px) {
    :root { --gem-icon-size: clamp(2.8rem, 18vw, 4.4rem); }
  
    .gem-shape-card {
      min-block-size: 7rem;
      padding: .65rem;
      border-radius: .85rem;
    }
  }
  
  /* Faceted entries use sharper inner overlays. */
  .gem-shape[class*="faceted"]::after {
    inset: 20%;
    border-radius: inherit;
  }
  
  /* Cabochon, bead, tablet, cylinder, and polished entries use softer highlights. */
  .gem-shape[class*="cabochon"]::before,
  .gem-shape[class*="bead"]::before,
  .gem-shape[class*="tablet"]::before,
  .gem-shape[class*="cylinder"]::before,
  .gem-shape[class*="polished"]::before {
    background:
      radial-gradient(circle at 34% 24%, rgba(255,255,255,.8), transparent 28%),
      linear-gradient(145deg, rgba(255,255,255,.42), transparent 58%);
    opacity: .9;
  }
  
  
  .gem-shape--round-faceted { border-radius:50%; }
  
  .gem-shape--round-cabochon { border-radius:50%; }
  
  .gem-shape--oval-faceted { aspect-ratio:.72/1;border-radius:50%; }
  
  .gem-shape--oval-cabochon { aspect-ratio:.72/1;border-radius:50%; }
  
  .gem-shape--cushion-faceted { border-radius:26%; }
  
  .gem-shape--cushion-cabochon { border-radius:30%; }
  
  .gem-shape--pear-faceted { aspect-ratio:.78/1;clip-path:polygon(50% 0,78% 20%,92% 50%,84% 78%,50% 100%,16% 78%,8% 50%,22% 20%); }
  
  .gem-shape--pear-cabochon { aspect-ratio:.78/1;clip-path:polygon(50% 0,80% 20%,94% 54%,82% 82%,50% 100%,18% 82%,6% 54%,20% 20%); }
  
  .gem-shape--marquise-faceted { aspect-ratio:.48/1;clip-path:polygon(50% 0,88% 20%,100% 50%,88% 80%,50% 100%,12% 80%,0 50%,12% 20%); }
  
  .gem-shape--marquise-cabochon { aspect-ratio:.48/1;clip-path:polygon(50% 0,86% 18%,100% 50%,86% 82%,50% 100%,14% 82%,0 50%,14% 18%); }
  
  .gem-shape--heart-faceted { aspect-ratio:1/0.92;clip-path:polygon(50% 96%,8% 52%,4% 28%,18% 8%,38% 10%,50% 24%,62% 10%,82% 8%,96% 28%,92% 52%); }
  
  .gem-shape--heart-cabochon { aspect-ratio:1/0.92;clip-path:polygon(50% 96%,8% 52%,4% 28%,18% 8%,38% 10%,50% 24%,62% 10%,82% 8%,96% 28%,92% 52%); }
  
  .gem-shape--princess-baguette-faceted { aspect-ratio:1.65/1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
  
  .gem-shape--radiant-faceted { aspect-ratio:1.35/1;clip-path:polygon(14% 0,86% 0,100% 14%,100% 86%,86% 100%,14% 100%,0 86%,0 14%); }
  
  .gem-shape--emerald-faceted { aspect-ratio:1.35/1;clip-path:polygon(16% 0,84% 0,100% 16%,100% 84%,84% 100%,16% 100%,0 84%,0 16%); }
  
  .gem-shape--rectangular-step-faceted { aspect-ratio:1.55/1;clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%); }
  
  .gem-shape--square-princess-faceted { aspect-ratio:1/1; }
  
  .gem-shape--square-emerald-faceted { aspect-ratio:1/1;clip-path:polygon(16% 0,84% 0,100% 16%,100% 84%,84% 100%,16% 100%,0 84%,0 16%); }
  
  .gem-shape--square-cushion-faceted { aspect-ratio:1/1;border-radius:24%; }
  
  .gem-shape--square-cushion-cabochon { aspect-ratio:1/1;border-radius:28%; }
  
  .gem-shape--triangle-straight-side-faceted { aspect-ratio:1/0.9;clip-path:polygon(50% 0,100% 100%,0 100%); }
  
  .gem-shape--triangle-bulged-side-faceted { aspect-ratio:1/0.9;clip-path:polygon(50% 0,94% 82%,100% 100%,0 100%,6% 82%);border-radius:12%; }
  
  .gem-shape--triangle-cut-corner-faceted { aspect-ratio:1/0.9;clip-path:polygon(50% 0,92% 85%,76% 100%,24% 100%,8% 85%); }
  
  .gem-shape--triangle-cabochon { aspect-ratio:1/0.9;clip-path:polygon(50% 0,96% 88%,82% 100%,18% 100%,4% 88%);border-radius:16%; }
  
  .gem-shape--pentagon-faceted { clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%); }
  
  .gem-shape--hexagon-faceted { clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
  
  .gem-shape--long-hexagon-faceted { aspect-ratio:1.55/1;clip-path:polygon(16% 0,84% 0,100% 50%,84% 100%,16% 100%,0 50%); }
  
  .gem-shape--wide-hexagon-faceted { aspect-ratio:1.85/1;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
  
  .gem-shape--octagon-faceted { clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
  
  .gem-shape--wide-octagon-faceted { aspect-ratio:1.55/1;clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%); }
  
  .gem-shape--kite-faceted { aspect-ratio:.72/1;clip-path:polygon(50% 0,92% 40%,50% 100%,8% 40%); }
  
  .gem-shape--wide-kite-faceted { aspect-ratio:1.05/1;clip-path:polygon(50% 0,100% 42%,50% 100%,0 42%); }
  
  .gem-shape--lozenge-faceted { aspect-ratio:.72/1;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
  
  .gem-shape--diamond-profile-faceted { aspect-ratio:1/1;clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%); }
  
  .gem-shape--cut-corner-triangle-faceted { aspect-ratio:1/0.95;clip-path:polygon(22% 0,78% 0,100% 72%,78% 100%,22% 100%,0 72%); }
  
  .gem-shape--calfs-head-faceted { aspect-ratio:1/0.88;clip-path:polygon(12% 0,88% 0,100% 42%,70% 100%,30% 100%,0 42%); }
  
  .gem-shape--trapezoid-faceted { aspect-ratio:1.25/1;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%); }
  
  .gem-shape--tapered-pentagon-faceted { aspect-ratio:.82/1;clip-path:polygon(0 0,100% 0,88% 58%,50% 100%,12% 58%); }
  
  .gem-shape--epaulet-faceted { aspect-ratio:1/0.86;clip-path:polygon(0 0,72% 0,100% 32%,72% 100%,0 100%,20% 50%); }
  
  .gem-shape--shield-faceted { aspect-ratio:.86/1;clip-path:polygon(12% 0,88% 0,100% 54%,50% 100%,0 54%); }
  
  .gem-shape--bullet-faceted { aspect-ratio:1.7/1;clip-path:polygon(0 0,72% 0,100% 50%,72% 100%,0 100%); }
  
  .gem-shape--window-faceted { aspect-ratio:1.2/1;clip-path:polygon(0 0,100% 0,100% 70%,72% 100%,28% 100%,0 70%); }
  
  .gem-shape--whistle-faceted { aspect-ratio:1.25/1;clip-path:polygon(0 0,100% 0,78% 100%,0 100%); }
  
  .gem-shape--parallelogram-faceted { aspect-ratio:1.35/1;clip-path:polygon(22% 0,100% 0,78% 100%,0 100%); }
  
  .gem-shape--five-point-star-faceted { clip-path:polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,2% 35%,39% 35%); }
  
  .gem-shape--six-point-star-faceted { clip-path:polygon(50% 0,62% 28%,93% 25%,75% 50%,93% 75%,62% 72%,50% 100%,38% 72%,7% 75%,25% 50%,7% 25%,38% 28%); }
  
  .gem-shape--semi-navette-faceted { aspect-ratio:.72/1;clip-path:polygon(0 0,72% 10%,100% 50%,72% 90%,0 100%,18% 50%); }
  
  .gem-shape--half-moon-faceted { aspect-ratio:1.2/1;clip-path:polygon(0 0,100% 0,92% 25%,78% 54%,55% 80%,28% 96%,0 100%); }
  
  .gem-shape--fan-quarter-circle-faceted { aspect-ratio:1/1;clip-path:polygon(0 100%,0 0,22% 3%,44% 12%,64% 27%,80% 47%,92% 71%,100% 100%); }
  
  .gem-shape--pendulum-eighth-circle-faceted { aspect-ratio:.65/1;clip-path:polygon(0 100%,0 0,28% 8%,56% 27%,78% 57%,100% 100%); }
  
  .gem-shape--briolette-faceted-cabochon { aspect-ratio:.64/1;clip-path:polygon(50% 0,82% 18%,100% 48%,86% 78%,50% 100%,14% 78%,0 48%,18% 18%); }
  
  .gem-shape--rondelle-faceted { aspect-ratio:1.8/.58;border-radius:50%; }
  
  .gem-shape--round-tablet-cylinder { aspect-ratio:1/1;border-radius:50%; }
  
  .gem-shape--oval-tablet-cylinder { aspect-ratio:1.35/1;border-radius:50%; }
  
  .gem-shape--pear-tablet { aspect-ratio:.78/1;clip-path:polygon(50% 0,80% 22%,92% 56%,82% 84%,50% 100%,18% 84%,8% 56%,20% 22%); }
  
  .gem-shape--marquise-tablet { aspect-ratio:.48/1;clip-path:polygon(50% 0,90% 22%,100% 50%,90% 78%,50% 100%,10% 78%,0 50%,10% 22%); }
  
  .gem-shape--square-rect-cushion-tablet { aspect-ratio:1.35/1;border-radius:22%; }
  
  .gem-shape--square-rect-tablet { aspect-ratio:1.35/1; }
  
  .gem-shape--round-spherical-bead { aspect-ratio:1/1;border-radius:50%; }
  
  .gem-shape--round-barrel-egg-bead { aspect-ratio:.8/1;border-radius:50% 50% 48% 48%; }
  
  .gem-shape--sail-faceted { aspect-ratio:.75/1;clip-path:polygon(0 100%,28% 0,100% 100%); }
  
  .gem-shape--rectangular-bar-faceted { aspect-ratio:2.2/.55; }
  
  .gem-shape--oval-bar-faceted { aspect-ratio:2.2/.55;border-radius:999px; }
  
  .gem-shape--cushion-bar-faceted { aspect-ratio:2.2/.6;border-radius:24%; }
  
  .gem-shape--three-leaf-clover-faceted { clip-path:polygon(50% 22%,72% 0,98% 20%,84% 52%,100% 82%,68% 100%,50% 78%,32% 100%,0 82%,16% 52%,2% 20%,28% 0); }
  
  .gem-shape--four-leaf-clover-faceted { clip-path:polygon(50% 18%,68% 0,94% 8%,100% 34%,82% 50%,100% 66%,94% 92%,68% 100%,50% 82%,32% 100%,6% 92%,0 66%,18% 50%,0 34%,6% 8%,32% 0); }
  
  .gem-shape--five-leaf-flower-faceted { clip-path:polygon(50% 0,62% 28%,94% 18%,76% 48%,98% 72%,66% 70%,50% 100%,34% 70%,2% 72%,24% 48%,6% 18%,38% 28%); }
  
  .gem-shape--onion-buff-top-faceted-bottom { aspect-ratio:.86/1;clip-path:polygon(50% 0,82% 20%,98% 54%,80% 86%,50% 100%,20% 86%,2% 54%,18% 20%); }
  
  .gem-shape--round-tongue-polished { aspect-ratio:.7/1;border-radius:50% 50% 42% 42%; }
  
  .gem-shape--flat-tongue-polished { aspect-ratio:.82/1;clip-path:polygon(50% 0,92% 28%,86% 100%,14% 100%,8% 28%);border-radius:18%; }
  
  .gem-shape--long-tapered-cylinder-polished { aspect-ratio:.52/1;clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);border-radius:38% 38% 18% 18%; }
  
  
  .gem-shape--rondelle-faceted::before,
  .gem-shape--rectangular-bar-faceted::before,
  .gem-shape--oval-bar-faceted::before,
  .gem-shape--cushion-bar-faceted::before {
    background:
      linear-gradient(90deg, transparent 24%, var(--gem-line) 25%, transparent 26%, transparent 49%, var(--gem-line) 50%, transparent 51%, transparent 74%, var(--gem-line) 75%, transparent 76%),
      linear-gradient(0deg, transparent 49%, var(--gem-line) 50%, transparent 51%);
  }
  
  .gem-shape--round-spherical-bead {
    background:
      radial-gradient(circle at 30% 24%, rgba(255,255,255,.98), transparent 20%),
      radial-gradient(circle at 65% 70%, rgba(15,23,42,.14), transparent 32%),
      linear-gradient(145deg, var(--gem-fill-1), var(--gem-fill-2) 48%, var(--gem-fill-3));
  }
  
  .gem-shape--round-spherical-bead::after,
  .gem-shape--round-barrel-egg-bead::after {
    border-radius: inherit;
  }
  
  @supports not (clip-path: polygon(0 0)) {
    .gem-shape {
      border-radius: 1rem;
      clip-path: none !important;
    }
  }
  