/* PowerBoxDJ — top navigation
   Apple-style mega menu: one drop container whose height morphs between panels,
   panels cross-fade, contents stagger in. Plus a client-side site search overlay
   and a mobile accordion drawer. Loaded after style.css and overrides its header. */

/* ── mount placeholders (reserve space so nothing jumps on inject) ── */
#site-header { display: block; height: 62px; background: #000; border-bottom: 1px solid var(--line-soft); }

/* ── bar ─────────────────────────────────────── */
header.site {
  position: sticky; top: 0; z-index: 80;
  background: rgba(0,0,0,.86);
  -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;
}
header.site.open { background: rgba(0,0,0,.97); border-bottom-color: transparent; }

/* The bar spans the whole page — no 1200px cap, edge to edge like tesla.com — and the
   two outer tracks are equal, so the menu lands on the true centre of the page instead
   of the centre of whatever is left over. Nothing but the menu goes in the middle. */
header.site .bar {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 8px; height: 62px;
  max-width: none; padding: 0 14px 0 28px;
}
/* Placed by column, not by source order — the first track is deliberately empty, so
   auto-placement would otherwise drop the menu into it and nothing would be centred. */
nav.main {
  grid-column: 2;
  display: flex; gap: 2px; margin: 0; align-items: center; justify-content: center;
}
header.site .bar .bar-end { grid-column: 3; justify-self: end; }

.mm-t {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-2); font-family: var(--sans); font-size: .92rem; font-weight: 400;
  letter-spacing: -.01em; line-height: 1;
  padding: 10px 13px 11px; border-radius: 0; position: relative;
  transition: color .16s ease, background .16s ease;
}
.mm-t { text-decoration: none; }
/* No underline, no marker. An open word reads as open because its panel is down — the
   same wash the pointer gives it, nothing added on top. */
.mm-t.on { color: var(--gold); background: var(--accent-soft); }
/* THE PAGE YOU ARE ON IS UNDERLINED, AND NOTHING ELSE. (user request)

   NO COLOUR AND NO WASH. Those belong to the pointer: the brush colour means "you are on this now",
   and it has to stay the answer to hovering rather than something two different states both claim.
   A word that was already coloured could not then light up under the pointer, so the one signal a
   visitor uses constantly was being spent on the one fact they can already see from the page they
   are looking at. An underline says where you are and leaves the colour free.

   The row inside the panel is underlined the same way and equally uncoloured — see .mm-now — so the
   menu says the section and the page together: Features and Collections, License and Audio+, News
   and Software Update.

   .mm-t.on keeps its bare wash: an open word reads as open because its panel is down. */
.mm-t[aria-current="page"] {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
/* Download Now is a button, and a button with an underline through it reads as broken. The word
   inside it takes the mark instead. */
.mm-dl[aria-current="page"] { text-decoration: none; }
.mm-dl[aria-current="page"] span {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}

/* ── one hover, everywhere ──
   The accent colour on a soft wash of it, and nothing else: no lift, no scale, no border
   change. A menu word, a panel link, the search button and a card link all behave alike.
   The matching rule for the .pbx-* controls lives in css/theme.css; keep the two in step. */
.mm-t:hover,
.mm-flat a:hover,
.mm-list a:hover, .mm-ch a:hover, .mm-search:hover {
  color: var(--gold); background: var(--accent-soft);
}

/* ── Download Now: the download page's button, in the bar ──
   Nothing about how it looks is here. It carries .btn.btn-gold.btn-lg and the 40px .btn-pkg
   picture, so css/style.css and css/stage.css draw it exactly as they draw
   PowerBoxDJ_Downloader.exe on download.html. All this does is place it in the bar. */
.mm-dl { margin-left: 8px; flex: none; }

/* The wordmark is a plain link to the home page — not a menu item, no panel.
   It stays white (black on a light theme) and never recolours on hover. */
header.site .bar .brand:hover { color: #fff; }
@media (prefers-color-scheme: light) {
  header.site .bar .brand:hover { color: #000; }
}

/* Tight: the search, language and theme buttons are one cluster, not three separate
   controls, and they sit close in to the right edge. */
.bar-end { display: flex; align-items: center; gap: 3px; flex: none; }

/* ── search trigger ────────────────────────────
   Just the glass. Sized to match the language and theme buttons beside it so the
   three cosmetics read as one cluster. Ctrl/Cmd K still opens it. */
.mm-search {
  display: inline-grid; place-items: center; cursor: pointer;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: 1px solid var(--line-soft); border-radius: 0;
  color: var(--text-2);
  transition: border-color .16s, color .16s, background .16s;
}
.mm-search svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* ── burger ──────────────────────────────────── */
.mm-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);
}
.mm-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; }
.mm-burger span::before, .mm-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;
}
.mm-burger span::before { top: -6px; } .mm-burger span::after { top: 6px; }
.mm-burger.on { color: var(--gold); border-color: var(--gold-dim); }
.mm-burger.on span { background: transparent; }
.mm-burger.on span::before { top: 0; transform: rotate(45deg); }
.mm-burger.on span::after  { top: 0; transform: rotate(-45deg); }

/* ── the drop ────────────────────────────────── */
.mm-drop {
  position: absolute; left: 0; right: 0; top: 100%;
  height: 0; overflow: hidden;
  background: linear-gradient(180deg, rgba(21,21,21,.99), rgba(7,7,7,.99));
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 34px 70px rgba(0,0,0,.66);
  transition: height .42s cubic-bezier(.32,.72,0,1);
  overscroll-behavior: contain;
}
/* Only when the sheet is deeper than the window: a lid at the space under the bar, and it scrolls
   inside. Not a crop — the bar is sticky, so without this the deep end sits under the fold with no
   way to reach it. */
.mm-drop.scroll { overflow-y: auto; max-height: calc(100vh - 70px); }   /* 62 bar + 8 clear, = room() */
.mm-drop::-webkit-scrollbar { width: 9px; }
.mm-drop::-webkit-scrollbar-thumb { background: var(--line); border-radius: 0; }
.mm-stack { position: relative; }

.mm-panel {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 32px 0 38px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
/* The open one is IN FLOW, so the sheet's own height is whatever the panel needs and js/nav.js can
   hand it back to the content (height:auto) once the sheet has finished opening. The rest stay
   absolute and out of the layout, so the depth is the depth of what you are looking at. */
.mm-panel.on { position: relative; opacity: 1; visibility: visible; pointer-events: auto; }

/* Item one is the app icon AND the name, as one button. */
.mm-t-logo { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 6px; }
.mm-t .mm-logo { display: block; width: 26px; height: 26px; flex: none; }
.mm-t-logo span { letter-spacing: -.015em; white-space: nowrap; }

/* The box shakes itself and settles. Decaying swings either side of centre, ending at
   rotate(0) so it lands exactly where it started — a shake, not a rotation held open. */
@keyframes mmLogoWiggle {
  0%   { transform: rotate(0deg) }
  12%  { transform: rotate(-11deg) }
  26%  { transform: rotate(9deg) }
  40%  { transform: rotate(-6deg) }
  54%  { transform: rotate(4deg) }
  68%  { transform: rotate(-2.5deg) }
  82%  { transform: rotate(1.5deg) }
  100% { transform: rotate(0deg) }
}
.mm-t-logo:hover .mm-logo { animation: mmLogoWiggle .62s cubic-bezier(.36,.07,.19,.97); }

/* The panel is a list of the pages under a word. Columns are a fixed width and centred
   under the menu, so the Forum's ten wrap into a tidy block in the middle of the sheet
   instead of being stretched across it or stranded at one edge. */
.mm-cols {
  display: grid; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(132px, 168px));
  gap: 22px 38px;
}

/* ── flat panel: one centred row of links ───── */
.mm-flat { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.mm-flat a {
  display: inline-block; padding: 9px 16px; border-radius: 0;
  font-size: .95rem; font-weight: 400; line-height: 1.3; color: var(--text-2);
  transition: color .14s ease, background .14s ease;
}


/* ── news panel ───────────────────────────────
   Read live from news/news.txt and the pictures beside it by js/nav.js; empty if that
   folder has nothing in it. One row per entry, text left and image right — always that
   way round. The row is as tall as its text, and the drop scrolls if the lot outgrows the
   window (see measure()). */
.mm-news { max-width: 940px; text-align: left; }

.mm-news-rows { display: flex; flex-direction: column; gap: 26px; }
.mm-news-row {
  display: grid; grid-template-columns: minmax(0,1fr) 280px;
  gap: 22px; align-items: stretch;
}
.mm-news-row.no-img { grid-template-columns: minmax(0,1fr); }
.mm-news-row + .mm-news-row { padding-top: 24px; border-top: 1px solid var(--line-soft); }

.mm-news-grp + .mm-news-grp { margin-top: 16px; }
.mm-news-title {
  margin: 0 0 5px; font-size: 1.12rem; font-weight: 400;
  letter-spacing: -.01em; line-height: 1.3; color: var(--text);
}
.mm-news-desc { margin: 0 0 3px; font-size: .93rem; line-height: 1.5; color: var(--text-2); }
.mm-news-desc:last-child { margin-bottom: 0; }

/* Paired rows: the picture sits at its own size, so nothing is cropped. */
.mm-news-pic { min-width: 0; }
.mm-news-img {
  display: block; width: 100%; height: auto;
  border-radius: 0; border: 1px solid var(--line-soft); background: var(--panel);
}

/* ONE IMAGE, ALL THE TEXT: the picture stands as high as everything beside it.
   height:100% will not do that on its own — with no definite height on the parent it falls
   back to the image's own height, which is how a lone picture ends up shorter than the text
   it is meant to match. Taking it out of flow instead leaves the row's height decided by
   the text column alone, and the stretched cell it fills is exactly that height. */
.mm-news-row.span .mm-news-pic { position: relative; min-height: 160px; }
.mm-news-row.span .mm-news-img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}

/* No room for two columns on a phone: the image goes under its text, still in order. */
@media (max-width: 820px) {
  .mm-news-row, .mm-news-row.no-img, .mm-news-row.span { grid-template-columns: minmax(0,1fr); }
  .mm-news-row.span .mm-news-pic { position: static; min-height: 0; }
  .mm-news-row.span .mm-news-img { position: static; height: auto; max-height: 240px; }
}

/* staggered entrance — a transition, not an animation, so the visible state is the
   resting state: if the transition never runs the content is still there. */
.mm-panel .stag {
  opacity: 0; transform: translateY(9px);
  transition: opacity .38s ease, transform .46s cubic-bezier(.32,.72,0,1);
  transition-delay: var(--d, 0ms);
}
.mm-panel.on .stag { opacity: 1; transform: none; }
@keyframes mmIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* lead column */
.mm-lead .eyebrow { margin-bottom: 12px; }
.mm-lead h4 { font-size: 1.42rem; font-weight: 400; letter-spacing: -.03em; line-height: 1.18; margin-bottom: 10px; }
.mm-lead p { font-size: .9rem; color: var(--text-2); margin-bottom: 16px; }
.mm-lead .mm-leadlinks { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.mm-lead .mm-leadlinks a { font-size: .87rem; font-weight: 400; color: var(--gold); }
.mm-lead .mm-leadlinks a:hover { color: var(--gold-pale); }

/* a column of links */
.mm-ch {
  display: flex; align-items: center; gap: 8px; margin: 0 0 11px;
  font-family: var(--mono); font-size: .67rem; font-weight: 400;
  letter-spacing: .14em; color: var(--text-3);
}
.mm-ch a { color: inherit; }
.mm-ch a:hover { color: var(--gold); }
.mm-ch i { width: 7px; height: 7px; border-radius: 0; background: var(--text-3); flex: none; }
.mm-ch.t-free i  { background: #8a8a8a; }
.mm-ch.t-audio i { background: var(--teal); }
.mm-ch.t-data i  { background: var(--gold); }
.mm-ch.t-net i   { background: var(--blue); }
.mm-ch.t-buy i   { background: var(--green); }
.mm-ch.t-sub i   { background: var(--orange); }

.mm-list { list-style: none; margin: 0; padding: 0; }
.mm-list li { margin-bottom: 1px; }
.mm-list a, .mm-list .mm-soon {
  display: block; padding: 5px 9px; margin-left: -9px; border-radius: 0;
  font-size: .885rem; line-height: 1.35; color: var(--text-2);
  transition: color .14s ease, background .14s ease;
}
.mm-list a:hover { color: var(--gold); background: rgba(255,201,0,.07); }
.mm-list .mm-soon { color: var(--text-3); cursor: default; }
.mm-list small { display: block; font-size: .74rem; color: var(--text-3); margin-top: 1px; }
.tag-soon {
  display: inline-block; font-family: var(--mono); font-style: normal;
  font-size: .56rem; letter-spacing: .12em; 
  border: 1px solid var(--line); border-radius: 0; padding: 1px 6px;
  margin-left: 7px; color: var(--text-3); vertical-align: 1.5px;
}

/* chip row (billing periods, cross-package extras) */
.mm-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.mm-chips a {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .04em;
  border: 1px solid var(--line-soft); border-radius: 0; padding: 4px 11px;
  color: var(--text-2); background: rgba(255,255,255,.02);
  transition: border-color .14s, color .14s, background .14s;
}
.mm-chips a:hover { border-color: var(--gold-dim); color: var(--gold); background: rgba(255,201,0,.06); }

/* visuals row */
.mm-vis-row { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.mm-vis-row .cap-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; color: var(--text-3);
}
/* cards stretch to a common height; the caption is pinned to the bottom of each */
.mm-vis { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.mm-shot {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-soft); border-radius: 0; overflow: hidden;
  background: #000; transition: border-color .16s ease, transform .16s ease;
}
a.mm-shot:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
/* THE WHOLE PICTURE, AT ITS OWN SHAPE. The name is part of the image — it is drawn onto it — so a
   crop takes the name with it. No height, no object-fit cover, no object-position: the file is shown
   as it was given, the tile is as tall as the file makes it, and nothing is cut off. */
.mm-shot img { display: block; flex: 0 0 auto; width: 100%; height: auto; }
.mm-shot .cap {
  margin-top: auto; padding: 7px 10px; font-family: var(--mono); font-size: .65rem; color: var(--text-3);
  border-top: 1px solid var(--line-soft); background: var(--panel);
  overflow-wrap: break-word;
}
.mm-shot.todo { border-style: solid; border-color: var(--gold-dim); background: rgba(255,201,0,.04); }
.mm-shot.todo .ph {
  flex: 1 1 auto; min-height: 98px; display: grid; place-items: center; text-align: center; padding: 12px;
  font-family: var(--mono); font-size: .66rem; line-height: 1.5; color: var(--gold-pale);
}
.mm-shot.todo .cap { color: var(--gold-dim); border-top-color: rgba(168,135,28,.35); background: rgba(255,201,0,.03); }

/* ── curtain ──────────────────────────────────
   Apple's .globalnav-curtain, matched: while a menu is open the page behind it is dimmed
   and blurred, so the sheet is the only thing in focus. Their numbers — blur(20px), a .4
   dim, and opacity over .32s on cubic-bezier(.4,0,.6,1) after an 80ms beat, with
   visibility stepping at each end so nothing composites while it is closed.

   It sits at z-index 70, under the header's 80, so the bar and the open sheet stay sharp
   and only the page below them is touched. --scrim carries the per-mode colour. */
.mm-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.mm-open .mm-scrim {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .32s cubic-bezier(.4,0,.6,1) 80ms, visibility .32s step-start 80ms;
}
body.mm-lock { overflow: hidden; }

/* ── mobile drawer ───────────────────────────── */
.mmm {
  position: fixed; left: 0; right: 0; top: 62px; bottom: 0; z-index: 78;
  background: rgba(6,6,6,.985);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  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);
}
.mmm.on { opacity: 1; transform: none; pointer-events: auto; }
.mmm-inner { padding: 14px 24px 60px; max-width: var(--maxw); margin: 0 auto; }
.mmm details { border-bottom: 1px solid var(--line-soft); }
.mmm summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 17px 2px; font-size: 1.06rem; font-weight: 400; color: var(--text);
}
.mmm summary::-webkit-details-marker { display: none; }
.mmm summary > a { color: inherit; text-decoration: none; flex: 1; }
.mmm summary > a:hover { color: var(--gold); }
.mmm summary::after {
  content: ""; width: 8px; height: 8px; border-right: 1.8px solid var(--gold); border-bottom: 1.8px solid var(--gold);
  transform: rotate(45deg) translate(-2px,-2px); transition: transform .26s cubic-bezier(.32,.72,0,1);
}
.mmm details[open] summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.mmm .mmm-body { padding: 2px 0 16px; animation: mmIn .34s cubic-bezier(.32,.72,0,1); }
/* A word with no children: same row height as a <summary>, but it just navigates. */
.mmm-row { border-bottom: 1px solid var(--line-soft); }
.mmm-row a { display: block; padding: 17px 2px; font-size: 1.06rem; font-weight: 400; color: var(--text); text-decoration: none; }
.mmm-row a:hover { color: var(--gold); }
.mmm .mm-ch { margin-top: 14px; }
.mmm .mm-list a, .mmm .mm-list .mm-soon { padding: 7px 9px; font-size: .95rem; }
.mmm .mmm-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ── search overlay ──────────────────────────── */
.sf {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: start center;
  padding: min(13vh, 110px) 20px 24px;
  background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.sf.on { opacity: 1; pointer-events: auto; }
.sf-box {
  width: 100%; max-width: 660px; border: 1px solid var(--line); border-radius: 0;
  background: linear-gradient(180deg,#151515,#0c0c0c); box-shadow: 0 40px 90px rgba(0,0,0,.75);
  overflow: hidden; transform: translateY(-10px) scale(.985); transition: transform .26s cubic-bezier(.32,.72,0,1);
}
.sf.on .sf-box { transform: none; }
.sf-row { display: flex; align-items: center; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--line-soft); }
.sf-row svg { width: 18px; height: 18px; stroke: var(--gold); fill: none; stroke-width: 2; stroke-linecap: round; flex: none; }
.sf-row input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--text); font-family: var(--sans); font-size: 1.06rem;
}
.sf-row input::placeholder { color: var(--text-3); }
.sf-row input::-webkit-search-cancel-button, .sf-row input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.sf-row kbd {
  font-family: var(--mono); font-size: .66rem; border: 1px solid var(--line);
  border-radius: 0; padding: 2px 6px; color: var(--text-3); cursor: pointer;
}
.sf-results { max-height: min(58vh, 460px); overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
.sf-results::-webkit-scrollbar { width: 9px; }
.sf-results::-webkit-scrollbar-thumb { background: var(--line); border-radius: 0; }
.sf-lbl {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; 
  color: var(--text-3); padding: 10px 11px 6px;
}
.sf-hit {
  display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 0;
  color: var(--text); cursor: pointer;
}
.sf-hit:hover, .sf-hit.sel { background: rgba(255,201,0,.09); }
.sf-hit .ic {
  width: 26px; height: 26px; flex: none; border-radius: 0; display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: .6rem; color: var(--text-3);
}
.sf-hit.sel .ic { border-color: var(--gold-dim); color: var(--gold); }
.sf-hit .tx { display: block; min-width: 0; flex: 1; }
.sf-hit .tt { display: block; font-size: .93rem; font-weight: 400; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-hit .tt mark { background: transparent; color: var(--gold); font-weight: 400; }
.sf-hit .sub { display: block; font-size: .74rem; color: var(--text-3); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-hit .pk {
  flex: none; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; 
  border: 1px solid var(--line-soft); border-radius: 0; padding: 2px 7px; color: var(--text-3);
}
.sf-hit .pk.p-free  { color: #9a9a9a; }
.sf-hit .pk.p-audio { color: var(--teal);  border-color: rgba(47,191,191,.3); }
.sf-hit .pk.p-data  { color: var(--gold);  border-color: var(--gold-dim); }
.sf-hit .pk.p-net   { color: var(--blue);  border-color: rgba(58,114,224,.35); }
.sf-empty { padding: 30px 14px; text-align: center; color: var(--text-3); font-size: .9rem; }
.sf-empty b { color: var(--text-2); }
.sf-foot {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 10px 15px; border-top: 1px solid var(--line-soft); background: rgba(0,0,0,.35);
  font-family: var(--mono); font-size: .66rem; color: var(--text-3);
}
.sf-foot kbd { border: 1px solid var(--line); border-radius: 0; padding: 0 4px; margin-right: 4px; }

/* ── responsive ────────────────────────────────
   THE MENU IS ALWAYS THERE AND NEVER GETS SMALLER. No width, no zoom level and no phone
   takes it away or shrinks the words: it used to lose a size at 1160px and vanish behind
   a burger at 1024px, which is the menu deciding for the reader that they did not need it.

   What gives instead, in this order:
     1. the bar's side padding
     2. the gap between the words
     3. the row scrolls sideways, at full size, if it still does not fit
   The words themselves never change size. */
@media (max-width: 1160px) {
  .mm-grid { grid-template-columns: 210px 1fr; gap: 34px; }
  .mm-cols { gap: 12px 20px; }
}

@media (max-width: 1024px) {
  /* Three tracks no longer centre anything useful once the row is wider than the space,
     so the menu takes the room and the cosmetics keep the right edge. */
  /* minmax(0,1fr) on the menu, auto on the cosmetics: the scrolling track is the one that
     is allowed to be narrower than its contents. Sized the other way round, the menu takes
     its full width and pushes the theme and search buttons off the edge instead. */
  header.site .bar { grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 0 10px; }
  nav.main { grid-column: 1; justify-content: flex-start; min-width: 0; }
  header.site .bar .bar-end { grid-column: 2; }

  /* Full size, scrolled — not shrunk. Momentum on touch, no visible scrollbar eating
     the bar's height. */
  nav.main {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  nav.main::-webkit-scrollbar { display: none; }
  .mm-t { flex: none; }

  /* The burger opened a drawer that stood in for the menu. The menu is here. */
  .mm-burger { display: none !important; }

  /* The cosmetics keep their place beside it and are not squeezed out by a long menu. */
  header.site .bar .bar-end { flex: none; white-space: nowrap; }
}

@media (max-width: 560px) {
  header.site .bar { padding: 0 6px; }
  .mm-t { padding: 10px 9px 11px; }        /* padding, never the type size */
  .mmm-inner { padding: 10px 20px 60px; }
  .sf { padding: 8vh 12px 20px; }
}

/* ── the panels, when there is not room for them ──
   The bar stays whole, so it is the contents underneath that give: a sub-item too wide
   for its column is cut with an ellipsis rather than wrapping into three lines or pushing
   the panel wider than the window. The column count already reflows; this is for the one
   long label inside it. */
.mm-list a, .mm-list .mm-soon, .mm-ch, .mm-ch a, .mm-flat a {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-list small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-cols > div, .mm-grid > * { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .mm-drop, .mm-panel, .mm-panel .stag, .mm-scrim, .mmm, .sf, .sf-box {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
  .mm-panel .stag { opacity: 1; transform: none; }
  .mm-t-logo:hover .mm-logo { animation: none; }
}

/* ── the Apple treatment, for the License panel ──
   One column set in display size so the packages are the first thing read, the heading above
   them deliberately quiet, and one small row underneath for the way out of choosing.

   SIZE, NOT WEIGHT. The whole site is one weight; hierarchy here is scale and colour only, which
   is also why these rows can be this large without shouting. */
.mm-list.mm-big a { font-size: 1.5rem; line-height: 1.32; letter-spacing: -.02em; color: var(--text); }
.mm-list.mm-big a:hover { color: var(--accent); }
.mm-list.mm-big li { padding: 2px 0; }
.mm-list.mm-big li.mm-small { padding-top: 10px; }
.mm-list.mm-big li.mm-small a { font-size: .9rem; color: var(--text-2); letter-spacing: 0; }
.mm-list.mm-big li.mm-small a:hover { color: var(--accent); }

@media (max-width: 900px) { .mm-list.mm-big a { font-size: 1.25rem; } }

/* Plain rows in a panel column: the group's heading is the link, these are the words under it.
   Same rhythm as a linked row so the column still reads as a list, but no hover, no pointer and
   no hit target — there is nothing here to click, and pretending otherwise is worse than plain. */
.mm-list-plain .mm-plain {
  display: block; padding: 5px 9px; border-radius: 0;
  font-size: .9rem; line-height: 1.35; color: var(--text-2);
  pointer-events: none; cursor: default;
}
/* The heading above a panel is the target, so it gets the emphasis the rows gave up. */
.mm-list-plain + *, .mm-ch a { cursor: pointer; }

/* ── a rail and a pane: Features, and License ──
   The names on the left, the picture of the one you are pointing at on the right. The grid is fixed
   at the rail's width so the pane never resizes as you move down the list — a panel that reflows
   under the pointer is a panel you cannot aim at. */
.mm-master { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 34px; align-items: start; }

/* THE MAIN FEATURES ARE SET THE WAY THE LICENCES ARE: display size, no bullet, no box — the list
   IS the heading. Same treatment as .mm-list.mm-big, which is what the License panel used, so the
   two panels read as one menu rather than two designs.

   Size only. Nothing on this site is bold. */
.mm-rail { list-style: none; margin: 0; padding: 0; }
.mm-rail li { position: relative; }
.mm-rail a,
.mm-rail button {
  display: block; padding: 5px 8px;
  color: var(--text); font-size: 1.5rem; font-weight: 400; line-height: 1.32;
  letter-spacing: -.02em; text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
/* A rail name with no page behind it — Download's Add-Ons. Same type as the links; a button
   so it switches the pane and does not navigate. */
.mm-rail button {
  appearance: none; -webkit-appearance: none;
  width: 100%; margin: 0; background: none; border: 0;
  font-family: inherit; text-align: left; cursor: pointer;
}
.mm-rail a:hover,
.mm-rail a[aria-current="true"],
.mm-rail button:hover,
.mm-rail button[aria-current="true"],
.mm-rail a.at,
.mm-rail button.at {
  color: var(--accent);
  background: var(--accent-softer);
}
/* The line the strip is showing: underlined, so the name and the picture are visibly the same
   thing. Only the single-pane shape marks a row this way — see wireMaster. */
.mm-rail a.at,
.mm-rail button.at {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
/* "Compare licenses" and "Free" drop back to ordinary size: they are not packages. */
.mm-rail a.mm-small,
.mm-rail button.mm-small { font-size: .95rem; color: var(--text-2); letter-spacing: -.01em; }
.mm-rail a.mm-small:hover, .mm-rail a.mm-small.at,
.mm-rail button.mm-small:hover, .mm-rail button.mm-small.at { color: var(--accent); }

/* A line under a rail name, for the rail that has one — News, where the two rows are two pages and
   this says which is which. Features' rail rows are page names that need no gloss and License's are
   deliberately bare, so only the panel that sets `note` in js/nav.js gets this.

   It WRAPS, unlike everything else in the header: it is a sentence, and the rail is 268px wide.
   Nothing inherits the bar's nowrap here because the rail is not part of .mm-list. */
.mm-rail a small,
.mm-rail button small {
  display: block; margin: 2px 0 6px;
  font-size: .78rem; line-height: 1.45; letter-spacing: 0;
  color: var(--text-3);
}
.mm-rail a:hover small, .mm-rail a[aria-current="true"] small,
.mm-rail button:hover small, .mm-rail button[aria-current="true"] small { color: var(--text-2); }
.mm-rail a small:empty,
.mm-rail button small:empty,
.mm-list small:empty { display: none; }

/* ── the page you are on, inside the panel ──
   The second half of the pair the bar word starts: Features is underlined up there and Collections
   is underlined down here. One rule for all three places a page can be listed — the rail, a column
   heading, and a row in a list — because it is one idea and it should not read as three.

   NOT THE SAME LINE AS .mm-rail a.at, which is a different fact — that one says which slide of the
   strip is up right now and moves as the strip advances. This one is 2px and never moves. On a
   licence page both can be on the same row for a moment, and the weights are what tell them apart.

   The board's rows are unreachable by this on purpose: isHere() in js/nav.js rejects every absolute
   URL, so nothing in the Forum panel is ever "the page you are on".

   THE LINE IS ON THE NAME, NOT ON THE LINK. text-decoration is drawn by whichever element sets it,
   straight across everything inside — so an underline on the <a> ran through the description under a
   rail name too, and no rule on that <small> could lift it. .mm-lbl is the name; see lbl() in
   js/nav.js. A column heading has no description, so it takes the line directly.

   A LINE, NEVER A COLOUR. Same reason as the bar word above: the brush colour is what the pointer
   does, and a row that is already accent-coloured cannot light up when you point at it. Hovering
   this row still colours it and still turns the strip, exactly as hovering any other row does — the
   underline simply stays underneath. (user request) */
.mm-rail a.mm-now .mm-lbl,
.mm-rail button.mm-now .mm-lbl,
.mm-ch a.mm-now,
.mm-list a.mm-now .mm-lbl {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}

/* The drawer, same two levels and the same rule: a line, not a colour. */
.mmm-row a.mm-now, .mmm summary a.mm-now {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}

@media (max-width: 900px) { .mm-rail a, .mm-rail button { font-size: 1.25rem; } }

/* Only one pane is ever in flow; the rest are out of the layout entirely so the panel's height
   is the height of what you are looking at, not of the longest list. */
.mm-panes { position: relative; min-height: 200px; }
.mm-pane { display: none; animation: mmPaneIn .22s cubic-bezier(.32,.72,0,1) both; }
.mm-pane.on { display: block; }
@keyframes mmPaneIn { from { opacity: 0; transform: translateY(4px) } }

/* ── THE PANE: A SUB LIST, AND A SMALL FLAT STRIP BESIDE IT ──
   The master list on the far left (.mm-rail), the sections of that page beside it with a one-liner
   each, and the picture of whichever one is up on the right. Pointing at a line in the sub list
   turns the strip to it and holds it there — see wireStrip in js/nav.js.

   NO WORDS ABOVE OR BELOW THE PICTURE. The sub list is where the words are. */
.mm-strip { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: 22px; align-items: start; }
.mm-strip-bare { grid-template-columns: minmax(0, 1fr); }

.mm-subs { list-style: none; margin: 0; padding: 0; }
.mm-subs li { margin: 0 0 1px; }
.mm-subs a {
  display: block; padding: 5px 8px; text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
/* <b> for the structure of the line, not for weight: 400 like everything else on this site. */
.mm-subs b {
  display: block; font-weight: 400; font-size: .95rem;
  color: var(--text); letter-spacing: -.01em;
}
.mm-subs small { display: none; }
.mm-subs a:hover, .mm-subs a.at { background: var(--accent-softer); }
.mm-subs a:hover b, .mm-subs a.at b { color: var(--accent); }

/* SMALLER, AND FLAT. No border, no shadow, no rounding, and nothing above or below the picture: the
   first file to load hands the strip its own ratio (wireStrip), so the box is the shape of the
   pictures in it and the picture fills it edge to edge instead of sitting in a black band. 4/3 is
   only what it is until that first file arrives.

   contain, never cover — these files have their own names drawn onto them and cropping cuts them
   off. No drift either: a drift is a scale, and a scale on a contained picture is a crop. */
.mm-carousel.hero-slider.inset {
  aspect-ratio: 16 / 9; max-height: 62vh; width: 100%;
  margin: 0; padding: 0; border: 0; box-shadow: none; background: #000;
}
.mm-carousel .hs-slide img {
  position: relative;
  object-fit: scale-down; object-position: center;
  width: auto !important; height: auto !important;
  max-width: 100%; max-height: 100%;
  transform: none;
}
.mm-carousel .hs-slide img[src*="theme.png"] {
  max-width: min(100%, 359px) !important;
  max-height: min(100%, 407px) !important;
}
.mm-carousel .hs-slide img[src*="internatinoal.png"] {
  max-width: min(100%, 1056px) !important;
  max-height: min(100%, 746px) !important;
}
.mm-carousel .hs-slide.on img { animation: none; transform: none; }
.mm-carousel .hs-slide video { object-fit: cover; object-position: center top; }
.mm-carousel .hs-slide::after { display: none; }
/* AN ITEM WITH NOTHING IN ITS FOLDER SHOWS THE COMING-SOON POSTER. It keeps its place in the strip
   because the strip is also the list — pointing at a name has to show that name's frame rather than
   leave the previous one up. contain, not cover: the poster is 1712×1152 and the frame is 16/9, and
   cover would cut the words off. */
.mm-carousel .hs-slide.mm-blank { background: #000; }
.mm-carousel .hs-slide.mm-blank img,
.mm-carousel .hs-slide.hs-soon img {
  object-fit: scale-down; object-position: center; transform: none;
}
.mm-carousel .hs-slide.mm-blank.on img,
.mm-carousel .hs-slide.hs-soon.on img { animation: none; transform: none; }
/* A clip that has not arrived yet: js/stage.js is holding it out of the rotation, so this is only
   ever seen on a strip where it is the one slide there is — the News frame. */
.mm-carousel .hs-slide.todo video { visibility: hidden; }
/* The control sits ON the picture, at the bottom of it, tight in — nothing under the picture. */
.mm-carousel .hs-bar { bottom: 8px; gap: 10px; }
.mm-carousel .hs-arrow { width: 24px; height: 24px; }
.mm-carousel .hs-arrow svg { width: 12px; height: 12px; }
.mm-carousel .hs-toggle { width: 10px; height: 10px; }
.mm-carousel .hs-toggle svg { width: 5px; height: 5px; }
.mm-carousel .hs-dots { gap: 6px; }
.mm-carousel .hs-dots button { width: 6px; height: 6px; }
/* free: the same 16/9 slide as every other item, with the bullet list as the picture
   and the carousel bar (arrows, dots, count) still on top of it. */
.mm-carousel .hs-slide.mm-ticks {
  display: flex; align-items: center; justify-content: center;
  background: #0b0b0b;
}
.mm-carousel .hs-slide.mm-ticks .ticks {
  position: relative; z-index: 1;
  margin: 0; padding: 0 12%;
  list-style: none;
  pointer-events: none;
}
.mm-carousel .hs-slide.mm-ticks .ticks li {
  position: relative;
  padding-left: 1.45em;
  margin: 0 0 .55em;
  color: var(--text);
  font-size: clamp(1.05rem, 2.1vw, 1.55rem);
  line-height: 1.45;
  font-weight: 500;
}
.mm-carousel .hs-slide.mm-ticks .ticks li:last-child { margin-bottom: 0; }
.mm-carousel .hs-slide.mm-ticks .ticks li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px;
  background: var(--gold);
}

/* Library is grouped: Tools, then Others. The heading is a label for the tiles under it, never a
   link, and it is quiet on purpose - the tiles are the thing being looked at. */
.mm-group + .mm-group { margin-top: 20px; }
.mm-group-t {
  margin: 0 0 10px; font-family: var(--mono); font-size: .68rem; letter-spacing: .15em;
  color: var(--text-3);
}

/* A SLIDE HOLDS BOTH STATES AND SHOWS ONE. .todo until its picture loads, which is also the
   permanent state of a folder nobody has filled in yet. Swapping a class beats swapping markup:
   the strip drops .todo the instant an image arrives without rebuilding anything. */
.mm-shot.todo img { display: none; }
.mm-shot:not(.todo) .ph { display: none; }

@media (max-width: 1000px) {
  .mm-master { grid-template-columns: 200px minmax(0, 1fr); gap: 22px; }
}

/* ── THE SITE MAP AT THE FOOT OF EVERY PAGE ──
   A grid. powerboxdj.com is the top left cell on a row of its own, and under it every section of the
   bar is a COLUMN — Features, License, News, Forum, Download — with that section's own pages listed
   down it. Features and its areas read down column one, License and its eight lines down column two.

   Row and column are written onto each cell by js/nav.js, so what belongs to what is decided there
   and not by how a grid happens to pack. No column count here either: the columns are implicit and
   grid-auto-columns sizes them, so a section added to the bar appears here with nothing to update.

   Ordinary size, ordinary contrast: a hidden link map is a spam signal, and this one is meant to be
   read as well as crawled. */
.ft { border-top: 1px solid var(--line-soft); background: var(--bg-2); padding: 22px 0 26px; margin-top: 60px; }
.ft-lead {
  color: var(--text-2);
  font-size: .92rem;
  max-width: 52rem;
  margin: 0 0 18px;
  line-height: 1.45;
}
.ft-map {
  display: grid;
  grid-auto-columns: max-content; grid-auto-rows: auto;
  gap: 6px 40px; justify-content: start; align-items: baseline;
}
/* The head of a column, and the site at the top of the map. */
.ft-sec {
  color: var(--text); font-size: .86rem; text-decoration: none; white-space: nowrap;
  padding-bottom: 3px;
}
.ft-sub {
  color: var(--text-3); font-size: .82rem; text-decoration: none; white-space: nowrap;
}
.ft-map a:hover { color: var(--accent); }

/* Narrow: five columns of links will not hold, so each section becomes a heading with its pages
   running on under it. DOM order is already section-then-its-pages, so nothing has to move. */
@media (max-width: 900px) {
  .ft-map { display: block; }
  .ft-sec { display: block; margin-top: 12px; }
  .ft-sub { display: inline-block; margin: 0 16px 2px 0; white-space: normal; }
}

/* Group heading inside a pane: a link now, not a label. Same quiet treatment, but it goes to the
   Tools (or Others) section of the page and reads as clickable. */
a.mm-group-t { text-decoration: none; display: inline-block; }
a.mm-group-t:hover { color: var(--accent); }
/* The same grouping in the mobile drawer, one step in from the page it belongs to. */
.mm-ch-sub { margin-top: 12px; padding-left: 10px; }
.mm-ch-sub .mm-gh { color: var(--text-2); text-decoration: none; }
.mm-ch-sub a.mm-gh:hover { color: var(--accent); }