/* ===========================================================
   B-Y-N-D palette system.
   Presets are applied as inline CSS variables by app.js
   (20 presets, derived shades). This file keeps the
   structural overrides + the palette/preset UI.
   =========================================================== */

/* make the most visible dark gradients theme-aware */
.panel, .acc, .signup-band { background: linear-gradient(160deg, var(--ox-panel), var(--ox-deep)); }
.hero .ov { background: linear-gradient(180deg, rgba(8,6,6,.5) 0%, rgba(8,6,6,.18) 40%, rgba(8,6,6,.9) 100%); }
.divider .ov { background: linear-gradient(180deg, rgba(8,6,6,.5), rgba(8,6,6,.72)); }

/* ---------- palette bar (fixed trigger) ---------- */
.palette-bar{position:fixed;right:16px;bottom:16px;z-index:1200;display:flex;align-items:center;gap:.4rem;
  background:rgba(14,9,8,.6);backdrop-filter:blur(12px) saturate(120%);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:.4rem .5rem .4rem .55rem;box-shadow:0 16px 40px -18px rgba(0,0,0,.6)}
.pal-trigger{display:flex;align-items:center;gap:.5rem;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.85);padding:.25rem .5rem}
.pal-trigger:hover{color:#fff}
.pal-trigger .dotrow{display:inline-flex;gap:3px}
.pal-trigger .dotrow i{width:9px;height:9px;border-radius:999px;display:block}
.pal-trigger .dotrow i:nth-child(1){background:var(--ox)}
.pal-trigger .dotrow i:nth-child(2){background:var(--taupe)}
.pal-trigger .dotrow i:nth-child(3){background:var(--greige)}

/* ---------- preset popover (20 swatches) ---------- */
.preset-pop{position:fixed;right:16px;bottom:64px;z-index:1250;width:340px;max-width:92vw;
  background:rgba(14,9,8,.85);backdrop-filter:blur(16px) saturate(120%);border:1px solid rgba(255,255,255,.16);
  border-radius:18px;padding:1rem 1rem 1.1rem;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.preset-pop.open{opacity:1;visibility:visible;transform:none}
.preset-head{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);font-weight:700;
  display:flex;justify-content:space-between;align-items:center;margin-bottom:.9rem}
.preset-head .x{cursor:pointer;color:rgba(255,255,255,.6);font-size:1.1rem;line-height:1}
.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;max-height:60vh;overflow:auto}
.preset-sw{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:stretch;gap:.32rem;padding:.15rem}
.preset-sw .chip{width:100%;height:30px;border-radius:8px;position:relative;border:1px solid rgba(255,255,255,.16);
  display:block;transition:transform .25s var(--ease),box-shadow .25s}
.preset-sw .chip i{position:absolute;right:4px;bottom:4px;width:7px;height:7px;border-radius:999px;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.preset-sw .pn{font-family:var(--sans);font-size:.55rem;letter-spacing:.03em;color:rgba(255,255,255,.6);
  text-transform:uppercase;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preset-sw:hover .chip{transform:translateY(-2px)}
.preset-sw.on .chip{box-shadow:0 0 0 2px var(--taupe);border-color:transparent}
.preset-sw.on .pn{color:#fff}
@media (max-width:560px){.preset-pop{width:92vw}.preset-grid{grid-template-columns:repeat(3,1fr)}}