/* ================================================================
   IndianTyping.com — english-practice.css
   English Typing Practice (/typing-practice/english/) only.

   Its own stylesheet, not a fork of english-test.css. The two pages
   belong to one family and share every design token, but Practice
   leads with accuracy rather than speed, has no clock, and is meant
   to feel calm enough to sit with for half an hour.

   Every class is `.ep-` prefixed. Nothing here loads on the Test,
   the Hindi pages or the transliteration tools.
   Uses ONLY tokens from main.css — no new colours, no new fonts.
================================================================ */

.ep-page {
  max-width: var(--test-max);
  margin: 0 auto;
  /* The site nav is position:fixed and #main-content is not offset for
     it, so every page clears it itself (same convention as tool.css,
     test.css and english-test.css). */
  padding: calc(var(--nav-h) + 28px) 20px 64px;
}

/* .sr-only is defined globally in main.css. The page-scoped copy that used to
   live here was identical, and having it here is what hid the fact that pages
   outside .ep-page/.et-page had no definition at all. */

.ep-screen[hidden] { display: none; }

/* While practising, the page IS the practice. Everything below the
   typing surface is removed rather than dimmed, so nothing competes
   for attention and nothing can be tabbed into mid-session. */
.ep-page.is-practising .ep-more,
.ep-page.is-practising .ep-content,
.ep-page.is-practising .ep-adslot { display: none; }

/* ================================================================
   1. LANDING
================================================================ */
.ep-intro { text-align: center; margin-bottom: 26px; }

.ep-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green);
  background: var(--green-dim);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 16px;
}

.ep-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.15; font-weight: 800;
  color: var(--text-1);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.ep-title span { color: var(--brand); }

.ep-sub {
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 50ch;
  margin: 0 auto;
}

.ep-setup {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: 26px 24px;
}

.ep-field-label {
  display: block;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 12px;
}

/* Levels are the only choice on this page, so they carry the weight
   duration chips carry on the Test — but as readable rows, because
   what distinguishes them is a description, not a number. */
.ep-levels { display: grid; gap: 10px; margin-bottom: 22px; }

.ep-level {
  appearance: none; font-family: inherit;
  display: flex; align-items: baseline; gap: 12px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
              transform 0.15s var(--ease);
}
.ep-level:hover { border-color: var(--border-strong); transform: translateY(-1px); }

.ep-level-name {
  flex: 0 0 auto;
  font-size: 15px; font-weight: 700;
  color: var(--text-1);
}
.ep-level-desc {
  font-size: 13px; line-height: 1.45;
  color: var(--text-2);
}

.ep-level[aria-pressed="true"] {
  background: var(--brand-dim);
  border-color: var(--brand);
}
.ep-level[aria-pressed="true"] .ep-level-name { color: var(--brand); }
.ep-level[aria-pressed="true"] .ep-level-desc { color: var(--text-1); }

.ep-start {
  appearance: none; font-family: inherit;
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 24px;
  font-size: 17px; font-weight: 700;
  color: #fff;
  background: var(--brand);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.15s var(--ease);
}
.ep-start:hover  { transform: translateY(-2px); box-shadow: var(--shadow-lg); filter: brightness(1.05); }
.ep-start:active { transform: translateY(0); }

.ep-start-hint {
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
  margin: 12px 0 0;
}

/* A quiet line for someone who has practised before. Local data only. */
.ep-returning {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}
.ep-returning[hidden] { display: none; }

kbd.ep-key {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  padding: 1px 7px;
  color: var(--text-2);
}

/* ================================================================
   2. ACTIVE PRACTICE
================================================================ */
.ep-hud {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}

.ep-metrics { display: flex; align-items: baseline; gap: 26px; }

.ep-metric { display: flex; align-items: baseline; gap: 7px; }
.ep-metric-val {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800; line-height: 1;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
}
/* Accuracy leads on Practice: it is the thing this page exists to
   improve, and speed follows it rather than the other way round. */
.ep-metric.is-lead .ep-metric-val { color: var(--brand); font-size: 30px; }
.ep-metric-lbl {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-3);
}

.ep-meta {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.ep-surface {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: 30px 30px 26px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ep-surface.is-focused {
  border-color: var(--brand);
  box-shadow: var(--shadow-md), 0 0 0 4px var(--brand-glow);
}

.ep-viewport {
  /* font-size lives here so `em` in the height below resolves against
     the passage's own type size rather than an inherited 16px. */
  font-size: clamp(17px, 2.4vw, 21px);
  --ep-line-h: 2em;
  height: calc(var(--ep-line-h) * 3);
  overflow: hidden;
  position: relative;
}

.ep-passage {
  font-family: var(--mono);
  font-size: inherit;
  line-height: 2em;
  letter-spacing: 0.01em;
  color: var(--text-3);
  white-space: pre-wrap;
  word-break: break-word;
  transition: transform 0.18s var(--ease);
  will-change: transform;
}

.ep-c.is-ok  { color: var(--text-1); }
.ep-c.is-bad { color: var(--red); background: var(--red-dim); border-radius: 2px; }

.ep-c.is-current { position: relative; }
.ep-c.is-current::before {
  content: '';
  position: absolute; left: -2px; top: 0.18em; bottom: 0.18em;
  width: 2px;
  background: var(--brand);
  border-radius: 1px;
  animation: ep-blink 1.1s steps(1) infinite;
}
@keyframes ep-blink { 0%,45% { opacity: 1; } 50%,95% { opacity: 0; } 100% { opacity: 1; } }

.ep-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  border: none; padding: 0; margin: 0;
  resize: none;
  font-size: 16px;      /* below 16px makes iOS zoom the page on focus */
  cursor: text;
}

/* Shown only when focus is lost mid-session, so keystrokes never
   vanish silently with no explanation. */
.ep-resume {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border-radius: var(--r-xl);
  pointer-events: none;
}
.ep-surface.is-blurred .ep-resume { display: flex; }
.ep-resume-pill {
  padding: 10px 18px;
  font-size: 14px; font-weight: 700;
  color: var(--text-1);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
}

.ep-hint {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}

/* Deliberately secondary and deliberately not adjacent to the typing
   surface: ending a practice session should be a decision, not a slip. */
.ep-finish-row { display: flex; justify-content: center; margin-top: 20px; }
.ep-finish {
  appearance: none; font-family: inherit;
  padding: 11px 22px;
  font-size: 14px; font-weight: 700;
  color: var(--text-2);
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.ep-finish:hover { border-color: var(--brand); color: var(--brand); }

/* ================================================================
   3. RESULT
================================================================ */
.ep-result-hero {
  text-align: center;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: 32px 24px 28px;
  margin-bottom: 16px;
}
.ep-result-eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.ep-score {
  font-family: var(--font-display);
  font-size: clamp(52px, 11vw, 76px);
  font-weight: 800; line-height: 1;
  color: var(--brand);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
/* The number lives in its own span so updating it cannot delete the
   symbol or the unit label beside it. */
.ep-score-sym {
  font-family: var(--font-display);
  font-size: 0.45em; font-weight: 800;
  color: var(--brand);
  margin-left: 2px;
}
.ep-score-unit {
  display: block;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3);
  margin-top: 6px;
}
.ep-score-note { font-size: 14px; color: var(--text-2); margin: 14px 0 0; }
.ep-pb { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--text-2); }
.ep-pb.is-best {
  display: inline-block;
  color: var(--green); background: var(--green-dim);
  border-radius: 999px; padding: 6px 14px;
}
.ep-pb[hidden] { display: none; }

.ep-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ep-stat {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 12px;
  text-align: center;
}
.ep-stat[hidden] { display: none; }
.ep-stat-val {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 800; line-height: 1;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.ep-stat-val.is-good { color: var(--green); }
.ep-stat-val.is-bad  { color: var(--red); }
.ep-stat-lbl {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-3);
  margin-top: 7px;
}

.ep-insights { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.ep-insights[hidden] { display: none; }
.ep-insight {
  position: relative;
  padding: 12px 16px 12px 38px;
  font-size: 14px; line-height: 1.55;
  color: var(--text-1);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
}
.ep-insight::before { position: absolute; left: 14px; top: 12px; font-size: 13px; }
.ep-insight.is-good::before    { content: '▲'; color: var(--green); }
.ep-insight.is-action::before  { content: '●'; color: var(--amber); }
.ep-insight.is-neutral::before { content: '■'; color: var(--text-3); }

.ep-trend {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.ep-trend[hidden] { display: none; }
.ep-trend h3 {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--text-1);
  margin: 0 0 12px;
}
.ep-trend-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ep-trend-lbl {
  flex: 0 0 74px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text-3);
}
.ep-spark { flex: 1 1 auto; height: 28px; min-width: 0; overflow: visible; }
.ep-spark polyline { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ep-spark.is-acc polyline { stroke: var(--brand); }
.ep-spark.is-wpm polyline { stroke: var(--green); }
.ep-trend-now {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  min-width: 4ch; text-align: right;
}
.ep-trend-note, .ep-trend-empty {
  margin: 10px 0 0;
  font-size: 13px; line-height: 1.5;
  color: var(--text-3);
}
.ep-trend-empty[hidden] { display: none; }

.ep-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ep-actions > * { flex: 1 1 200px; }
.ep-btn {
  appearance: none; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 22px;
  font-size: 15px; font-weight: 700;
  border-radius: var(--r-md);
  cursor: pointer; text-decoration: none;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.ep-btn:hover { transform: translateY(-2px); }
.ep-btn-primary   { background: var(--brand); color: #fff; border: none; box-shadow: var(--shadow-md); }
.ep-btn-secondary { background: var(--surface); color: var(--text-1); border: 1.5px solid var(--border); }
.ep-btn-secondary:hover { border-color: var(--border-strong); }

.ep-next {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.ep-next-item {
  display: block;
  padding: 14px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.ep-next-item:hover { border-color: var(--brand); transform: translateY(-2px); }
.ep-next-title { display: block; font-size: 14px; font-weight: 700; color: var(--text-1); }
.ep-next-desc  { display: block; font-size: 12px; line-height: 1.5; color: var(--text-2); margin-top: 3px; }

.ep-breakdown {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 22px;
  margin-bottom: 16px;
}
.ep-breakdown > summary {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--text-2);
  cursor: pointer; list-style: none;
}
.ep-breakdown > summary::-webkit-details-marker { display: none; }
.ep-breakdown > summary::before {
  content: '▸'; display: inline-block; width: 16px;
  color: var(--text-3);
  transition: transform 0.15s var(--ease);
}
.ep-breakdown[open] > summary::before { transform: rotate(90deg); }
.ep-breakdown[open] > summary { margin-bottom: 10px; color: var(--text-1); }
.ep-rows { display: grid; gap: 2px; }
.ep-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.ep-row:last-child { border-bottom: none; }
.ep-row dt { color: var(--text-2); }
.ep-row dd { margin: 0; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }

/* ================================================================
   4. DISCOVERY + SUPPORTING CONTENT
================================================================ */
.ep-more { margin-top: 46px; }
.ep-more-head { text-align: center; margin-bottom: 20px; }
.ep-more-head h2 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800;
  color: var(--text-1);
  margin: 0 0 6px;
}
.ep-more-head p { font-size: 14px; color: var(--text-2); margin: 0; }

.ep-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ep-card {
  display: block;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  text-decoration: none;
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
a.ep-card:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow-md); }
/* An honest placeholder — visibly not a link, so nobody clicks into a
   page that does not exist yet. */
.ep-card.is-soon { opacity: 0.62; border-style: dashed; }
.ep-card.is-soon .ep-card-title::after {
  content: 'Coming soon';
  display: inline-block;
  margin-left: 8px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: middle;
}

.ep-card-icon  { font-size: 24px; line-height: 1; margin-bottom: 10px; }
.ep-card-title { font-size: 15px; font-weight: 700; color: var(--text-1); margin-bottom: 5px; }
.ep-card-desc  { font-size: 13px; line-height: 1.5; color: var(--text-2); }

.ep-content { margin-top: 46px; }
.ep-content-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 26px;
  margin-bottom: 16px;
}
.ep-content-card h2 {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 800;
  color: var(--text-1);
  margin: 0 0 14px;
}
.ep-content-card h3 {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  color: var(--text-1);
  margin: 24px 0 10px;
}
.ep-content-card p  { font-size: 15px; line-height: 1.7; color: var(--text-2); margin: 0 0 14px; }
.ep-content-card ul { margin: 0 0 14px; padding-left: 20px; }
.ep-content-card li { font-size: 15px; line-height: 1.7; color: var(--text-2); margin-bottom: 8px; }

.ep-content-card a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* Tables scroll inside their own box so a narrow phone never gets a
   horizontally scrolling page. */
.ep-table-wrap { overflow-x: auto; margin: 0 0 14px; -webkit-overflow-scrolling: touch; }
.ep-table-wrap table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 14px;
}
.ep-table-wrap th, .ep-table-wrap td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}
.ep-table-wrap th {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface-2);
  white-space: nowrap;
}
.ep-table-wrap td { color: var(--text-2); }
.ep-table-wrap tbody tr:last-child td { border-bottom: none; }
.ep-table-wrap td:first-child { font-weight: 700; color: var(--text-1); white-space: nowrap; }

.ep-faq-item { border-bottom: 1px solid var(--border); }
.ep-faq-item:last-child { border-bottom: none; }
.ep-faq-q {
  appearance: none; font-family: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 16px 0;
  background: none; border: none;
  font-size: 15px; font-weight: 600; text-align: left;
  color: var(--text-1);
  cursor: pointer;
}
.ep-faq-chev { color: var(--text-3); transition: transform 0.2s var(--ease); flex-shrink: 0; }
.ep-faq-q[aria-expanded="true"] .ep-faq-chev { transform: rotate(180deg); }
.ep-faq-a { font-size: 14px; line-height: 1.7; color: var(--text-2); padding: 0 0 16px; }
.ep-faq-a[hidden] { display: none; }

/* Reserved space for a future ad unit. Height is fixed so that adding
   one later cannot shift the layout, and it never sits above or beside
   the typing surface. Nothing is rendered into it today. */
.ep-adslot {
  min-height: 90px;
  margin: 32px 0 0;
  border-radius: var(--r-lg);
}

/* ================================================================
   5. RESPONSIVE
================================================================ */
@media (max-width: 768px) {
  .ep-page    { padding: calc(var(--nav-h) + 20px) 16px 48px; }
  .ep-setup   { padding: 22px 18px; }
  .ep-surface { padding: 22px 18px 20px; }
  .ep-trend   { padding: 16px 14px; }
  .ep-content-card { padding: 22px 18px; }
  .ep-insight { padding: 11px 14px 11px 34px; overflow-wrap: anywhere; }
  .ep-finish  { min-height: 44px; }
}

@media (max-width: 560px) {
  /* One compact row: on a phone the keyboard takes most of the screen,
     and a stacked HUD costs the passage a visible line. */
  .ep-hud     { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
  .ep-meta    { order: -1; flex: 1 0 100%; text-align: center; }
  .ep-metrics { flex: 1 1 auto; justify-content: space-between; gap: 12px; width: 100%; }
  .ep-metric  { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ep-metric-val { font-size: 21px; }
  .ep-metric.is-lead .ep-metric-val { font-size: 24px; }
  .ep-viewport { height: calc(var(--ep-line-h) * 2); }
  .ep-level   { flex-direction: column; align-items: flex-start; gap: 3px; min-height: 44px; }
  .ep-actions > * { flex: 1 1 100%; }
  .ep-next    { grid-template-columns: 1fr; }
  .ep-trend-row { flex-wrap: wrap; gap: 6px 10px; }
  .ep-trend-lbl { flex: 1 1 auto; }
  .ep-spark   { flex: 1 1 100%; order: 3; }
}

@media (max-width: 380px) {
  .ep-page { padding: calc(var(--nav-h) + 16px) 12px 40px; }
}

/* ================================================================
   6. MOTION / FOCUS
================================================================ */
:where(.ep-page) :is(button, a, textarea):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.ep-input:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .ep-page *, .ep-page *::before, .ep-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .ep-c.is-current::before { animation: none; opacity: 1; }
  .ep-btn:hover, .ep-level:hover, a.ep-card:hover, .ep-start:hover, .ep-next-item:hover { transform: none; }
}