/* ============================================================
   Katy Golf League — background patterns

   Every pattern is built from gradients, so it tints itself
   with --pat (the team accent at low alpha) and stays sharp at
   any size. No image files.
   ============================================================ */

.bg-none{background-image:none}

/* ---------- lines ---------- */
.bg-pinstripe{background-image:
  repeating-linear-gradient(90deg,var(--pat) 0 1px,transparent 1px 11px)}

.bg-hstripe{background-image:
  repeating-linear-gradient(0deg,var(--pat) 0 1px,transparent 1px 11px)}

.bg-diagonal{background-image:
  repeating-linear-gradient(135deg,var(--pat) 0 3px,transparent 3px 14px)}

.bg-crosshatch{background-image:
  repeating-linear-gradient(45deg,var(--pat) 0 1px,transparent 1px 9px),
  repeating-linear-gradient(-45deg,var(--pat) 0 1px,transparent 1px 9px)}

.bg-grid{background-image:
  repeating-linear-gradient(0deg,var(--pat) 0 1px,transparent 1px 22px),
  repeating-linear-gradient(90deg,var(--pat) 0 1px,transparent 1px 22px)}

.bg-graph{background-image:
  repeating-linear-gradient(0deg,var(--pat) 0 1px,transparent 1px 8px),
  repeating-linear-gradient(90deg,var(--pat) 0 1px,transparent 1px 8px),
  repeating-linear-gradient(0deg,var(--pat) 0 1px,transparent 1px 40px),
  repeating-linear-gradient(90deg,var(--pat) 0 1px,transparent 1px 40px)}

.bg-turf{background-image:
  repeating-linear-gradient(90deg,var(--pat) 0 34px,transparent 34px 68px)}

/* ---------- cloth ---------- */
.bg-argyle{background-image:
  repeating-linear-gradient(45deg,var(--pat) 0 1px,transparent 1px 26px),
  repeating-linear-gradient(-45deg,var(--pat) 0 1px,transparent 1px 26px)}

.bg-plaid{background-image:
  repeating-linear-gradient(0deg,var(--pat) 0 4px,transparent 4px 20px),
  repeating-linear-gradient(90deg,var(--pat) 0 4px,transparent 4px 20px)}

/* asymmetric bands, the way real tartan is set */
.bg-tartan{background-image:
  repeating-linear-gradient(0deg,
    var(--pat) 0 6px, transparent 6px 14px,
    var(--pat) 14px 16px, transparent 16px 34px),
  repeating-linear-gradient(90deg,
    var(--pat) 0 6px, transparent 6px 14px,
    var(--pat) 14px 16px, transparent 16px 34px)}

.bg-houndstooth{
  background-image:
    conic-gradient(from 0deg at 50% 50%,
      var(--pat) 0 25%, transparent 0 50%,
      var(--pat) 0 75%, transparent 0);
  background-size:18px 18px}

.bg-herringbone{background-image:
  repeating-linear-gradient(45deg,var(--pat) 0 1px,transparent 1px 12px),
  repeating-linear-gradient(-45deg,var(--pat) 0 1px,transparent 1px 12px);
  background-size:24px 24px,24px 24px;
  background-position:0 0,12px 12px}

.bg-check{background-image:
  repeating-conic-gradient(var(--pat) 0% 25%,transparent 0% 50%);
  background-size:22px 22px}

.bg-gingham{background-image:
  repeating-linear-gradient(0deg,var(--pat) 0 9px,transparent 9px 18px),
  repeating-linear-gradient(90deg,var(--pat) 0 9px,transparent 9px 18px)}

/* ---------- shapes ---------- */
.bg-dots{background-image:
  radial-gradient(var(--pat) 1.6px,transparent 1.7px);
  background-size:15px 15px}

.bg-bigdots{background-image:
  radial-gradient(var(--pat) 4px,transparent 4.5px);
  background-size:30px 30px}

.bg-rings{background-image:
  repeating-radial-gradient(circle at 50% 50%,
    var(--pat) 0 1px, transparent 1px 14px);
  background-size:56px 56px}

.bg-scales{background-image:
  radial-gradient(circle at 50% 100%,transparent 9px,var(--pat) 9px 10px,transparent 10px);
  background-size:24px 12px}

.bg-chevron{background-image:
  linear-gradient(135deg,var(--pat) 25%,transparent 25%),
  linear-gradient(225deg,var(--pat) 25%,transparent 25%);
  background-size:20px 20px;
  background-position:0 0,0 0;
  opacity:1}

.bg-zigzag{background-image:
  linear-gradient(135deg,var(--pat) 25%,transparent 25%) 0 0,
  linear-gradient(225deg,var(--pat) 25%,transparent 25%) 0 0,
  linear-gradient(315deg,var(--pat) 25%,transparent 25%) 0 0,
  linear-gradient(45deg,var(--pat) 25%,transparent 25%) 0 0;
  background-size:16px 16px}

.bg-bricks{background-image:
  linear-gradient(0deg,var(--pat) 1px,transparent 1px),
  linear-gradient(90deg,var(--pat) 1px,transparent 1px);
  background-size:48px 20px,48px 20px;
  background-position:0 0,0 0}
.bg-bricks::before{content:none}

.bg-triangles{background-image:
  linear-gradient(60deg,var(--pat) 1px,transparent 1px),
  linear-gradient(-60deg,var(--pat) 1px,transparent 1px),
  linear-gradient(0deg,var(--pat) 1px,transparent 1px);
  background-size:26px 22px}

.bg-confetti{background-image:
  radial-gradient(var(--pat) 1.5px,transparent 2px),
  radial-gradient(var(--pat) 1.5px,transparent 2px),
  radial-gradient(var(--pat) 1px,transparent 1.5px);
  background-size:47px 47px,71px 71px,31px 31px;
  background-position:0 0,23px 31px,11px 7px}

/* ============================================================
   Picker swatches — the same patterns at a size that reads in
   a small tile.
   ============================================================ */
.bgo .sw{background-color:#fff}
.bgo .sw.bg-graph{background-size:auto}
.bgo .sw.bg-turf{background-image:
  repeating-linear-gradient(90deg,var(--pat) 0 12px,transparent 12px 24px)}
.bgo .sw.bg-rings{background-size:34px 34px}
.bgo .sw.bg-bigdots{background-size:20px 20px}
.bgo .sw.bg-confetti{background-size:24px 24px,36px 36px,16px 16px}