/* Dictalock theme: navy and brass, plus the recording screen in the phone mockup. */

:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #efebe2;
  --ink: #14171f;
  --muted: #585f6d;
  --line: #e2ddd2;
  --line-strong: #cfc8b9;
  --header-bg: rgba(246, 244, 239, .86);
  --primary: #14233f;
  --primary-2: #1e3358;
  --primary-dark: #0c1730;
  --primary-rgb: 20, 35, 63;
  --accent: #b08d57;
  --accent-ink: #7a5c2e;
  --accent-light: #d8bb8a;
  --accent-rgb: 176, 141, 87;
}

/* Recording card in the phone mockup */
.rec-card { background: var(--primary); color: #fff; border-radius: 18px; padding: 14px 14px 12px; }
.rec-top { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: rgba(255, 255, 255, .75); }
.rec-dot { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #fff; }
.rec-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); animation: pulse 1.4s ease-in-out infinite; }
.enc-live { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--accent-light); }
.enc-live .i { width: 11px; height: 11px; stroke-width: 2.6; }
.timer { font-family: var(--serif); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; }
.wave { display: flex; align-items: center; gap: 3px; height: 34px; margin-top: 6px; }
.wave span { flex: 1; height: 30%; border-radius: 2px; background: rgba(255, 255, 255, .85); animation: wave 1.2s ease-in-out infinite; }
.wave span:nth-child(2n) { animation-duration: .95s; }
.wave span:nth-child(3n) { animation-duration: 1.45s; animation-delay: -.3s; }
.wave span:nth-child(5n) { animation-duration: 1.1s; animation-delay: -.6s; }
.wave span:nth-child(7n) { animation-delay: -.9s; }

@keyframes wave { 0%, 100% { height: 22%; } 50% { height: 95%; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
  .wave span, .rec-dot::before { animation: none; }
}