/* ==========================================================================
   convert#get — converted-file download page. Page-scoped, loaded via
   content_for :header. Tokens from site-new.css; app chrome from app-new.css.
   No inline styles (CSP-safe).
   ========================================================================== */

.app-main { background: var(--surface-alt); }
.app-main > .container { max-width: 640px; }

.conv { max-width: 560px; margin: 0 auto; }
.conv--center { text-align: center; }

/* ---- Status badge / spinner -------------------------------------------- */
.conv-badge { width: 72px; height: 72px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; }
.conv-badge svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.conv-badge--warn { background: radial-gradient(circle at 32% 26%, #fbbf24, #d97706); box-shadow: 0 16px 30px -12px rgba(217, 119, 6, .5); }

/* Neutral audio glyph for the file view (no "success" framing). */
.conv-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 18px;
  border-radius: 14px; background: rgba(19, 131, 224, .1); color: var(--accent);
}
.conv-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.conv-spinner {
  width: 56px; height: 56px; margin: 0 auto 22px;
  border: 5px solid rgba(19, 131, 224, .18); border-top-color: var(--accent);
  border-radius: 50%; animation: btn-spin .8s linear infinite;
}

/* ---- Header ------------------------------------------------------------- */
.conv-head { text-align: center; margin-bottom: 26px; }
.conv-eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 .5rem; }
.conv-head h1 { font-size: clamp(1.45rem, 3.4vw, 2rem); letter-spacing: -.01em; margin: 0 0 .3em; word-break: break-word; }
.conv-meta { color: var(--muted); font-variant-numeric: tabular-nums; margin: 0; }
.conv--center h1 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: 0 0 .35em; }
.conv-lead { color: var(--body); font-size: 1.08rem; max-width: 32em; margin: 0 auto; }

/* ---- Player + actions card --------------------------------------------- */
.conv-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(20px, 3vw, 28px); }
.conv-audio { width: 100%; display: block; margin: 0 0 20px; border-radius: 10px; }
.conv-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.conv-buttons .btn { flex: 1 1 auto; justify-content: center; }

/* ---- Expiry note -------------------------------------------------------- */
.conv-expiry { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 18px 0 0; color: var(--muted); font-size: .9rem; }
.conv-expiry svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Centered-state actions -------------------------------------------- */
.conv-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }