/*
 * BMM theme variables and accent picker styles.
 *
 * --bmm-accent is set by an inline <style id="bmm-theme"> block in
 * pages/partials/header.php, server-rendered from the bmm_accent cookie.
 * Derived shades (--bmm-accent-deep / -soft / -line / -glow) live below.
 *
 * If you need a new shade, add it here. Do NOT add a new hex literal in
 * page-level CSS - that breaks the picker.
 *
 * Spec: docs/superpowers/specs/2026-05-09-customizable-accent-color-design.md
 */

/* Static fallback values (read by browsers that don't support color-mix). */
:root {
  --bmm-accent-deep:  #6D28D9;
  --bmm-accent-soft:  #faf7ff;
  --bmm-accent-line:  #c4b5fd;
  --bmm-accent-glow:  rgba(126, 58, 242, 0.18);
}

/* Live-derived shades when the browser supports color-mix. */
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --bmm-accent-deep:  color-mix(in oklab, var(--bmm-accent) 78%, black);
    --bmm-accent-soft:  color-mix(in srgb,  var(--bmm-accent)  8%, white);
    --bmm-accent-line:  color-mix(in srgb,  var(--bmm-accent) 35%, white);
    --bmm-accent-glow:  color-mix(in srgb,  var(--bmm-accent) 18%, transparent);
  }
}

/* Picker styles get appended in Task 3. */

/* The user section in the topbar is a plain div by default. Force flex+center
 * so the Login button and the picker trigger share the same vertical midline. */
.bmm-user-section{ display:flex; align-items:center; gap:14px; }

/* ============================================================
 * Accent picker - trigger buttons (live inside menu_top.php).
 * The icon is a multi-colour wheel (its own visual identity), so the
 * button is fully transparent: the wheel IS the trigger.
 * ============================================================ */
.bmm-pick-trigger{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box;
  padding:0;
  cursor:pointer;
  background:transparent;
  border:0;
  border-radius:0;
  transition:transform .15s ease, filter .15s ease;
}
.bmm-pick-trigger:hover{
  transform:scale(1.08);
  filter:drop-shadow(0 2px 6px color-mix(in srgb, var(--bmm-accent) 35%, transparent));
}
.bmm-pick-trigger:focus-visible{ outline:2px solid #0f172a; outline-offset:3px; }
.bmm-pick-trigger svg,
.bmm-pick-trigger-img{
  position:absolute; top:0; left:0;
  width:100%; height:100%; display:block;
  pointer-events:none;
}
/* Inner disc fills with the user's picked accent so the trigger always
 * visually carries the current pick at its centre. */
.bmm-pick-trigger-disc{
  position:absolute; top:50%; left:50%;
  width:70%; height:70%;
  transform:translate(-50%,-50%);
  background:var(--bmm-accent);
  border-radius:50%;
  pointer-events:none;
}

/* Logged-out variant: matches .bmm-login's rendered box (38px content +
 * 2px*2 border with default content-box = 42px outer). */
.bmm-pick-trigger.is-loggedout{
  width:42px; height:42px;
}

/* Logged-in variant: replaces .bmm-user-dot (no avatar case). */
.bmm-pick-trigger.is-dot{
  width:28px; height:28px;
}

/* Overlay on avatar: small chip in the avatar's bottom-right corner.
 * Adds a white ring so the wheel stays distinct against any avatar imagery. */
.bmm-pick-trigger.is-overlay{
  position:absolute;
  width:22px; height:22px;
  right:-6px; bottom:-6px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 2px #fff;
}

/* ============================================================
 * Accent picker - modal
 * ============================================================ */
.bmm-pick-backdrop{
  position:fixed; inset:0; z-index:9999;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.bmm-pick-backdrop[hidden]{ display:none; }
.bmm-pick-modal{
  background:#fff; border:1px solid #e7e4ef; border-radius:2px;
  width:min(900px,100%); max-height:88vh; overflow:auto;
  box-shadow:0 30px 80px -20px rgba(15,23,42,.18);
  display:grid; grid-template-columns:1.05fr 1fr;
  position:relative;
  font-family:'Inter','Segoe UI',sans-serif;
}
@media (max-width:700px){ .bmm-pick-modal{ grid-template-columns:1fr; } }

.bmm-pick-close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px;
  display:grid; place-items:center;
  background:transparent; border:0; cursor:pointer; color:#0f172a;
  z-index:2;
}

.bmm-pick-left{ padding:28px 28px 22px; border-right:1px solid #f1eff5; display:flex; flex-direction:column; gap:20px; }
.bmm-pick-title{ font-family:'Fraunces',Georgia,serif; font-size:22px; font-weight:400; margin:0; letter-spacing:-.01em; color:#0f172a; }
.bmm-pick-title em{ font-style:italic; color:var(--bmm-accent); }
.bmm-pick-eyebrow{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#94a3b8; font-weight:600; display:block; margin-bottom:8px; }

.bmm-pick-presets{ display:grid; grid-template-columns:repeat(8,1fr); gap:8px; }
.bmm-pick-preset{
  aspect-ratio:1; border:2px solid #fff; outline:1px solid #e7e4ef;
  cursor:pointer; padding:0;
  transition:transform .15s ease, outline-color .15s ease;
}
.bmm-pick-preset:hover{ transform:scale(1.06); outline-color:#0f172a; }
.bmm-pick-preset.is-active{ outline:2px solid #0f172a; outline-offset:2px; }

.bmm-pick-ring-wrap{ display:flex; align-items:center; gap:18px; }
.bmm-pick-ring{ position:relative; width:180px; height:180px; flex:0 0 180px; }
.bmm-pick-ring svg{ width:100%; height:100%; cursor:grab; }
.bmm-pick-ring svg:active{ cursor:grabbing; }
.bmm-pick-ring-handle{
  position:absolute; width:22px; height:22px; border-radius:50%;
  background:var(--bmm-accent); border:3px solid #fff;
  box-shadow:0 4px 10px rgba(0,0,0,.25); pointer-events:none;
  transform:translate(-50%,-50%);
}

.bmm-pick-info{ flex:1; display:flex; flex-direction:column; gap:8px; font-size:13px; }
.bmm-pick-info-row{ display:flex; align-items:center; }
.bmm-pick-info-swatch{ width:36px; height:36px; background:var(--bmm-accent); border:1px solid #e7e4ef; display:inline-block; vertical-align:middle; margin-right:10px; }
.bmm-pick-info-hex{ font-family:Consolas,'Courier New',monospace; font-size:18px; font-weight:600; color:#0f172a; letter-spacing:.5px; }
.bmm-pick-info-meta{ font-size:11px; color:#8a8797; letter-spacing:.04em; }

.bmm-pick-actions{ display:flex; gap:10px; margin-top:auto; padding-top:8px; border-top:1px solid #f1eff5; }
.bmm-pick-btn{
  flex:1; height:40px; border:1px solid #e7e4ef; background:#fff;
  font-size:13px; font-weight:600; letter-spacing:.02em; cursor:pointer;
  font-family:inherit; color:#0f172a;
}
.bmm-pick-btn:hover{ border-color:#94a3b8; }
.bmm-pick-btn.is-primary{ background:var(--bmm-accent); border-color:var(--bmm-accent); color:#fff; }
.bmm-pick-btn.is-primary:hover{ background:var(--bmm-accent-deep); border-color:var(--bmm-accent-deep); }

/* Right side - live preview */
.bmm-pick-right{ background:#fbfafd; display:flex; flex-direction:column; }
.bmm-pick-preview-label{ padding:18px 22px 6px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#94a3b8; font-weight:600; }
.bmm-pick-preview-frame{ padding:16px 22px 22px; display:flex; flex-direction:column; gap:14px; flex:1; }
.bmm-pp-topbar{ background:#fff; border:1px solid #e7e4ef; display:flex; align-items:center; gap:14px; padding:0 14px; height:46px; font-size:12px; font-weight:600; }
.bmm-pp-topbar .brand{ font-weight:800; font-size:13px; color:#0f172a; }
.bmm-pp-topbar .tag{ font-size:9px; color:var(--bmm-accent); text-transform:uppercase; letter-spacing:.12em; margin-left:4px; }
.bmm-pp-topbar .lnk{ color:#334155; padding:14px 0; }
.bmm-pp-topbar .lnk.is-active{ color:var(--bmm-accent); border-bottom:2px solid var(--bmm-accent); margin-bottom:-1px; }
.bmm-pp-topbar .login{ margin-left:auto; background:var(--bmm-accent); color:#fff; padding:6px 14px; font-size:11px; font-weight:700; }

.bmm-pp-card{
  background:#fff; border:1px solid var(--bmm-accent); padding:16px;
  display:flex; flex-direction:column; gap:6px;
  box-shadow:0 12px 30px -22px var(--bmm-accent-glow);
}
.bmm-pp-card .kicker{ font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--bmm-accent); font-weight:600; display:flex; align-items:center; gap:8px; }
.bmm-pp-card .kicker .dot{ width:6px; height:6px; background:var(--bmm-accent); box-shadow:0 0 0 4px var(--bmm-accent-glow); border-radius:50%; }
.bmm-pp-card h4{ margin:2px 0; font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:18px; letter-spacing:-.01em; color:#0f172a; }
.bmm-pp-card h4 em{ font-style:italic; color:var(--bmm-accent); }
.bmm-pp-card p{ margin:0; font-size:12px; color:#4a4757; line-height:1.5; }
.bmm-pp-card .meta{ display:flex; justify-content:space-between; align-items:center; padding-top:8px; border-top:1px solid var(--bmm-accent-line); font-size:11px; color:#94a3b8; }
.bmm-pp-card .meta strong{ color:var(--bmm-accent); font-weight:600; }

.bmm-pp-bar{ background:var(--bmm-accent-soft); border-left:3px solid var(--bmm-accent); padding:9px 12px; font-size:12px; color:#0f172a; }
.bmm-pp-bar b{ color:var(--bmm-accent); }