/* Empira — Home page (Phase 2 rebuild)
   Design system: Inter font, #3B4CFF blue, #F4F5F9 paper.
   Matches Phase 1 topic page tokens. No gamification, no stars. */

:root {
  --blue-500: #3B4CFF;  --blue-600: #2F3DE0;  --blue-700: #2632C2;
  --blue-100: #D7DBFF;  --blue-50:  #EEF0FF;
  --amber-500: #FFB21E;
  --ink-900: #1A1D33;  --ink-700: #474C63;  --ink-500: #6B7191;  --ink-400: #8A90A6;
  --line: #ECEDF3;  --mist: #ECEEF4;  --paper: #F4F5F9;  --white: #FFFFFF;

  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s7: 32px; --s8: 48px;

  --r-s: 7px; --r-m: 12px; --r-l: 18px; --r-xl: 22px; --r-full: 999px;
  --ease: cubic-bezier(.2,.8,.2,1); --t-fast: 150ms;

  --page-gutter: 18px;
  --topbar-h: 62px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; min-height: 100vh;
  background: var(--paper); color: var(--ink-900);
  font-family: var(--font); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }

/* ========== A. Top bar ========== */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.topbar__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  height: var(--topbar-h);
  display: flex; align-items: center;
}
.logo { display: inline-flex; align-items: center; height: 44px; border-radius: var(--r-s); }
.logo__svg { height: 28px; width: auto; display: block; }

/* ========== Page ========== */
.page {
  max-width: calc(960px + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: var(--s6) var(--page-gutter) calc(var(--s7) + env(safe-area-inset-bottom));
}

/* ========== B. Hero ========== */
.hero__title {
  font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em;
  max-width: 20ch;
  text-wrap: balance;
}
.hero__meta {
  margin-top: var(--s2);
  display: flex; align-items: center; gap: var(--s2);
  font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--ink-500);
}
.dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--amber-500); flex: none; }

/* ========== C. Continue row ========== */
.continue {
  margin-top: var(--s6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 64px;
  padding: var(--s3) var(--s4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.continue__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.continue__label { font-size: 14px; font-weight: 500; color: var(--ink-500); line-height: 1.4; }
.continue__topic { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.continue__arrow { color: var(--ink-400); flex: none; }

/* ========== D + E. The two choices ========== */
.choices { margin-top: var(--s7); }

.choice__title {
  font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em;
}
.choice__hint {
  margin-top: var(--s1);
  font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--ink-500);
}

/* Grade tiles */
.grades {
  margin-top: var(--s4);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}
.grade {
  display: flex; align-items: center; justify-content: center;
  height: 64px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.grade__num {
  font-size: 28px; line-height: 1; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast) var(--ease);
}
.grade__unit {
  font-size: 18px; line-height: 1; font-weight: 600; color: var(--ink-700);
  letter-spacing: -0.01em;
  transition: color var(--t-fast) var(--ease);
}

/* Grades not yet ready */
.grade--soon { position: relative; padding-bottom: 16px; }
.grade--soon .grade__num, .grade--soon .grade__unit { color: var(--ink-500); }
.grade__note { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 13px; line-height: 1.2; font-weight: 500; color: var(--ink-500); }
@media (min-width: 640px) { .grade--soon { padding-bottom: 22px; } .grade__note { bottom: 14px; } }

/* "yoki" divider */
.or {
  display: flex; align-items: center; gap: var(--s3);
  margin: var(--s6) 0;
  font-size: 14px; font-weight: 500; color: var(--ink-500);
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Scan tile */
.scan {
  margin-top: var(--s4);
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  height: 64px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.scan__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-m);
  background: var(--blue-500); color: var(--white);
  transition: background var(--t-fast) var(--ease);
}
.scan__label { font-size: 18px; line-height: 1; font-weight: 600; letter-spacing: -0.01em; transition: color var(--t-fast) var(--ease); }
.scan__note { display: none; }

/* ========== Interaction states ========== */
@media (hover: hover) {
  .grade:hover, .scan:hover, .continue:hover {
    background: var(--blue-50); border-color: var(--blue-500);
  }
  .grade:hover .grade__num, .grade:hover .grade__unit,
  .scan:hover .scan__label { color: var(--blue-500); }
  .scan:hover .scan__icon { background: var(--blue-600); }
  .continue:hover { border-color: var(--blue-500); }
}
.grade:active, .scan:active, .continue:active {
  background: var(--blue-50); border-color: var(--blue-600);
}
.grade[aria-current="true"] {
  background: var(--blue-50);
  border-color: var(--blue-500);
  box-shadow: inset 0 0 0 1px var(--blue-500);
}
.grade[aria-current="true"] .grade__num,
.grade[aria-current="true"] .grade__unit { color: var(--blue-500); }

/* ========== Tablet: >= 640px ========== */
@media (min-width: 640px) {
  :root { --page-gutter: 24px; }
  .page { padding-top: var(--s8); }
  .hero__title { font-size: 32px; }
  .grades { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
  .grade { height: 96px; }
  .grade__num { font-size: 36px; }
  .scan { height: 96px; }
  .scan__label { font-size: 20px; }
  .or { margin: var(--s7) 0; }
}

/* ========== Desktop: >= 1024px ========== */
@media (min-width: 1024px) {
  :root { --page-gutter: 32px; --topbar-h: 64px; }
  .page { padding-top: var(--s8); }
  .hero__title { font-size: 36px; max-width: none; }
  .choices { margin-top: var(--s8); }

  .choices {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px 304px;
    grid-template-rows: auto auto 1fr;
  }
  .choice {
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
  }
  .choice--topic { grid-column: 1; }
  .choice--scan  { grid-column: 3; }

  .or {
    grid-column: 2; grid-row: 3;
    justify-content: center;
    margin: var(--s4) 0 0;
  }
  .or::before, .or::after { display: none; }

  .grade { height: 104px; }
  .grade__num { font-size: 40px; }
  .grade__unit { font-size: 20px; }

  .scan {
    height: auto;
    flex-direction: column; gap: var(--s3);
    padding: var(--s6);
  }
  .scan__icon { width: 56px; height: 56px; border-radius: var(--r-l); }
  .scan__label { font-size: 22px; letter-spacing: -0.015em; }
  .scan__note {
    display: block; text-align: center;
    font-size: 14px; font-weight: 500; color: var(--ink-500); line-height: 1.4;
  }
}

/* Short phones */
@media (max-width: 639px) and (max-height: 700px) {
  .page { padding-top: var(--s4); }
  .choices { margin-top: var(--s6); }
  .grades { margin-top: var(--s3); gap: 10px; }
  .grade { height: 60px; }
  .or { margin: var(--s5) 0; }
  .scan { margin-top: var(--s3); height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}