@import url("ss/colors_and_type.css");

/* ─── Page-level theme variables (driven by Tweaks) ─────────────────── */
:root {
  --stamp: var(--ss-signal);
  --stamp-rgb: 11, 166, 238;
  --paper-tint: #E8DCB8;
  --paper-deep: #B89A6E;
  --paper-shadow: rgba(60, 35, 10, 0.18);
}

html, body { margin: 0; padding: 0; }
body {
  background: var(--ss-stage);
  color: var(--fg-1);
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font-sans);
}

/* ─── Backgrounds ───────────────────────────────────────────────────── */
.bg-paper {
  background:
    radial-gradient(ellipse at top, #f3e6c4 0%, #d9c293 55%, #b59669 100%);
}
.bg-paper::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(80,50,15,0.14), transparent 35%),
    radial-gradient(circle at 78% 70%, rgba(80,50,15,0.18), transparent 40%),
    radial-gradient(circle at 50% 110%, rgba(40,20,5,0.25), transparent 45%);
  mix-blend-mode: multiply;
}
.bg-paper::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(40,20,5,0.03) 0 1px, transparent 1px 4px);
  opacity: 0.6;
}

.bg-dossier {
  background:
    radial-gradient(ellipse at top, rgba(11,166,238,0.10), transparent 55%),
    linear-gradient(180deg, #131316 0%, #0A0A0B 100%);
  color: var(--fg-on-dark);
}
.bg-dossier::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 4px);
}

.bg-cassette {
  background:
    radial-gradient(ellipse at 30% 0%, #2a1a08 0%, #1a0f04 50%, #0a0604 100%);
  color: var(--fg-on-dark);
}
.bg-cassette::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 20% 20%, rgba(255,192,0,0.06), transparent 40%);
}

.bg-dossier *, .bg-cassette * { color: inherit; }

/* ─── App shell ─────────────────────────────────────────────────────── */
.app {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 18px 120px;
  z-index: 1;
}

/* ─── Responsive: tablet ─────────────────────────────────────────── */
@media (min-width: 720px) {
  .app {
    max-width: 720px;
    padding: 36px 32px 140px;
  }
  .tape-title { font-size: 56px; }
  .tape-sub { font-size: 15px; }
  .np-track-title { font-size: 28px; }
  .case-bar { font-size: 11px; }
  .section { padding: 28px 28px; }
  .signup-row { gap: 10px; }
  .mini { max-width: 560px; }
  .stamp { top: 22px; right: 22px; font-size: 12px; padding: 8px 14px; }
  .cover-cta { bottom: 22px; padding: 14px 22px; font-size: 14px; }
  .t-title { font-size: 17px; }
  .t-dur { font-size: 13px; }
}

/* ─── Responsive: desktop — full editorial layout ────────────────── */
@media (min-width: 1024px) {
  body { overflow-x: hidden; }

  .app {
    max-width: none;
    width: 100%;
    padding: 0;
  }

  /* Case bar becomes a full-width sticky strip */
  .app > .case-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0;
    padding: 14px clamp(32px, 4vw, 64px);
    border-bottom: 1px solid rgba(127,127,127,0.2);
    background: rgba(10,10,11,0.7);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
  }
  .bg-paper > .app > .case-bar {
    background: rgba(243,230,196,0.85);
    border-bottom-color: rgba(90,58,24,0.25);
  }

  /* Hero zone: cover/title left column, player+tracklist right column */
  .top-zone {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(0, 1fr);
    gap: clamp(48px, 4vw, 80px);
    align-items: start;
    padding: clamp(40px, 4vw, 72px) clamp(32px, 4vw, 64px) clamp(32px, 3vw, 48px);
    max-width: 1500px;
    margin: 0 auto;
  }
  .top-zone > .cover-col {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .top-zone > .cover-col .cover-wrap { aspect-ratio: 1 / 1; max-width: 560px; }
  .top-zone > .player-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .title-block { margin: 0; }
  .tape-title {
    font-size: clamp(56px, 5.5vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.04em;
  }
  .tape-sub { font-size: 16px; margin-top: 12px; }
  .title-block .eyebrow { font-size: 12px; }

  .np-card {
    margin-top: 0;
    padding: 28px 28px 24px;
  }
  .np-track-title { font-size: 28px; line-height: 1.05; }
  .wave { height: 56px; gap: 2px; }
  .timecode { font-size: 12px; }
  .transport { gap: 20px; margin-top: 18px; }
  .t-btn { width: 52px; height: 52px; }
  .t-btn.play { width: 68px; height: 68px; }

  .tracklist { margin-top: 0; }
  .tracklist-head {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(127,127,127,0.2);
  }
  .track {
    grid-template-columns: 36px 1fr auto;
    gap: 16px;
    padding: 14px 6px;
  }
  .t-title { font-size: 16px; }

  /* CTAs: 2 equal columns side-by-side at bottom */
  .sections-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1500px;
    margin: 24px auto 0;
    padding: 24px clamp(32px, 4vw, 64px) 0;
  }
  .sections-row .section { margin-top: 0; padding: 32px 32px; }
  .sections-row .section h3 { font-size: 22px; }
  .sections-row .section p { font-size: 15px; }

  .app > .footer {
    margin-top: 56px;
    padding: 28px clamp(32px, 4vw, 64px) 40px;
    border-top: 1px solid rgba(127,127,127,0.2);
  }

  .mini { max-width: 720px; }

  .cassette-shell, .folder { padding: 28px; }
}

/* ─── Responsive: large desktop ──────────────────────────────────── */
@media (min-width: 1440px) {
  .tape-title { font-size: clamp(80px, 7.5vw, 128px); }
  .top-zone {
    grid-template-columns: minmax(480px, 1fr) minmax(0, 1.3fr);
  }
}

/* ─── Top header (case file metadata) ──────────────────────────────── */
.case-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 4px 0 18px;
  border-bottom: 1px dashed currentColor;
  margin-bottom: 22px;
  opacity: 0.85;
}
.case-bar .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ss-amp); display: inline-block; margin-right: 6px; box-shadow: 0 0 8px var(--ss-amp); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

/* ─── Cover & stamp ─────────────────────────────────────────────────── */
.cover-wrap {
  position: relative;
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25);
  aspect-ratio: 1/1;
}
.cover-wrap img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bg-paper .cover-wrap {
  box-shadow: 0 18px 50px rgba(40,20,5,0.4), 0 4px 14px rgba(40,20,5,0.25);
}

.stamp {
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 2px solid var(--stamp);
  color: var(--stamp);
  background: rgba(0,0,0,0.4);
  border-radius: 2px;
  transform: rotate(-6deg);
  text-shadow: 0 0 8px rgba(var(--stamp-rgb), 0.4);
}

/* ─── Title block ───────────────────────────────────────────────────── */
.title-block {
  margin: 22px 0 18px;
  text-align: left;
}
.title-block .eyebrow {
  color: var(--stamp);
  margin-bottom: 10px;
}
.bg-paper .title-block .eyebrow { color: #6a3010; }

.tape-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 6px;
}
.tape-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.bg-dossier .tape-sub, .bg-cassette .tape-sub { color: var(--fg-on-dark-2); }
.bg-paper .tape-sub { color: #5a3a18; }
.bg-paper .tape-title { color: #2a1808; }

.tape-intro {
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 540px;
  letter-spacing: -0.005em;
}
.bg-dossier .tape-intro, .bg-cassette .tape-intro { color: var(--fg-on-dark-2); }
.bg-paper .tape-intro { color: #4a2810; }
.tape-intro strong { color: var(--stamp); font-weight: 700; }
@media (min-width: 720px) {
  .tape-intro { font-size: 15px; margin-top: 22px; }
}
@media (min-width: 1024px) {
  .tape-intro { font-size: 15.5px; }
}

/* ─── Now playing card ──────────────────────────────────────────────── */
.np-card {
  margin-top: 22px;
  border-radius: var(--r-4);
  padding: 22px 20px 18px;
  background: var(--ss-stage);
  color: var(--fg-on-dark);
  box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}
.bg-paper .np-card {
  background: #1a1a1c;
  box-shadow: 0 12px 40px rgba(40,20,5,0.45);
}

.np-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-on-dark-3);
  margin-bottom: 8px;
}
.np-track-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.np-code {
  color: var(--stamp);
  font-family: var(--font-mono);
  font-weight: 700;
  margin-right: 10px;
}

/* Waveform / progress */
.scrub {
  margin-top: 14px;
}
.wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  cursor: pointer;
  touch-action: none;
}
.wave .bar {
  flex: 1;
  background: rgba(255,255,255,0.18);
  border-radius: 1px;
  transition: background 120ms;
}
.wave .bar.played { background: var(--stamp); }
.wave .bar.head { background: var(--stamp); box-shadow: 0 0 8px var(--stamp); }

.timecode {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-on-dark-3);
  letter-spacing: 0.08em;
  margin-top: 6px;
}

/* Transport controls */
.transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
}
.t-btn {
  appearance: none; border: 0; background: transparent;
  color: var(--fg-on-dark);
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: 999px;
  transition: background 200ms, transform 120ms;
}
.t-btn:hover { background: rgba(255,255,255,0.08); }
.t-btn:active { transform: scale(0.94); }
.t-btn.play {
  width: 64px; height: 64px;
  background: var(--stamp);
  color: var(--ss-stage);
  box-shadow: 0 10px 28px rgba(var(--stamp-rgb), 0.35);
}
.t-btn.play:hover { background: var(--stamp); transform: translateY(-1px); }

/* ─── Track list ────────────────────────────────────────────────────── */
.tracklist {
  margin-top: 28px;
  padding: 6px 0 0;
}
.tracklist-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.tracklist-head .eyebrow { color: var(--fg-2); }
.bg-dossier .tracklist-head .eyebrow,
.bg-cassette .tracklist-head .eyebrow { color: var(--fg-on-dark-2); }
.bg-paper .tracklist-head .eyebrow { color: #5a3a18; }

.track {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 6px;
  border-bottom: 1px dashed rgba(127,127,127,0.25);
  cursor: pointer;
  transition: background 200ms;
  user-select: none;
}
.track:hover { background: rgba(127,127,127,0.06); }
.track.active { background: rgba(var(--stamp-rgb), 0.08); }
.track.active .t-num { color: var(--stamp); }

.t-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
}
.bg-dossier .t-num, .bg-cassette .t-num { color: var(--fg-on-dark-3); }
.bg-paper .t-num { color: #6a3010; }

.t-title { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.bg-paper .t-title { color: #2a1808; }

.t-dur {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
}
.bg-dossier .t-dur, .bg-cassette .t-dur { color: var(--fg-on-dark-3); }

.briefing, .lyrics {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg-2);
  padding: 6px 6px 8px 40px;
  letter-spacing: 0.01em;
}
.bg-dossier .briefing, .bg-dossier .lyrics,
.bg-cassette .briefing, .bg-cassette .lyrics { color: var(--fg-on-dark-2); }
.bg-paper .briefing, .bg-paper .lyrics { color: #4a2810; font-style: italic; }

.lyrics {
  white-space: pre-wrap;
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: italic;
}

/* ─── Cassette layout ───────────────────────────────────────────────── */
.cassette-shell {
  margin-top: 22px;
  background: linear-gradient(180deg, #2a1810 0%, #140906 100%);
  border-radius: 14px;
  padding: 22px 20px;
  border: 1px solid rgba(255,192,0,0.18);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
.cassette-label {
  background: #f3e6c4;
  color: #2a1808;
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  border: 1px solid #b89a6e;
}
.cassette-label .ttl { font-family: var(--font-sans); text-transform: none; font-size: 16px; letter-spacing: -0.02em; font-weight: 700; margin-top: 4px; }
.cassette-reels {
  display: flex; align-items: center; justify-content: space-around;
  height: 110px;
  background: #0a0604;
  border-radius: 8px;
  border: 1px solid rgba(255,192,0,0.12);
  position: relative;
  overflow: hidden;
}
.reel {
  width: 76px; height: 76px;
  border-radius: 999px;
  background: radial-gradient(circle, #1a0f08 30%, #2a1810 31%, #2a1810 70%, #140906 71%);
  border: 2px solid rgba(255,192,0,0.25);
  position: relative;
  transition: transform 200ms;
}
.reel::before {
  content: "";
  position: absolute; inset: 30%;
  border-radius: 999px;
  background: #0a0604;
  border: 1px solid rgba(255,192,0,0.3);
}
.reel.spin { animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.reel-tape {
  position: absolute;
  top: 50%; left: 76px; right: 76px;
  height: 4px;
  background: linear-gradient(90deg, var(--ss-amp) 0%, #8a5e00 50%, var(--ss-amp) 100%);
  transform: translateY(-50%);
  opacity: 0.6;
}

/* ─── File folder layout ────────────────────────────────────────────── */
.folder {
  margin-top: 22px;
  position: relative;
  background: #f3e6c4;
  color: #2a1808;
  border-radius: 2px 14px 4px 4px;
  padding: 24px 20px 20px;
  box-shadow:
    0 18px 40px rgba(40,20,5,0.4),
    0 4px 0 #d9c293,
    0 8px 0 #c9b076,
    inset 0 1px 0 rgba(255,255,255,0.4);
}
.folder::before {
  content: "COURSE TAPE";
  position: absolute;
  top: -22px; right: 28px;
  background: #d9c293;
  color: #5a3a18;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 700;
  padding: 6px 14px 8px;
  border-radius: 6px 6px 0 0;
  border: 1px solid #b89a6e;
  border-bottom: 0;
}
.folder .folder-stamp {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.18em;
  color: #a02828;
  border: 3px solid #a02828;
  display: inline-block;
  padding: 6px 14px;
  transform: rotate(-4deg);
  margin-bottom: 14px;
  text-shadow: 1px 1px 0 rgba(160,40,40,0.2);
  opacity: 0.85;
}
.folder .track { border-color: rgba(90,58,24,0.3); }
.folder .track:hover { background: rgba(184,154,110,0.2); }
.folder .track.active { background: rgba(160,40,40,0.08); }
.folder .t-title { color: #2a1808; }

/* ─── Minimal layout ────────────────────────────────────────────────── */
.minimal .np-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 18px 0;
  color: inherit;
}
.minimal .np-card .np-track-title { color: inherit; }
.minimal .np-meta { color: var(--fg-3); }
.bg-dossier.minimal .np-meta, .bg-cassette.minimal .np-meta { color: var(--fg-on-dark-3); }

/* ─── Section: signup, links ────────────────────────────────────────── */
.section {
  margin-top: 36px;
  padding: 22px 20px;
  border-radius: var(--r-4);
  border: 1px dashed rgba(127,127,127,0.35);
}
.bg-dossier .section, .bg-cassette .section {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.03);
}
.bg-paper .section {
  border-color: rgba(90,58,24,0.4);
  background: rgba(255,255,255,0.2);
}

.section h3 {
  font-size: 18px;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.section p {
  font-size: 14px;
  color: var(--fg-2);
  margin: 0 0 14px;
}
.section ul.feature-list {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-2);
}
.bg-dossier .section ul.feature-list,
.bg-cassette .section ul.feature-list { color: var(--fg-on-dark-2); }
.bg-paper .section ul.feature-list { color: #4a2810; }
.section ul.feature-list li { margin-bottom: 4px; }
.section ul.feature-list li::marker { color: var(--stamp); }
.bg-dossier .section p, .bg-cassette .section p { color: var(--fg-on-dark-2); }
.bg-paper .section p { color: #4a2810; }
.bg-paper .section h3 { color: #2a1808; }

.signup-row {
  display: flex; gap: 8px;
}
.signup-row input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid rgba(127,127,127,0.4);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
}
.signup-row input:focus { border-color: var(--stamp); box-shadow: 0 0 0 3px rgba(var(--stamp-rgb), 0.3); }
.signup-row input::placeholder { color: var(--fg-3); }

.btn {
  appearance: none; border: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--stamp);
  color: #fff;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 200ms, box-shadow 200ms;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(var(--stamp-rgb), 0.35); }
.bg-paper .btn { color: #fff; }

.links {
  display: flex; flex-direction: column; gap: 10px;
}
.link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(127,127,127,0.3);
  border-radius: var(--r-2);
  text-decoration: none;
  color: inherit;
  font-size: 14px;
  transition: background 200ms, border-color 200ms;
}
.link:hover { border-color: var(--stamp); background: rgba(var(--stamp-rgb), 0.06); }
.link .handle { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
.bg-dossier .link .handle, .bg-cassette .link .handle { color: var(--fg-on-dark-3); }

/* ─── Footer ─────────────────────────────────────────────────────────── */
.footer {
  margin-top: 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  opacity: 0.7;
}

/* ─── Sticky mini player (mobile) ───────────────────────────────────── */
.mini {
  position: fixed;
  left: 50%;
  bottom: 12px;
  width: calc(100% - 24px);
  max-width: 480px;
  background: rgba(20,20,22,0.88);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #fff;
  z-index: 50;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
  transition: opacity 320ms cubic-bezier(0.16,1,0.3,1), transform 320ms cubic-bezier(0.16,1,0.3,1);
}
.mini.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.mini .mini-row { display: flex; align-items: center; gap: 10px; }
.mini .mtitle {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini .mcode {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--stamp);
}
.mini .mbtn {
  appearance: none; border: 0;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--stamp);
  color: #0A0A0B;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.mini .mbtn-sm {
  appearance: none; border: 0;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms;
}
.mini .mbtn-sm:hover { background: rgba(255,255,255,0.16); }
.mini .mini-progress {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  cursor: pointer;
  touch-action: none;
}
.mini .mini-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--stamp);
  border-radius: 2px;
  pointer-events: none;
}

/* hide a sibling block */
.hidden { display: none !important; }

/* ─── Cover download CTA ─────────────────────────────────────────── */
.cover-cta {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  max-width: calc(100% - 24px);
  background: var(--stamp);
  color: #0A0A0B;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.2);
  transition: transform 200ms, box-shadow 200ms;
  text-align: left;
}
.cover-cta:hover { transform: translateX(-50%) translateY(-2px); }
.cover-cta svg, .cover-cta .lock { flex-shrink: 0; }
.cover-cta-label { flex: 1; min-width: 0; }
.cover-cta .lock {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: 0.7;
}

/* On narrow viewports, keep the pill shape but compact it. The label
   wraps inside the pill while the icon and LOCKED badge stay anchored
   on either side, so the button stops dominating the cover art. */
@media (max-width: 559px) {
  .cover-cta {
    gap: 8px;
    padding: 9px 14px;
    font-size: 11.5px;
    line-height: 1.2;
    max-width: calc(100% - 28px);
  }
  .cover-cta .lock {
    font-size: 8px;
    padding: 1px 5px;
    letter-spacing: 0.14em;
  }
  .cover-cta-label {
    text-align: left;
  }
}

/* Phone-narrow: hide the "For Your Business" tail so the pill fits one short
   line. The full label still appears in the modal description on click. */
.cover-cta-label .cta-tail { white-space: nowrap; }
@media (max-width: 419px) {
  .cover-cta-label .cta-tail { display: none; }
}

/* ─── Modal (signup gate) ─────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn 200ms cubic-bezier(0.16,1,0.3,1);
}
@media (min-width: 520px) { .modal-backdrop { align-items: center; } }
@keyframes fadeIn { from { opacity: 0; } }

.modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #f3e6c4;
  color: #2a1808;
  border-radius: 14px 14px 0 0;
  padding: 28px 22px 24px;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
  animation: slideUp 320ms cubic-bezier(0.16,1,0.3,1);
  max-height: 92vh;
  overflow-y: auto;
}
@media (min-width: 520px) {
  .modal { border-radius: 14px; }
}
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } }

.modal::before {
  content: "AGENT FILE ACCESS REQUEST";
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: #6a3010;
  margin-bottom: 8px;
}
.modal h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: #2a1808;
}
.modal p.muted {
  font-size: 13px;
  line-height: 1.55;
  color: #4a2810;
  margin: 0 0 18px;
}

.modal-x {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,0.06);
  cursor: pointer;
  font-size: 16px;
  color: #2a1808;
  display: inline-flex; align-items: center; justify-content: center;
}
.modal-x:hover { background: rgba(0,0,0,0.12); }

.modal-stamp {
  position: absolute;
  top: 16px; right: 56px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #a02828;
  border: 2px solid #a02828;
  padding: 3px 8px;
  border-radius: 2px;
  transform: rotate(-6deg);
  opacity: 0.75;
}

.field {
  margin-bottom: 12px;
}
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #6a3010;
  margin-bottom: 5px;
}
.field input,
.field select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(90,58,24,0.35);
  border-radius: 8px;
  background: rgba(255,255,255,0.6);
  color: #2a1808;
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.field input:focus,
.field select:focus {
  border-color: var(--stamp);
  box-shadow: 0 0 0 3px rgba(var(--stamp-rgb), 0.25);
  background: #fff;
}

.role-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.role-toggle button {
  appearance: none;
  border: 1.5px solid rgba(90,58,24,0.35);
  background: rgba(255,255,255,0.4);
  color: #4a2810;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  padding: 12px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 200ms;
  text-align: left;
}
.role-toggle button .ico {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: #6a3010;
  margin-bottom: 3px;
  text-transform: uppercase;
}
.role-toggle button.active {
  border-color: var(--stamp);
  background: rgba(var(--stamp-rgb), 0.12);
  color: #2a1808;
}
.role-toggle button.active .ico { color: var(--stamp); }

.modal .btn {
  width: 100%;
  justify-content: center;
  padding: 14px 22px;
  font-size: 14px;
  margin-top: 8px;
  background: #2a1808;
  color: #f3e6c4;
}
.modal .btn:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.4); }
.modal .btn:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.modal .form-error {
  border: 1px solid rgba(140, 24, 18, 0.28);
  background: rgba(140, 24, 18, 0.08);
  color: #8c1812;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  padding: 10px 12px;
  margin-top: 10px;
  text-transform: uppercase;
}

.modal .legal {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #6a3010;
  text-align: center;
  margin-top: 12px;
  opacity: 0.8;
}

/* Success state */
.modal.success { text-align: center; padding-top: 36px; }
.modal.success .ok-stamp {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.18em;
  color: #2a7a2a;
  border: 4px solid #2a7a2a;
  padding: 8px 18px;
  transform: rotate(-4deg);
  margin-bottom: 18px;
}

/* ─── Coach chat trigger + panel ────────────────────────────────────── */
.coach-trigger {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: var(--stamp);
  color: #0A0A0B;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.12);
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1), box-shadow 200ms;
}
.coach-trigger:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(var(--stamp-rgb), 0.45); }
.coach-trigger.hidden { display: none; }
.coach-trigger-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #0A0A0B;
  box-shadow: 0 0 8px rgba(0,0,0,0.4);
  animation: blink 1.6s infinite;
}
.coach-trigger-label { white-space: nowrap; }
@media (max-width: 519px) {
  .coach-trigger { right: 12px; bottom: 100px; }  /* sit above the mini-player */
}

.coach-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 70;
  animation: fadeIn 240ms cubic-bezier(0.16,1,0.3,1);
}

.coach-panel {
  position: fixed;
  z-index: 80;
  right: 0; top: 0; bottom: 0;
  width: min(440px, 100vw);
  background: linear-gradient(180deg, #131316 0%, #0A0A0B 100%);
  color: var(--fg-on-dark);
  display: flex;
  flex-direction: column;
  box-shadow: -24px 0 60px rgba(0,0,0,0.6);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.16,1,0.3,1);
  border-left: 1px solid rgba(255,255,255,0.08);
}
.coach-panel.open { transform: translateX(0); }
@media (max-width: 519px) {
  .coach-panel { width: 100vw; }
}

.coach-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px dashed rgba(255,255,255,0.18);
}
.coach-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--stamp);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.coach-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.coach-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-on-dark-3);
  margin-top: 2px;
  text-transform: uppercase;
}
.coach-close {
  appearance: none; border: 0;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--fg-on-dark);
  font-size: 18px;
  cursor: pointer;
}
.coach-close:hover { background: rgba(255,255,255,0.16); }

.coach-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.coach-messages::-webkit-scrollbar { width: 6px; }
.coach-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }

.coach-msg { max-width: 88%; }
.coach-msg-assistant { align-self: flex-start; }
.coach-msg-user { align-self: flex-end; }
.coach-msg-stamp {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--stamp);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.coach-msg-body {
  padding: 12px 14px;
  border-radius: 14px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.coach-msg-assistant .coach-msg-body {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-top-left-radius: 4px;
}
.coach-msg-user .coach-msg-body {
  background: var(--stamp);
  color: #0A0A0B;
  border-top-right-radius: 4px;
  font-weight: 500;
}
.coach-link, .coach-action-link {
  color: var(--stamp);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 500;
}
.coach-action-link {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  display: inline-block;
  padding: 1px 8px;
  margin: 0 2px;
  border: 1px solid var(--stamp);
  border-radius: 999px;
  text-decoration: none;
  background: rgba(var(--stamp-rgb), 0.08);
  transition: background 200ms;
}
.coach-action-link:hover { background: rgba(var(--stamp-rgb), 0.18); }
.coach-msg-user .coach-action-link { color: #0A0A0B; border-color: #0A0A0B; background: rgba(0,0,0,0.06); }
.coach-msg-user .coach-action-link:hover { background: rgba(0,0,0,0.14); }

.coach-error {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #d64545;
  letter-spacing: 0.06em;
  padding: 6px 0;
}

.coach-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px 16px;
  border-top: 1px dashed rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.3);
}
.coach-input textarea {
  flex: 1;
  resize: none;
  max-height: 140px;
  min-height: 40px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  color: var(--fg-on-dark);
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
  line-height: 1.4;
}
.coach-input textarea:focus {
  border-color: var(--stamp);
  box-shadow: 0 0 0 3px rgba(var(--stamp-rgb), 0.25);
}
.coach-input textarea::placeholder { color: var(--fg-on-dark-3); }
.coach-input textarea:disabled { opacity: 0.5; }
.coach-send {
  appearance: none; border: 0;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--stamp);
  color: #0A0A0B;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 200ms;
}
.coach-send:hover:not(:disabled) { transform: translateY(-1px); }
.coach-send:disabled { opacity: 0.35; cursor: not-allowed; }