/* ─────────────────────────────────────────────────────────────────
   IELTS Writing — Exam Simulator stylesheet.

   Three surfaces:
     1. Landing      — eyebrow + lede + quota + hero + history
     2. Pre-exam     — rules + auto-picked prompts + confirm button
     3. Active exam  — top bar (timer + submit) + tabs + dual editors

   Honey-saturated to match the "premium" feel of the practice card.
   Cards lean cream-translucent like the Essay Grader task picker so
   the prompt is highly readable, the editor area is white paper.
   ───────────────────────────────────────────────────────────── */

.wr-es-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 1.6rem 0 4rem;
}

.wr-es-back {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ielts-ink-soft, #B6A484);
  background: rgba(242, 230, 204, .05);
  border: 1px solid var(--ielts-line, rgba(242, 230, 204, .10));
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
  margin-bottom: 1.6rem;
}
.wr-es-back:hover {
  color: var(--ielts-ink, #F2E6CC);
  background: rgba(242, 230, 204, .10);
  border-color: color-mix(in srgb, var(--ielts-honey, #D9A268) 30%, transparent);
}

.wr-es-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ielts-honey, #D9A268);
  margin-bottom: .7rem;
}
.wr-es-eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px color-mix(in srgb, currentColor 60%, transparent);
}

.wr-es-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--ielts-ink, #F2E6CC);
  margin: 0 0 .8rem;
}
.wr-es-lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ielts-ink-soft, #B6A484);
  margin: 0 0 1.6rem;
  max-width: 64ch;
}

.wr-es-section-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ielts-ink, #F2E6CC);
  margin: 0;
}

/* ── Quota chip ─────────────────────────────────────────────── */
.wr-es-quota-row { margin-bottom: 2.4rem; min-height: 40px; }
.wr-es-quota-skeleton {
  width: 320px; height: 32px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      rgba(242, 230, 204, .05) 0%,
      rgba(242, 230, 204, .10) 50%,
      rgba(242, 230, 204, .05) 100%);
  background-size: 200% 100%;
  animation: wr-es-shimmer 1.4s ease-in-out infinite;
}
@keyframes wr-es-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.wr-es-quota {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1rem .55rem .8rem;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .88rem;
  line-height: 1.35;
  border: 1px solid var(--ielts-line, rgba(242, 230, 204, .10));
}
.wr-es-quota.is-available {
  color: var(--ielts-honey, #D9A268);
  background: color-mix(in srgb, var(--ielts-honey, #D9A268) 8%, transparent);
  border-color: color-mix(in srgb, var(--ielts-honey, #D9A268) 22%, transparent);
}
.wr-es-quota.is-exhausted {
  color: var(--ielts-ink-mute, #7A6A52);
  background: rgba(242, 230, 204, .04);
}

/* ── Hero — cream paper on dark IELTS shell.
   Matches the Essay Grader task picker so the writing tools share a
   visual language: warm white paper sitting on the dark desk. */
.wr-es-hero {
  position: relative;
  padding: 1.8rem 1.8rem 1.6rem;
  background:
    radial-gradient(70% 50% at 100% 0%,
      color-mix(in srgb, #B57A2E 12%, transparent) 0%,
      transparent 60%),
    linear-gradient(180deg, rgba(255, 251, 240, 0.97) 0%, rgba(243, 233, 211, 0.95) 100%);
  border: 1px solid rgba(181, 122, 46, 0.22);
  border-radius: 18px;
  margin-bottom: 3.2rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 18px 36px -18px rgba(0, 0, 0, 0.55);
}
.wr-es-hero-bullets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.3rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px dashed rgba(31, 24, 18, 0.14);
}
.wr-es-hero-b {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.wr-es-hero-b-num {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: #B57A2E;
  line-height: 1;
  letter-spacing: -.02em;
}
.wr-es-hero-b-l {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7A6A55;
}
.wr-es-hero-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.wr-es-hero-list li {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  line-height: 1.5;
  color: #1F1812;
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}
.wr-es-hero-list li b { color: #B57A2E; font-weight: 600; }
.wr-es-hero-dot {
  flex-shrink: 0;
  width: 6px; height: 6px;
  margin-top: .55em;
  border-radius: 50%;
  background: #B57A2E;
}

/* Resume state — when an exam is in progress. Honey-warm border to
   draw the eye without breaking the cream-paper rhythm. */
.wr-es-hero-resume { border-color: rgba(229, 115, 63, 0.55); }
.wr-es-hero-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #C24A2B;
  margin-bottom: .8rem;
}
.wr-es-hero-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: #1F1812;
  margin: 0 0 .35rem;
}
.wr-es-hero-p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  color: #4A3F33;
  margin: 0 0 1.2rem;
}

/* ── CTAs ────────────────────────────────────────────────────── */
.wr-es-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .7rem 1.25rem;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: filter .15s, transform .15s, background-color .15s, color .15s, border-color .15s;
}
.wr-es-cta.is-primary {
  color: #2A1F17;
  background: var(--ielts-honey, #D9A268);
  box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--ielts-honey, #D9A268) 60%, transparent);
}
.wr-es-cta.is-primary:hover { filter: brightness(1.06); transform: translateX(2px); }
.wr-es-cta.is-ghost {
  color: var(--ielts-ink-soft, #B6A484);
  background: rgba(242, 230, 204, .05);
  border: 1px solid var(--ielts-line, rgba(242, 230, 204, .10));
}
.wr-es-cta.is-ghost:hover {
  color: var(--ielts-ink, #F2E6CC);
  background: rgba(242, 230, 204, .08);
}
.wr-es-cta.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: saturate(.6);
}

/* ── History ────────────────────────────────────────────────── */
.wr-es-history-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}
.wr-es-history-count {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ielts-ink-mute, #7A6A52);
}
.wr-es-history-skeleton {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.wr-es-history-skeleton > div {
  height: 72px;
  border-radius: 12px;
  background: linear-gradient(90deg,
    rgba(242, 230, 204, .04) 0%,
    rgba(242, 230, 204, .08) 50%,
    rgba(242, 230, 204, .04) 100%);
  background-size: 200% 100%;
  animation: wr-es-shimmer 1.4s ease-in-out infinite;
}
.wr-es-history-list {
  display: flex; flex-direction: column; gap: .55rem;
}
.wr-es-history-empty {
  padding: 2.4rem 1.8rem;
  border: 1px dashed var(--ielts-line, rgba(242, 230, 204, .14));
  border-radius: 14px;
  text-align: center;
  color: var(--ielts-ink-soft, #B6A484);
}
.wr-es-history-empty-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.2rem;
  color: var(--ielts-ink, #F2E6CC);
  margin-bottom: .35rem;
}
.wr-es-history-empty-p { font-size: .9rem; margin: 0; }

.wr-es-history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: center;
  padding: .9rem 1.2rem .9rem 1rem;
  background:
    linear-gradient(180deg, rgba(255, 251, 240, 0.97) 0%, rgba(243, 233, 211, 0.95) 100%);
  border: 1px solid rgba(31, 24, 18, 0.10);
  border-radius: 12px;
  color: #1F1812;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 8px 18px -16px rgba(0, 0, 0, 0.45);
  transition: border-color .15s, transform .15s;
}
.wr-es-history-row:hover {
  border-color: rgba(181, 122, 46, 0.42);
  transform: translateX(2px);
}
.wr-es-history-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
  padding: .35rem .6rem;
  background: rgba(181, 122, 46, 0.13);
  border: 1px solid rgba(181, 122, 46, 0.32);
  border-radius: 9px;
}
.wr-es-history-band-num {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #B57A2E;
  line-height: 1;
}
.wr-es-history-band-l {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7A6A55;
  margin-top: .15rem;
}
.wr-es-history-row-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  color: #1F1812;
}
.wr-es-history-row-meta {
  margin-top: .3rem;
  display: flex;
  gap: 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
  color: #4A3F33;
}
.wr-es-history-row-meta b { color: #1F1812; font-weight: 600; }
.wr-es-history-arrow {
  color: #7A6A55;
  transition: color .15s, transform .15s;
}
.wr-es-history-row:hover .wr-es-history-arrow {
  color: #B57A2E;
  transform: translateX(3px);
}

/* ── Pre-exam confirm ─────────────────────────────────────── */
.wr-es-rules {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ielts-ink, #F2E6CC) 7%, var(--ielts-card-lift, #3D2D1F)) 0%,
      color-mix(in srgb, var(--ielts-ink, #F2E6CC) 3%, var(--ielts-card, #322519)) 100%);
  border: 1px solid color-mix(in srgb, var(--ielts-ink, #F2E6CC) 10%, var(--ielts-line, rgba(242, 230, 204, .10)));
  border-radius: 14px;
  padding: 1.3rem 1.5rem;
  margin-bottom: 1.6rem;
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .06);
}
.wr-es-rules-h {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ielts-ink, #F2E6CC);
  margin: 0 0 .7rem;
}
.wr-es-rules-h svg { color: #E5733F; }
.wr-es-rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.wr-es-rules-list li {
  position: relative;
  padding-left: 1.4rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ielts-ink-soft, #C7B695);
}
.wr-es-rules-list li::before {
  position: absolute;
  left: 0; top: .15em;
  content: '·';
  font-size: 1.4em;
  color: var(--ielts-honey, #D9A268);
  font-weight: 700;
}

.wr-es-prompts-preview {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-bottom: 1.8rem;
}
.wr-es-prompts-loading {
  padding: 1.2rem 1.5rem;
  background: var(--ielts-card, #322519);
  border: 1px dashed var(--ielts-line, rgba(242, 230, 204, .14));
  border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9rem;
  color: var(--ielts-ink-soft, #B6A484);
  text-align: center;
}
.wr-es-preview-card {
  background:
    linear-gradient(180deg,
      rgba(255, 251, 240, 0.97) 0%,
      rgba(243, 233, 211, 0.95) 100%);
  border: 1px solid rgba(31, 24, 18, 0.10);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  color: #1F1812;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 12px 24px -16px rgba(0, 0, 0, .55);
}
.wr-es-preview-tag {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #B57A2E;
  margin-bottom: .45rem;
}
.wr-es-preview-prompt {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #1F1812;
}

.wr-es-start-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.wr-es-error {
  background: var(--ielts-card, #322519);
  border: 1px solid color-mix(in srgb, #C24A2B 22%, var(--ielts-line, rgba(242, 230, 204, .10)));
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
  margin-top: 1rem;
}
.wr-es-error h2, .wr-es-error h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ielts-ink, #F2E6CC);
  margin: 0 0 .35rem;
}
.wr-es-error p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  color: var(--ielts-ink-soft, #B6A484);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   Active exam — top bar, tabs, prompt card, editor.
   Redesigned 2026-05-12: tighter container, more deliberate visual
   hierarchy, prompt card carries the task accent stripe, editor reads
   as exam paper. Critical fix: [hidden] panes must actually hide
   despite the flex display on the wrapper.
   ───────────────────────────────────────────────────────────── */

.wr-es-active {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 0 4rem;
}

.wr-es-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.4rem;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ielts-card-lift, #3D2D1F) 97%, transparent) 0%,
      color-mix(in srgb, var(--ielts-card-lift, #3D2D1F) 88%, transparent) 100%);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid color-mix(in srgb, var(--ielts-honey, #D9A268) 16%, var(--ielts-line, rgba(242, 230, 204, .10)));
  margin-bottom: 1.8rem;
  box-shadow: 0 14px 24px -22px rgba(0, 0, 0, .6);
}
.wr-es-bar-l { display: flex; align-items: center; gap: .6rem; }
.wr-es-bar-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ielts-honey, #D9A268);
}
.wr-es-bar-eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ielts-honey, #D9A268);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ielts-honey, #D9A268) 70%, transparent);
  animation: wr-es-bar-pulse 2.4s ease-in-out infinite;
}
@keyframes wr-es-bar-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

.wr-es-timer {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: .55rem 1.1rem .55rem .95rem;
  border-radius: 999px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ielts-honey, #D9A268) 18%, transparent) 0%,
      color-mix(in srgb, var(--ielts-honey, #D9A268) 10%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--ielts-honey, #D9A268) 38%, transparent);
  font-family: 'Source Serif 4', Georgia, serif;
  font-variant-numeric: tabular-nums;
  color: var(--ielts-honey, #D9A268);
  transition: background .25s, color .25s, border-color .25s;
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .12);
}
.wr-es-timer-icon { display: inline-flex; }
.wr-es-timer-num {
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.wr-es-timer.is-warning {
  background: linear-gradient(180deg,
    color-mix(in srgb, #E5733F 22%, transparent) 0%,
    color-mix(in srgb, #E5733F 12%, transparent) 100%);
  color: #FFCDB5;
  border-color: color-mix(in srgb, #E5733F 50%, transparent);
}
.wr-es-timer.is-danger {
  background: linear-gradient(180deg,
    color-mix(in srgb, #C24A2B 30%, transparent) 0%,
    color-mix(in srgb, #C24A2B 18%, transparent) 100%);
  color: #FFE6D6;
  border-color: color-mix(in srgb, #C24A2B 65%, transparent);
  animation: wr-es-pulse 1s ease-in-out infinite;
}
@keyframes wr-es-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #C24A2B 55%, transparent); }
  50%      { box-shadow: 0 0 0 12px transparent; }
}

.wr-es-submit {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .58rem 1.15rem;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: #2A1F17;
  background: linear-gradient(135deg, #F0BE7E 0%, #D9A268 60%, #C18D52 100%);
  border: 0;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 8px 18px -6px color-mix(in srgb, var(--ielts-honey, #D9A268) 55%, transparent);
  transition: filter .15s, transform .15s;
}
.wr-es-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Bottom-of-pane submit. Same honey button, but laid out as a full
   row centered below the counter strip so the student can submit
   right from where their last word lands — without scrolling back
   to the sticky top bar. */
.wr-es-submit-row {
  display: flex;
  justify-content: center;
  margin: 1.4rem 0 .4rem;
}
.wr-es-submit-bottom {
  justify-self: center;
  padding: .8rem 1.6rem;
  font-size: .94rem;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.wr-es-tabs {
  display: flex;
  gap: 4px;
  padding: 0 1.4rem;
  margin-bottom: -1px;          /* sits on the prompt card's top border */
  position: relative;
  z-index: 1;
}
.wr-es-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 1;
  padding: .85rem 1.2rem;
  border-radius: 14px 14px 0 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ielts-ink-soft, #B6A484);
  background: color-mix(in srgb, var(--ielts-ink, #F2E6CC) 3%, var(--ielts-card, #322519));
  border: 1px solid var(--ielts-line, rgba(242, 230, 204, .10));
  border-bottom: 0;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.wr-es-tab:hover:not(.is-active) {
  color: var(--ielts-ink, #F2E6CC);
  background: color-mix(in srgb, var(--ielts-ink, #F2E6CC) 6%, var(--ielts-card, #322519));
  transform: translateY(-2px);
}
.wr-es-tab.is-active {
  color: #1F1812;
  background: linear-gradient(180deg,
    rgba(255, 251, 240, 0.98) 0%,
    rgba(247, 238, 218, 0.97) 100%);
  border-color: rgba(31, 24, 18, 0.10);
  border-bottom: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 -3px 0 0 var(--ielts-honey, #D9A268) inset;
  padding-top: 1rem;
}
.wr-es-tab-l {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -.005em;
}
.wr-es-tab.is-active .wr-es-tab-l { color: #1F1812; }
.wr-es-tab-wc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--ielts-ink-mute, #7A6A52);
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ielts-ink-mute, #7A6A52) 14%, transparent);
}
.wr-es-tab.is-active .wr-es-tab-wc {
  color: #B57A2E;
  background: rgba(181, 122, 46, 0.14);
}
.wr-es-tab-wc.is-under { color: #C24A2B; background: rgba(194, 74, 43, 0.14); }
.wr-es-tab-wc.is-ok    { color: #5C8A6A; background: rgba(92, 138, 106, 0.16); }

/* ── Task pane ───────────────────────────────────────────────
   Critical: [hidden] must override the display: flex on the wrapper,
   otherwise both panes paint at once. */
.wr-es-task-pane {
  padding: 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.wr-es-task-pane[hidden] {
  display: none !important;
}

/* Prompt card — left honey accent stripe, larger type, more presence. */
.wr-es-prompt-card {
  position: relative;
  padding: 1.4rem 1.6rem 1.4rem 1.75rem;
  background:
    linear-gradient(180deg,
      rgba(255, 251, 240, 0.98) 0%,
      rgba(243, 233, 211, 0.96) 100%);
  border: 1px solid rgba(31, 24, 18, 0.12);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-radius: 0 0 14px 14px;
  color: #1F1812;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 14px 28px -20px rgba(0, 0, 0, .55);
}
.wr-es-prompt-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #D9A268 0%, #B57A2E 100%);
  border-radius: 0 0 0 14px;
}
.wr-es-prompt-tag {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #B57A2E;
  margin-bottom: .55rem;
}
.wr-es-prompt-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.55;
  color: #1F1812;
  letter-spacing: -.002em;
}

/* Chart wrap — only used for Task 1. */
.wr-es-chart-wrap {
  padding: 1.2rem 1.4rem;
  background:
    linear-gradient(180deg,
      rgba(255, 251, 240, 0.97) 0%,
      rgba(245, 235, 213, 0.95) 100%);
  border: 1px solid rgba(31, 24, 18, 0.10);
  border-radius: 14px;
  color: #1F1812;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 12px 24px -16px rgba(0, 0, 0, .55);
}
.wr-es-chart-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}
.wr-es-chart-wrap svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.wr-es-editor {
  width: 100%;
  min-height: 52vh;
  resize: vertical;
  padding: 1.4rem 1.6rem;
  border-radius: 14px;
  border: 1px solid rgba(31, 24, 18, 0.12);
  background:
    linear-gradient(180deg,
      rgba(255, 253, 246, 0.99) 0%,
      rgba(248, 240, 220, 0.97) 100%);
  color: #1F1812;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.06rem;
  line-height: 1.75;
  outline: none;
  caret-color: #B57A2E;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 14px 28px -18px rgba(0, 0, 0, .55);
  transition: border-color .15s, box-shadow .15s;
}
.wr-es-editor:focus {
  border-color: color-mix(in srgb, #B57A2E 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 0 3px color-mix(in srgb, #B57A2E 20%, transparent),
    0 14px 28px -18px rgba(0, 0, 0, .55);
}
.wr-es-editor::placeholder {
  color: #968a75;
  font-style: italic;
}

/* ── Word counter strip (under each editor) ───────────────────
   Big current count on the left + a progress bar + status text
   on the right. Colors shift with state:
     empty / under  → neutral
     ok             → mint
     over           → soft red */
.wr-es-wc-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
  padding: .8rem 1.1rem .85rem 1.2rem;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ielts-ink, #F2E6CC) 7%, var(--ielts-card-lift, #3D2D1F)) 0%,
      color-mix(in srgb, var(--ielts-ink, #F2E6CC) 3%, var(--ielts-card, #322519)) 100%);
  border: 1px solid color-mix(in srgb, var(--ielts-ink, #F2E6CC) 10%, var(--ielts-line, rgba(242, 230, 204, .10)));
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .05);
  --wc-accent: var(--ielts-ink-mute, #7A6A52);
  transition: border-color .2s;
}
.wr-es-wc-strip.is-ok      { --wc-accent: #6BA88A; border-color: color-mix(in srgb, #6BA88A 28%, transparent); }
.wr-es-wc-strip.is-under   { --wc-accent: var(--ielts-honey, #D9A268); }
.wr-es-wc-strip.is-over    { --wc-accent: #E5733F; border-color: color-mix(in srgb, #E5733F 36%, transparent); }
.wr-es-wc-strip.is-blocked {
  --wc-accent: #C24A2B;
  border-color: color-mix(in srgb, #C24A2B 55%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #C24A2B 12%, var(--ielts-card-lift, #3D2D1F)) 0%,
      color-mix(in srgb, #C24A2B 6%, var(--ielts-card, #322519)) 100%);
}
.wr-es-wc-strip.is-blocked .wr-es-wc-status { font-weight: 700; }

.wr-es-wc-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding-right: .8rem;
  border-right: 1px solid var(--ielts-line, rgba(242, 230, 204, .12));
}
.wr-es-wc-big {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variant-numeric: tabular-nums;
  font-size: 1.95rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--wc-accent);
  transition: color .2s;
}
.wr-es-wc-strip.is-empty .wr-es-wc-big { color: var(--ielts-ink-mute, #7A6A52); }
.wr-es-wc-l {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ielts-ink-mute, #7A6A52);
  margin-top: .25rem;
  white-space: nowrap;
}

.wr-es-wc-progress {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.wr-es-wc-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(242, 230, 204, .07);
  overflow: hidden;
}
.wr-es-wc-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--wc-accent);
  transition: width .2s ease, background-color .2s;
  box-shadow: 0 0 8px color-mix(in srgb, var(--wc-accent) 55%, transparent);
}
.wr-es-wc-row {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
}
.wr-es-wc-target {
  color: var(--ielts-ink-mute, #7A6A52);
  font-weight: 500;
  letter-spacing: .02em;
}
.wr-es-wc-status {
  color: var(--wc-accent);
  font-weight: 600;
  transition: color .2s;
}
.wr-es-wc-strip.is-empty .wr-es-wc-status { color: var(--ielts-ink-mute, #7A6A52); }

@media (max-width: 540px) {
  .wr-es-wc-strip { grid-template-columns: 1fr; gap: .6rem; }
  .wr-es-wc-num {
    flex-direction: row;
    align-items: baseline;
    gap: .55rem;
    border-right: 0;
    border-bottom: 1px solid var(--ielts-line, rgba(242, 230, 204, .12));
    padding: 0 0 .55rem;
    min-width: 0;
  }
  .wr-es-wc-l { margin-top: 0; }
}

/* ─────────────────────────────────────────────────────────────
   Submit overlay — cream-paper card with a 4-stage examiner
   checklist. Stages advance on a timer (set in wr-exam-simulator.js)
   so the 60-90s Opus wait reads as active. Pulsing ring around the
   currently-active marker draws the eye; the sweeping progress bar
   underneath keeps moving even when the active stage is "stuck".
   Matches the Essay Grader's overlay so the two tools feel like
   the same product.
   ───────────────────────────────────────────────────────────── */
.wr-es-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(20, 14, 8, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: wr-es-overlay-in .22s ease-out;
}
@keyframes wr-es-overlay-in { from { opacity: 0; } to { opacity: 1; } }

.wr-es-overlay-card {
  width: 100%;
  max-width: 460px;
  padding: 1.7rem 1.8rem 1.4rem;
  background:
    linear-gradient(180deg,
      rgba(255, 251, 240, 0.99) 0%,
      rgba(243, 233, 211, 0.97) 100%);
  border: 1px solid rgba(181, 122, 46, 0.32);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 30px 60px -24px rgba(0, 0, 0, .65),
    0 0 40px -16px rgba(181, 122, 46, 0.3);
  animation: wr-es-overlay-card-in .42s cubic-bezier(.2, .8, .2, 1);
}
@keyframes wr-es-overlay-card-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.wr-es-overlay-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #B57A2E;
  margin-bottom: .55rem;
}
.wr-es-overlay-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px color-mix(in srgb, currentColor 55%, transparent);
}
.wr-es-overlay-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -.015em;
  color: #1F1812;
  margin: 0 0 1.1rem;
}

.wr-es-overlay-stages {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.wr-es-overlay-stages li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .65rem;
  border-radius: 9px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .88rem;
  color: #9A8C72;
  transition: background-color .28s ease, color .28s ease;
}
.wr-es-overlay-stages li.is-done {
  color: #4A3F33;
}
.wr-es-overlay-stages li.is-active {
  color: #1F1812;
  background: rgba(181, 122, 46, 0.10);
  font-weight: 600;
}

.wr-es-stage-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.6px solid #C8B89C;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .25s ease, background-color .25s ease;
}
.wr-es-overlay-stages li.is-done .wr-es-stage-icon {
  border-color: #5C8A6A;
  background: #5C8A6A;
}
.wr-es-stage-check {
  display: block;
  width: 9px;
  height: 5px;
  opacity: 0;
  border-left: 1.8px solid #FFF8E8;
  border-bottom: 1.8px solid #FFF8E8;
  transform: rotate(-45deg) translate(0, -1px);
  transition: opacity .2s ease .05s;
}
.wr-es-overlay-stages li.is-done .wr-es-stage-check { opacity: 1; }

.wr-es-overlay-stages li.is-active .wr-es-stage-icon {
  border-color: #B57A2E;
}
.wr-es-overlay-stages li.is-active .wr-es-stage-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.6px solid rgba(181, 122, 46, 0.55);
  animation: wr-es-stage-pulse 1.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
.wr-es-overlay-stages li.is-active .wr-es-stage-icon::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #B57A2E;
}
@keyframes wr-es-stage-pulse {
  0%   { transform: scale(.9); opacity: .85; }
  100% { transform: scale(1.7); opacity: 0; }
}

.wr-es-overlay-progress {
  position: relative;
  height: 4px;
  background: rgba(31, 24, 18, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .8rem;
}
.wr-es-overlay-progress-bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 36%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(181, 122, 46, 0.85) 50%,
    transparent 100%);
  border-radius: 999px;
  animation: wr-es-progress-indet 1.6s ease-in-out infinite;
}
@keyframes wr-es-progress-indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(280%); }
}

.wr-es-overlay-foot {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .78rem;
  color: #7A6A55;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────
   Result page — graded exam report (cream-paper redesign).

   The page background stays the dark IELTS chocolate. Every CARD
   below sits on it as cream paper — same pattern as the lesson
   cards and the Essay Grader task picker. The "one thing to fix
   first" is the lone honey-saturated card kept warm and loud as
   the highlight takeaway. Page-level titles (eyebrow + h1) remain
   cream-on-dark since they sit on the page bg, not on a card.

   Palette inside cards:
     Background     paper gradient (#FFFBF0 → #F3E9D3, 96-97% opacity)
     Border         1px dark hairline (#1F1812 @ 10-12%)
     Text           #1F1812 (paper-ink)
     Soft text      #4A3F33 (paper-ink-soft)
     Muted text     #7A6A55 (paper-ink-mute)
     Honey accents  #B57A2E (paper-honey) — darker than the dark-bg
                    honey so it reads on a light surface
   ───────────────────────────────────────────────────────────── */

.wr-es-result-loading {
  padding: 4rem 1rem;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ielts-ink-soft, #B6A484);
}

.wr-es-result-page {
  max-width: 940px;
}

.wr-es-result-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  color: var(--ielts-ink-mute, #7A6A52);
  margin-bottom: .9rem;
}
.wr-es-result-eyebrow > span {
  display: inline-flex; align-items: center; gap: 5px;
}
.wr-es-result-tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ielts-honey, #D9A268);
  padding: 3px 10px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ielts-honey, #D9A268) 14%, transparent);
}
.wr-es-result-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.1;
  color: var(--ielts-ink, #F2E6CC);
  margin: 0 0 1.8rem;
}

/* Shared cream-paper surface — every card on the result page uses
   the same recipe with small variations. */
.wr-es-paper {
  background:
    linear-gradient(180deg,
      rgba(255, 251, 240, 0.97) 0%,
      rgba(243, 233, 211, 0.95) 100%);
  border: 1px solid rgba(31, 24, 18, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 14px 28px -18px rgba(0, 0, 0, 0.55);
}

/* ── Result hero — overall + per-task bands ───────────────── */
.wr-es-rhero {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 1.4fr);
  gap: 1.2rem;
  margin-bottom: 2.4rem;
}
.wr-es-rhero-overall {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.8rem 1.2rem;
  background:
    radial-gradient(70% 80% at 50% 25%, rgba(181, 122, 46, 0.14) 0%, transparent 65%),
    linear-gradient(180deg, rgba(255, 251, 240, 0.97) 0%, rgba(243, 233, 211, 0.95) 100%);
  border: 1px solid rgba(181, 122, 46, 0.32);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 18px 38px -18px rgba(0, 0, 0, 0.55),
    0 0 32px -12px rgba(181, 122, 46, 0.22);
}
.wr-es-rhero-num {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 6rem;
  font-weight: 600;
  color: #B57A2E;
  line-height: 1;
  letter-spacing: -.04em;
  text-shadow: 0 2px 12px rgba(181, 122, 46, 0.22);
}
.wr-es-rhero-l {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #7A6A55;
  margin-top: .5rem;
}
.wr-es-rhero-tasks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.wr-es-rhero-task {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.4rem 1rem;
  background:
    linear-gradient(180deg, rgba(255, 251, 240, 0.97) 0%, rgba(243, 233, 211, 0.95) 100%);
  border: 1px solid rgba(31, 24, 18, 0.10);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 12px 24px -16px rgba(0, 0, 0, 0.5);
}
.wr-es-rhero-task-tag {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7A6A55;
  text-align: center;
}
.wr-es-rhero-task-num {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 3rem;
  font-weight: 600;
  color: #B57A2E;
  line-height: 1;
  letter-spacing: -.02em;
  margin: .4rem 0 .25rem;
}
.wr-es-rhero-task-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .78rem;
  color: #4A3F33;
}

/* ── Cross-essay analysis (prestige feature, still cream paper) ── */
.wr-es-xa {
  position: relative;
  padding: 1.8rem 1.8rem 1.6rem;
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(181, 122, 46, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255, 251, 240, 0.97) 0%, rgba(243, 233, 211, 0.95) 100%);
  border: 1px solid rgba(181, 122, 46, 0.25);
  border-radius: 18px;
  margin-bottom: 2.2rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 18px 36px -18px rgba(0, 0, 0, 0.55);
}
.wr-es-xa-head { margin-bottom: 1.2rem; }
.wr-es-xa-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #1F1812;
  margin: 0 0 .35rem;
}
.wr-es-xa-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .88rem;
  line-height: 1.5;
  color: #4A3F33;
  margin: 0;
  max-width: 56ch;
}
.wr-es-xa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .8rem;
  margin-bottom: 1.2rem;
}
.wr-es-xa-item {
  padding: 1rem 1.1rem;
  background: rgba(255, 248, 226, 0.7);
  border: 1px solid rgba(31, 24, 18, 0.08);
  border-radius: 12px;
}
.wr-es-xa-item-h {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #B57A2E;
  margin-bottom: .55rem;
}
.wr-es-xa-item-p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9rem;
  line-height: 1.55;
  color: #1F1812;
}

/* Priority fix — kept as the loud honey-gradient card; this is the
   one surface that's meant to break the cream-paper rhythm so the
   single most important takeaway pulls the eye. */
.wr-es-xa-priority {
  padding: 1.2rem 1.3rem;
  background:
    linear-gradient(135deg, #C68A3A 0%, #B57A2E 55%, #94621F 100%);
  border: 1px solid rgba(80, 50, 14, 0.32);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 215, 0.32),
    0 8px 22px -10px rgba(149, 99, 30, 0.55);
}
.wr-es-xa-priority-h {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FFE6BF;
  margin-bottom: .5rem;
}
.wr-es-xa-priority-p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #FFF7E6;
  font-weight: 500;
}

/* ── Time breakdown ─────────────────────────────────────── */
.wr-es-time {
  padding: 1.4rem 1.6rem;
  background:
    linear-gradient(180deg, rgba(255, 251, 240, 0.97) 0%, rgba(243, 233, 211, 0.95) 100%);
  border: 1px solid rgba(31, 24, 18, 0.10);
  border-radius: 14px;
  margin-bottom: 2.4rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 14px 28px -18px rgba(0, 0, 0, 0.5);
}
.wr-es-time-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: #1F1812;
  margin: 0 0 .9rem;
}
.wr-es-time-bar {
  display: flex;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(31, 24, 18, 0.12);
  background: rgba(31, 24, 18, 0.05);
}
.wr-es-time-seg {
  display: flex;
  align-items: center;
  padding: 0 .85rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.wr-es-time-seg.is-t1 {
  background: linear-gradient(90deg, #D9A268 0%, #E8B574 100%);
  color: #2A1F17;
}
.wr-es-time-seg.is-t2 {
  background: linear-gradient(90deg, #B57A2E 0%, #8A5A1A 100%);
  color: #FFF6E2;
}
.wr-es-time-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: .9rem;
}
.wr-es-time-leg {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .88rem;
  color: #1F1812;
  flex-wrap: wrap;
}
.wr-es-time-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wr-es-time-dot.is-t1 { background: #D9A268; }
.wr-es-time-dot.is-t2 { background: #8A5A1A; }
.wr-es-time-leg-l { font-weight: 600; }
.wr-es-time-leg-n {
  font-size: .78rem;
  color: #7A6A55;
  font-style: italic;
}

/* ── Per-task block ───────────────────────────────────────── */
.wr-es-task-block {
  padding: 0;
  margin-bottom: 1rem;
}

/* Section divider — the dramatic visual break that says "you are
   now reading Task 2, not Task 1". Sits OUTSIDE any cream card on
   the dark page background. Big serif numeral on the left, band
   chip on the right, thick honey rule beneath them. The extra top
   margin gives the page a real "chapter break" feeling. */
.wr-es-task-divider {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 4.5rem 0 1.6rem;
  padding-bottom: 1.1rem;
  border-bottom: 2px solid rgba(217, 162, 104, 0.45);
  position: relative;
}
.wr-es-task-divider::after {
  /* Soft honey gradient fade extending under the rule so it doesn't
     look like a hard line cutting the page. */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 8px;
  background: linear-gradient(180deg,
    rgba(217, 162, 104, 0.18) 0%,
    transparent 100%);
  pointer-events: none;
}
.wr-es-task-block:first-of-type .wr-es-task-divider {
  margin-top: 3.2rem;
}
.wr-es-task-divider-l {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.wr-es-task-divider-num {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1;
  color: var(--ielts-ink, #F2E6CC);
}
.wr-es-task-divider-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ielts-honey, #D9A268);
}
.wr-es-task-divider-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 84px;
  padding: .55rem 1rem;
  background: rgba(217, 162, 104, 0.12);
  border: 1px solid rgba(217, 162, 104, 0.32);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, 0.08);
}
.wr-es-task-divider-band-num {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ielts-honey, #D9A268);
  letter-spacing: -.01em;
}
.wr-es-task-divider-band-l {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ielts-ink-mute, #7A6A52);
  margin-top: .25rem;
}

/* Prompt card sits underneath the divider — just the prompt text now,
   no band pill (that moved up to the divider header). */
.wr-es-task-block-head {
  padding: 1.2rem 1.5rem;
  background:
    linear-gradient(180deg, rgba(255, 251, 240, 0.97) 0%, rgba(243, 233, 211, 0.95) 100%);
  border: 1px solid rgba(31, 24, 18, 0.10);
  border-radius: 14px;
  margin-bottom: 1.2rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 14px 28px -18px rgba(0, 0, 0, 0.5);
}
.wr-es-task-block-prompt {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.45;
  color: #1F1812;
  letter-spacing: -.005em;
}

/* ── Rubric grid ────────────────────────────────────────────── */
.wr-es-rubric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-bottom: 1.4rem;
}
.wr-es-rubric-cell {
  padding: .85rem 1rem;
  background:
    linear-gradient(180deg, rgba(255, 251, 240, 0.97) 0%, rgba(243, 233, 211, 0.95) 100%);
  border: 1px solid rgba(31, 24, 18, 0.10);
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.wr-es-rubric-cell-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.wr-es-rubric-cell-l {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7A6A55;
}
.wr-es-rubric-cell-b {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  color: #B57A2E;
  line-height: 1;
}
.wr-es-rubric-cell-c {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .85rem;
  line-height: 1.5;
  color: #4A3F33;
}

/* ── Bullets ──────────────────────────────────────────────── */
.wr-es-bullets {
  margin-bottom: 1.4rem;
}
.wr-es-bullets-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0 0 .55rem;
  color: var(--ielts-ink, #F2E6CC);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.wr-es-bullets-h::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
}
.wr-es-bullets.is-praise .wr-es-bullets-h::before {
  background: #5C8A6A;
  box-shadow: 0 0 8px color-mix(in srgb, #6BA88A 50%, transparent);
}
.wr-es-bullets.is-fix .wr-es-bullets-h::before {
  background: var(--ielts-honey, #D9A268);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ielts-honey, #D9A268) 50%, transparent);
}
.wr-es-bullets ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.wr-es-bullets li {
  position: relative;
  padding: .6rem 1rem .6rem 2.1rem;
  background:
    linear-gradient(180deg, rgba(255, 251, 240, 0.97) 0%, rgba(243, 233, 211, 0.95) 100%);
  border: 1px solid rgba(31, 24, 18, 0.10);
  border-left: 3px solid rgba(31, 24, 18, 0.10);
  border-radius: 9px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  line-height: 1.5;
  color: #1F1812;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.wr-es-bullets li::before {
  position: absolute;
  left: .85rem;
  top: .8rem;
  font-size: .9rem;
  font-weight: 700;
}
.wr-es-bullets.is-praise li {
  border-left-color: #5C8A6A;
}
.wr-es-bullets.is-praise li::before {
  content: '✓';
  color: #5C8A6A;
}
.wr-es-bullets.is-fix li {
  border-left-color: #B57A2E;
}
.wr-es-bullets.is-fix li::before {
  content: '→';
  color: #B57A2E;
}

/* ── Essay block + annotations ───────────────────────────────
   Essay sits on cream paper. Annotations are highlighter-style: a
   warm honey wash for issues, a soft sage wash for praises — both
   chosen for readability on cream rather than dark. */
.wr-es-essay-block {
  background:
    linear-gradient(180deg, rgba(255, 251, 240, 0.97) 0%, rgba(243, 233, 211, 0.95) 100%);
  border: 1px solid rgba(31, 24, 18, 0.10);
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.4rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 14px 28px -18px rgba(0, 0, 0, 0.5);
}
.wr-es-essay-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.08rem;
  font-weight: 500;
  color: #1F1812;
  margin-bottom: .85rem;
}
.wr-es-essay-h-hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 400;
  color: #7A6A55;
}
.wr-es-essay-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.04rem;
  line-height: 1.75;
  color: #1F1812;
}
.wr-es-essay-body p { margin: 0 0 1rem; }
.wr-es-essay-body p:last-child { margin-bottom: 0; }

.wr-es-anno {
  position: relative;
  padding: 1px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .15s;
}
.wr-es-anno-issue {
  background: rgba(217, 162, 104, 0.32);
  border-bottom: 1px dashed rgba(149, 94, 22, 0.6);
}
.wr-es-anno-issue:hover, .wr-es-anno-issue.is-active {
  background: rgba(217, 162, 104, 0.52);
}
.wr-es-anno-praise {
  background: rgba(107, 168, 138, 0.28);
  border-bottom: 1px dashed rgba(60, 122, 92, 0.55);
}
.wr-es-anno-praise:hover, .wr-es-anno-praise.is-active {
  background: rgba(107, 168, 138, 0.45);
}
.wr-es-anno-num {
  margin-left: 2px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .58em;
  font-weight: 700;
  vertical-align: super;
  opacity: .95;
  color: #6B4E1A;
}
.wr-es-anno-praise .wr-es-anno-num { color: #3C7A5C; }

.wr-es-anno-pop {
  margin: -.4rem 0 1rem;
  padding: .9rem 1.05rem;
  background:
    linear-gradient(180deg, rgba(255, 251, 240, 0.99) 0%, rgba(245, 235, 213, 0.97) 100%);
  border: 1px solid rgba(31, 24, 18, 0.12);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 12px 24px -16px rgba(0, 0, 0, 0.4);
}
.wr-es-anno-pop.is-issue  { border-left: 3px solid #B57A2E; }
.wr-es-anno-pop.is-praise { border-left: 3px solid #5C8A6A; }
.wr-es-anno-pop-h {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .35rem;
}
.wr-es-anno-pop-num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  color: #B57A2E;
  background: rgba(181, 122, 46, 0.16);
  border: 1px solid rgba(181, 122, 46, 0.32);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wr-es-anno-pop.is-praise .wr-es-anno-pop-num {
  color: #5C8A6A;
  background: rgba(92, 138, 106, 0.16);
  border-color: rgba(92, 138, 106, 0.32);
}
.wr-es-anno-pop-cat {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4A3F33;
}
.wr-es-anno-pop-x {
  margin-left: auto;
  background: transparent;
  border: 0;
  font-size: 1.3rem;
  line-height: 1;
  color: #7A6A55;
  cursor: pointer;
  padding: 0;
}
.wr-es-anno-pop-x:hover { color: #1F1812; }
.wr-es-anno-pop-n {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  line-height: 1.55;
  color: #1F1812;
}

/* ── Model rewrite ───────────────────────────────────────── */
.wr-es-model-block {
  background:
    radial-gradient(60% 100% at 100% 0%, rgba(181, 122, 46, 0.13) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255, 251, 240, 0.97) 0%, rgba(243, 233, 211, 0.95) 100%);
  border: 1px solid rgba(181, 122, 46, 0.28);
  border-radius: 14px;
  padding: 1.3rem 1.5rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 14px 28px -18px rgba(0, 0, 0, 0.45);
}
.wr-es-model-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.08rem;
  font-weight: 500;
  color: #B57A2E;
  margin-bottom: .7rem;
}
.wr-es-model-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.04rem;
  line-height: 1.75;
  color: #1F1812;
  white-space: pre-wrap;
}

/* ── Result action buttons ───────────────────────────────── */
.wr-es-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 2.4rem;
}

/* ── Responsive (result page) ──────────────────────────── */
@media (max-width: 760px) {
  .wr-es-result-h { font-size: 1.7rem; }
  .wr-es-rhero {
    grid-template-columns: 1fr;
    gap: .8rem;
  }
  .wr-es-rhero-num { font-size: 4.4rem; }
  .wr-es-rhero-task-num { font-size: 2.2rem; }
  .wr-es-xa-grid { grid-template-columns: 1fr; }
  .wr-es-rubric-grid { grid-template-columns: 1fr; }
  .wr-es-task-block-head {
    grid-template-columns: 1fr;
  }
  .wr-es-task-block-band { align-self: start; }
  .wr-es-time-row { grid-template-columns: 1fr; }
  .wr-es-task-divider {
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 3.2rem;
  }
  .wr-es-task-divider-num { font-size: 1.9rem; }
  .wr-es-task-divider-band { min-width: 72px; padding: .45rem .8rem; }
  .wr-es-task-divider-band-num { font-size: 1.6rem; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 760px) {
  .wr-es-page { padding: 1.2rem 0 3rem; }
  .wr-es-title { font-size: 2rem; }
  .wr-es-hero-bullets { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .wr-es-hero-b-num { font-size: 1.8rem; }

  .wr-es-bar { grid-template-columns: auto 1fr; gap: .6rem; padding: .8rem 1rem; }
  .wr-es-bar-l { display: none; }
  .wr-es-submit { font-size: .8rem; padding: .45rem .85rem; }
  .wr-es-tabs { padding: 0 1rem; }
  .wr-es-task-pane { padding: 0 1rem; }
  .wr-es-editor { min-height: 55vh; padding: 1rem 1.1rem; }
}

/* ─────────────────────────────────────────────────────────────
   God-only validation launcher (Exam Simulator landing)
   ───────────────────────────────────────────────────────────── */
.wr-es-validation-row {
  margin-top: 1.6rem;
  padding: 1.1rem 1.2rem 1rem;
  background:
    linear-gradient(180deg, rgba(217, 162, 104, 0.08) 0%, rgba(217, 162, 104, 0.03) 100%);
  border: 1px dashed rgba(217, 162, 104, 0.42);
  border-radius: 12px;
}
.wr-es-validation-h {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ielts-honey, #D9A268);
  margin-bottom: .8rem;
  display: flex; align-items: baseline; gap: .8rem;
}
.wr-es-validation-sub {
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 500;
  color: var(--ielts-ink-mute, #7A6A52);
}
.wr-es-validation-empty {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .86rem;
  color: var(--ielts-ink-soft, #B6A484);
  margin: 0;
  line-height: 1.5;
}
.wr-es-validation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .55rem;
}
.wr-es-validation-card {
  text-align: left;
  cursor: pointer;
  padding: .8rem .95rem;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ielts-ink, #F2E6CC) 7%, var(--ielts-card-lift, #3D2D1F)) 0%,
      color-mix(in srgb, var(--ielts-ink, #F2E6CC) 3%, var(--ielts-card, #322519)) 100%);
  border: 1px solid color-mix(in srgb, var(--ielts-honey, #D9A268) 22%, transparent);
  border-radius: 9px;
  color: var(--ielts-ink, #F2E6CC);
  font: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.wr-es-validation-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ielts-honey, #D9A268) 55%, transparent);
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .55);
}
.wr-es-validation-card-h {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .6rem;
  margin-bottom: .35rem;
}
.wr-es-validation-card-source {
  font-weight: 600;
  font-size: .93rem;
}
.wr-es-validation-card-target {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .85rem;
  color: var(--ielts-honey, #D9A268);
}
.wr-es-validation-card-tasks {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem;
  font-size: .76rem;
  color: var(--ielts-ink-mute, #7A6A52);
}

/* Validation tag on the result page eyebrow */
.wr-es-tag-validation {
  background: rgba(217, 162, 104, 0.18) !important;
  color: var(--ielts-honey, #D9A268) !important;
  border: 1px solid rgba(217, 162, 104, 0.42) !important;
}

/* ─────────────────────────────────────────────────────────────
   Validation comparison table (result page, validation runs only)
   ───────────────────────────────────────────────────────────── */
.wr-es-vc {
  margin-bottom: 2.2rem;
  padding: 1.4rem 1.5rem 1.2rem;
  background:
    linear-gradient(180deg, rgba(255, 251, 240, 0.97) 0%, rgba(243, 233, 211, 0.95) 100%);
  border: 1px solid rgba(31, 24, 18, 0.10);
  border-left: 4px solid #B57A2E;
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 14px 28px -18px rgba(0, 0, 0, 0.5);
}
.wr-es-vc-head { margin-bottom: 1rem; }
.wr-es-vc-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.3rem; font-weight: 500;
  color: #1F1812;
  margin: 0 0 .25rem;
}
.wr-es-vc-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  color: #7A6A55;
  margin: 0;
}
.wr-es-vc-table {
  display: flex; flex-direction: column; gap: .2rem;
}
.wr-es-vc-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) 60px 30px 60px 70px;
  gap: .6rem;
  align-items: center;
  padding: .4rem .55rem;
  border-radius: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .88rem;
  color: #1F1812;
}
.wr-es-vc-row.wr-es-vc-header {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #7A6A55;
  border-bottom: 1px solid rgba(31,24,18,.08);
  border-radius: 0;
}
.wr-es-vc-label { font-weight: 500; }
.wr-es-vc-ai,
.wr-es-vc-official {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.1rem; font-weight: 600;
  text-align: center;
}
.wr-es-vc-ai { color: #4A7BB5; }
.wr-es-vc-official { color: #1F1812; }
.wr-es-vc-arrow {
  text-align: center;
  color: #9A8C72;
  font-size: .72rem;
}
.wr-es-vc-drift {
  text-align: right;
  font-size: .82rem;
  font-weight: 600;
}
.wr-es-vc-row.is-good   .wr-es-vc-drift { color: #3C7A5C; }
.wr-es-vc-row.is-warn   .wr-es-vc-drift { color: #B57A2E; }
.wr-es-vc-row.is-bad    .wr-es-vc-drift { color: #B8552F; }
.wr-es-vc-row.is-good   { background: rgba(92,138,106,.06); }
.wr-es-vc-row.is-warn   { background: rgba(181,122,46,.06); }
.wr-es-vc-row.is-bad    { background: rgba(184,85,47,.07); }

/* Submission-mode selector on the start-confirm page */
.wr-es-mode {
  margin: 1.5rem 0;
  padding: 1.1rem 1.2rem;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ielts-ink, #F2E6CC) 6%, var(--ielts-card-lift, #3D2D1F)) 0%,
      color-mix(in srgb, var(--ielts-ink, #F2E6CC) 3%, var(--ielts-card, #322519)) 100%);
  border: 1px solid var(--ielts-line, rgba(242, 230, 204, .14));
  border-radius: 12px;
}
.wr-es-mode-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.1rem; font-weight: 500;
  color: var(--ielts-ink, #F2E6CC);
  margin: 0 0 .8rem;
}
.wr-es-mode-opt {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .8rem .9rem;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color .15s;
  margin-bottom: .4rem;
}
.wr-es-mode-opt:last-child { margin-bottom: 0; }
.wr-es-mode-opt:hover {
  background: rgba(242, 230, 204, .04);
}
.wr-es-mode-opt input[type="radio"] {
  margin-top: .3rem;
  accent-color: var(--ielts-honey, #D9A268);
  cursor: pointer;
}
.wr-es-mode-opt:has(input:checked) {
  background: color-mix(in srgb, var(--ielts-honey, #D9A268) 10%, transparent);
  outline: 1px solid color-mix(in srgb, var(--ielts-honey, #D9A268) 38%, transparent);
}
.wr-es-mode-body { flex: 1; }
.wr-es-mode-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .95rem; font-weight: 600;
  color: var(--ielts-ink, #F2E6CC);
  display: flex; align-items: center; gap: .55rem;
  margin-bottom: .2rem;
}
.wr-es-mode-tag {
  font-size: .6rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ielts-honey, #D9A268);
  background: color-mix(in srgb, var(--ielts-honey, #D9A268) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ielts-honey, #D9A268) 32%, transparent);
  padding: 1px 7px;
  border-radius: 4px;
}
.wr-es-mode-desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ielts-ink-soft, #B6A484);
}

/* ─────────────────────────────────────────────────────────────────
   RESULT PAGE V2 — full-width tabbed bento layout
   The old centered/stacked result lives at .wr-es-result-page and
   is now superseded by .wr-es-rv2 which uses the whole viewport.
   ───────────────────────────────────────────────────────────── */
.wr-es-result-fullwidth {
  max-width: 100%;
}
.wr-es-rv2 {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 1.4rem 1.6rem 4rem;
  display: grid;
  gap: 1.4rem;
}
.wr-es-rv2-top {
  display: grid;
  gap: .7rem;
}
.wr-es-rv2-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  font-size: .8rem;
  color: #C9B89C;
}
.wr-es-rv2-meta svg { margin-right: .25rem; vertical-align: -2px; }
.wr-es-rv2-tag {
  display: inline-flex;
  align-items: center;
  padding: .25rem .65rem;
  background: rgba(181,122,46,.16);
  color: #E8B574;
  border-radius: 999px;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}
.wr-es-rv2-tag.is-validation { background: rgba(95,138,106,.18); color: #94c2a3; }
.wr-es-rv2-h {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Source Serif Pro', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: #FBF6EC;
  letter-spacing: -.005em;
}

/* ── Hero row ─────────────────────────────────────────────── */
.wr-es-rv2-hero {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 1.4rem;
  align-items: stretch;
}
.wr-es-rv2-hero.is-solo { grid-template-columns: 1fr; }
.wr-es-rv2-band-card {
  background: var(--cream, #FBF6EC);
  border-radius: 18px;
  padding: 2rem 2.2rem;
  display: grid;
  gap: .35rem;
  align-content: center;
  text-align: center;
  border-left: 4px solid #B57A2E;
}
.wr-es-rv2-band-num {
  font-family: 'Cormorant Garamond', 'Source Serif Pro', Georgia, serif;
  font-size: 6rem;
  font-weight: 600;
  line-height: 1;
  color: #B57A2E;
}
.wr-es-rv2-band-l {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8a7a64;
}
.wr-es-rv2-band-sub {
  margin-top: .7rem;
  font-size: .9rem;
  color: #4A3A26;
  font-weight: 600;
}

/* ── Cross-essay analysis grid (right of band card) ─────── */
.wr-es-rv2-cross-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.wr-es-rv2-cross-card {
  background: var(--cream, #FBF6EC);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  display: grid;
  gap: .35rem;
  align-content: start;
}
.wr-es-rv2-cross-l {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #B57A2E;
}
.wr-es-rv2-cross-b {
  font-size: .9rem;
  line-height: 1.5;
  color: #2A1F12;
}

/* ── Tab row ─────────────────────────────────────────────── */
.wr-es-rv2-tabs {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}
.wr-es-rv2-tab {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1.3rem;
  background: rgba(251,246,236,.06);
  color: #C9B89C;
  border: 1px solid rgba(201,184,156,.18);
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.wr-es-rv2-tab:hover {
  background: rgba(251,246,236,.1);
  color: #FBF6EC;
}
.wr-es-rv2-tab.is-active {
  background: var(--cream, #FBF6EC);
  color: #2A1F12;
  border-color: #B57A2E;
}
.wr-es-rv2-tab-b {
  font-size: .8rem;
  padding: .2rem .55rem;
  background: rgba(181,122,46,.18);
  color: #B57A2E;
  border-radius: 999px;
  letter-spacing: .04em;
}
.wr-es-rv2-tab.is-active .wr-es-rv2-tab-b {
  background: #B57A2E;
  color: #FBF6EC;
}

/* ── Tab panels — wide content area for the selected task ── */
.wr-es-rv2-panels {
  display: grid;
}
.wr-es-rv2-panel {
  display: grid;
  gap: 1rem;
}
.wr-es-rv2-panel[hidden] { display: none; }

/* The existing _renderTaskBlock content (.wr-es-task-block / divider /
   essay block / rubric grid) was designed for a narrower stacked
   layout; let it breathe inside the wide panels. */
.wr-es-rv2-panel .wr-es-task-block { padding: 1.6rem 1.8rem; }

/* ── Where to focus next panel ─────────────────────────── */
.wr-es-rv2-coach {
  display: grid;
  gap: 1rem;
}
.wr-es-rv2-coach-head { display: grid; gap: .3rem; }
.wr-es-rv2-coach-title {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Source Serif Pro', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: #FBF6EC;
}
.wr-es-rv2-coach-sub {
  margin: 0;
  font-size: .9rem;
  color: #C9B89C;
  max-width: 60ch;
}
.wr-es-rv2-coach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .9rem;
}
.wr-es-rv2-coach-card {
  background: var(--cream, #FBF6EC);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  display: grid;
  gap: .55rem;
  align-content: start;
  border-left: 3px solid #B08068;
}
.wr-es-rv2-coach-h {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #2A1F12;
}
.wr-es-rv2-coach-b {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: #4A3A26;
}
.wr-es-rv2-coach-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .25rem;
}
.wr-es-rv2-coach-btn {
  display: inline-flex;
  align-items: center;
  padding: .45rem .85rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .005em;
}
.wr-es-rv2-coach-btn.is-lesson {
  background: rgba(181,122,46,.14);
  color: #2A1F12;
}
.wr-es-rv2-coach-btn.is-lesson:hover { background: rgba(181,122,46,.22); }
.wr-es-rv2-coach-btn.is-tool {
  background: #B57A2E;
  color: #FBF6EC;
}
.wr-es-rv2-coach-btn.is-tool:hover { background: #9A6624; }

.wr-es-rv2-actions {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  padding-top: .4rem;
}

/* ── Narrow screen fallback (we don't need full mobile but
      avoid an outright broken layout at <960px). ─────────── */
@media (max-width: 960px) {
  .wr-es-rv2 { padding: 1rem 1rem 3rem; }
  .wr-es-rv2-hero { grid-template-columns: 1fr; }
  .wr-es-rv2-band-num { font-size: 4.6rem; }
  .wr-es-rv2-cross-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .wr-es-rv2-panel .wr-es-task-block { padding: 1.2rem 1.3rem; }
}

/* ── Mode picker on landing ────────────────────────────────
   Three cards, vertical stack. Each card spans full width
   inside the existing 880px landing container — they're the
   primary CTA of the page so we don't shy from prominence. */
.wr-es-modes {
  display: grid;
  gap: .85rem;
  margin: 1.4rem 0 1rem;
}
.wr-es-mode-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1.2rem 1.4rem;
  background: var(--cream, #FBF6EC);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  border-left: 4px solid #B57A2E;
  transition: transform .12s ease, box-shadow .12s ease;
}
.wr-es-mode-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px -8px rgba(0,0,0,.35);
}
.wr-es-mode-card.is-primary {
  border-left-color: #B57A2E;
  background: linear-gradient(135deg, #FBF6EC 0%, #F4E9D2 100%);
}
.wr-es-mode-card.is-disabled {
  opacity: .42;
  pointer-events: none;
  transform: none !important;
}
.wr-es-mode-card-l { display: grid; gap: .35rem; }
.wr-es-mode-card-eyebrow {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #B57A2E;
}
.wr-es-mode-card-h {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Source Serif Pro', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #2A1F12;
  letter-spacing: -.005em;
}
.wr-es-mode-card-p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: #4A3A26;
}
.wr-es-mode-card-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(181,122,46,.15);
  color: #B57A2E;
}
.wr-es-mode-card:hover .wr-es-mode-card-arrow {
  background: #B57A2E;
  color: #FBF6EC;
}

/* Credit cost chip in the start-confirm eyebrow */
.wr-es-mode-cost {
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  background: rgba(181,122,46,.18);
  color: #B57A2E;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Timer overrun state — pulses red after 60-min mark passes.
   Same shape as .is-danger but the meaning is "you're past
   the exam-time mark", not "less than a minute left". */
.wr-es-timer.is-overrun {
  background: #C04040;
  color: #FBF6EC;
  animation: wr-es-timer-pulse 1.8s ease-in-out infinite;
}
@keyframes wr-es-timer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,64,64,.45); }
  50%      { box-shadow: 0 0 0 6px rgba(192,64,64,0); }
}

/* ═════════════════════════════════════════════════════════════════
   RESULT PAGE V3 — designed to match the agreed mockup. Full-width,
   dashboard-style bento. The old .wr-es-rv2 classes are unused but
   left in place for now (next pass can sweep them).
   ═════════════════════════════════════════════════════════════════ */

.wr-es-r3 {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 1.6rem 1.8rem 4rem;
  display: grid;
  gap: 1.3rem;
}

/* ── Top bar ─────────────────────────────────────────────── */
.wr-es-r3-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.wr-es-r3-top-l {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.wr-es-r3-mode-pill {
  display: inline-flex;
  align-items: center;
  padding: .35rem .9rem;
  background: #B57A2E;
  color: #FBF6EC;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .005em;
}
.wr-es-r3-mode-pill.is-validation {
  background: rgba(95,138,106,.32);
  color: #94c2a3;
}
.wr-es-r3-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.wr-es-r3-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .95rem;
  background: var(--cream, #FBF6EC);
  color: #2A1F12;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
}
.wr-es-r3-chip svg {
  color: #B57A2E;
  flex-shrink: 0;
}
.wr-es-r3-title {
  margin: 0 0 .2rem;
  font-family: 'Cormorant Garamond', 'Source Serif Pro', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 500;
  color: #FBF6EC;
  letter-spacing: -.01em;
  line-height: 1.1;
}

/* ── Hero row ────────────────────────────────────────────── */
.wr-es-r3-hero {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: 1rem;
  align-items: stretch;
}
.wr-es-r3-hero.is-solo { grid-template-columns: 1fr; }

.wr-es-r3-band {
  background: var(--cream, #FBF6EC);
  border-radius: 14px;
  padding: 1.6rem 2rem 1.8rem;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: .3rem;
}
.wr-es-r3-band-l {
  font-family: 'Cormorant Garamond', 'Source Serif Pro', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: #2A1F12;
  letter-spacing: -.01em;
}
.wr-es-r3-band-num {
  font-family: 'Cormorant Garamond', 'Source Serif Pro', Georgia, serif;
  font-size: 7.5rem;
  font-weight: 500;
  color: #B57A2E;
  line-height: 1;
  margin: -.4rem 0 -.2rem;
}
.wr-es-r3-band-sub {
  margin-top: 1.4rem;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .5rem;
  font-size: .9rem;
  color: #4A3A26;
}
.wr-es-r3-band-pair {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  color: #4A3A26;
}
.wr-es-r3-band-pair-b {
  font-weight: 700;
  color: #B57A2E;
  font-size: 1rem;
}
.wr-es-r3-band-dot {
  color: #b08068;
  opacity: .6;
}
.wr-es-r3-band-weight {
  margin-left: .15rem;
  font-size: .82rem;
  color: #8a7a64;
}

/* ── Cross-essay analysis ────────────────────────────────── */
.wr-es-r3-cross {
  background: var(--cream, #FBF6EC);
  border-radius: 14px;
  padding: 1.4rem 1.8rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}
.wr-es-r3-cross::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 1.4rem;
  bottom: 1.4rem;
  width: 1px;
  background: rgba(74,58,38,.12);
}
.wr-es-r3-cross::after {
  content: '';
  position: absolute;
  left: 1.8rem;
  right: 1.8rem;
  top: 50%;
  height: 1px;
  background: rgba(74,58,38,.12);
}
.wr-es-r3-cross-cell {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1rem;
  padding: .95rem .9rem;
  align-items: start;
}
.wr-es-r3-cross-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(181,122,46,.16);
  color: #B57A2E;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.wr-es-r3-cross-l {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #B57A2E;
  margin-bottom: .35rem;
}
.wr-es-r3-cross-body p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: #2A1F12;
}

/* ── Tab bar ─────────────────────────────────────────────── */
.wr-es-r3-tabs {
  display: flex;
  gap: .15rem;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
  align-items: flex-end;
}
.wr-es-r3-tab {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1.4rem .95rem;
  background: rgba(251,246,236,.08);
  color: #C9B89C;
  border: none;
  border-radius: 10px 10px 0 0;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, padding .14s ease;
}
.wr-es-r3-tab:hover { color: #FBF6EC; background: rgba(251,246,236,.13); }
.wr-es-r3-tab.is-active {
  background: var(--cream, #FBF6EC);
  color: #2A1F12;
  padding-bottom: 1.05rem;
}
.wr-es-r3-tab-band {
  display: inline-flex;
  align-items: center;
  padding: .22rem .65rem;
  background: rgba(181,122,46,.3);
  color: #D9A268;
  border-radius: 6px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.wr-es-r3-tab.is-active .wr-es-r3-tab-band {
  background: #B57A2E;
  color: #FBF6EC;
}

/* ── Task panel ──────────────────────────────────────────── */
.wr-es-r3-panels { display: grid; }
.wr-es-r3-panel {
  background: var(--cream, #FBF6EC);
  border-radius: 14px;
  padding: 1.6rem 2rem 1.8rem;
  display: grid;
  gap: 1.3rem;
}
.wr-es-r3-panels.has-tabs .wr-es-r3-panel {
  border-radius: 0 14px 14px 14px;
}
.wr-es-r3-panel[hidden] { display: none; }

.wr-es-r3-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.wr-es-r3-panel-prompt {
  font-size: .92rem;
  color: #4A3A26;
}
.wr-es-r3-panel-prompt strong {
  color: #2A1F12;
  font-weight: 700;
}
.wr-es-r3-panel-band-wrap {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
  color: #4A3A26;
}
.wr-es-r3-panel-band-l {
  letter-spacing: .01em;
}
.wr-es-r3-panel-band-pill {
  display: inline-flex;
  align-items: center;
  padding: .35rem .85rem;
  background: #B57A2E;
  color: #FBF6EC;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.005em;
}

/* Rubric row: 4 criterion columns, evenly spaced. Strengths +
   where-to-focus have moved BELOW the essay (see .wr-es-r3-meta-row)
   so we don't leave a tall empty column under short criterion
   comments. */
.wr-es-r3-rubric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem 1.5rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(74,58,38,.1);
}

/* Strengths + Where-to-focus row, sits below the annotated essay.
   Two equal columns with a subtle divider; stacks at <760px. */
.wr-es-r3-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  padding: .2rem 0 .4rem;
}
.wr-es-r3-meta-block {
  display: grid;
  gap: .55rem;
  align-content: start;
}
.wr-es-r3-meta-block + .wr-es-r3-meta-block {
  padding-left: 1.8rem;
  border-left: 1px solid rgba(74,58,38,.1);
}
.wr-es-r3-crit {
  display: grid;
  gap: .45rem;
  align-content: start;
}
.wr-es-r3-crit-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
}
.wr-es-r3-crit-l {
  font-size: .95rem;
  font-weight: 700;
  color: #2A1F12;
}
.wr-es-r3-crit-b {
  font-size: 1.05rem;
  font-weight: 700;
  color: #B57A2E;
}
.wr-es-r3-crit-c {
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: #4A3A26;
}

.wr-es-r3-side {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding-left: 1.4rem;
  border-left: 1px solid rgba(74,58,38,.1);
}
.wr-es-r3-side-h {
  margin: 0 0 .35rem;
  font-size: 1rem;
  font-weight: 700;
}
.wr-es-r3-side-h.is-good { color: #4a6b56; }
.wr-es-r3-side-h.is-fix  { color: #B57A2E; }
.wr-es-r3-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .42rem;
}
.wr-es-r3-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: .55rem;
  font-size: .87rem;
  line-height: 1.5;
  color: #4A3A26;
  align-items: start;
}
.wr-es-r3-bullet {
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.3;
}
.wr-es-r3-bullet.is-good { color: #5f8a6a; }
.wr-es-r3-bullet.is-fix  { color: #B57A2E; }
.wr-es-r3-side-empty {
  margin: 0;
  font-size: .85rem;
  color: #8a7a64;
}

/* ── Annotated essay ─────────────────────────────────────── */
.wr-es-r3-essay {
  border: 1px solid rgba(74,58,38,.15);
  border-radius: 12px;
  padding: 1.4rem 1.7rem;
  display: grid;
  gap: 1rem;
}
.wr-es-r3-essay-body {
  font-size: .92rem;
  line-height: 1.7;
  color: #2A1F12;
}
.wr-es-r3-essay-body p { margin: .55rem 0; }
.wr-es-r3-essay-body p:first-child { margin-top: 0; }
.wr-es-r3-essay-body p:last-child  { margin-bottom: 0; }

/* Highlight overrides — the inline span class from
   _renderEssayWithAnnotations is .wr-es-anno + .is-praise / .is-issue.
   We keep the existing background tint but add a coloured underline
   to make highlights read more naturally inside the cream essay. */
.wr-es-r3-essay .wr-es-anno {
  padding: 0 .15rem;
  border-radius: 3px;
  cursor: pointer;
}
.wr-es-r3-essay .wr-es-anno.is-praise {
  background: rgba(95,138,106,.18);
  box-shadow: inset 0 -2px 0 #5f8a6a;
}
.wr-es-r3-essay .wr-es-anno.is-issue {
  background: rgba(176,128,104,.2);
  box-shadow: inset 0 -2px 0 #B08068;
}

.wr-es-r3-essay-legend {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: .8rem;
  color: #4A3A26;
  padding-top: .4rem;
  border-top: 1px dashed rgba(74,58,38,.12);
}
.wr-es-r3-legend-item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.wr-es-r3-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.wr-es-r3-dot.is-good { background: #5f8a6a; }
.wr-es-r3-dot.is-fix  { background: #B08068; }
.wr-es-r3-legend-hint {
  margin-left: auto;
  color: #8a7a64;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* ── Band 8 rewrite — split card ─────────────────────────── */
.wr-es-r3-rewrite {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 1.5rem;
  padding: 1.3rem 1.6rem;
  background: rgba(181,122,46,.07);
  border-radius: 12px;
  align-items: center;
}
.wr-es-r3-rewrite-l { display: grid; gap: .3rem; }
.wr-es-r3-rewrite-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(181,122,46,.2);
  color: #B57A2E;
  display: grid;
  place-items: center;
  margin-bottom: .35rem;
}
.wr-es-r3-rewrite-h {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #2A1F12;
  line-height: 1.3;
}
.wr-es-r3-rewrite-sub {
  margin: 0;
  font-size: .82rem;
  color: #8a7a64;
  line-height: 1.45;
}
.wr-es-r3-rewrite-body {
  font-style: italic;
  font-size: .9rem;
  line-height: 1.6;
  color: #4A3A26;
}

/* ── Where to focus next ─────────────────────────────────── */
.wr-es-r3-coach {
  background: var(--cream, #FBF6EC);
  border-radius: 14px;
  padding: 1.5rem 2rem 1.7rem;
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  gap: 1.7rem;
  align-items: start;
}
.wr-es-r3-coach-intro h2 {
  margin: 0 0 .55rem;
  font-family: 'Cormorant Garamond', 'Source Serif Pro', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 500;
  color: #2A1F12;
  letter-spacing: -.005em;
}
.wr-es-r3-coach-intro p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: #4A3A26;
}
.wr-es-r3-coach-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
.wr-es-r3-coach-card {
  background: rgba(251,246,236,.55);
  border: 1px solid rgba(74,58,38,.08);
  border-radius: 10px;
  padding: 1.05rem 1.15rem 1.1rem;
  display: grid;
  gap: .5rem;
  align-content: start;
}
.wr-es-r3-coach-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(181,122,46,.18);
  color: #B57A2E;
  display: grid;
  place-items: center;
  margin-bottom: .15rem;
}
.wr-es-r3-coach-h {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #2A1F12;
  letter-spacing: -.005em;
}
.wr-es-r3-coach-b {
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: #4A3A26;
}
.wr-es-r3-coach-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .3rem;
}
.wr-es-r3-coach-btn {
  display: inline-flex;
  align-items: center;
  padding: .42rem .8rem;
  border-radius: 6px;
  font-size: .76rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .005em;
}
.wr-es-r3-coach-btn.is-tool {
  background: #B57A2E;
  color: #FBF6EC;
}
.wr-es-r3-coach-btn.is-tool:hover { background: #9A6624; }
.wr-es-r3-coach-btn.is-lesson {
  background: transparent;
  color: #2A1F12;
  border: 1px solid #B57A2E;
}
.wr-es-r3-coach-btn.is-lesson:hover { background: rgba(181,122,46,.1); }

/* ── Bottom "All my exams" link ─────────────────────────── */
.wr-es-r3-allexams {
  align-self: end;
  justify-self: end;
  color: #C9B89C;
  font-size: .92rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding-top: .3rem;
}
.wr-es-r3-allexams:hover { color: #FBF6EC; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1180px) {
  .wr-es-r3-rubric-row {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  .wr-es-r3-meta-row {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .wr-es-r3-meta-block + .wr-es-r3-meta-block {
    padding-left: 0;
    border-left: none;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(74,58,38,.1);
  }
}
@media (max-width: 960px) {
  .wr-es-r3 { padding: 1rem 1rem 3rem; }
  .wr-es-r3-hero { grid-template-columns: 1fr; }
  .wr-es-r3-band-num { font-size: 5.5rem; }
  .wr-es-r3-cross { grid-template-columns: 1fr; }
  .wr-es-r3-cross::before { display: none; }
  .wr-es-r3-cross::after  { display: none; }
  .wr-es-r3-rubric-row { grid-template-columns: 1fr 1fr; }
  .wr-es-r3-rewrite { grid-template-columns: 1fr; }
  .wr-es-r3-coach { grid-template-columns: 1fr; }
  .wr-es-r3-coach-grid { grid-template-columns: 1fr; }
}