/* The Quad — global tokens */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* StudyFetch-style — cool light-gray background, near-black ink. */
  --paper: oklch(0.985 0.003 250);
  --paper-2: oklch(0.965 0.004 250);
  --paper-3: oklch(0.940 0.005 250);
  --oat: oklch(0.88 0.01 250);
  --line: oklch(0.85 0.008 250);
  --line-soft: oklch(0.92 0.005 250);
  --ink: oklch(0.12 0.005 250);
  --ink-2: oklch(0.24 0.006 250);
  --ink-3: oklch(0.42 0.008 250);
  --ink-4: oklch(0.58 0.008 250);

  /* Accents — same chroma 0.13, varied hue */
  --terracotta: oklch(0.62 0.13 40);
  --terracotta-soft: oklch(0.92 0.04 45);
  --sage: oklch(0.58 0.07 150);
  --sage-soft: oklch(0.93 0.03 145);
  --indigo: oklch(0.48 0.10 270);
  --indigo-soft: oklch(0.93 0.025 270);
  --amber: oklch(0.78 0.13 80);
  --amber-soft: oklch(0.95 0.04 85);
  --rose: oklch(0.66 0.12 20);

  --serif: 'Source Serif 4', ui-serif, Georgia, serif;
  --sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.04), 0 0 0 1px oklch(0.86 0.018 75 / 0.6);
  --shadow: 0 1px 2px rgba(60, 40, 20, 0.04), 0 6px 18px rgba(60, 40, 20, 0.06), 0 0 0 1px oklch(0.86 0.018 75 / 0.7);
  --shadow-lg: 0 8px 30px rgba(60, 40, 20, 0.10), 0 2px 6px rgba(60, 40, 20, 0.05);
}

/* ─────────── DARK THEME (midnight) ─────────── */
:root[data-theme="midnight"] {
  --paper: oklch(0.215 0.012 265);
  --paper-2: oklch(0.255 0.014 265);
  --paper-3: oklch(0.295 0.016 265);
  --oat: oklch(0.355 0.018 265);
  --line: oklch(0.36 0.02 265);
  --line-soft: oklch(0.305 0.015 265);
  --ink: oklch(0.96 0.01 80);
  --ink-2: oklch(0.86 0.012 75);
  --ink-3: oklch(0.68 0.014 75);
  --ink-4: oklch(0.52 0.014 75);

  /* Slightly punchier accents on dark */
  --terracotta: oklch(0.72 0.14 40);
  --terracotta-soft: oklch(0.32 0.08 40);
  --sage: oklch(0.72 0.10 150);
  --sage-soft: oklch(0.30 0.05 150);
  --indigo: oklch(0.70 0.13 270);
  --indigo-soft: oklch(0.30 0.06 270);
  --amber: oklch(0.85 0.14 80);
  --amber-soft: oklch(0.32 0.07 80);
  --rose: oklch(0.74 0.13 20);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 0 0 1px oklch(0.36 0.02 265 / 0.6);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 0 1px oklch(0.36 0.02 265 / 0.7);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
}

body[data-theme="midnight"], :root[data-theme="midnight"] body {
  background: oklch(0.18 0.012 265);
}

body[data-theme="midnight"] .design-canvas-grid,
body[data-theme="midnight"] {
  color-scheme: dark;
}

[data-theme="midnight"] .ai-shimmer {
  background: linear-gradient(90deg, var(--terracotta-soft) 0%, oklch(0.45 0.10 50) 50%, var(--terracotta-soft) 100%);
  background-size: 200% 100%;
  animation: shimmer 3.5s linear infinite;
}

[data-theme="midnight"] .placeholder-swatch {
  background:
    repeating-linear-gradient(45deg,
      oklch(0.28 0.014 265) 0 8px,
      oklch(0.32 0.016 265) 8px 16px);
  color: var(--ink-3);
}

[data-theme="midnight"] .paper-tex {
  background-image:
    radial-gradient(circle at 20% 10%, oklch(0.27 0.014 265) 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, oklch(0.23 0.014 265) 0%, transparent 50%);
  background-color: var(--paper);
}

[data-theme="midnight"] .tag-terra { background: var(--terracotta-soft); color: oklch(0.85 0.13 45); border-color: oklch(0.45 0.10 45); }
[data-theme="midnight"] .tag-sage { background: var(--sage-soft); color: oklch(0.86 0.10 150); border-color: oklch(0.45 0.07 150); }
[data-theme="midnight"] .tag-indigo { background: var(--indigo-soft); color: oklch(0.86 0.10 270); border-color: oklch(0.45 0.08 270); }
[data-theme="midnight"] .tag-amber { background: var(--amber-soft); color: oklch(0.88 0.13 80); border-color: oklch(0.5 0.10 80); }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: oklch(0.965 0.004 250);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.serif { font-family: var(--serif); letter-spacing: -0.01em; }
.mono { font-family: var(--mono); }

button { font-family: inherit; cursor: pointer; }

/* Card primitive */
.card {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.card-flat {
  background: var(--paper);
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
}

/* tiny scrollbar */
.q-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.q-scroll::-webkit-scrollbar-thumb { background: var(--oat); border-radius: 999px; }

/* paper texture overlay (very subtle) */
.paper-tex {
  background-image:
    radial-gradient(circle at 20% 10%, oklch(0.97 0.012 80) 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, oklch(0.94 0.018 75) 0%, transparent 50%);
  background-color: var(--paper);
}

/* ring focus */
.ring-terra { box-shadow: 0 0 0 3px oklch(0.62 0.13 40 / 0.18), 0 0 0 1px var(--terracotta); }

/* shimmer for AI badges */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.ai-shimmer {
  background: linear-gradient(90deg, var(--terracotta-soft) 0%, oklch(0.95 0.06 60) 50%, var(--terracotta-soft) 100%);
  background-size: 200% 100%;
  animation: shimmer 3.5s linear infinite;
}

/* hover lift */
.lift { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* placeholder swatch */
.placeholder-swatch {
  background:
    repeating-linear-gradient(45deg,
      oklch(0.92 0.018 75) 0 8px,
      oklch(0.95 0.014 76) 8px 16px);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
}

/* underline link */
.uline { border-bottom: 1px dashed var(--ink-4); padding-bottom: 1px; }

/* keycap */
.kbd {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  color: var(--ink-2);
}

/* progress ring base */
.q-ring-bg { stroke: var(--line); }
.q-ring-fill { stroke: var(--terracotta); stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; }

/* card subtle hover */
.tile-hover { transition: background 0.15s, border-color 0.15s; }
.tile-hover:hover { background: var(--paper-2); }

/* dot pulse */
@keyframes pulse-dot {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}
.dot-pulse { animation: pulse-dot 1.6s ease-in-out infinite; }

/* card flip */
.flip-scene { perspective: 1400px; }
.flip-card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0.05, 0.2, 1);
}
.flip-card.flipped { transform: rotateY(180deg); }
.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-back { transform: rotateY(180deg); }

/* enter anim */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both; }

/* swing in */
@keyframes popIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.pop-in { animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* answer pulses */
@keyframes flashGreen {
  0% { background: var(--paper); }
  35% { background: var(--sage-soft); }
  100% { background: var(--paper); }
}
@keyframes flashRed {
  0% { background: var(--paper); }
  35% { background: oklch(0.94 0.04 25); }
  100% { background: var(--paper); }
}
.flash-correct { animation: flashGreen 0.7s ease-out; }
.flash-wrong { animation: flashRed 0.7s ease-out; }

/* checkmark draw */
@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}
.draw-check {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: drawCheck 0.5s ease-out forwards;
}

/* heart pulse */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  10% { transform: scale(1.04); }
  20% { transform: scale(1); }
  30% { transform: scale(1.03); }
  40% { transform: scale(1); }
}
.heartbeat { animation: heartbeat 1.4s ease-in-out infinite; transform-origin: center; }

/* underline grow */
.under-grow {
  background-image: linear-gradient(var(--terracotta), var(--terracotta));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.3s;
}
.under-grow:hover { background-size: 100% 2px; }

/* tag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink-2);
  border: 1px solid var(--line-soft);
}

/* fill-blank input — hide number spinner arrows */
.q-fillblank-input::-webkit-outer-spin-button,
.q-fillblank-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.q-fillblank-input[type="number"] { -moz-appearance: textfield; }

.tag-terra { background: var(--terracotta-soft); color: oklch(0.4 0.13 40); border-color: oklch(0.85 0.06 50); }
.tag-sage { background: var(--sage-soft); color: oklch(0.38 0.07 150); border-color: oklch(0.85 0.04 145); }
.tag-indigo { background: var(--indigo-soft); color: oklch(0.38 0.10 270); border-color: oklch(0.85 0.03 270); }
.tag-amber { background: var(--amber-soft); color: oklch(0.45 0.13 75); border-color: oklch(0.85 0.06 80); }

/* ─────────── RESPONSIVE NET (≤ 760px) ───────────
   Collapses the app's multi-column inline grids to a single column and
   tames padding without touching every screen file. Attribute selectors
   match React's serialized inline style strings. */
@media (max-width: 760px) {
  /* Collapse 2/3/4/5-col grids to one column */
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Reduce big scroll-region padding */
  .q-scroll { padding-left: 16px !important; padding-right: 16px !important; }

  /* Hero rows that use side-by-side flex panels → stack */
  .resp-stack { flex-direction: column !important; }
  .resp-stack > * { width: 100% !important; max-width: none !important; flex: 0 0 auto !important; }

  /* Wide fixed-column tables / day grids → horizontal scroll instead of crush */
  .resp-xscroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .resp-xscroll > * { min-width: 680px; }

  /* Tighten hero/section padding on phones */
  .resp-pad { padding: 18px !important; }
}