/* Essay Library — Writing practice tool (#subject/ielts/writing/practice/essay-library)
   All rules scoped to .wr-el-page. Reuses the IELTS paper palette
   (cream paper + espresso ink + honey accent) from the other writing tools. */

.wr-el-page {
  --el-paper:        var(--paper, #F5EBD3);
  --el-paper-lift:   #FBF3DD;
  --el-ink:          var(--paper-ink, #1F1812);
  --el-ink-soft:     var(--paper-ink-soft, #4A3F33);
  --el-honey:        var(--paper-honey, #B57A2E);
  --el-honey-soft:   #C9933F;
  --el-line:         rgba(31, 24, 18, .12);
  --el-line-strong:  rgba(31, 24, 18, .22);

  /* Page chrome (back link, hero title, lede) sits directly on the
     IELTS dark shell — those elements use shell-ink, NOT paper-ink.
     Cards and other paper-bg surfaces inside the page continue using
     --el-ink / --el-ink-soft (dark on cream). */
  --el-shell-ink:      var(--ielts-ink,      #F2E6CC);
  --el-shell-ink-soft: var(--ielts-ink-soft, #B6A484);

  /* Zone tints — one per architectural function. Background only;
     applied when the user toggles "Show structure" on. Saturated
     enough to read for low-vision / colourblind users while still
     letting the prose stay legible underneath. */
  --el-zone-hook:       rgba(200, 140, 55, .30);
  --el-zone-thesis:     rgba(178, 76, 62, .32);
  --el-zone-topic:      rgba(85, 135, 80, .32);
  --el-zone-support:    rgba(60, 45, 30, .12);
  --el-zone-transition: rgba(135, 88, 138, .32);
  --el-zone-conclusion: rgba(50, 110, 145, .32);
  --el-zone-overview:   rgba(200, 140, 55, .30);
  --el-zone-feature:    rgba(85, 135, 80, .32);
  --el-zone-comparison: rgba(50, 110, 145, .32);

  padding: 1.6rem 2rem 4rem;
  max-width: 1180px;
  margin: 0 auto;
  color: var(--el-shell-ink);
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── Back link ────────────────────────────────────────────────── */
.wr-el-back {
  display: flex;
  width: max-content;
  align-items: center;
  gap: .35rem;
  margin-bottom: 1.2rem;
  padding: .35rem .55rem .35rem .3rem;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--el-shell-ink-soft);
  text-decoration: none;
  transition: background .14s, color .14s, transform .14s;
}
.wr-el-back:hover {
  color: var(--el-honey);
  background: rgba(181, 122, 46, .08);
  transform: translateX(-2px);
}

/* ── Hero (landing) ──────────────────────────────────────────── */
.wr-el-hero { margin-bottom: 1.6rem; }
.wr-el-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--el-honey);
  margin-bottom: .8rem;
}
.wr-el-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 0 0 .8rem;
  color: var(--el-shell-ink);
}
.wr-el-lede {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--el-shell-ink-soft);
  max-width: 720px;
}

/* ── Filters ─────────────────────────────────────────────────── */
.wr-el-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.4rem 0 1.2rem;
}
.wr-el-filter {
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--el-ink-soft);
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 999px;
  padding: .4rem .9rem;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.wr-el-filter:hover {
  color: var(--el-ink);
  border-color: var(--el-honey);
}
.wr-el-filter.is-selected {
  background: var(--el-honey);
  border-color: var(--el-honey);
  color: #FFFDF4;
}

/* ── Grid + cards ────────────────────────────────────────────── */
.wr-el-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
}
.wr-el-loading,
.wr-el-empty {
  grid-column: 1 / -1;
  padding: 2rem 1rem;
  text-align: center;
  font-size: .92rem;
  color: var(--el-ink-soft);
}
.wr-el-empty h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 .5rem;
  color: var(--el-ink);
}

.wr-el-card {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.1rem 1.15rem 1rem;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 14px;
  text-decoration: none;
  color: var(--el-ink);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.wr-el-card:hover {
  border-color: var(--el-honey);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .35);
}
.wr-el-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.wr-el-card-task,
.wr-el-card-qtype,
.wr-el-card-band,
.wr-el-card-words {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .22rem .5rem;
  border-radius: 5px;
}
.wr-el-card-task {
  background: var(--el-honey);
  color: #FFFDF4;
}
.wr-el-card-qtype {
  background: rgba(31, 24, 18, .08);
  color: var(--el-ink-soft);
}
/* Words badge — informational metric, deliberately quieter than the
   category badges so it reads as data, not as a tag. */
.wr-el-card-words {
  background: rgba(31, 24, 18, .05);
  color: var(--el-ink-soft);
  font-variant-numeric: tabular-nums;
}
.wr-el-card-band {
  margin-left: auto;
  background: rgba(95, 124, 89, .18);
  color: #3D5E36;
}
.wr-el-card-prompt {
  margin: 0;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .98rem;
  line-height: 1.45;
  color: var(--el-ink);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wr-el-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
  padding-top: .3rem;
}
.wr-el-card-cta {
  font-size: .85rem;
  font-weight: 700;
  color: var(--el-honey);
  letter-spacing: .01em;
}
.wr-el-card:hover .wr-el-card-cta { transform: translateX(2px); transition: transform .14s; }
.wr-el-card-rwbadge {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .22rem .5rem;
  border-radius: 5px;
  background: rgba(168, 91, 71, .15);
  color: #8A4634;
}

/* ── "Roll a fresh prompt" placeholder (lit in S3) ───────────── */
.wr-el-roll-card {
  margin-top: 2.2rem;
  padding: 1.3rem 1.5rem;
  background:
    linear-gradient(180deg, var(--el-paper) 0%, var(--el-paper-lift) 100%);
  border: 1px dashed var(--el-line-strong);
  border-radius: 14px;
}
.wr-el-roll-eyebrow {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--el-honey);
  margin-bottom: .5rem;
}
.wr-el-roll-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 .35rem;
  color: var(--el-ink);
}
.wr-el-roll-lede {
  margin: 0;
  font-size: .92rem;
  color: var(--el-ink-soft);
  max-width: 580px;
}

/* ── Study view: head ────────────────────────────────────────── */
.wr-el-study-head {
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--el-line);
}
.wr-el-study-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-bottom: .8rem;
}
.wr-el-study-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -.005em;
  margin: 0 0 .7rem;
  color: var(--el-shell-ink);
}
.wr-el-study-prompt {
  margin: 0;
  padding: .85rem 1rem;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 10px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--el-ink);
}
.wr-el-study-prompt strong {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--el-honey);
  margin-right: .4rem;
}
.wr-el-rwcta {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  padding: .55rem 1rem;
  background: rgba(168, 91, 71, .12);
  border: 1px solid rgba(168, 91, 71, .35);
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 600;
  color: #8A4634;
  text-decoration: none;
  transition: background .14s, transform .14s;
}
.wr-el-rwcta:hover {
  background: rgba(168, 91, 71, .2);
  transform: translateX(2px);
}

/* ── Toolbar (toggles + legend) ──────────────────────────────── */
.wr-el-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
}
.wr-el-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--el-ink-soft);
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 999px;
  padding: .42rem .85rem .42rem .7rem;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.wr-el-toggle:hover {
  color: var(--el-ink);
  border-color: var(--el-honey);
}
.wr-el-toggle-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--el-ink-soft);
  transition: background .14s, border-color .14s;
}
.wr-el-toggle.is-on {
  background: var(--el-honey);
  border-color: var(--el-honey);
  color: #FFFDF4;
}
.wr-el-toggle.is-on .wr-el-toggle-dot {
  background: #FFFDF4;
  border-color: #FFFDF4;
}

/* Zone legend — visible only when structure toggle is on (handled
   via is-zone-on on the body container further down). */
.wr-el-zone-legend {
  display: none;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  margin-left: auto;
}
.wr-el-zone-chip {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .22rem .5rem;
  border-radius: 5px;
  color: var(--el-ink);
}
.wr-el-zone-chip[data-zone-chip="hook"]       { background: var(--el-zone-hook); }
.wr-el-zone-chip[data-zone-chip="thesis"]     { background: var(--el-zone-thesis); }
.wr-el-zone-chip[data-zone-chip="topic"]      { background: var(--el-zone-topic); }
.wr-el-zone-chip[data-zone-chip="support"]    { background: var(--el-zone-support); }
.wr-el-zone-chip[data-zone-chip="transition"] { background: var(--el-zone-transition); }
.wr-el-zone-chip[data-zone-chip="conclusion"] { background: var(--el-zone-conclusion); }
.wr-el-zone-chip[data-zone-chip="overview"]   { background: var(--el-zone-overview); }
.wr-el-zone-chip[data-zone-chip="feature"]    { background: var(--el-zone-feature); }
.wr-el-zone-chip[data-zone-chip="comparison"] { background: var(--el-zone-comparison); }

/* ── Study body — two columns ────────────────────────────────── */
.wr-el-study-body {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 1.5rem;
  align-items: start;
}

/* Essay column */
.wr-el-essay {
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
}
.wr-el-para { padding: .9rem 0; }
.wr-el-para + .wr-el-para {
  border-top: 1px dashed var(--el-line);
}
.wr-el-para-label {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--el-honey);
  margin-bottom: .5rem;
}
.wr-el-para-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--el-ink);
}

/* Zone overlay — applied when user toggles structure on. */
.wr-el-study-body.is-zone-on .wr-el-zone-legend { display: flex; }
.wr-el-study-body.is-zone-on [data-zone] {
  border-radius: 4px;
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.wr-el-study-body.is-zone-on [data-zone="hook"]       { background: var(--el-zone-hook); }
.wr-el-study-body.is-zone-on [data-zone="thesis"]     { background: var(--el-zone-thesis); }
.wr-el-study-body.is-zone-on [data-zone="topic"]      { background: var(--el-zone-topic); }
.wr-el-study-body.is-zone-on [data-zone="support"]    { background: var(--el-zone-support); }
.wr-el-study-body.is-zone-on [data-zone="transition"] { background: var(--el-zone-transition); }
.wr-el-study-body.is-zone-on [data-zone="conclusion"] { background: var(--el-zone-conclusion); }
.wr-el-study-body.is-zone-on [data-zone="overview"]   { background: var(--el-zone-overview); }
.wr-el-study-body.is-zone-on [data-zone="feature"]    { background: var(--el-zone-feature); }
.wr-el-study-body.is-zone-on [data-zone="comparison"] { background: var(--el-zone-comparison); }

/* Annotation markers — applied when user toggles annotations on. */
.wr-el-study-body.is-anno-on [data-annotation] {
  background: rgba(181, 122, 46, .1);
  border-bottom: 1px dotted var(--el-honey);
  cursor: pointer;
  padding: 0 2px;
  border-radius: 3px;
  transition: background .15s;
}
.wr-el-study-body.is-anno-on [data-annotation]:hover {
  background: rgba(181, 122, 46, .22);
}
.wr-el-study-body.is-anno-on [data-annotation][data-anno-num]::after {
  content: attr(data-anno-num);
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .58rem;
  font-weight: 700;
  vertical-align: super;
  line-height: 1;
  margin-left: 2px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--el-honey);
  color: #FFFDF4;
}
.wr-el-study-body [data-annotation].is-flash {
  background: rgba(181, 122, 46, .4) !important;
  transition: background .2s;
}

/* ── Side panel — annotation list ────────────────────────────── */
.wr-el-side {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 14px;
  overflow: hidden;
}
.wr-el-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--el-honey);
  border-bottom: 1px solid var(--el-line);
  background: var(--el-paper-lift);
}
.wr-el-side-count {
  font-size: .72rem;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--el-ink-soft);
  background: rgba(31, 24, 18, .08);
  padding: .15rem .5rem;
  border-radius: 999px;
}
.wr-el-side-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1 1 auto;
}
.wr-el-anno {
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--el-line);
  cursor: pointer;
  transition: background .14s;
}
.wr-el-anno:last-child { border-bottom: 0; }
.wr-el-anno:hover { background: rgba(181, 122, 46, .06); }
.wr-el-anno.is-flash {
  background: rgba(181, 122, 46, .18) !important;
  transition: background .2s;
}
.wr-el-anno-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-bottom: .35rem;
}
.wr-el-anno-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--el-honey);
  color: #FFFDF4;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.wr-el-anno-label {
  font-size: .92rem;
  font-weight: 600;
  color: var(--el-ink);
  flex: 1 1 auto;
  min-width: 0;
}
.wr-el-anno-cat {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .18rem .45rem;
  border-radius: 4px;
}
/* Category pills — saturated solid backgrounds with white text so the
   five categories are unmistakeable for low-vision / colourblind users.
   Each hue is distinct enough that even if two collide for a user, the
   lightness contrast still tells them apart. */
.wr-el-anno-cat-lexical  { background: #B57A2E; color: #FFFDF4; }
.wr-el-anno-cat-grammar  { background: #3D6B86; color: #FFFDF4; }
.wr-el-anno-cat-cohesion { background: #5F7C59; color: #FFFDF4; }
.wr-el-anno-cat-hedging  { background: #7C5872; color: #FFFDF4; }
.wr-el-anno-cat-task     { background: #A8593F; color: #FFFDF4; }
.wr-el-anno-note {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--el-ink-soft);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 920px) {
  .wr-el-study-body {
    grid-template-columns: 1fr;
  }
  .wr-el-side {
    position: static;
    max-height: none;
  }
  .wr-el-side-list {
    max-height: 480px;
  }
  .wr-el-zone-legend {
    margin-left: 0;
    width: 100%;
  }
}
@media (max-width: 640px) {
  .wr-el-page { padding: 1rem 1rem 3rem; }
  .wr-el-title { font-size: 1.7rem; }
  .wr-el-study-title { font-size: 1.4rem; }
  .wr-el-essay { padding: 1rem 1.1rem; }
  .wr-el-para-body { font-size: 1rem; line-height: 1.7; }
}

/* ──────────────────────────────────────────────────────────────
   S3 — Roll-a-prompt widget (landing)
   ────────────────────────────────────────────────────────────── */
.wr-el-roll-head { margin-bottom: 1.1rem; }
.wr-el-roll-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  margin-bottom: 1rem;
}
.wr-el-roll-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  font: inherit;
  text-align: left;
  padding: .9rem 1.1rem;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 12px;
  color: var(--el-ink);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.wr-el-roll-btn:hover {
  border-color: var(--el-honey);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .3);
}
.wr-el-roll-btn-task {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--el-honey);
}
.wr-el-roll-btn-sub {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
}
.wr-el-roll-result { margin-top: 1rem; }
.wr-el-roll-prompt-card {
  padding: 1.2rem 1.3rem;
  background: var(--el-paper-lift);
  border: 1px solid var(--el-line);
  border-radius: 12px;
}
.wr-el-roll-prompt-head {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .8rem;
}
.wr-el-roll-prompt-text {
  margin: 0 0 .9rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--el-ink);
}
.wr-el-roll-chart {
  margin: .4rem 0 .9rem;
  padding: .6rem;
  background: #FFFDF4;
  border: 1px solid var(--el-line);
  border-radius: 10px;
  overflow-x: auto;
}
.wr-el-roll-chart svg { display: block; max-width: 100%; height: auto; }
.wr-el-roll-planning {
  margin: 0 0 .9rem;
  border-top: 1px dashed var(--el-line);
  padding-top: .8rem;
}
.wr-el-roll-planning > summary {
  cursor: pointer;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--el-honey);
  list-style: none;
}
.wr-el-roll-planning > summary::-webkit-details-marker { display: none; }
.wr-el-roll-planning > summary::after {
  content: ' +';
  font-weight: 700;
  margin-left: .35rem;
}
.wr-el-roll-planning[open] > summary::after { content: ' –'; }
.wr-el-roll-planning-body {
  margin-top: .7rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.wr-el-roll-plan-row { display: flex; gap: .6rem; align-items: flex-start; }
.wr-el-roll-plan-label {
  flex: 0 0 80px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--el-ink-soft);
  padding-top: .15rem;
}
.wr-el-roll-plan-text {
  margin: 0;
  flex: 1 1 auto;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--el-ink);
}
.wr-el-roll-vocab-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding-top: .35rem;
  border-top: 1px dashed var(--el-line);
}
.wr-el-roll-vocab {
  font-size: .78rem;
  font-weight: 500;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(181, 122, 46, .12);
  color: #8C5A1C;
}
.wr-el-roll-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.wr-el-roll-action {
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: .5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--el-line);
  background: var(--el-paper);
  color: var(--el-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background .14s, border-color .14s, transform .14s;
}
.wr-el-roll-action:hover {
  border-color: var(--el-honey);
  color: var(--el-honey);
}
.wr-el-roll-action.is-primary {
  background: var(--el-honey);
  border-color: var(--el-honey);
  color: #FFFDF4;
}
.wr-el-roll-action.is-primary:hover { filter: brightness(1.06); color: #FFFDF4; }

@media (max-width: 520px) {
  .wr-el-roll-buttons { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────
   S3 — Rewrite Challenge (writing screen)
   ────────────────────────────────────────────────────────────── */
.wr-el-rewrite .wr-el-rw-head {
  padding-bottom: 1.2rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--el-line);
}
.wr-el-rw-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-bottom: .8rem;
}
.wr-el-rw-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -.005em;
  margin: 0 0 .7rem;
  color: var(--el-shell-ink);
}
.wr-el-rw-prompt {
  margin: 0;
  padding: .85rem 1rem;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 10px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--el-ink);
}
.wr-el-rw-prompt strong {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--el-honey);
  margin-right: .4rem;
}

.wr-el-rw-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .8rem;
}
.wr-el-rw-section-meta { display: flex; flex-direction: column; gap: .25rem; }
.wr-el-rw-section-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0;
  color: var(--el-ink);
}
.wr-el-rw-band-from {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--el-ink-soft);
}

.wr-el-rw-original {
  margin-bottom: 1.6rem;
  padding: 1.3rem 1.5rem;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 14px;
}
.wr-el-rw-essay { font-family: 'Source Serif 4', Georgia, serif; }
.wr-el-rw-para { padding: .7rem 0; }
.wr-el-rw-para + .wr-el-rw-para { border-top: 1px dashed var(--el-line); }
.wr-el-rw-para-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--el-honey);
  margin-bottom: .35rem;
}
.wr-el-rw-para-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--el-ink);
}

/* Issue markers — applied when "Show issues" is toggled on. Same
   visual grammar as annotations but in the danger/terracotta tone
   so it never gets confused with the model's strengths. */
.wr-el-rw-original.is-issue-on [data-issue] {
  background: rgba(168, 91, 71, .12);
  border-bottom: 1px dotted #A8593F;
  padding: 0 2px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .14s;
}
.wr-el-rw-original.is-issue-on [data-issue]:hover {
  background: rgba(168, 91, 71, .22);
}
.wr-el-rw-original.is-issue-on [data-issue][data-issue-num]::after {
  content: attr(data-issue-num);
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .58rem;
  font-weight: 700;
  vertical-align: super;
  line-height: 1;
  margin-left: 2px;
  padding: 2px 5px;
  border-radius: 999px;
  background: #A8593F;
  color: #FFFDF4;
}

.wr-el-rw-write {
  padding: 1.3rem 1.5rem;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 14px;
}
.wr-el-rw-counter {
  font-size: .8rem;
  color: var(--el-ink-soft);
  font-weight: 600;
}
.wr-el-rw-count {
  color: var(--el-ink);
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.wr-el-rw-textarea {
  width: 100%;
  box-sizing: border-box;
  display: block;
  padding: .9rem 1rem;
  background: #FFFDF4;
  border: 1px solid var(--el-line);
  border-radius: 10px;
  resize: vertical;
  min-height: 360px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--el-ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.wr-el-rw-textarea:focus {
  border-color: var(--el-honey);
  box-shadow: 0 0 0 3px rgba(181, 122, 46, .15);
}
.wr-el-rw-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}
.wr-el-rw-reveal {
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  padding: .6rem 1.2rem;
  background: var(--el-honey);
  border: 1px solid var(--el-honey);
  border-radius: 10px;
  color: #FFFDF4;
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
.wr-el-rw-reveal:hover { filter: brightness(1.06); transform: translateX(2px); }

/* ──────────────────────────────────────────────────────────────
   S3 — 3-way compare grid (after Reveal)
   ────────────────────────────────────────────────────────────── */
.wr-el-compare {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.8rem;
}
.wr-el-compare-col {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.2rem;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 14px;
}
/* The weak and model columns layered a 4-5% tint on top of a
   transparent base, which on the dark shell left the dark body text
   invisible. We now keep the cream paper base and overlay the tint
   via a linear-gradient so the column reads as a cream card with a
   gentle hue rather than near-transparent dark space. */
.wr-el-compare-col-weak {
  background:
    linear-gradient(rgba(168, 91, 71, .07), rgba(168, 91, 71, .07)),
    var(--el-paper);
  border-left: 3px solid rgba(168, 91, 71, .55);
}
.wr-el-compare-col-yours { background: var(--el-paper-lift); }
.wr-el-compare-col-model {
  background:
    linear-gradient(rgba(95, 124, 89, .08), rgba(95, 124, 89, .08)),
    var(--el-paper);
  border-left: 3px solid rgba(95, 124, 89, .55);
}

.wr-el-compare-col-head {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--el-honey);
  padding-bottom: .6rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid var(--el-line);
}
.wr-el-compare-col-weak  .wr-el-compare-col-head { color: #A8593F; }
.wr-el-compare-col-model .wr-el-compare-col-head { color: #3D5E36; }

.wr-el-rw-cmp-para { padding: .6rem 0; }
.wr-el-rw-cmp-para + .wr-el-rw-cmp-para { border-top: 1px dashed var(--el-line); }
.wr-el-rw-cmp-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--el-ink-soft);
  margin-bottom: .35rem;
}
.wr-el-rw-cmp-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--el-ink);
}

/* Issue + annotation markers always shown in the compare grid. */
.wr-el-compare.is-issue-on [data-issue] {
  background: rgba(168, 91, 71, .12);
  border-bottom: 1px dotted #A8593F;
  padding: 0 2px;
  border-radius: 3px;
}
.wr-el-compare.is-issue-on [data-issue][data-issue-num]::after {
  content: attr(data-issue-num);
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .54rem;
  font-weight: 700;
  vertical-align: super;
  line-height: 1;
  margin-left: 2px;
  padding: 2px 4px;
  border-radius: 999px;
  background: #A8593F;
  color: #FFFDF4;
}
.wr-el-compare.is-anno-on [data-annotation] {
  background: rgba(95, 124, 89, .14);
  border-bottom: 1px dotted #5F7C59;
  padding: 0 2px;
  border-radius: 3px;
}
.wr-el-compare.is-anno-on [data-annotation][data-anno-num]::after {
  content: attr(data-anno-num);
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .54rem;
  font-weight: 700;
  vertical-align: super;
  line-height: 1;
  margin-left: 2px;
  padding: 2px 4px;
  border-radius: 999px;
  background: #5F7C59;
  color: #FFFDF4;
}

/* Side note panels below the compare grid. */
.wr-el-rw-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.8rem;
}
.wr-el-rw-notes-panel {
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 14px;
  overflow: hidden;
}
.wr-el-rw-notes-panel .wr-el-side-head { background: var(--el-paper-lift); }
.wr-el-rw-notes-panel .wr-el-side-list { max-height: 380px; }

/* Issue number gets the danger colour to distinguish from the
   model-annotation gold. */
.wr-el-issue-num {
  background: #A8593F !important;
}

/* Reflection checklist. */
.wr-el-rw-reflect {
  padding: 1.2rem 1.4rem;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 14px;
  margin-bottom: 1.4rem;
}
.wr-el-rw-reflect .wr-el-side-head {
  padding: 0 0 .8rem;
  background: transparent;
  border-bottom: 1px solid var(--el-line);
  margin-bottom: .8rem;
}
.wr-el-rw-reflect-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.wr-el-rw-reflect-list li label {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  cursor: pointer;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--el-ink);
}
.wr-el-rw-reflect-list input[type="checkbox"] {
  margin-top: .3rem;
  flex-shrink: 0;
  accent-color: var(--el-honey);
}

.wr-el-rw-actions-foot { justify-content: flex-start; }
.wr-el-rw-back-to-writing {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  padding: .55rem 1rem;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 10px;
  color: var(--el-ink);
  cursor: pointer;
  transition: border-color .14s, color .14s;
}
.wr-el-rw-back-to-writing:hover {
  border-color: var(--el-honey);
  color: var(--el-honey);
}

@media (max-width: 920px) {
  .wr-el-compare { grid-template-columns: 1fr; }
  .wr-el-rw-notes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wr-el-rw-original,
  .wr-el-rw-write,
  .wr-el-compare-col,
  .wr-el-rw-notes-panel,
  .wr-el-rw-reflect { padding: 1rem 1.1rem; }
  .wr-el-rw-title { font-size: 1.4rem; }
}