/* ─────────────────────────────────────────────────────────────────
   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: inline-flex;
  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 ────────────────────────────────────────────────────── */
.wr-es-hero {
  position: relative;
  padding: 1.8rem 1.8rem 1.6rem;
  background:
    radial-gradient(80% 60% at 100% 0%,
      color-mix(in srgb, var(--ielts-honey, #D9A268) 18%, transparent) 0%,
      transparent 60%),
    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) 2%, var(--ielts-card, #322519)) 100%);
  border: 1px solid color-mix(in srgb, var(--ielts-honey, #D9A268) 22%, var(--ielts-line, rgba(242, 230, 204, .10)));
  border-radius: 18px;
  margin-bottom: 3.2rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, .07),
    0 18px 36px -18px rgba(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 var(--ielts-line, rgba(242, 230, 204, .10));
}
.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: var(--ielts-honey, #D9A268);
  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: var(--ielts-ink-mute, #7A6A52);
}
.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: var(--ielts-ink-soft, #C7B695);
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}
.wr-es-hero-list li b { color: var(--ielts-honey, #D9A268); font-weight: 600; }
.wr-es-hero-dot {
  flex-shrink: 0;
  width: 6px; height: 6px;
  margin-top: .55em;
  border-radius: 50%;
  background: var(--ielts-honey, #D9A268);
}

.wr-es-hero-resume { border-color: color-mix(in srgb, #E5733F 60%, transparent); }
.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: #E5733F;
  margin-bottom: .8rem;
}
.wr-es-hero-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ielts-ink, #F2E6CC);
  margin: 0 0 .35rem;
}
.wr-es-hero-p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  color: var(--ielts-ink-soft, #B6A484);
  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,
      color-mix(in srgb, var(--ielts-ink, #F2E6CC) 8%, var(--ielts-card-lift, #3D2D1F)) 0%,
      color-mix(in srgb, var(--ielts-ink, #F2E6CC) 4%, 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;
  color: var(--ielts-ink, #F2E6CC);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .06);
  transition: border-color .15s, transform .15s;
}
.wr-es-history-row:hover {
  border-color: color-mix(in srgb, var(--ielts-honey, #D9A268) 36%, transparent);
  transform: translateX(2px);
}
.wr-es-history-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
  padding: .35rem .6rem;
  background: color-mix(in srgb, var(--ielts-honey, #D9A268) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ielts-honey, #D9A268) 28%, transparent);
  border-radius: 9px;
}
.wr-es-history-band-num {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ielts-honey, #D9A268);
  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: var(--ielts-ink-mute, #7A6A52);
  margin-top: .15rem;
}
.wr-es-history-row-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ielts-ink, #F2E6CC);
}
.wr-es-history-row-meta {
  margin-top: .3rem;
  display: flex;
  gap: 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
  color: var(--ielts-ink-soft, #B6A484);
}
.wr-es-history-row-meta b { color: var(--ielts-ink, #F2E6CC); font-weight: 600; }
.wr-es-history-arrow {
  color: var(--ielts-ink-mute, #7A6A52);
  transition: color .15s, transform .15s;
}
.wr-es-history-row:hover .wr-es-history-arrow {
  color: var(--ielts-honey, #D9A268);
  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); }

/* ── 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 ──────────────────────────────────────── */
.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.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: wr-es-overlay-in .2s ease-out;
}
@keyframes wr-es-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.wr-es-overlay-card {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ielts-ink, #F2E6CC) 10%, var(--ielts-card-lift, #3D2D1F)) 0%,
      color-mix(in srgb, var(--ielts-ink, #F2E6CC) 5%, var(--ielts-card, #322519)) 100%);
  border: 1px solid color-mix(in srgb, var(--ielts-honey, #D9A268) 26%, transparent);
  border-radius: 16px;
  padding: 2rem 2rem 1.7rem;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, .09),
    0 24px 60px -16px rgba(0, 0, 0, .55);
}
.wr-es-overlay-spinner {
  width: 36px; height: 36px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--ielts-honey, #D9A268) 25%, transparent);
  border-top-color: var(--ielts-honey, #D9A268);
  animation: wr-es-spin .9s linear infinite;
}
@keyframes wr-es-spin { to { transform: rotate(360deg); } }
.wr-es-overlay-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ielts-ink, #F2E6CC);
  margin: 0 0 .5rem;
}
.wr-es-overlay-p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9rem;
  color: var(--ielts-ink-soft, #B6A484);
  margin: 0;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────
   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; }
}