/* Shared styles for the password-gated beta pages (LIVEcompanion, BEATref).
 *
 * Both beta pages are generated from their own template.html by update-lc.py /
 * update-beatref.py, and both link this file. Edit it here and BOTH pages
 * change on the next deploy -- no regeneration needed. Regeneration is only
 * required for changes to the templates themselves:
 *   python3 update-lc.py --page-only
 *   python3 update-beatref.py --page-only
 *
 * Product-specific markup (BEATref's add-on download block) lives in the
 * product's template; only structure shared by both belongs here.
 *
 * ── Design ────────────────────────────────────────────────────────────────
 * These pages follow the 2026 relaunch, so the tokens below are the ones in
 * assets/css/site.css and the rules in docs/relaunch-tokens.md apply:
 * radius 0, hairlines instead of cards, no font weight under 400 (Schibsted
 * Grotesk has none, and the browser clamps a lighter request silently), and
 * orange rationed to two places. Here those two are the version indicator and
 * the primary download button -- the page has exactly one thing to do.
 * The lock screen is the carbon band, the same dark register the landing page
 * uses for its product chapters; everything past it is the light canvas.
 *
 * This file does NOT share site.css: these pages are standalone and gated,
 * and pulling in the nav, the scroll story and the fox would be most of a
 * stylesheet they never use.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --canvas: #f6f8f7;
  --ink: #000000;
  --carbon: #0f0e12;
  --rule: #e5e5e5;
  --rule-dk: #26252b;
  --graphite: #b2b2b2;   /* muted ON CARBON only -- ~2:1 on the canvas */
  --muted: #6e6e73;      /* muted on the canvas */
  --accent: #ff6b1a;
  --accent-t: #c94e05;   /* accent darkened for TEXT on the canvas (4.5:1) */
  --warn: #8a5a00;       /* known-issue heading; #f0a030 fails AA on canvas */
  --warn-bg: #fdf6e8;
  --font: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}

html, body {
  min-height: 100%;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Lock screen ──
 * The relaunch register, not just its colour variables. The first pass swapped
 * the tokens and kept the old shape — a centred card on a full dark screen —
 * which still read as the page it replaced. What actually carries the design is
 * the light canvas, the absence of cards, full-width hairlines, and one very
 * large headline at weight 800 with tight tracking. So: same markup, rebuilt.
 */
#lock {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--canvas);
  color: var(--ink);
  padding: var(--pad-lock);
  --pad-lock: clamp(22px, 5vw, 66px);
}

/* Not a card. A measure. */
.lock-card {
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  border: 0;
  padding: 0;
  text-align: left;
}

.lock-logo {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--ink);
  padding-bottom: 14px;
  margin-bottom: clamp(28px, 6vw, 56px);
  border-bottom: 1px solid var(--ink);
}

/* The only chromatic element on this screen, same role the fox's eyes play on
   the landing page. Sized up because at 15px a dot of accent is invisible. */
.lock-logo span { color: var(--accent); font-size: 1.5em; line-height: 0; }

/* Both beta pages are otherwise identical here, and they keep SEPARATE session
   keys (br_beta_auth / lc_beta_auth) — so a tester who unlocked one and then
   opens the other met a screen with no product on it at all and a password box
   that had apparently forgotten them. The <title> was the only thing that said
   which page this was. */
.lock-kicker {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

/* NOT uppercase: the headline is now the product name, and BEATref and
   LIVEcompanion carry their own casing everywhere else on the site. */
.lock-title {
  font-weight: 800;
  font-size: clamp(2.4rem, 8vw, 4rem);
  letter-spacing: -.045em;
  line-height: .95;
  margin-bottom: 18px;
}

.lock-sub {
  color: var(--muted);
  font-size: 14px;
  max-width: 46ch;
  margin-bottom: clamp(28px, 5vw, 44px);
}

.lock-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  align-items: stretch;
  border-top: 1px solid var(--rule);
}

.lock-input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 16px 2px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  outline: none;
  text-align: left;
  letter-spacing: .02em;
  transition: border-color .2s;
}

.lock-input::placeholder { color: var(--muted); }
.lock-input:focus { border-bottom-color: var(--accent); }
.lock-input.error { border-bottom-color: #c0392b; animation: shake .3s ease; }

.lock-btn {
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 16px 34px;
  color: var(--canvas);
  font-family: var(--font);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.lock-btn:hover { background: transparent; color: var(--ink); }

.lock-error {
  grid-column: 1 / -1;
  font-size: 13px;
  color: #c0392b;
  min-height: 1.4em;
  padding-top: 10px;
}

@media (max-width: 520px) {
  .lock-form { grid-template-columns: 1fr; }
  .lock-btn { margin-top: 14px; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ── Main content (hidden until unlocked) ── */
#content {
  display: none;
  max-width: 800px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
}

#content.visible { display: block; }

/* Header */
.page-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}

.breadcrumb {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }

.page-title {
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.2rem);
  letter-spacing: -0.045em;
  line-height: 1;
  margin-bottom: 0.9rem;
}

/* One of the two places orange is allowed on these pages. The dot is a hard
   indicator, like an instrument light -- not decoration. */
.version-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--ink);
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.version-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent);
}

.page-date {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 0.75rem;
}

/* Download block */
.download-block {
  border: 1px solid var(--rule);
  border-left: 1px solid var(--ink);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.download-info { flex: 1; min-width: 160px; }

.download-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.download-filename {
  font-size: 0.9rem;
  color: var(--ink);
  word-break: break-all;
}

.download-meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

/* The other place orange is allowed: the page's single action. */
.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--accent);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.download-btn:hover { background: transparent; color: var(--accent-t); }

.download-btn svg { flex-shrink: 0; }

/* Install note */
.install-note {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
  padding: 1.1rem 1.3rem;
  margin-bottom: 2.5rem;
  font-size: 0.875rem;
}

.install-note-title {
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
}

.install-steps {
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--muted);
  line-height: 1.6;
}

.install-steps strong { color: var(--ink); font-weight: 500; }

.install-cmd {
  margin-top: 0.5rem;
  background: var(--carbon);
  color: var(--canvas);
  padding: 0.55rem 0.9rem;
  font-family: ui-monospace, 'SF Mono', 'Fira Mono', monospace;
  font-size: 0.82rem;
  user-select: all;
}

/* Sections */
.section { margin-bottom: 2.5rem; }

.section-title {
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 1.25rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--ink);
}

/* Feature cards */
.features-list {
  display: flex;
  flex-direction: column;
}

.feature-card {
  border-top: 1px solid var(--rule);
  padding: 1.1rem 0;
}

.features-list .feature-card:first-child { border-top: 0; }

.feature-title {
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.feature-desc {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.6;
}

.feature-tools {
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tool-tag {
  border: 1px solid var(--rule);
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  color: var(--muted);
}

/* Known issues */
.issues-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.issue-card {
  background: var(--warn-bg);
  border: 1px solid #ecdcb8;
  padding: 1rem 1.2rem;
}

.issue-title {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--warn);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.issue-title::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05em; height: 1.05em;
  border: 1px solid currentColor;
  font-size: 0.8em;
  flex-shrink: 0;
}

.issue-desc {
  font-size: 0.86rem;
  color: #5f4a1e;
  line-height: 1.6;
}

.issue-workaround {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: #5f4a1e;
}

.issue-workaround strong { color: var(--warn); font-weight: 500; }

/* Instagram CTA -- deliberately not orange. The download button above is the
   page's one action; a second filled button would compete with it. */
.insta-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--ink);
  padding: 1.5rem 0 0;
  margin-top: 3.5rem;
  flex-wrap: wrap;
}

.insta-cta-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.insta-cta-text strong {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}

.insta-cta-text span {
  font-size: 0.83rem;
  color: var(--muted);
}

.insta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--ink);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.insta-btn:hover { background: var(--ink); color: var(--canvas); }

/* Older changelog */
.show-older-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--rule);
  padding: 0.55rem 1rem;
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.83rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  margin-top: 1rem;
  /* The collapsed .older-entries below is display:none, so without this the next
     section's heading sits directly on the button. */
  margin-bottom: 2.5rem;
}

.show-older-btn:hover { border-color: var(--ink); color: var(--ink); }

.show-older-btn .chevron {
  display: inline-block;
  transition: transform 0.25s ease;
}

.show-older-btn.open .chevron { transform: rotate(180deg); }

.older-entries {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.older-entries.hidden { display: none; }

.older-version-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.older-version-tag {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.older-version-date {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Footer */
.page-footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: center;
}

.page-footer a { color: var(--muted); text-decoration: none; }
.page-footer a:hover { color: var(--ink); }

/* ── Optional add-on download ──────────────────────────────────────────────
 * A second, subordinate download that only some users need (BEATref's stem
 * model). Deliberately quieter than .download-block so nobody reads a 100 MB
 * optional package as a prerequisite for getting started.
 */

.download-group { margin-bottom: 3rem; }

.download-group .download-block { margin-bottom: 0.75rem; }

.download-block.addon {
  border-style: dashed;
  border-left-style: dashed;
  border-left-color: var(--rule);
  padding: 1.25rem 1.5rem;
}

.download-block.addon .download-filename { color: var(--muted); }

.download-btn.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  font-weight: 400;
}

.download-btn.secondary:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.addon-note {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
  padding: 0 0.25rem;
}

.addon-note strong { color: var(--ink); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .lock-input.error { animation: none; }
  .show-older-btn .chevron { transition: none; }
}