/* ==========================================
   The tuner demo (templates/partials/tuner_demo.html)
   AND the backdrop large view (static/js/backdrops.js)
   ==========================================
   Loaded by the tuner partial, which the homepage includes once. Two
   components share one file on purpose: both are homepage-only, both ship in
   the same stage, and the alternative was a second stylesheet link in a
   template that several hands are editing this week. The second half starts at
   "THE BACKDROP LARGE VIEW" and has no selector in common with the first.

   Every colour is a landing.css token except the six string hues and the three
   semantic cents colours, which are the GAME's values -- the per-string
   defaults from common/StringColors.py and COL_LOCK / COL_AMBER / COL_RED from
   GuitarInputScreen/TunerScreen.py. A string that is blue in the game and
   green here would be a small lie told in a screenshot's own language.
   ========================================== */

.tuner-section {
  padding: 56px 24px 72px;
  background: var(--bg-0);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.tuner-section .container { max-width: var(--max-w); margin: 0 auto; }

.tn-wrap {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 1fr);
  grid-template-areas:
    "panel   consent"
    "panel   strings"
    "mode    mode"
    "rule    rule"
    "alt     privacy";
  gap: 20px 28px;
  align-items: start;
}

/* ---- The just-in-time notice ---- */
.tn-consent {
  grid-area: consent;
  background: var(--bg-2);
  border: 1px solid var(--border-b);
  border-radius: var(--rad);
  padding: 18px 20px;
}
.tn-notice {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-m);
  margin-bottom: 14px;
}
.tn-consent-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tn-allow, .tn-stop {
  font-family: var(--font-b);
  font-size: 15px;
  font-weight: 600;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.tn-allow:hover, .tn-stop:hover { background: var(--accent-glow); }
.tn-allow:disabled { opacity: 0.45; cursor: not-allowed; border-color: var(--border-b); background: none; }
.tn-stop { border-color: var(--border-b); background: var(--bg-3); }
.tn-state {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--warm);
}

/* ---- The meter ---- */
.tn-panel {
  grid-area: panel;
  min-width: 0;
  background: var(--bg-1);
  border: 1px solid var(--border-b);
  border-radius: var(--rad);
  padding: 22px 24px 18px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
.tn-readout { text-align: center; }
.tn-note {
  font-family: var(--font-d);
  font-size: clamp(44px, 9vw, 72px);
  line-height: 1;
  font-weight: 700;
  color: var(--text-d);
  letter-spacing: 1px;
}
.tn-cents {
  font-size: 17px;
  font-weight: 600;
  min-height: 24px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tn-hz {
  font-size: 12.5px;
  min-height: 19px;
  color: var(--text-d);
  font-variant-numeric: tabular-nums;
}
.tn-meter { display: block; width: 100%; max-width: 420px; margin: 4px auto 0; height: auto; }
.tn-arc { fill: none; stroke: var(--border-b); stroke-width: 2; }
.tn-zone { fill: rgba(236,242,255,0.14); stroke: none; }
.tn-tick { stroke: var(--border-b); stroke-width: 2; }
.tn-tick--mid { stroke: rgba(236,242,255,0.55); stroke-width: 3; }
.tn-scale { fill: var(--text-d); font-family: var(--font-b); font-size: 13px; }
.tn-edge { fill: var(--text-d); font-family: var(--font-b); font-size: 12px; letter-spacing: 2px; }
.tn-needle {
  stroke: #ecf2ff;
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(236,242,255,0.35));
}
.tn-hub { fill: var(--bg-3); stroke: var(--border-b); stroke-width: 2; }
.tn-status {
  margin-top: 10px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  min-height: 23px;
  color: var(--text-m);
}
.tn-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- The six strings and the Auto chip ---- */
.tn-strings {
  grid-area: strings;
  display: grid;
  /* Three across, two down, at every width. `auto-fit` gave four-then-two on a
     wide column, which reads as five strings and a spare. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.tn-chip, .tn-string {
  font-family: var(--font-b);
  min-height: 48px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-b);
  background: var(--bg-2);
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tn-chip { grid-column: 1 / -1; font-size: 14px; font-weight: 600; letter-spacing: 1px; }
.tn-string b { font-size: 19px; font-weight: 700; color: var(--s, var(--text)); line-height: 1.1; }
.tn-string span { font-size: 10.5px; color: var(--text-d); font-variant-numeric: tabular-nums; }
.tn-chip[aria-pressed="true"], .tn-string[aria-pressed="true"] {
  border-color: var(--s, var(--accent));
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--s, var(--accent));
}
.tn-chip:hover, .tn-string:hover { border-color: var(--accent); }

/* ---- The copy under it ---- */
.tn-mode { grid-area: mode; font-size: 15px; font-weight: 600; color: var(--accent); }
.tn-rule { grid-area: rule; font-size: 14.5px; line-height: 1.65; color: var(--text-m); }
.tn-alt { grid-area: alt; font-size: 13px; line-height: 1.6; color: var(--text-d); }
.tn-privacy { grid-area: privacy; font-size: 13px; line-height: 1.6; color: var(--text-d); }

/* ---- Motion ---- */
.tn-needle { transition: transform 0.06s linear; }
.tn-still .tn-needle { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .tn-needle { transition: none; }
}

@media (max-width: 860px) {
  .tn-wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "consent" "panel" "strings" "mode" "rule" "alt" "privacy";
  }
  .tn-chip { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .tuner-section { padding: 44px 16px 56px; }
  .tn-panel { padding: 18px 14px 14px; }
  .tn-consent { padding: 15px 15px; }
}

/* ==========================================
   THE BACKDROP LARGE VIEW (static/js/backdrops.js)
   ==========================================
   The 29-thumb grid in the Backdrops pillar is the shelf (plan 9.1 D9); this
   is what a click on one opens. The thumbnails that ship in the build are
   475x225, so the large view is an UPSCALE and the caption says "preview" --
   the honest word for a picture that is bigger than its source.
   ========================================== */

.backdrop-cell[role="button"] { cursor: pointer; }
.backdrop-cell[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.bd-lg {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(5,8,12,0.92);
}
.bd-lg[hidden] { display: none; }
.bd-lg-inner {
  width: 100%;
  max-width: 950px;
  background: var(--bg-1);
  border: 1px solid var(--border-b);
  border-radius: var(--rad);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.bd-lg-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 475 / 225;
  overflow: hidden;
  background: #05080c;
}
.bd-lg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
  animation: bd-ken 26s ease-in-out infinite alternate;
}
@keyframes bd-ken {
  from { transform: scale(1.06) translate3d(-1.5%, 1%, 0); }
  to   { transform: scale(1.14) translate3d(1.5%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bd-lg-img { animation: none; transform: none; }
}
.bd-lg-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.bd-lg-name {
  font-family: var(--font-d);
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
  margin-right: auto;
}
.bd-lg-pill {
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.bd-lg-note {
  width: 100%;
  font-size: 12px;
  color: var(--text-d);
  order: 3;
}
.bd-lg-btn {
  font-family: var(--font-b);
  font-size: 14px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-b);
  background: var(--bg-2);
  color: var(--text);
  cursor: pointer;
}
.bd-lg-btn:hover { border-color: var(--accent); }
.bd-lg-count { font-size: 12px; color: var(--text-d); font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  .bd-lg { padding: 12px; }
  .bd-lg-bar { padding: 12px 13px; }
  .bd-lg-name { font-size: 18px; width: 100%; }
}