/* ─── Feature cards ──────────────────────────────────────────────────────── */
.feature-card {
  border: 1px solid rgba(255,255,255,0.05);
  background: linear-gradient(148deg,
    rgba(15, 28, 52, 0.45) 0%,
    rgba(10, 18, 38, 0.22) 100%
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.18s ease;
}

.feature-card:hover {
  border-color: rgba(34,211,238,0.18);
  background: linear-gradient(148deg,
    rgba(15, 28, 52, 0.62) 0%,
    rgba(10, 18, 38, 0.38) 100%
  );
  transform: translateY(-1px);
}

/* ─── Landing polish (generate view only — preview glow / gradient language) ─ */
#generate-workspace:not(.preview-mode) #gen-left-col > .hero-collapse:first-child h1.font-display {
  background: linear-gradient(118deg, rgb(248 250 252) 0%, rgb(165 243 253) 42%, rgb(186 230 253) 72%, rgb(147 197 253) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(34, 211, 238, 0.2));
  background-size: 200% 200%;
  animation: title-shimmer 8s ease-in-out infinite alternate;
}

#generate-workspace:not(.preview-mode) #gen-left-col > .hero-collapse:first-child .flex.justify-center p.text-xs.uppercase {
  text-shadow:
    0 0 18px rgba(34, 211, 238, 0.45),
    0 0 36px rgba(56, 189, 248, 0.2);
}

#generate-workspace:not(.preview-mode) #gen-left-col > .hero-collapse:first-child .hero-icon {
  box-shadow:
    0 0 3px 1px rgba(56, 189, 248, 0.14),
    0 0 44px -6px rgba(34, 211, 238, 0.38),
    0 0 88px -24px rgba(59, 130, 246, 0.22);
}

#generate-workspace:not(.preview-mode) #gen-left-col > .hero-collapse:first-child > p.text-slate-400 {
  text-shadow: 0 0 28px rgba(56, 189, 248, 0.12);
}

#generate-workspace:not(.preview-mode) #gen-form.glass-panel {
  border-color: rgba(56, 189, 248, 0.14);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 28px 56px -14px rgba(0, 0, 0, 0.5),
    0 0 64px -18px rgba(34, 211, 238, 0.16),
    0 0 100px -30px rgba(59, 130, 246, 0.1);
}

#generate-workspace:not(.preview-mode) #gen-form .form-glow::before {
  opacity: 0.78;
}

#generate-workspace:not(.preview-mode) #prompt {
  border-color: rgba(56, 189, 248, 0.20);
  background: linear-gradient(168deg, rgba(8, 20, 42, 0.9) 0%, rgba(4, 12, 30, 0.94) 100%);
  box-shadow:
    inset 0 1px 0 rgba(56, 189, 248, 0.06),
    0 0 28px -10px rgba(34, 211, 238, 0.10),
    0 0 52px -20px rgba(59, 130, 246, 0.06);
  caret-color: rgb(34, 211, 238);
}

#generate-workspace:not(.preview-mode) #prompt::placeholder {
  color: rgba(165, 230, 252, 0.48);
}

#generate-workspace:not(.preview-mode) #prompt:focus {
  border-color: rgba(34, 211, 238, 0.35);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.12),
    inset 0 1px 0 rgba(56, 189, 248, 0.08),
    0 0 32px -8px rgba(34, 211, 238, 0.18),
    0 0 56px -18px rgba(59, 130, 246, 0.10);
  outline: none;
}

#generate-workspace:not(.preview-mode) #gen-form .quick-fill {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#generate-workspace:not(.preview-mode) #gen-form .quick-fill:hover {
  transform: translateY(-2px);
}

#generate-workspace:not(.preview-mode) #gen-form .quick-fill:active {
  transform: scale(0.97);
  transition: transform 0.10s ease-out;
}

@keyframes quick-fill-rebound {
  0%   { transform: scale(0.97); }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

#generate-workspace:not(.preview-mode) #gen-form .quick-fill.quick-fill-just-clicked {
  animation: quick-fill-rebound 0.40s cubic-bezier(0.16, 1, 0.3, 1);
}

/* violet — Computer Science + A-Level Computer Science */
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(1),
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(9) {
  box-shadow: 0 0 0 0.5px rgba(167, 139, 250, 0.12), 0 4px 18px -6px rgba(139, 92, 246, 0.28);
}
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(1):hover,
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(9):hover {
  box-shadow: 0 0 0 0.5px rgba(167, 139, 250, 0.22), 0 12px 36px -6px rgba(139, 92, 246, 0.45);
}

/* cyan — Physics + A-Level Physics */
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(2),
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(6) {
  box-shadow: 0 0 0 0.5px rgba(6, 182, 212, 0.12), 0 4px 18px -6px rgba(6, 182, 212, 0.25);
}
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(2):hover,
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(6):hover {
  box-shadow: 0 0 0 0.5px rgba(6, 182, 212, 0.22), 0 12px 36px -6px rgba(34, 211, 238, 0.42);
}

/* slate — Chemistry + A-Level Chemistry */
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(3),
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(8) {
  box-shadow: 0 0 0 0.5px rgba(148, 163, 184, 0.10), 0 4px 18px -6px rgba(148, 163, 184, 0.18);
}
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(3):hover,
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(8):hover {
  box-shadow: 0 0 0 0.5px rgba(203, 213, 225, 0.20), 0 12px 36px -6px rgba(203, 213, 225, 0.32);
}

/* blue — Mathematics */
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(4) {
  box-shadow: 0 0 0 0.5px rgba(59, 130, 246, 0.12), 0 4px 18px -6px rgba(59, 130, 246, 0.25);
}
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(4):hover {
  box-shadow: 0 0 0 0.5px rgba(59, 130, 246, 0.22), 0 12px 36px -6px rgba(96, 165, 250, 0.42);
}

/* emerald — Biology + A-Level Biology */
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(5),
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(7) {
  box-shadow: 0 0 0 0.5px rgba(16, 185, 129, 0.12), 0 4px 18px -6px rgba(16, 185, 129, 0.25);
}
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(5):hover,
#generate-workspace:not(.preview-mode) #gen-form .quick-fill:nth-child(7):hover {
  box-shadow: 0 0 0 0.5px rgba(16, 185, 129, 0.22), 0 12px 36px -6px rgba(16, 185, 129, 0.42);
}

#generate-workspace:not(.preview-mode) #submit-btn.btn-space-primary {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 4px 28px -4px rgba(34, 211, 238, 0.55),
    0 16px 52px -12px rgba(59, 130, 246, 0.38);
}

#generate-workspace:not(.preview-mode) #submit-btn.btn-space-primary:hover:not(:disabled) {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.17) inset,
    0 10px 40px -6px rgba(34, 211, 238, 0.62),
    0 22px 56px -12px rgba(99, 102, 241, 0.42);
}

#generate-workspace:not(.preview-mode) #gen-form .progress-strip {
  border-color: rgba(34, 211, 238, 0.2);
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.07) 0%, rgba(59, 130, 246, 0.05) 100%);
  box-shadow: 0 0 36px -10px rgba(34, 211, 238, 0.2);
}

#generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .feature-card {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 44px -14px rgba(56, 189, 248, 0.1);
}

#generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .feature-card:hover {
  transform: translateY(-2px);
}

#generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .grid > .feature-card:nth-child(1):hover {
  border-color: rgba(167, 139, 250, 0.24);
  box-shadow: 0 14px 44px -12px rgba(167, 139, 250, 0.22);
}

#generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .grid > .feature-card:nth-child(2):hover {
  border-color: rgba(34, 211, 238, 0.22);
  box-shadow: 0 14px 44px -12px rgba(34, 211, 238, 0.2);
}

#generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .grid > .feature-card:nth-child(3):hover {
  border-color: rgba(52, 211, 153, 0.22);
  box-shadow: 0 14px 44px -12px rgba(52, 211, 153, 0.2);
}

/* Soften the hard Tailwind ring-1 outlines on feature-card icon boxes into a diffuse glow */
#generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .grid > .feature-card:nth-child(1) > div:first-child {
  box-shadow: 0 0 0 0.5px rgba(167, 139, 250, 0.12), 0 0 10px -1px rgba(167, 139, 250, 0.28);
}
#generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .grid > .feature-card:nth-child(2) > div:first-child {
  box-shadow: 0 0 0 0.5px rgba(34, 211, 238, 0.12), 0 0 10px -1px rgba(34, 211, 238, 0.25);
}
#generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .grid > .feature-card:nth-child(3) > div:first-child {
  box-shadow: 0 0 0 0.5px rgba(52, 211, 153, 0.12), 0 0 10px -1px rgba(52, 211, 153, 0.25);
}

#generate-workspace:not(.preview-mode) #gen-left-col > .hero-collapse:first-child .subject-badge {
  box-shadow: 0 0 16px -4px rgba(56, 189, 248, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  #generate-workspace:not(.preview-mode) #gen-form .quick-fill:hover {
    transform: none;
  }

  #generate-workspace:not(.preview-mode) #gen-form .quick-fill:active,
  #generate-workspace:not(.preview-mode) #gen-form .quick-fill.quick-fill-just-clicked {
    animation: none;
    transform: none;
  }

  #generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .feature-card:hover {
    transform: translateY(-1px);
  }
}

/* ─── Subject badges ─────────────────────────────────────────────────────── */
.subject-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 500;
  vertical-align: 0.1em;
  white-space: nowrap;
  line-height: 1.35;
}

.subject-badge-physics,
.subject-badge-a-level-physics {
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.25);
  color: rgb(165 243 253);
}

.subject-badge-cs,
.subject-badge-a-level-cs {
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.25);
  color: rgb(221 214 254);
}

.subject-badge-math,
.subject-badge-mathematics {
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.25);
  color: rgb(191 219 254);
}

.subject-badge-biology,
.subject-badge-a-level-biology {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: rgb(110 231 183);
}

.subject-badge-chemistry,
.subject-badge-a-level-chemistry {
  background: rgba(203, 213, 225, 0.10);
  border: 1px solid rgba(203, 213, 225, 0.25);
  color: rgb(226 232 240);
}

/* ─── Hero icon float ────────────────────────────────────────────────────── */
.hero-icon {
  animation: float 7s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(  0px); }
  50%       { transform: translateY( -7px); }
}

/* Pause decorative animations in background tabs */
html.doc-background-paused .space-aurora,
html.doc-background-paused .space-stars,
html.doc-background-paused .space-stars::after,
html.doc-background-paused .star,
html.doc-background-paused .form-glow::before,
html.doc-background-paused .hero-icon,
html.doc-background-paused #gen-left-col > .hero-collapse:first-child h1.font-display {
  animation-play-state: paused;
}

/* ─── Title shimmer keyframe ─────────────────────────────────────────────── */
@keyframes title-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ─── Page-load entrance animations ─────────────────────────────────────── */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-in-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body:not(.page-entered) #generate-workspace:not(.preview-mode)
  #gen-left-col > .hero-collapse:first-child p.uppercase {
  animation: hero-in 0.28s ease 0ms both;
}
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  #gen-left-col > .hero-collapse:first-child h1 {
  animation: hero-in 0.28s ease 80ms both;
}
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  #gen-left-col > .hero-collapse:first-child > p.text-slate-400 {
  animation: hero-in 0.28s ease 160ms both;
}
body:not(.page-entered) #generate-workspace:not(.preview-mode) #gen-form.glass-panel {
  animation: hero-in 0.28s ease 260ms both;
}
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  .hero-collapse.mt-14 .feature-card:nth-child(1) {
  animation: hero-in 0.28s ease 380ms both;
}
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  .hero-collapse.mt-14 .feature-card:nth-child(2) {
  animation: hero-in 0.28s ease 440ms both;
}
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  .hero-collapse.mt-14 .feature-card:nth-child(3) {
  animation: hero-in 0.28s ease 500ms both;
}

/* Feature-card icon settle on first paint — keyframe lives in 04-generation.css */
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  .hero-collapse.mt-14 .feature-card:nth-child(1) > div:first-child {
  animation: icon-settle-in 0.20s cubic-bezier(0.34, 1.56, 0.64, 1) 460ms both;
}
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  .hero-collapse.mt-14 .feature-card:nth-child(2) > div:first-child {
  animation: icon-settle-in 0.20s cubic-bezier(0.34, 1.56, 0.64, 1) 520ms both;
}
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  .hero-collapse.mt-14 .feature-card:nth-child(3) > div:first-child {
  animation: icon-settle-in 0.20s cubic-bezier(0.34, 1.56, 0.64, 1) 580ms both;
}

/* ─── Keyboard shortcut hint ─────────────────────────────────────────────── */
.kbd-hint {
  font-size: 0.7rem;
  color: rgba(148, 163, 184, 0.5);
  letter-spacing: 0.02em;
  user-select: none;
  flex-shrink: 0;
}

@media (hover: none) {
  .kbd-hint { display: none; }
}

/* ─── Subject badge hover glow ───────────────────────────────────────────── */
.subject-badge {
  transition: filter 0.15s ease;
  cursor: default;
}

.subject-badge-cs:hover,
.subject-badge-a-level-cs:hover        { filter: brightness(1.18) drop-shadow(0 0 6px rgba(167, 139, 250, 0.45)); }
.subject-badge-physics:hover,
.subject-badge-a-level-physics:hover   { filter: brightness(1.18) drop-shadow(0 0 6px rgba(34, 211, 238, 0.45)); }
.subject-badge-chemistry:hover,
.subject-badge-a-level-chemistry:hover { filter: brightness(1.15) drop-shadow(0 0 5px rgba(203, 213, 225, 0.35)); }
.subject-badge-mathematics:hover       { filter: brightness(1.18) drop-shadow(0 0 6px rgba(96, 165, 250, 0.45)); }
.subject-badge-biology:hover,
.subject-badge-a-level-biology:hover   { filter: brightness(1.18) drop-shadow(0 0 6px rgba(16, 185, 129, 0.45)); }

/* ─── Practice subject card ─────────────────────────────────────────────────
   Per-subject accent driven by a CSS variable so one rule set covers all cards.
   Each slug below picks the accent RGB used by the icon, hover border/gradient,
   arrow, and focus ring. Palette mirrors .subject-badge-* in this file. */
.practice-card {
  --accent-rgb: 148, 163, 184;
  transition: border-color 0.15s ease, background-image 0.15s ease;
}
.practice-card[data-subject="physics"],
.practice-card[data-subject="a_level_physics"]          { --accent-rgb:  34, 211, 238; }
.practice-card[data-subject="computer_science"],
.practice-card[data-subject="a_level_computer_science"] { --accent-rgb: 167, 139, 250; }
.practice-card[data-subject="mathematics"]              { --accent-rgb:  96, 165, 250; }
.practice-card[data-subject="biology"],
.practice-card[data-subject="a_level_biology"]          { --accent-rgb:  16, 185, 129; }
.practice-card[data-subject="chemistry"],
.practice-card[data-subject="a_level_chemistry"]        { --accent-rgb: 203, 213, 225; }

.practice-card-icon-bg { background-color: rgba(var(--accent-rgb), 0.12); }
.practice-card-icon    { color: rgb(var(--accent-rgb)); }
.practice-card-arrow   { transition: transform 0.15s ease, color 0.15s ease; }

.practice-card:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  background-image: linear-gradient(to bottom, rgba(var(--accent-rgb), 0.08), rgba(255, 255, 255, 0.02));
}
.practice-card:hover .practice-card-arrow {
  color: rgb(var(--accent-rgb));
  transform: translateX(2px);
}
.practice-card:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.6);
  outline-offset: 1px;
}

/* ─── Quick-fill 2-col grid on mobile: last button spans full width if alone ── */
@media (max-width: 639px) {
  .quick-fill:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}