/* ============================================================================
   PowerBox DJ — shared theme
   ----------------------------------------------------------------------------
   One file, four sites: PowerBoxDJ, web1, web2, web3.
   The copy in each site is identical — edit _shared/theme.css and re-copy.

   It provides:
     1. colour tokens for two modes      html[data-theme="dark" | "light"]
     2. seven brush palettes             html[data-brush="gold|amber|teal|blue|violet|green|red"]
     3. the shared top bar chrome        .pbx-* classes (header, nav, drop, search,
                                         drawer, footer, theme + brush controls)

   Token names follow the original PowerBoxDJ site so its own stylesheets pick the
   theme up unchanged: --bg, --panel, --line, --text, --gold …
   The brush drives --accent; --gold and friends are aliased onto it, so switching
   brush recolours everything that used gold.
   ========================================================================== */

/* ─────────────────────────── 1. modes ─────────────────────────── */

html[data-theme="dark"] {
  --bg:        #000000;
  --bg-2:      #0b0b0b;
  --panel:     #171717;
  --panel-2:   #212121;
  --panel-3:   #2b2b2b;
  --line:      #3a3a3a;
  --line-soft: #242424;

  --text:   #f0f0f0;
  --text-2: #adadad;
  --text-3: #7a7a7a;

  --header-bg: rgba(0, 0, 0, .88);
  --header-bg-open: rgba(0, 0, 0, .97);
  --drop-bg: linear-gradient(180deg, rgba(21,21,21,.99), rgba(7,7,7,.99));
  --overlay-bg: rgba(0, 0, 0, .62);
  --sheet-bg: linear-gradient(180deg, #151515, #0c0c0c);
  --scrim: rgba(0, 0, 0, .4);
  --shadow: 0 34px 70px rgba(0, 0, 0, .66);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, .5);
  --hairline: rgba(255, 255, 255, .04);
  --sheen: rgba(255, 255, 255, .03);

  /* A CAUTION IS NOT THE BRUSH. It stays amber whichever colour the site is painted in,
     so it reads as "read this" and never competes with the accent on the download
     button — and it cannot vanish on the amber or gold brush by matching them. */
  --warn:      #e8a33d;
  --warn-line: rgba(232, 163, 61, .32);
  --warn-soft: rgba(232, 163, 61, .07);
}

html[data-theme="light"] {
  --bg:        #ffffff;
  --bg-2:      #f6f6f8;
  --panel:     #f2f2f5;
  --panel-2:   #e9e9ee;
  --panel-3:   #dededf;
  --line:      #cfcfd6;
  --line-soft: #e3e3e9;

  --text:   #101013;
  --text-2: #4c4c55;
  --text-3: #7b7b85;

  --header-bg: rgba(255, 255, 255, .88);
  --header-bg-open: rgba(255, 255, 255, .98);
  --drop-bg: linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,246,248,.99));
  --overlay-bg: rgba(30, 30, 34, .38);
  --sheet-bg: linear-gradient(180deg, #ffffff, #f6f6f8);
  --scrim: rgba(232, 232, 237, .4);
  --shadow: 0 34px 70px rgba(0, 0, 0, .18);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, .12);
  --hairline: rgba(0, 0, 0, .05);
  --sheen: rgba(0, 0, 0, .02);

  /* Same caution, darkened: mid amber on white is unreadable as text. */
  --warn:      #8a5300;
  --warn-line: rgba(176, 106, 0, .34);
  --warn-soft: rgba(214, 149, 43, .13);
}

/* ─────────────────────────── 2. brushes ───────────────────────────
   --accent      the brush colour
   --accent-dim  a muted edge of it (borders, inactive)
   --accent-pale the hover / raised state
   --accent-ink  text that sits on top of a filled accent
   Dark values first, then the light-mode variants darkened for contrast on white. */

html[data-brush="gold"]   { --accent: #ffc900; --accent-dim: #a8871c; --accent-pale: #ffe98a; --accent-ink: #1a1400; }
html[data-brush="amber"]  { --accent: #e8830f; --accent-dim: #9b5b12; --accent-pale: #ffc180; --accent-ink: #1a0e00; }
html[data-brush="teal"]   { --accent: #2fbfbf; --accent-dim: #1d7d7d; --accent-pale: #9be6e6; --accent-ink: #04201f; }
html[data-brush="blue"]   { --accent: #3a72e0; --accent-dim: #2a4f96; --accent-pale: #a8c3f6; --accent-ink: #ffffff; }
html[data-brush="violet"] { --accent: #9b4fd0; --accent-dim: #68348c; --accent-pale: #d8b3f0; --accent-ink: #ffffff; }
html[data-brush="green"]  { --accent: #3aa83f; --accent-dim: #27702a; --accent-pale: #a6e0a9; --accent-ink: #041805; }
html[data-brush="red"]    { --accent: #d02a2a; --accent-dim: #8c2020; --accent-pale: #f2a5a5; --accent-ink: #ffffff; }

html[data-theme="light"][data-brush="gold"]   { --accent: #8a6a00; --accent-dim: #c9a52b; --accent-pale: #5c4700; --accent-ink: #ffffff; }
html[data-theme="light"][data-brush="amber"]  { --accent: #b25f00; --accent-dim: #e0a05a; --accent-pale: #7d4200; --accent-ink: #ffffff; }
html[data-theme="light"][data-brush="teal"]   { --accent: #0f7d7d; --accent-dim: #58b8b8; --accent-pale: #0a5757; --accent-ink: #ffffff; }
html[data-theme="light"][data-brush="blue"]   { --accent: #2757bd; --accent-dim: #7699e6; --accent-pale: #1b3d87; --accent-ink: #ffffff; }
html[data-theme="light"][data-brush="violet"] { --accent: #7635b0; --accent-dim: #ab7bd8; --accent-pale: #52237c; --accent-ink: #ffffff; }
html[data-theme="light"][data-brush="green"]  { --accent: #2a7c2e; --accent-dim: #74b878; --accent-pale: #1d5720; --accent-ink: #ffffff; }
html[data-theme="light"][data-brush="red"]    { --accent: #a81f1f; --accent-dim: #dd8484; --accent-pale: #751515; --accent-ink: #ffffff; }

/* Swatch colours for the picker stay vivid in both modes so the squares read as paint. */
:root { --sw-gold:#ffc900; --sw-amber:#e8830f; --sw-teal:#2fbfbf; --sw-blue:#3a72e0;
        --sw-violet:#9b4fd0; --sw-green:#3aa83f; --sw-red:#d02a2a; }

/* Derived, mode independent.
   :root and not html — the original site declares --gold in a :root block, and a
   :root selector outranks a bare html one whatever the file order. */
:root {
  --accent-soft:   color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-glow:   color-mix(in srgb, var(--accent) 22%, transparent);

  /* aliases so the original PowerBoxDJ stylesheets follow the brush */
  --gold:      var(--accent);
  --gold-dim:  var(--accent-dim);
  --gold-pale: var(--accent-pale);

  --pbx-header-h: 62px;
  --pbx-wrap: 1200px;
  --pbx-sans: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --pbx-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
}

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* ═══════════════════════ 3. shared chrome ═══════════════════════
   Prefixed .pbx-* so it never collides with a site's own rules. Modelled on the
   powerboxdj.com bar: 62px sticky, blurred, wordmark left, words in the middle,
   search pill + theme controls + gold button on the right, one morphing drop. */

.pbx-header {
  position: sticky; top: 0; z-index: 80;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--line-soft);
  transition: background .3s ease, border-color .3s ease;
  font-family: var(--pbx-sans);
}
.pbx-header.open { background: var(--header-bg-open); border-bottom-color: transparent; }
.pbx-bar {
  width: 100%; max-width: var(--pbx-wrap); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 6px; height: var(--pbx-header-h);
}

.pbx-brand {
  display: flex; align-items: center; gap: 10px; flex: none; margin-right: 16px;
  color: var(--text); font-size: 1.05rem; font-weight: 400; letter-spacing: -.01em;
  text-decoration: none;
}
.pbx-brand:hover { color: var(--text); }
.pbx-brand img {
  width: 27px; height: 27px; display: block; flex: none;
  transition: transform .4s cubic-bezier(.32,.72,0,1), filter .3s ease;
}
.pbx-brand:hover img { transform: rotate(-9deg) scale(1.08); filter: drop-shadow(0 0 9px var(--accent-glow)); }

/* words */
.pbx-nav { display: flex; gap: 2px; margin-right: auto; align-items: center; }
.pbx-t {
  position: relative; display: inline-flex; align-items: center;
  background: transparent; border: 0; cursor: pointer; text-decoration: none;
  color: var(--text-2); font-family: inherit; font-size: .92rem; font-weight: 500;
  letter-spacing: -.01em; line-height: 1; padding: 10px 13px 11px; border-radius: 0;
  transition: color .16s ease, background .16s ease;
}
.pbx-t:hover { color: var(--text); }
.pbx-t.on { color: var(--accent); background: var(--accent-softer); }
.pbx-t::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px;
  border-radius: 0; background: var(--accent);
  transform: scaleX(0); opacity: 0;
  transition: transform .3s cubic-bezier(.32,.72,0,1), opacity .2s ease;
}
.pbx-t.on::after { transform: scaleX(1); opacity: 1; }
.pbx-t[aria-current="page"] { color: var(--text); }
.pbx-t[aria-current="page"]::after { transform: scaleX(.34); opacity: .5; background: var(--accent-dim); }
.pbx-t[aria-current="page"].on::after { transform: scaleX(1); opacity: 1; background: var(--accent); }
.pbx-chev {
  display: inline-block; width: 7px; height: 7px; margin-left: 7px; vertical-align: 1px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px); opacity: .5;
  transition: transform .3s cubic-bezier(.32,.72,0,1), opacity .2s;
}
.pbx-t.on .pbx-chev { transform: rotate(-135deg) translate(-2px,-2px); opacity: 1; }

/* right cluster */
.pbx-end { display: flex; align-items: center; gap: 10px; flex: none; }

.pbx-search-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--sheen); border: 1px solid var(--line-soft); color: var(--text-3);
  border-radius: 0; padding: 6px 8px 6px 11px;
  font-family: inherit; font-size: .84rem; font-weight: 500;
  transition: border-color .16s, color .16s, background .16s;
}
.pbx-search-btn:hover { border-color: var(--accent-dim); color: var(--accent); background: var(--accent-softer); }
.pbx-search-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.pbx-search-btn kbd {
  font-family: var(--pbx-mono); font-size: .66rem; font-weight: 500; line-height: 1.5;
  border: 1px solid var(--line); border-radius: 0; padding: 1px 5px;
  color: var(--text-3); background: var(--hairline);
}

/* theme + brush + lang controls (injected by theme.js) */
.pbx-controls { display: inline-flex; align-items: center; gap: 8px; }

.pbx-ctl {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; min-width: 32px; padding: 0 9px;
  background: transparent; border: 1px solid var(--line-soft); border-radius: 0;
  color: var(--text-2); font-family: inherit; font-size: .82rem; cursor: pointer;
  transition: border-color .16s, color .16s, background .16s;
}
/* ── one hover, everywhere ──
   Every item in the header answers the pointer the same way: the accent colour on a soft
   wash of it. No lift, no scale, no border change — a menu word, a panel link, a cosmetic
   button, a language row and a mode tile all behave alike. The matching rule for the
   .mm-* items lives in css/nav.css; keep the two in step. */
.pbx-ctl:hover, .pbx-langs button:hover, .pbx-mode:hover {
  color: var(--accent); background: var(--accent-soft); border-color: var(--line-soft);
}
.pbx-ctl svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the square: a solid chip of the current brush */
.pbx-brush-btn { padding: 0; width: 30px; }
.pbx-swatch {
  width: 15px; height: 15px; border-radius: 0; display: block;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--hairline) inset, 0 0 10px var(--accent-glow);
  transition: box-shadow .2s ease, transform .2s cubic-bezier(.32,.72,0,1);
}
.pbx-brush-btn:hover .pbx-swatch { transform: rotate(-8deg) scale(1.12); box-shadow: 0 0 0 1px var(--hairline) inset, 0 0 16px var(--accent-glow); }

.pbx-wrap-ctl { position: relative; }

/* ── every menu opens on hover, closes when the pointer leaves ──
   Pure CSS, which is what makes the rule "one open at a time" free: the pointer can only
   be in one wrapper, so arriving at the second menu closes the first with no bookkeeping.
   :focus-within gives the keyboard the same behaviour. */
.pbx-wrap-ctl:hover > .pbx-hoverpop,
.pbx-wrap-ctl:focus-within > .pbx-hoverpop { opacity: 1; visibility: visible; transform: none; }
/* Bridges the gap between button and pop so crossing it does not close the menu. */
.pbx-hoverpop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }

/* The dot in the corner of the dark / light button is the current brush, so the bar still
   shows which one is on now that the swatch chip has moved into the menu. */
.pbx-theme-btn { position: relative; }
.pbx-theme-btn::after {
  content: ""; position: absolute; right: 3px; bottom: 3px;
  width: 5px; height: 5px; border-radius: 0; background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}

/* The two modes, as icon tiles on the same 4-column grid the swatches use, so they line
   up with the brushes below them. */
.pbx-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.pbx-mode {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 0;
  background: transparent; border: 1px solid var(--line-soft); border-radius: 0;
  color: var(--text-2); cursor: pointer;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.pbx-mode svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pbx-mode[aria-current="true"] { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-soft); }
.pbx-pop {
  position: absolute; right: 0; top: 38px; z-index: 90;
  background: var(--sheet-bg); border: 1px solid var(--line);
  border-radius: 0; box-shadow: var(--shadow-sm);
  padding: 10px; min-width: 172px;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(.97); transform-origin: top right;
  transition: opacity .15s ease, transform .22s cubic-bezier(.32,.72,0,1), visibility .15s;
}
[dir="rtl"] .pbx-pop { right: auto; left: 0; transform-origin: top left; }
.pbx-pop.on { opacity: 1; visibility: visible; transform: none; }
.pbx-pop.wide { min-width: 268px; }

.pbx-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.pbx-sw {
  width: 100%; aspect-ratio: 1; border-radius: 0; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--c);
  position: relative; padding: 0;
  transition: transform .16s cubic-bezier(.32,.72,0,1), box-shadow .16s ease;
}
/* A colour chip cannot take a colour wash, so the shared hover shows up here as a ring
   instead — same idea, no lift, nothing jumps. */
.pbx-sw:hover { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--text-3); }
.pbx-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text-2); }
.pbx-sw[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 6px; height: 11px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px,-2px);
  filter: drop-shadow(0 0 2px rgba(0,0,0,.65));
  animation: pbxTick .24s cubic-bezier(.32,.72,0,1);
}
@keyframes pbxTick { from { opacity: 0; transform: rotate(45deg) translate(-1px,-2px) scale(.4) } }

/* theme rows */
.pbx-rows { display: grid; gap: 2px; }
.pbx-rows button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 0; cursor: pointer;
  color: var(--text); font-family: inherit; font-size: .88rem; padding: 7px 9px;
  transition: background .14s ease;
}
.pbx-rows button:hover { background: var(--panel-2); }
.pbx-rows button[aria-current="true"]::after { content: "✓"; margin-left: auto; color: var(--accent); }
.pbx-rows i { width: 13px; height: 13px; border-radius: 0; flex: none; border: 1px solid var(--line); }
.pbx-rows i.sw-dark  { background: #0b0b0b; }
.pbx-rows i.sw-light { background: #f4f4f6; }

/* the gap between the modes and the brushes */
.pbx-pop-sep { height: 1px; background: var(--line-soft); margin: 13px 2px 12px; }

/* language list — long, so it scrolls in two columns */
.pbx-langs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  /* 133 languages now, not 30 — the list needs the room, and the scroll is what keeps it from
     running off the bottom of a laptop screen. */
  max-height: min(62vh, 440px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.pbx-langs button {
  display: flex; align-items: center; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 0; cursor: pointer;
  color: var(--text-2); font-family: inherit; font-size: .82rem; padding: 6px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .14s ease, color .14s ease;
}
.pbx-langs button:hover { background: var(--panel-2); color: var(--text); }
.pbx-langs button[aria-current="true"] { color: var(--accent); }
.pbx-langs button[aria-current="true"]::after { content: "✓"; margin-left: auto; padding-left: 6px; }

/* download button */
.pbx-dl {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 8px 15px; border-radius: 0; border: 1px solid transparent;
  font-family: inherit; font-weight: 650; font-size: .86rem; cursor: pointer;
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
  color: var(--accent-ink); text-decoration: none;
  box-shadow: 0 6px 22px var(--accent-glow);
  transition: box-shadow .14s, transform .12s;
}
.pbx-dl:hover { color: var(--accent-ink); box-shadow: 0 10px 30px var(--accent-glow); }
.pbx-dl:active { transform: translateY(1px); }

/* burger */
.pbx-burger {
  display: none; width: 38px; height: 34px; place-items: center;
  background: transparent; border: 1px solid var(--line-soft); border-radius: 0;
  cursor: pointer; color: var(--text-2);
}
.pbx-burger span { display: block; width: 17px; height: 1.6px; background: currentColor; border-radius: 0; position: relative; transition: transform .28s cubic-bezier(.32,.72,0,1), background .2s; }
.pbx-burger span::before, .pbx-burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.6px; background: currentColor; border-radius: 0;
  transition: transform .28s cubic-bezier(.32,.72,0,1), top .2s ease;
}
.pbx-burger span::before { top: -6px; }
.pbx-burger span::after  { top: 6px; }
.pbx-burger.on { color: var(--accent); border-color: var(--accent-dim); }
.pbx-burger.on span { background: transparent; }
.pbx-burger.on span::before { top: 0; transform: rotate(45deg); }
.pbx-burger.on span::after  { top: 0; transform: rotate(-45deg); }

/* ── the drop ── */
.pbx-drop {
  position: absolute; left: 0; right: 0; top: 100%;
  height: 0; overflow: hidden;
  background: var(--drop-bg);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
  transition: height .42s cubic-bezier(.32,.72,0,1);
  overscroll-behavior: contain;
}
.pbx-drop.scroll { overflow-y: auto; }
.pbx-stack { position: relative; }
.pbx-panel {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 22px 0 26px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.pbx-panel.on { opacity: 1; visibility: visible; pointer-events: auto; }
.pbx-panel .pbx-inner { width: 100%; max-width: var(--pbx-wrap); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: start; }
.pbx-cols {
  display: grid; justify-content: start;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 30px;
}
@media (max-width: 1160px) { .pbx-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pbx-panel .stag {
  opacity: 0; transform: translateY(9px);
  transition: opacity .38s ease, transform .46s cubic-bezier(.32,.72,0,1);
  transition-delay: var(--d, 0ms);
}
.pbx-panel.on .stag { opacity: 1; transform: none; }
.pbx-ch {
  display: flex; align-items: center; gap: 8px; margin: 0 0 11px;
  font-family: var(--pbx-mono); font-size: .67rem; font-weight: 400;
  letter-spacing: .14em; color: var(--text-3);
}
.pbx-ch i { width: 7px; height: 7px; border-radius: 0; background: var(--accent-dim); flex: none; }
.pbx-list { list-style: none; margin: 0; padding: 0; }
.pbx-list li { margin-bottom: 1px; }
.pbx-list a {
  display: block; padding: 5px 9px; margin-left: -9px; border-radius: 0;
  font-size: .885rem; line-height: 1.35; color: var(--text-2); text-decoration: none;
  transition: color .14s ease, background .14s ease;
}
.pbx-list a:hover { color: var(--accent); background: var(--accent-softer); }
.pbx-shot {
  width: 240px; height: 160px; align-self: center;
  border: 1px solid var(--accent-dim); border-radius: 0;
  background: var(--accent-softer);
  display: grid; place-items: center; text-align: center; padding: 12px;
  font-family: var(--pbx-mono); font-size: .63rem; line-height: 1.5; color: var(--text-3);
}
.pbx-shot img { width: 240px; height: 160px; object-fit: cover; border-radius: 0; }

/* curtain — the page behind an open menu is dimmed and blurred. Apple's numbers; the
   .mm-scrim copy in css/nav.css is the same thing for the PowerBoxDJ header. */
.pbx-scrim {
  position: fixed; inset: 0; z-index: 70; background: var(--scrim);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .32s cubic-bezier(.4,0,.6,1) 80ms, visibility .32s step-end 80ms;
}
body.pbx-open .pbx-scrim {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .32s cubic-bezier(.4,0,.6,1) 80ms, visibility .32s step-start 80ms;
}
body.pbx-lock { overflow: hidden; }

/* ── mobile drawer ── */
.pbx-drawer {
  position: fixed; left: 0; right: 0; top: var(--pbx-header-h); bottom: 0; z-index: 78;
  background: var(--bg);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .26s ease, transform .3s cubic-bezier(.32,.72,0,1);
}
.pbx-drawer.on { opacity: 1; transform: none; pointer-events: auto; }
.pbx-drawer-inner { padding: 14px 24px 60px; max-width: var(--pbx-wrap); margin: 0 auto; }
.pbx-drawer details { border-bottom: 1px solid var(--line-soft); }
.pbx-drawer summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 17px 2px; font-size: 1.06rem; font-weight: 650; color: var(--text);
}
.pbx-drawer summary::-webkit-details-marker { display: none; }
.pbx-drawer summary > a { color: inherit; text-decoration: none; flex: 1; }
.pbx-drawer summary::after {
  content: ""; width: 8px; height: 8px;
  border-right: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent);
  transform: rotate(45deg) translate(-2px,-2px); transition: transform .26s cubic-bezier(.32,.72,0,1);
}
.pbx-drawer details[open] summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.pbx-row { border-bottom: 1px solid var(--line-soft); }
.pbx-row a { display: block; padding: 17px 2px; font-size: 1.06rem; font-weight: 650; color: var(--text); text-decoration: none; }
.pbx-row a:hover { color: var(--accent); }
.pbx-drawer .pbx-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ── search overlay ── */
.pbx-sf {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: start center;
  padding: min(13vh, 110px) 20px 24px;
  background: var(--overlay-bg);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
  font-family: var(--pbx-sans);
}
.pbx-sf.on { opacity: 1; pointer-events: auto; }
.pbx-sf-box {
  width: 100%; max-width: 660px; border: 1px solid var(--line); border-radius: 0;
  background: var(--sheet-bg); box-shadow: var(--shadow);
  overflow: hidden; transform: translateY(-10px) scale(.985);
  transition: transform .26s cubic-bezier(.32,.72,0,1);
}
.pbx-sf.on .pbx-sf-box { transform: none; }
.pbx-sf-row { display: flex; align-items: center; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--line-soft); }
.pbx-sf-row svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; flex: none; }
.pbx-sf-row input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--text); font-family: inherit; font-size: 1.06rem;
}
.pbx-sf-row input::placeholder { color: var(--text-3); }
.pbx-sf-row kbd {
  font-family: var(--pbx-mono); font-size: .66rem; border: 1px solid var(--line);
  border-radius: 0; padding: 2px 6px; color: var(--text-3); cursor: pointer;
}
.pbx-sf-results { max-height: min(58vh, 460px); overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
.pbx-sf-lbl {
  font-family: var(--pbx-mono); font-size: .62rem; letter-spacing: .14em;
  color: var(--text-3); padding: 10px 11px 6px;
}
.pbx-hit {
  display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 0;
  color: var(--text); cursor: pointer; text-decoration: none;
}
.pbx-hit:hover, .pbx-hit.sel { background: var(--accent-soft); color: var(--text); }
.pbx-hit .ic {
  width: 26px; height: 26px; flex: none; border-radius: 0; display: grid; place-items: center;
  background: var(--hairline); border: 1px solid var(--line-soft);
  font-family: var(--pbx-mono); font-size: .58rem; color: var(--text-3);
}
.pbx-hit.sel .ic { border-color: var(--accent-dim); color: var(--accent); }
.pbx-hit .tx { display: block; min-width: 0; flex: 1; }
.pbx-hit .tt { display: block; font-size: .93rem; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbx-hit .tt mark { background: transparent; color: var(--accent); font-weight: 700; }
.pbx-hit .sub { display: block; font-size: .74rem; color: var(--text-3); font-family: var(--pbx-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbx-sf-empty { padding: 30px 14px; text-align: center; color: var(--text-3); font-size: .9rem; }
.pbx-sf-foot {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 10px 15px; border-top: 1px solid var(--line-soft); background: var(--hairline);
  font-family: var(--pbx-mono); font-size: .66rem; color: var(--text-3);
}
.pbx-sf-foot kbd { border: 1px solid var(--line); border-radius: 0; padding: 0 4px; margin-right: 4px; }

/* ── footer ── */
.pbx-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-2);
  font-family: var(--pbx-sans); font-size: .88rem; color: var(--text-2);
}
.pbx-footer .pbx-frow {
  width: 100%; max-width: var(--pbx-wrap); margin: 0 auto; padding: 0 24px;
  min-height: 72px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
}
.pbx-footer .f-left { color: var(--text-2); }
.pbx-footer .f-mid { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pbx-footer .f-mid a { color: var(--text-2); text-decoration: none; }
.pbx-footer .f-mid a:hover { color: var(--accent); }
.pbx-footer .f-mid .sep { color: var(--line); }
.pbx-footer .f-right { text-align: right; color: var(--text-3); font-size: .82rem; }

/* ── responsive ── */
@media (max-width: 1100px) {
  .pbx-t { padding: 10px 10px 11px; font-size: .89rem; }
  .pbx-t::after { left: 10px; right: 10px; }
  .pbx-search-btn .lbl, .pbx-search-btn kbd { display: none; }
  .pbx-search-btn { padding: 7px 9px; border-radius: 0; }
}
@media (max-width: 940px) {
  .pbx-nav { display: none; }
  .pbx-drop { display: none; }
  .pbx-burger { display: inline-grid; }
  .pbx-brand { margin-right: auto; }
  .pbx-panel .pbx-inner { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .pbx-dl { display: none; }
  .pbx-footer .pbx-frow { grid-template-columns: 1fr; text-align: center; padding: 18px 24px; }
  .pbx-footer .f-right { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pbx-drop, .pbx-panel, .pbx-panel .stag, .pbx-scrim, .pbx-drawer, .pbx-sf, .pbx-sf-box, .pbx-t::after, .pbx-chev, .pbx-pop {
    transition-duration: .01ms !important;
  }
  .pbx-panel .stag { opacity: 1; transform: none; }
}

/* ═══════════════════════ flare ═══════════════════════
   Small, cheap motion. Everything here is a transition or a short transform, so
   it degrades to nothing under prefers-reduced-motion (block at the end). */

/* the bar lifts off the page once you scroll */
.pbx-header.scrolled { box-shadow: 0 1px 0 var(--line-soft), 0 10px 30px rgba(0,0,0,.28); }
html[data-theme="light"] .pbx-header.scrolled { box-shadow: 0 1px 0 var(--line-soft), 0 10px 26px rgba(0,0,0,.07); }

/* download button: a light sweeps across it on hover */
.pbx-dl { position: relative; overflow: hidden; }
.pbx-dl::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.pbx-dl:hover::after { animation: pbxSweep .72s cubic-bezier(.32,.72,0,1); }
@keyframes pbxSweep { to { left: 130%; } }

/* menu words: the underline grows from the middle, the chevron drops */
.pbx-t::after { transform-origin: center; }
.pbx-t:hover::after { transform: scaleX(.5); opacity: .45; }

/* panel links slide a hair toward the reader */
.pbx-list a { transform: translateX(0); transition: color .14s ease, background .14s ease, transform .18s cubic-bezier(.32,.72,0,1); }
.pbx-list a:hover { transform: translateX(3px); }
[dir="rtl"] .pbx-list a:hover { transform: translateX(-3px); }

/* the search pill widens a touch when you point at it */
.pbx-search-btn { transition: border-color .16s, color .16s, background .16s, letter-spacing .2s ease; }
.pbx-search-btn:hover { letter-spacing: .01em; }

/* controls settle in when the bar mounts */
.pbx-controls .pbx-ctl { animation: pbxCtlIn .4s cubic-bezier(.32,.72,0,1) both; }
.pbx-controls .pbx-wrap-ctl:nth-child(1) .pbx-ctl { animation-delay: .04s; }
.pbx-controls .pbx-wrap-ctl:nth-child(2) .pbx-ctl { animation-delay: .10s; }
.pbx-controls .pbx-wrap-ctl:nth-child(3) .pbx-ctl { animation-delay: .16s; }
@keyframes pbxCtlIn { from { opacity: 0; transform: translateY(-5px) } }

/* search results arrive in sequence */
.pbx-hit { animation: pbxHitIn .26s ease both; }
.pbx-hit:nth-child(2) { animation-delay: .02s } .pbx-hit:nth-child(3) { animation-delay: .04s }
.pbx-hit:nth-child(4) { animation-delay: .06s } .pbx-hit:nth-child(5) { animation-delay: .08s }
.pbx-hit:nth-child(n+6) { animation-delay: .1s }
@keyframes pbxHitIn { from { opacity: 0; transform: translateY(4px) } }

@media (prefers-reduced-motion: reduce) {
  .pbx-dl:hover::after, .pbx-controls .pbx-ctl, .pbx-hit { animation: none !important; }
  .pbx-list a:hover, .pbx-brand:hover img, .pbx-brush-btn:hover .pbx-swatch { transform: none !important; }
}

/* ═══════════════════════ 9. one weight, everywhere ═══════════════════════
   NOTHING ON THIS SITE IS BOLD. Not a heading, not a button, not a table header, not a <b> or a
   <strong>, and not anything phpBB draws inside /forum/ either.

   The design already leaned this way — the wordmark, the download panels and the nav were each
   written "nothing bold" in their own files — but every stylesheet made that decision separately
   and phpBB's own arrived with its own opinions. This is the decision in one place, applied to
   both surfaces, so the site and the board read as one thing.

   Hierarchy still exists: it comes from size, from spacing, and from the brush colour. That is
   what the type scale in style.css is for. Weight is simply not one of the tools any more.

   !important, and a selector list this blunt, because it has to beat prosilver — a stylesheet
   this file does not own, cannot edit safely, and which phpBB will happily replace on update. */
html body,
h1, h2, h3, h4, h5, h6,
b, strong, th, dt, legend, caption, optgroup, summary, label,
.btn, .brand, .brand span, button, input, select, textarea,
a, .pbdj,
#site-header *,
.pbx-header *, .pbx-controls *,
.mm-ch, .mm-list a, .mm-flat a,
.postbody *, .content *, .navbar *, .forabg *, .forumbg *, .panel *, .cp-main *,
.topictitle, .forumtitle, .username, .username-coloured, .row strong, .header *, dl.row-item dt *
{ font-weight: 400 !important; }

/* THE ONE THING WEIGHT WAS DOING THAT COLOUR NOW DOES.
   phpBB marks an unread forum or topic by making its title bold, which the rule above has just
   taken away. The signal is worth keeping, so it moves to the brush: unread reads in the accent
   colour, read stays in the ordinary text colour. Same information, no bold. */
a.forumtitle.unread, a.topictitle.unread,
.row-item.forum_unread .forumtitle, .row-item.forum_unread_subforum .forumtitle,
.row-item.topic_unread .topictitle, .row-item.topic_unread_hot .topictitle,
.row-item.topic_unread_mine .topictitle {
  color: var(--accent) !important;
}

/* ═══════════════════════ 10. the page translator ═══════════════════════
   Google's element injects a banner across the top of the page and pushes the body down 40px to
   make room for it. Both go: the language menu in the bar is the control, and that banner is a
   second one in a font and colour nothing here can reach. The element itself only ever needs to
   exist, not to be seen. */
body > .skiptranslate { display: none !important; }
body { top: 0 !important; }
#pbx-goog { display: none; }

/* Google wraps every translated run in a <font> tag, which resets the colour it inherited. The
   product name has to survive that, or PowerBox DJ stops being gold the moment somebody reads
   the site in Spanish. */
.pbdj font, font .pbdj { color: #ffc900 !important; -webkit-text-fill-color: #ffc900 !important; }

/* The product name is a name, not a phrase: Google must not translate it and must not restyle it.
   Belt and braces alongside translate="no" in the markup. */
.pbdj { -webkit-text-fill-color: #ffc900; white-space: nowrap; }