/* ==========================================================================
   ALGORHYTHMIC — app components (matches the public landing page)
   Requires tokens.css first. Dark only. Class names are suggestions; the
   VALUES are the brand. Map them into Tailwind / shadcn / MUI / styled-components.
   ========================================================================== */

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night-base); color-scheme: dark; }
body.ar {
  margin: 0; min-height: 100vh;
  font: 400 var(--text-body)/var(--leading-body) var(--font-body);
  color: var(--text-headline);
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(226,42,62,0.09), transparent 60%),
    radial-gradient(55% 55% at 100% 100%, rgba(158,14,31,0.12), transparent 60%),
    linear-gradient(180deg, var(--night-sky) 0%, var(--night-base) 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
/* Film grain texture: add <div class="ar-grain"></div> once per page */
.ar-grain { position: fixed; inset: -50%; z-index: 999; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: arGrain 1.2s steps(6) infinite; }
@keyframes arGrain { 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }
::selection { background: rgba(226,42,62,0.35); color: #fff; }

/* ---- Type ---- */
.ar-h1 { font: 300 var(--text-h1)/var(--leading-display) var(--font-display); letter-spacing: var(--tracking-display); margin: 0; text-wrap: balance; }
.ar-h2 { font: 300 var(--text-h2)/1.1 var(--font-display); letter-spacing: var(--tracking-display); margin: 0; }
.ar-h3 { font: 400 var(--text-h3)/1.25 var(--font-display); margin: 0; }
.ar-body { color: var(--text-secondary); max-width: 60ch; }
.ar-muted { color: var(--text-muted); }
.ar-mono { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: .04em; color: var(--text-cool); }
.ar-grad-text { background: linear-gradient(95deg, #FFE0E3 0%, #FF7784 40%, #FFC4CA 80%, #F0313F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ar-wordmark { font: 300 1rem/1 var(--font-display); letter-spacing: var(--tracking-hero); text-transform: uppercase; }

/* ---- Loop-step label (Watch / Ask / Do / Build) ---- */
.ar-step { display: inline-flex; align-items: center; gap: 10px; font: 450 var(--text-label)/1 var(--font-body); letter-spacing: var(--tracking-label); color: var(--text-cool); }
.ar-step b { display: inline-grid; place-items: center; min-width: 34px; height: 20px; padding: 0 8px; border-radius: var(--radius-bit);
  font: 500 11px/1 var(--font-mono); color: #FFF3EF; background: var(--grad-signature); }

/* ---- Surfaces ---- */
.ar-panel {           /* cards, modals, sidebars */
  background: linear-gradient(165deg, rgba(42,10,14,0.62), rgba(10,2,3,0.72));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-pane);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.22), 0 30px 80px -40px rgba(0,0,0,0.9);
}
.ar-glass {           /* floating / over imagery: nav bars, overlays, player controls */
  background: linear-gradient(165deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-radius: var(--radius-pane);
}
.ar-divider { height: 1px; border: 0; background: linear-gradient(90deg, transparent, rgba(185,194,255,0.25), transparent); }

/* ---- Buttons ---- */
.ar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: 999px;
  font: 500 var(--text-label)/1 var(--font-body); letter-spacing: .01em; text-decoration: none; cursor: pointer; border: 0;
  transition: transform var(--dur-micro) var(--ease-settle), box-shadow var(--dur-ui) var(--ease-enter), background var(--dur-ui); }
.ar-btn:focus-visible { outline: 2px solid var(--signal-200); outline-offset: 4px; }
.ar-btn-primary { color: #FFF3EF; background: var(--grad-signature); box-shadow: 0 10px 30px -8px rgba(226,42,62,0.5); }
.ar-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 38px -8px rgba(226,42,62,0.62); }
.ar-btn-secondary { color: var(--text-headline); background: linear-gradient(165deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.26); box-shadow: inset 0 1px 1px rgba(255,255,255,0.3); }
.ar-btn-secondary:hover { background: linear-gradient(165deg, rgba(226,42,62,0.3), rgba(158,14,31,0.22)); border-color: rgba(255,255,255,0.5); }
.ar-btn-ghost { color: var(--text-cool); background: transparent; padding: 10px 14px; }
.ar-btn-ghost:hover { color: var(--text-headline); }
.ar-btn[disabled] { opacity: .45; pointer-events: none; }

/* ---- Inputs ---- */
.ar-field { display: grid; gap: 8px; min-width: 0; }
.ar-label { font: 500 var(--text-caption)/1 var(--font-mono); letter-spacing: .06em; color: var(--text-cool); text-transform: uppercase; }
.ar-input { width: 100%; min-width: 0; font: 400 var(--text-body)/1.2 var(--font-body); color: var(--text-headline); padding: 14px 16px; border-radius: var(--radius-card);
  background: rgba(20,5,6,0.7); border: 1px solid var(--panel-rim); outline: none;
  transition: border-color var(--dur-micro), box-shadow var(--dur-ui) var(--ease-enter); }
.ar-input::placeholder { color: var(--text-muted); }
.ar-input:focus { border-color: var(--signal-400); box-shadow: 0 0 0 4px rgba(158,14,31,0.18), 0 0 24px rgba(226,42,62,0.12); }
.ar-input.is-error { border-color: var(--acc-red); box-shadow: 0 0 0 4px rgba(255,59,79,0.14); }
.ar-error { font-size: var(--text-caption); color: #FF8A96; }

/* ---- Bits (progress, levels, streaks) ---- */
.ar-bits { display: flex; gap: 4px; }
.ar-bits i { width: 14px; height: 5px; border-radius: 99px; background: var(--bit-off-bg); box-shadow: inset 0 0 0 1px var(--bit-off-rim); }
.ar-bits i.on { background: var(--grad-signature); box-shadow: 0 0 8px rgba(255,150,130,0.45); }
.ar-progress { height: 5px; border-radius: 99px; background: var(--bit-off-bg); overflow: hidden; }
.ar-progress > i { display: block; height: 100%; background: var(--grad-signature); border-radius: inherit; }

/* ---- Chips / tags ---- */
.ar-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font: 500 var(--text-caption)/1 var(--font-mono);
  color: var(--text-cool); background: var(--bit-off-bg); box-shadow: inset 0 0 0 1px var(--bit-off-rim); }
.ar-chip.is-active { color: #FFF3EF; background: var(--grad-signature); box-shadow: none; }
.ar-chip.ok { color: var(--acc-mint); box-shadow: inset 0 0 0 1px rgba(143,245,189,0.4); }

/* ---- Episode / course card ---- */
.ar-card { position: relative; overflow: hidden; border-radius: var(--radius-pane); background: var(--night-panel); border: 1px solid rgba(255,255,255,0.1);
  transition: transform var(--dur-ui) var(--ease-enter), box-shadow var(--dur-ui) var(--ease-enter), border-color var(--dur-ui); }
.ar-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.24); box-shadow: 0 24px 60px -24px rgba(158,14,31,0.45), 0 10px 30px -20px rgba(226,42,62,0.4); }
.ar-card img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.ar-card .ar-card-body { padding: 14px 16px 16px; display: grid; gap: 6px; }

/* ---- Algo (tutor) ---- */
.ar-algo-msg { max-width: 34rem; padding: 12px 16px; border-radius: 16px 16px 16px 4px; color: var(--text-headline);
  background: linear-gradient(165deg, rgba(42,10,14,0.8), rgba(10,2,3,0.85)); border: 1px solid rgba(255,255,255,0.18); }
.ar-user-msg { max-width: 34rem; margin-left: auto; padding: 12px 16px; border-radius: 16px 16px 4px 16px; color: #FFF3EF; background: var(--ember-100); }
.ar-algo-live { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--text-caption)/1 var(--font-mono); color: var(--text-cool); }
.ar-algo-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px var(--ember); animation: arPulse 1.6s var(--ease-settle) infinite; }
@keyframes arPulse { 50% { opacity: .35; } }

/* ---- Motion helpers ---- */
.ar-enter { animation: arEnter var(--dur-reveal) var(--ease-enter) both; }
@keyframes arEnter { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .ar-enter, .ar-grain, .ar-algo-live::before { animation: none; } }