/* ==========================================================================
   Write Essay — mode sheet
   --------------------------------------------------------------------------
   Palette, panel wash, header card, section rhythm, result line, controls and
   the shared Writing primitives (timer chip, textarea, word counter, results)
   all come from read-mode-base.css. These aliases keep any --essay-* selector
   working against the shared tokens.

   The measure (.essay-container) is owned by read-mode-base.css — redeclaring
   it here would beat the base media queries, because this sheet loads after
   it. See scripts/audit/read-mode-cascade.js.

   Nothing in this file may be written unscoped: #mode-rts reuses
   .essay-results-container, .essay-score-*, .essay-results-summary and
   .essay-ai-score-hint for Respond To Situation, and must keep the Speaking
   look.
   ========================================================================== */
#mode-essay {
  --essay-paper: var(--read-paper);
  --essay-ink: var(--read-ink);
  --essay-muted: var(--read-muted);
  --essay-accent: var(--read-accent);
  --essay-accent-soft: var(--read-accent-soft);
  --essay-border: var(--read-border);
  --essay-border-soft: var(--read-border-soft);
  --essay-success: var(--read-success);
  --essay-danger: var(--read-danger);
}

/* 200–300 words needs room; this is the one Writing control that stays large. */
#mode-essay .essay-textarea {
  min-height: 340px;
}

/* Language feedback — inline corrections and the rewrite pairs. */
#mode-essay .essay-feedback-mark {
  background: var(--read-accent-soft);
  color: var(--read-ink);
  border-radius: 4px;
  padding: 0 2px;
}

#mode-essay .essay-feedback-card-title {
  color: var(--read-ink);
}

#mode-essay .essay-feedback-card-subtitle,
#mode-essay .essay-feedback-note,
#mode-essay .essay-feedback-empty,
#mode-essay .essay-feedback-reason,
#mode-essay .essay-feedback-context {
  color: var(--read-muted);
}

#mode-essay .essay-feedback-original,
#mode-essay .essay-feedback-rewrite-before {
  color: var(--read-danger);
}

#mode-essay .essay-feedback-replacement,
#mode-essay .essay-feedback-rewrite-after {
  color: var(--read-success);
}

#mode-essay .essay-feedback-arrow {
  color: var(--read-muted);
}

/* Sample essays accordion — a disclosure on the panel, not a nested card. */
#mode-essay .essay-samples {
  background: transparent;
  border: none;
  border-top: 1px solid var(--read-border-soft);
  border-radius: 0;
  padding: 14px 0 4px;
}

#mode-essay .essay-samples-title {
  color: var(--read-accent);
  font-weight: 700;
}

#mode-essay .essay-samples-count,
#mode-essay .essay-sample-meta-muted {
  color: var(--read-muted);
}

#mode-essay .essay-sample-select {
  border: 1px solid var(--read-border);
  border-radius: var(--read-radius-control);
  background: #ffffff;
  color: var(--read-ink);
  min-height: var(--read-btn-control-min-height);
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
}

#mode-essay .essay-sample-select:focus-visible {
  outline: 2px solid var(--read-accent);
  outline-offset: 2px;
}

#mode-essay .essay-sample-meta-pill {
  background: var(--read-accent-soft);
  color: var(--read-accent);
  border-radius: var(--read-radius-pill);
}

#mode-essay .essay-sample-essay,
#mode-essay .essay-sample-pre,
#mode-essay .essay-sample-ideaflow-block,
#mode-essay .essay-sample-vocab-wrap {
  background: #ffffff;
  border: 1px solid var(--read-border);
  border-radius: var(--read-radius-container);
  color: var(--read-ink);
}

/* ──────────────────────────── Filter Toolbar ──────────────────────────── */
/* This block was authored against a dark design system. --surface-1, --surface-2 and
   --border-subtle are not defined anywhere in the learner app, so every one of them
   fell through to its dark-theme fallback on a light page. The worst of it was
   .essay-filter-select below: `color: var(--text-primary, #f8fafc)` resolved to the
   defined token --gray-800 = #1e293b while `background: var(--surface-1, #1e293b)`
   fell through to the literal #1e293b — the same colour. Measured 1.00:1: the Type
   and Task-type dropdown values were invisible.

   Now on the tokens this app actually defines. */
.essay-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0 16px 0;
  padding: 10px 14px;
  background: var(--gray-50);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md, 8px);
}

.essay-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 180px;
}

.essay-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.essay-filter-select {
  flex: 1;
  min-width: 140px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.essay-filter-select:focus {
  border-color: var(--primary, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

.essay-filter-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.essay-filter-counter {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.essay-filter-reset-btn {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.essay-filter-reset-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* ──────────────────────────── Badges & Chips ──────────────────────────── */
.essay-prompt-meta-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.essay-topic-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.essay-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.essay-topic-badge-subtle {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.25);
  font-weight: 500;
}

.essay-v7-item-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.essay-v7-item-topic {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fa;
}

.essay-v7-item-sec-topic {
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.1);
  color: #94a3b8;
}

.essay-v7-item-type {
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
}

/* ─────────────────────── Guided Practice support rail ───────────────────────
   The rail is a six-step walkthrough sitting on the same plane as the editor —
   no nested cards. Everything here is sized against --essay-guided-font so the
   support text reads at the same weight as the essay the learner is writing;
   the previous 0.7–0.86rem scale was the "wall of tiny text" complaint.
   ------------------------------------------------------------------------- */
#mode-essay {
  --essay-guided-font-scale: 1;
  --essay-guided-font-family: 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --essay-guided-font: calc(.95rem * var(--essay-guided-font-scale, 1));
  --essay-guided-font-sm: calc(.86rem * var(--essay-guided-font-scale, 1));
  --essay-guided-font-lg: calc(1.12rem * var(--essay-guided-font-scale, 1));
  --essay-guided-font-title: calc(1.3rem * var(--essay-guided-font-scale, 1));
  --essay-guided-lh: calc(1.54 + (var(--essay-guided-font-scale, 1) - 1) * 0.16);
}

#essay-guided-preferences,
#mode-essay .essay-guided-workspace,
#mode-essay .essay-guided-rail,
#mode-essay #essay-guided-draft-container,
#mode-essay .essay-guided-help-pop,
#mode-essay .essay-guided-typo-popover {
  font-family: var(--essay-guided-font-family, 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

#mode-essay .essay-practice-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 16px 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--essay-border-soft);
}
#mode-essay .essay-practice-choice-label,
#mode-essay .essay-guided-preferences label {
  color: var(--essay-muted);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#mode-essay .essay-practice-choice-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--essay-ink);
  cursor: pointer;
  font-size: .95rem;
}
#mode-essay .essay-practice-choice-option small {
  color: var(--essay-muted);
  display: block;
  font-size: .78rem;
}
#mode-essay .essay-guided-preferences {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: grid-template-rows 280ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 220ms ease,
              visibility 280ms;
  width: 100%;
}
#mode-essay .essay-guided-preferences.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  overflow: visible;
}
#mode-essay .essay-guided-preferences-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  width: 100%;
  margin-top: 0;
  padding-top: 0;
  border-top: 0px dashed transparent;
  transition: margin-top 280ms cubic-bezier(0.16, 1, 0.3, 1),
              padding-top 280ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 280ms ease;
}
#mode-essay .essay-guided-preferences.is-open .essay-guided-preferences-inner {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--essay-border-soft);
}
#mode-essay .essay-guided-pref-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#mode-essay .essay-guided-preferences select {
  background: transparent;
  border: 1px solid var(--essay-border);
  border-radius: 8px;
  color: var(--essay-ink);
  font-size: .88rem;
  min-height: 36px;
  padding: 5px 10px;
  font-family: inherit;
}
#mode-essay .essay-guided-preferences select:focus {
  outline: 2px solid var(--essay-accent);
  outline-offset: 1px;
}
#mode-essay .essay-guided-scale-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#mode-essay .essay-guided-scale-badge {
  font-size: .78rem;
  font-weight: 700;
  color: var(--essay-accent);
  background: var(--essay-accent-soft);
  padding: 2px 8px;
  border-radius: 99px;
}
#mode-essay .essay-guided-scale-controls,
#mode-essay .essay-guided-popover-scale-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#mode-essay .essay-guided-scale-btn {
  background: var(--essay-paper, #fff);
  border: 1px solid var(--essay-border);
  border-radius: 6px;
  color: var(--essay-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  height: 28px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  transition: all .12s ease;
}
#mode-essay .essay-guided-scale-btn:hover {
  background: var(--essay-accent-soft);
  border-color: var(--essay-accent);
  color: var(--essay-accent);
}
#mode-essay .essay-guided-scale-btn:active {
  transform: scale(0.95);
}
#mode-essay input[type="range"]#essay-guided-font-scale,
#mode-essay input[type="range"]#essay-guided-popover-scale-range {
  width: 105px;
  height: 6px;
  accent-color: var(--essay-accent);
  cursor: pointer;
}

/* ── Pre-Start Step 1 Layout Picker & Comparison Drawer ───────────────────── */
#mode-essay .essay-guided-pref-group--full {
  width: 100%;
  flex-basis: 100%;
  margin-top: 8px;
}

#mode-essay .essay-prestart-layout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
}

#mode-essay .essay-prestart-layout-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#mode-essay .essay-prestart-layout-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--essay-ink, #2c1810);
}

#mode-essay .essay-prestart-layout-sub {
  font-size: 0.78rem;
  color: var(--essay-muted, #7c6855);
  font-weight: normal;
}

#mode-essay .essay-layout-compare-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid rgba(154, 87, 34, 0.22);
  background: rgba(154, 87, 34, 0.07);
  color: var(--essay-accent, #9a5722);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

#mode-essay .essay-layout-compare-toggle-btn:hover {
  background: rgba(154, 87, 34, 0.14);
  border-color: var(--essay-accent, #9a5722);
  transform: translateY(-1px);
}

#mode-essay .essay-prestart-layout-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  #mode-essay .essay-prestart-layout-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

#mode-essay .essay-prestart-layout-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid rgba(154, 87, 34, 0.16);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

#mode-essay .essay-prestart-layout-card:hover {
  border-color: rgba(154, 87, 34, 0.4);
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(44, 24, 16, 0.06);
}

#mode-essay .essay-prestart-layout-card.is-active {
  background: #ffffff;
  border-color: var(--essay-accent, #9a5722);
  box-shadow: 0 0 0 2px rgba(154, 87, 34, 0.2), 0 4px 14px rgba(154, 87, 34, 0.1);
}

#mode-essay .essay-prestart-layout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 5px;
  color: var(--essay-muted, #7c6855);
}

#mode-essay .essay-prestart-layout-card.is-active .essay-prestart-layout-icon {
  color: var(--essay-accent, #9a5722);
}

#mode-essay .essay-prestart-layout-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--essay-ink, #2c1810);
  margin-bottom: 3px;
}

#mode-essay .essay-prestart-layout-card.is-active .essay-prestart-layout-name {
  color: var(--essay-accent, #9a5722);
}

#mode-essay .essay-prestart-layout-tag {
  font-size: 0.72rem;
  color: var(--essay-muted, #7c6855);
  line-height: 1.25;
}

#mode-essay .essay-prestart-active-detail {
  width: 100%;
  margin-top: 12px;
  background: linear-gradient(135deg, #ffffff 0%, rgba(254, 250, 244, 0.95) 100%);
  border: 1.5px solid rgba(154, 87, 34, 0.25);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 4px 14px rgba(44, 24, 16, 0.05);
  animation: essayDrawerFade 0.2s ease-out;
}

#mode-essay .essay-prestart-detail-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#mode-essay .essay-prestart-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(154, 87, 34, 0.12);
}

#mode-essay .essay-prestart-detail-icon {
  font-size: 1.5rem;
}

#mode-essay .essay-prestart-detail-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#mode-essay .essay-prestart-detail-name {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--essay-ink, #2c1810);
}

#mode-essay .essay-prestart-detail-badge {
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(154, 87, 34, 0.1);
  color: var(--essay-accent, #9a5722);
  padding: 2px 8px;
  border-radius: 6px;
}

#mode-essay .essay-prestart-detail-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#mode-essay .essay-prestart-detail-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#mode-essay .essay-prestart-detail-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--essay-accent, #9a5722);
}

#mode-essay .essay-prestart-detail-text {
  font-size: 0.84rem;
  color: var(--essay-ink, #2c1810);
  line-height: 1.55;
  margin: 0;
}

#mode-essay .essay-prestart-detail-bullet {
  font-size: 0.84rem;
  color: var(--essay-ink, #2c1810);
  line-height: 1.5;
  margin: 2px 0;
}

#mode-essay .essay-layout-compare-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  width: 100%;
}

#mode-essay .essay-layout-compare-toggle-btn {
  background: rgba(154, 87, 34, 0.06);
  border: 1px dashed rgba(154, 87, 34, 0.35);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--essay-accent, #9a5722);
  cursor: pointer;
  transition: all 0.2s ease;
}

#mode-essay .essay-layout-compare-toggle-btn:hover {
  background: rgba(154, 87, 34, 0.12);
  border-color: var(--essay-accent, #9a5722);
}

#mode-essay .essay-layout-compare-drawer {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 6px;
  animation: essayDrawerFade 0.25s ease-out;
}

#mode-essay .essay-layout-compare-drawer[hidden] {
  display: none;
}

#mode-essay .essay-layout-compare-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(154, 87, 34, 0.18);
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(44, 24, 16, 0.05);
}

#mode-essay .essay-layout-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  text-align: left;
}

#mode-essay .essay-layout-compare-table th {
  background: rgba(154, 87, 34, 0.07);
  color: var(--essay-ink, #2c1810);
  font-weight: 700;
  padding: 10px 14px;
  border-bottom: 1.5px solid rgba(154, 87, 34, 0.16);
  white-space: nowrap;
}

#mode-essay .essay-layout-compare-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(154, 87, 34, 0.08);
  vertical-align: top;
  color: var(--essay-ink, #2c1810);
  line-height: 1.55;
}

#mode-essay .essay-layout-compare-table tr:last-child td {
  border-bottom: none;
}

#mode-essay .essay-compare-col-name {
  min-width: 150px;
}

#mode-essay .essay-compare-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  margin-top: 4px;
}

#mode-essay .essay-compare-badge--primary {
  background: #eff6ff;
  color: #2563eb;
}

#mode-essay .essay-compare-badge--accent {
  background: #f0fdf4;
  color: #16a34a;
}

#mode-essay .essay-compare-badge--speed {
  background: #fffbeb;
  color: #d97706;
}

#mode-essay .essay-compare-badge--text {
  background: #f3f4f6;
  color: #4b5563;
}

/* ── Workspace: rail + editor ─────────────────────────────────────────────── */
#mode-essay .essay-guided-workspace {
  align-items: start;
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
}
@media (min-width: 1400px) {
  #mode-essay .essay-guided-workspace { grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); }
}

/* Its own scroll keeps a six-step walkthrough from stretching the page and
   keeps the checklist reachable while the learner is typing. */
#mode-essay .essay-guided-rail {
  border-right: 1px solid var(--essay-border-soft);
  max-height: calc(100vh - 40px);
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 2px 20px 12px 0;
  position: sticky;
  scrollbar-width: thin;
  top: 20px;
}
#mode-essay .essay-guided-rail[hidden] { display: none; }
#mode-essay .essay-guided-rail::-webkit-scrollbar { width: 8px; }
#mode-essay .essay-guided-rail::-webkit-scrollbar-thumb {
  background: var(--essay-border);
  border-radius: 99px;
}

/* ── Anti-Clipping Layout Safeguards for Guided Essay ─────────────────────── */
#mode-essay .essay-guided-rail,
#mode-essay .essay-guided-content,
#mode-essay .essay-guided-section,
#mode-essay .essay-guided-clause,
#mode-essay .essay-guided-clause-card,
#mode-essay .essay-guided-quiz,
#mode-essay .essay-guided-target-card,
#mode-essay .essay-guided-pattern-workbench,
#mode-essay .essay-guided-draft-container {
  min-height: min-content;
  box-sizing: border-box;
}

#mode-essay .essay-guided-clause-head,
#mode-essay .essay-guided-target-head,
#mode-essay .essay-guided-quiz-head {
  flex-wrap: wrap;
  row-gap: 6px;
}

#mode-essay .essay-guided-clause-tag,
#mode-essay .essay-guided-clause-role,
#mode-essay .essay-guided-clause-badge,
#mode-essay .essay-guided-quiz-badge,
#mode-essay .essay-guided-draft-badge,
#mode-essay .essay-guided-draft-blueprint-tag {
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}

#mode-essay .essay-guided-clause-text,
#mode-essay .essay-guided-clause-detail-text,
#mode-essay .essay-guided-clause-trap-text,
#mode-essay .essay-guided-prompt,
#mode-essay .essay-guided-quiz-question,
#mode-essay .essay-guided-quiz-opt,
#mode-essay .essay-guided-quiz-feedback,
#mode-essay .essay-guided-pattern-sentence,
#mode-essay .essay-guided-cohesion-example {
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: var(--essay-guided-lh, 1.54);
}

#mode-essay .essay-guided-vocab-table-wrap,
#mode-essay .essay-guided-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#mode-essay .essay-guided-quiz-opt {
  align-items: flex-start;
}
#mode-essay .essay-guided-quiz-radio {
  margin-top: calc(2px * var(--essay-guided-font-scale, 1));
}
#mode-essay .essay-guided-target-select-btn {
  align-items: flex-start;
}
#mode-essay .essay-guided-target-checkbox {
  margin-top: calc(3px * var(--essay-guided-font-scale, 1));
}

#mode-essay .essay-guided-rail-header {
  align-items: center;
  background: var(--essay-paper);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding: 6px 0 10px;
  position: sticky;
  top: 0;
  z-index: 20;
}
#mode-essay .essay-guided-rail-header strong {
  color: var(--essay-ink);
  font-size: calc(1.05rem * var(--essay-guided-font-scale, 1));
  font-weight: 700;
}
#mode-essay .essay-guided-rail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
#mode-essay .essay-guided-language-toggle,
#mode-essay .essay-guided-mobile-toggle,
#mode-essay .essay-guided-typo-btn {
  background: transparent;
  border: 1px solid var(--essay-border);
  border-radius: 99px;
  color: var(--essay-accent);
  cursor: pointer;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  min-height: 34px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}
#mode-essay .essay-guided-typo-btn {
  padding: 5px 10px;
  font-size: .86rem;
  letter-spacing: -.02em;
}
#mode-essay .essay-guided-language-toggle:hover,
#mode-essay .essay-guided-mobile-toggle:hover,
#mode-essay .essay-guided-typo-btn:hover,
#mode-essay .essay-guided-typo-btn[aria-expanded="true"] {
  background: var(--essay-accent-soft);
  border-color: var(--essay-accent);
}
#mode-essay .essay-guided-mobile-toggle { display: none; }

/* ── Typography Popover ─────────────────────────────────────────────────── */
#mode-essay .essay-guided-typo-wrap {
  position: relative;
  display: inline-flex;
}
#mode-essay .essay-guided-typo-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 285px;
  background: var(--essay-paper, #fff);
  border: 1px solid var(--essay-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 14px 16px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--essay-guided-font-family, system-ui, sans-serif);
  animation: essay-typo-in .15s ease-out;
}
#mode-essay .essay-guided-typo-popover[hidden] { display: none; }

@keyframes essay-typo-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

#mode-essay .essay-guided-typo-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--essay-border-soft);
  padding-bottom: 8px;
}
#mode-essay .essay-guided-typo-popover-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--essay-ink);
}
#mode-essay .essay-guided-typo-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--essay-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
#mode-essay .essay-guided-typo-close:hover {
  color: var(--essay-ink);
  background: var(--essay-border-soft);
}
#mode-essay .essay-guided-typo-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#mode-essay .essay-guided-typo-label {
  font-size: .76rem;
  font-weight: 600;
  color: var(--essay-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
#mode-essay .essay-guided-popover-select {
  width: 100%;
  padding: 6px 10px;
  font-size: .85rem;
  border-radius: 8px;
  border: 1px solid var(--essay-border);
  background: var(--essay-paper, #fff);
  color: var(--essay-ink);
  cursor: pointer;
  font-family: inherit;
}
#mode-essay .essay-guided-popover-select:focus {
  outline: 2px solid var(--essay-accent);
  outline-offset: 1px;
}
#mode-essay .essay-guided-typo-scale-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#mode-essay .essay-guided-typo-scale-badge {
  font-size: .78rem;
  font-weight: 700;
  color: var(--essay-accent);
  background: var(--essay-accent-soft);
  padding: 2px 8px;
  border-radius: 99px;
}

/* ── Progress + stepper ───────────────────────────────────────────────────── */
#mode-essay .essay-guided-progress { margin: 0 0 12px; }
#mode-essay .essay-guided-progress[hidden] { display: none; }
#mode-essay .essay-guided-progress-bar {
  background: var(--essay-border-soft);
  border-radius: 99px;
  height: 4px;
  overflow: hidden;
}
#mode-essay .essay-guided-progress-bar span {
  background: var(--essay-accent);
  border-radius: 99px;
  display: block;
  height: 100%;
  transition: width .25s ease;
}

#mode-essay .essay-guided-nav { display: grid; gap: 2px; margin-bottom: 18px; }
#mode-essay .essay-guided-nav[hidden] { display: none; }
#mode-essay .essay-guided-nav button {
  align-items: flex-start;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--essay-muted);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: calc(.92rem * var(--essay-guided-font-scale, 1));
  gap: 10px;
  min-height: 42px;
  padding: calc(7px * var(--essay-guided-font-scale, 1)) 10px;
  text-align: left;
  width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}
#mode-essay .essay-guided-nav button:disabled { cursor: default; opacity: .45; }
#mode-essay .essay-guided-nav-index {
  align-items: center;
  background: var(--essay-border-soft);
  border-radius: 50%;
  color: var(--essay-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  margin-top: 2px;
  width: 24px;
}
#mode-essay .essay-guided-nav button:hover:not(:disabled) {
  background: var(--essay-accent-soft);
  color: var(--essay-ink);
}
#mode-essay .essay-guided-nav button.is-active {
  background: var(--essay-accent-soft);
  color: var(--essay-ink);
  font-weight: 700;
}
#mode-essay .essay-guided-nav button.is-active .essay-guided-nav-index {
  background: var(--essay-accent);
  color: #fff;
}
#mode-essay .essay-guided-nav button.is-visited { color: var(--essay-ink); }
#mode-essay .essay-guided-nav button.is-visited .essay-guided-nav-index {
  background: transparent;
  border: 1px solid var(--essay-success);
  color: var(--essay-success);
}

/* ── Section body ─────────────────────────────────────────────────────────── */
#mode-essay .essay-guided-content {
  color: var(--essay-ink);
  font-size: var(--essay-guided-font);
  line-height: var(--essay-guided-lh);
}
#mode-essay .essay-guided-section-head { margin-bottom: 14px; }
#mode-essay .essay-guided-step-tag {
  color: var(--essay-muted);
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-section h3 {
  align-items: center;
  display: flex;
  font-size: 1.12rem;
  gap: 8px;
  line-height: 1.3;
  margin: 4px 0 6px;
}
#mode-essay .essay-guided-section-icon { font-size: 1.05rem; }
#mode-essay .essay-guided-section-lede {
  color: var(--essay-muted);
  font-size: var(--essay-guided-font-sm);
  margin: 0;
}
#mode-essay .essay-guided-visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
#mode-essay .essay-guided-empty { color: var(--essay-muted); }

#mode-essay .essay-guided-prompt {
  border-left: 3px solid var(--essay-accent);
  color: var(--essay-ink);
  font-size: var(--essay-guided-font);
  margin: 0 0 14px;
  padding: 2px 0 2px 12px;
}

#mode-essay .essay-guided-loading {
  align-items: center;
  color: var(--essay-muted);
  display: flex;
  gap: 10px;
  padding: 18px 0;
}
#mode-essay .essay-guided-spinner {
  animation: essay-guided-spin .9s linear infinite;
  border: 2px solid var(--essay-border-soft);
  border-radius: 50%;
  border-top-color: var(--essay-accent);
  height: 16px;
  width: 16px;
}
@keyframes essay-guided-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #mode-essay .essay-guided-spinner { animation: none; }
}

/* ── Disclosure groups: the main cure for the wall of bullet lists ────────── */
#mode-essay .essay-guided-group { border-top: 1px solid var(--essay-border-soft); }
#mode-essay .essay-guided-group:last-of-type { border-bottom: 1px solid var(--essay-border-soft); }
#mode-essay .essay-guided-group-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--essay-ink);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  gap: 8px;
  min-height: 46px;
  padding: 11px 2px;
  text-align: left;
  width: 100%;
}
#mode-essay .essay-guided-group-title { flex: 1 1 auto; }
#mode-essay .essay-guided-group-count {
  background: var(--essay-border-soft);
  border-radius: 99px;
  color: var(--essay-muted);
  font-size: .74rem;
  padding: 2px 8px;
}
#mode-essay .essay-guided-group-chevron {
  border-bottom: 2px solid var(--essay-muted);
  border-right: 2px solid var(--essay-muted);
  flex: 0 0 auto;
  height: 7px;
  transform: rotate(45deg);
  transition: transform .18s ease;
  width: 7px;
}
#mode-essay .essay-guided-group.is-open > .essay-guided-group-toggle .essay-guided-group-chevron,
#mode-essay .essay-guided-checklist.is-open .essay-guided-group-chevron {
  transform: rotate(-135deg);
}
#mode-essay .essay-guided-group-body { padding: 0 2px 14px; }
#mode-essay .essay-guided-group-body[hidden] { display: none; }
#mode-essay .essay-guided-group--warn .essay-guided-group-title { color: var(--essay-danger); }

/* ── Prompt parts / requirements / traps / angles ─────────────────────────── */
#mode-essay .essay-guided-parts { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
#mode-essay .essay-guided-parts li { display: flex; gap: 10px; }
#mode-essay .essay-guided-parts p { margin: 2px 0 0; }
#mode-essay .essay-guided-part-index {
  align-items: center;
  background: var(--essay-accent-soft);
  border-radius: 50%;
  color: var(--essay-accent);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .76rem;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  margin-top: 2px;
  width: 22px;
}
#mode-essay .essay-guided-part-role {
  color: var(--essay-muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#mode-essay .essay-guided-ticklist { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
#mode-essay .essay-guided-ticklist li { display: flex; gap: 10px; }
#mode-essay .essay-guided-check,
#mode-essay .essay-guided-warn {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .76rem;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  margin-top: 2px;
  width: 20px;
}
#mode-essay .essay-guided-check { background: color-mix(in srgb, var(--essay-success) 14%, transparent); color: var(--essay-success); }
#mode-essay .essay-guided-warn { background: color-mix(in srgb, var(--essay-danger) 14%, transparent); color: var(--essay-danger); }

/* ── Common Mistakes to Avoid (Structured 3-Tier Pedagogical Cards) ─────── */
#mode-essay .essay-guided-mistakes-container {
  display: grid;
  gap: 12px;
}
#mode-essay .essay-guided-mistakes-intro {
  margin-bottom: 2px;
}
#mode-essay .essay-guided-mistakes-sub {
  color: var(--essay-muted);
  font-size: calc(0.84rem * var(--essay-font-scale, 1));
  line-height: 1.45;
  margin: 0;
}
#mode-essay .essay-guided-mistakes-list {
  display: grid;
  gap: 12px;
}
#mode-essay .essay-guided-mistake-card {
  background: var(--essay-surface, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--essay-border-soft);
  border-left: 3.5px solid var(--essay-danger, #ef4444);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#mode-essay .essay-guided-mistake-card:hover {
  border-color: color-mix(in srgb, var(--essay-danger) 40%, var(--essay-border-soft));
}
#mode-essay .essay-guided-mistake-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#mode-essay .essay-guided-mistake-badge {
  align-items: center;
  background: color-mix(in srgb, var(--essay-danger) 12%, transparent);
  border-radius: 6px;
  color: var(--essay-danger, #ef4444);
  display: inline-flex;
  font-size: calc(0.72rem * var(--essay-font-scale, 1));
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  white-space: nowrap;
}
#mode-essay .essay-guided-mistake-title {
  color: var(--essay-text);
  flex: 1 1 auto;
  font-size: calc(0.92rem * var(--essay-font-scale, 1));
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}
#mode-essay .essay-guided-mistake-body {
  display: grid;
  gap: 7px;
  margin-top: 2px;
}
#mode-essay .essay-guided-mistake-row {
  align-items: baseline;
  display: grid;
  gap: 6px 10px;
  grid-template-columns: auto 1fr;
}
#mode-essay .essay-guided-mistake-tag {
  align-items: center;
  border-radius: 4px;
  display: inline-flex;
  font-size: calc(0.72rem * var(--essay-font-scale, 1));
  font-weight: 700;
  gap: 3px;
  padding: 1px 6px;
  white-space: nowrap;
}
#mode-essay .essay-guided-mistake-row.is-mistake .essay-guided-mistake-tag {
  background: color-mix(in srgb, #ef4444 12%, transparent);
  color: #dc2626;
}
#mode-essay .essay-guided-mistake-row.is-why .essay-guided-mistake-tag {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: #d97706;
}
#mode-essay .essay-guided-mistake-row.is-fix .essay-guided-mistake-tag {
  background: color-mix(in srgb, #10b981 14%, transparent);
  color: #059669;
}
#mode-essay .essay-guided-mistake-desc {
  color: var(--essay-text);
  font-size: calc(0.85rem * var(--essay-font-scale, 1));
  line-height: 1.48;
  margin: 0;
}
#mode-essay .essay-guided-mistake-row.is-why .essay-guided-mistake-desc {
  color: var(--essay-muted);
}
#mode-essay .essay-guided-mistake-row.is-fix .essay-guided-mistake-desc {
  color: var(--essay-text);
  font-weight: 500;
}

@media (max-width: 640px) {
  #mode-essay .essay-guided-mistake-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}


#mode-essay .essay-guided-anglelist { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
#mode-essay .essay-guided-anglelist li { display: grid; gap: 4px; }
#mode-essay .essay-guided-chip {
  background: var(--essay-accent-soft);
  border-radius: 99px;
  color: var(--essay-accent);
  font-size: .7rem;
  font-weight: 700;
  justify-self: start;
  letter-spacing: .05em;
  padding: 3px 9px;
}

/* ── Interactive Prompt Comprehension Check ────────────────────────────── */
#mode-essay .essay-guided-quiz {
  background: var(--essay-paper);
  border: 1px solid var(--essay-border-soft);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
#mode-essay .essay-guided-quiz-head {
  display: grid;
  gap: 6px;
}
#mode-essay .essay-guided-quiz-badge {
  align-self: start;
  background: color-mix(in srgb, var(--essay-accent) 12%, transparent);
  border-radius: 99px;
  color: var(--essay-accent);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 10px;
  text-transform: uppercase;
  width: fit-content;
}
#mode-essay .essay-guided-quiz-question {
  color: var(--essay-ink);
  font-size: var(--essay-guided-font);
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}
#mode-essay .essay-guided-quiz-options {
  display: grid;
  gap: 8px;
}
#mode-essay .essay-guided-quiz-opt {
  align-items: center;
  background: var(--essay-paper);
  border: 1px solid var(--essay-border-soft);
  border-radius: 10px;
  color: var(--essay-ink);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: var(--essay-guided-font-sm);
  gap: 10px;
  line-height: 1.45;
  padding: 10px 12px;
  text-align: left;
  transition: all .15s ease;
}
#mode-essay .essay-guided-quiz-opt:hover {
  border-color: var(--essay-accent);
  background: var(--essay-accent-soft);
}
#mode-essay .essay-guided-quiz-radio {
  align-items: center;
  background: var(--essay-border-soft);
  border-radius: 50%;
  color: var(--essay-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .75rem;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  width: 22px;
  transition: all .15s ease;
}
#mode-essay .essay-guided-quiz-opt.is-selected {
  border-color: var(--essay-accent);
  background: var(--essay-accent-soft);
}
#mode-essay .essay-guided-quiz-opt.is-selected .essay-guided-quiz-radio {
  background: var(--essay-accent);
  color: #fff;
}
#mode-essay .essay-guided-quiz-opt.is-correct {
  border-color: var(--essay-success);
  background: color-mix(in srgb, var(--essay-success) 10%, transparent);
}
#mode-essay .essay-guided-quiz-opt.is-correct .essay-guided-quiz-radio {
  background: var(--essay-success);
  color: #fff;
}
#mode-essay .essay-guided-quiz-opt.is-incorrect {
  border-color: var(--essay-danger);
  background: color-mix(in srgb, var(--essay-danger) 8%, transparent);
}
#mode-essay .essay-guided-quiz-opt.is-incorrect .essay-guided-quiz-radio {
  background: var(--essay-danger);
  color: #fff;
}
#mode-essay .essay-guided-quiz-feedback {
  border-radius: 8px;
  display: flex;
  font-size: var(--essay-guided-font-sm);
  gap: 10px;
  line-height: 1.45;
  padding: 10px 12px;
  animation: fadeIn 0.2s ease-out;
}
#mode-essay .essay-guided-quiz-feedback.is-success {
  background: color-mix(in srgb, var(--essay-success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--essay-success) 30%, transparent);
  color: var(--essay-ink);
}
#mode-essay .essay-guided-quiz-feedback.is-warning {
  background: color-mix(in srgb, var(--essay-danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--essay-danger) 25%, transparent);
  color: var(--essay-ink);
}
#mode-essay .essay-guided-quiz-feedback strong {
  display: block;
  margin-bottom: 2px;
}
#mode-essay .essay-guided-quiz-feedback p {
  margin: 0;
  color: var(--essay-muted);
  font-size: .8rem;
}

/* ── Visually Grouped Stances & Approaches ────────────────────────────── */
#mode-essay .essay-guided-stance-groups {
  display: grid;
  gap: 12px;
}
#mode-essay .essay-guided-stance-card {
  background: var(--essay-paper);
  border: 1px solid var(--essay-border-soft);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  padding: 12px;
  transition: border-color .15s ease;
}
#mode-essay .essay-guided-stance-card.is-agree {
  border-left: 4px solid var(--essay-success);
  background: color-mix(in srgb, var(--essay-success) 3%, var(--essay-paper));
}
#mode-essay .essay-guided-stance-card.is-disagree {
  border-left: 4px solid #f59e0b;
  background: color-mix(in srgb, #f59e0b 4%, var(--essay-paper));
}
#mode-essay .essay-guided-stance-head {
  align-items: center;
  display: flex;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--essay-border-soft);
}
#mode-essay .essay-guided-stance-head strong {
  color: var(--essay-ink);
  font-size: .92rem;
  flex: 1;
}
#mode-essay .essay-guided-stance-count {
  color: var(--essay-muted);
  font-size: .74rem;
  font-weight: 600;
}

/* ── Custom Main Point Picker with <?> Explanation Button ───────────────── */
#mode-essay .essay-guided-stance-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
#mode-essay .essay-guided-stance-tab {
  align-items: center;
  background: var(--essay-paper);
  border: 1px solid var(--essay-border-soft);
  border-radius: 10px;
  color: var(--essay-ink);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  gap: 8px;
  justify-content: space-between;
  padding: 10px 14px;
  transition: all .15s ease;
}
#mode-essay .essay-guided-stance-tab:hover {
  border-color: var(--essay-accent);
}
#mode-essay .essay-guided-stance-tab.is-active {
  background: var(--essay-accent-soft);
  border-color: var(--essay-accent);
  color: var(--essay-accent);
}
#mode-essay .essay-guided-stance-tab-state {
  color: var(--essay-muted);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
}
#mode-essay .essay-guided-stance-tab.is-active .essay-guided-stance-tab-state {
  color: var(--essay-accent);
}

#mode-essay .essay-guided-points-container {
  display: grid;
  gap: 12px;
}
#mode-essay .essay-guided-points-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
#mode-essay .essay-guided-points-head h4 {
  color: var(--essay-ink);
  font-size: .96rem;
  margin: 0 0 4px;
}
#mode-essay .essay-guided-points-subtitle {
  color: var(--essay-muted);
  font-size: var(--essay-guided-font-sm);
  margin: 0;
  line-height: 1.45;
}
#mode-essay .essay-guided-points-list {
  display: grid;
  gap: 10px;
}
#mode-essay .essay-guided-point-card {
  background: var(--essay-paper);
  border: 1px solid var(--essay-border-soft);
  border-radius: 10px;
  display: grid;
  overflow: hidden;
  transition: all .15s ease;
}
#mode-essay .essay-guided-point-card:hover {
  border-color: var(--essay-accent);
}
#mode-essay .essay-guided-point-card.is-selected {
  background: var(--essay-accent-soft);
  border-color: var(--essay-accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
#mode-essay .essay-guided-point-main {
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
}
#mode-essay .essay-guided-point-select-btn {
  align-items: flex-start;
  background: transparent;
  border: 0;
  color: var(--essay-ink);
  cursor: pointer;
  display: flex;
  flex: 1;
  font-family: inherit;
  font-size: var(--essay-guided-font);
  gap: 10px;
  line-height: 1.45;
  padding: 0;
  text-align: left;
}
#mode-essay .essay-guided-point-checkbox {
  align-items: center;
  background: var(--essay-border-soft);
  border-radius: 6px;
  color: transparent;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .75rem;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  min-width: 24px;
  padding: 0 4px;
  margin-top: 2px;
  transition: all .15s ease;
}
#mode-essay .essay-guided-point-card.is-selected .essay-guided-point-checkbox {
  background: var(--essay-accent);
  color: #fff;
}
#mode-essay .essay-guided-point-text {
  display: grid;
  gap: 3px;
}
#mode-essay .essay-guided-point-title {
  color: var(--essay-ink);
  font-size: .94rem;
}
#mode-essay .essay-guided-point-vi {
  color: var(--essay-muted);
  font-size: var(--essay-guided-font-sm);
  line-height: 1.4;
}

#mode-essay .essay-guided-info-btn {
  align-items: center;
  background: color-mix(in srgb, var(--essay-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--essay-accent) 25%, transparent);
  border-radius: 50%;
  color: var(--essay-accent);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  width: 28px;
  transition: all .15s ease;
}
#mode-essay .essay-guided-info-btn:hover,
#mode-essay .essay-guided-info-btn.is-open {
  background: var(--essay-accent);
  color: #fff;
  transform: scale(1.08);
}

#mode-essay .essay-guided-point-expl {
  background: color-mix(in srgb, var(--essay-accent) 8%, var(--essay-paper));
  border-top: 1px dashed color-mix(in srgb, var(--essay-accent) 30%, transparent);
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  animation: fadeIn 0.2s ease-out;
}
#mode-essay .essay-guided-point-expl-head {
  align-items: center;
  color: var(--essay-accent);
  display: flex;
  font-size: .82rem;
  font-weight: 700;
  gap: 6px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-point-expl-desc {
  color: var(--essay-ink);
  font-size: var(--essay-guided-font-sm);
  line-height: 1.5;
  margin: 0;
}
#mode-essay .essay-guided-point-expl-tip {
  background: var(--essay-paper);
  border-left: 3px solid var(--essay-accent);
  border-radius: 4px;
  color: var(--essay-muted);
  display: grid;
  font-size: .78rem;
  gap: 2px;
  line-height: 1.45;
  padding: 6px 10px;
}
#mode-essay .essay-guided-point-expl-tip strong {
  color: var(--essay-accent);
}

/* ── Direction cards + language targets ──────────────────────────────────── */
#mode-essay .essay-guided-choice-list { display: grid; gap: 10px; }
#mode-essay .essay-guided-target-grid { display: grid; gap: 8px; }
#mode-essay .essay-guided-choice,
#mode-essay .essay-guided-target {
  background: transparent;
  border: 1px solid var(--essay-border-soft);
  border-radius: 10px;
  color: var(--essay-ink);
  cursor: pointer;
  display: grid;
  font-family: inherit;
  font-size: var(--essay-guided-font);
  gap: 6px;
  line-height: 1.5;
  padding: 12px;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
#mode-essay .essay-guided-choice-head {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
#mode-essay .essay-guided-choice-head strong { font-size: 1rem; }
#mode-essay .essay-guided-choice-state {
  color: var(--essay-muted);
  flex: 0 0 auto;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-choice-point {
  color: var(--essay-muted);
  display: block;
  font-size: var(--essay-guided-font-sm);
}
#mode-essay .essay-guided-choice-point em {
  color: var(--essay-accent);
  font-style: normal;
  font-weight: 700;
  margin-right: 4px;
}
#mode-essay .essay-guided-choice:hover,
#mode-essay .essay-guided-target:hover:not(:disabled) { border-color: var(--essay-accent); }
#mode-essay .essay-guided-choice.is-selected,
#mode-essay .essay-guided-target.is-selected {
  background: var(--essay-accent-soft);
  border-color: var(--essay-accent);
}
#mode-essay .essay-guided-choice.is-selected .essay-guided-choice-state { color: var(--essay-accent); }
#mode-essay .essay-guided-target:disabled { cursor: not-allowed; opacity: .45; }

/* ── Enhanced High-Contrast Target & Vocabulary Cards ─────────────────────── */
#mode-essay .essay-guided-target-card {
  background: var(--essay-paper);
  border: 1px solid var(--essay-border-soft);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#mode-essay .essay-guided-target-card:hover {
  border-color: var(--essay-accent);
}
#mode-essay .essay-guided-target-card.is-selected {
  background: var(--essay-accent-soft);
  border-color: var(--essay-accent);
}
#mode-essay .essay-guided-target-head {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
}
#mode-essay .essay-guided-target-select-btn {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex: 1;
  font-family: inherit;
  gap: 10px;
  padding: 0;
  text-align: left;
}
#mode-essay .essay-guided-target-checkbox {
  align-items: center;
  background: var(--essay-paper);
  border: 1.5px solid var(--essay-border-soft);
  border-radius: 6px;
  color: transparent;
  display: inline-flex;
  flex-shrink: 0;
  font-size: .85rem;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  transition: all .15s ease;
  width: 22px;
}
#mode-essay .essay-guided-target-card.is-selected .essay-guided-target-checkbox {
  background: var(--essay-accent);
  border-color: var(--essay-accent);
  color: #fff;
}
#mode-essay .essay-guided-target-term {
  color: var(--essay-ink);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
#mode-essay .essay-guided-target-gloss {
  color: var(--essay-muted);
  flex: 1;
  font-size: .92rem;
  font-weight: 500;
}
#mode-essay .essay-guided-vocab-vi-toggle {
  align-items: center;
  background: var(--essay-paper);
  border: 1.5px solid var(--essay-border-soft);
  border-radius: 50%;
  color: var(--essay-accent);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  height: 26px;
  justify-content: center;
  transition: all .15s ease;
  width: 26px;
}
#mode-essay .essay-guided-vocab-vi-toggle:hover {
  background: var(--essay-accent-soft);
  border-color: var(--essay-accent);
}
#mode-essay .essay-guided-vocab-vi-toggle.is-open {
  background: #10b981;
  border-color: #059669;
  color: #fff;
}
#mode-essay .essay-guided-vocab-example {
  background: color-mix(in srgb, var(--essay-accent) 6%, var(--essay-paper));
  border-left: 3.5px solid var(--essay-accent);
  border-radius: 6px;
  display: grid;
  gap: 3px;
  padding: 8px 12px;
  width: 100%;
}
#mode-essay .essay-guided-vocab-example-label {
  color: var(--essay-accent);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-vocab-example-text {
  color: var(--essay-ink);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
}
#mode-essay .essay-guided-vocab-vi-box {
  background: color-mix(in srgb, #10b981 10%, var(--essay-paper));
  border-left: 3.5px solid #10b981;
  border-radius: 6px;
  display: grid;
  gap: 3px;
  padding: 8px 12px;
  width: 100%;
}
#mode-essay .essay-guided-vocab-vi-label {
  color: #059669;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-vocab-vi-text {
  color: var(--essay-ink);
  font-size: .92rem;
  line-height: 1.5;
  margin: 0;
}

/* ── Enhanced Collocation Cards ──────────────────────────────────────────── */
#mode-essay .essay-guided-collo-grid {
  display: grid;
  gap: 10px;
}
#mode-essay .essay-guided-collo-card {
  background: var(--essay-paper);
  border: 1px solid var(--essay-border-soft);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  transition: border-color .15s ease;
}
#mode-essay .essay-guided-collo-card:hover {
  border-color: var(--essay-accent);
}
#mode-essay .essay-guided-collo-head {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
}
#mode-essay .essay-guided-collo-title-wrap {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#mode-essay .essay-guided-collo-term {
  color: var(--essay-accent);
  font-size: 1.02rem;
  font-weight: 700;
}
#mode-essay .essay-guided-collo-meaning {
  color: var(--essay-muted);
  font-size: .92rem;
  font-weight: 500;
}
#mode-essay .essay-guided-collo-example {
  background: color-mix(in srgb, var(--essay-accent) 5%, var(--essay-paper));
  border-left: 3px solid color-mix(in srgb, var(--essay-accent) 60%, transparent);
  border-radius: 6px;
  color: var(--essay-ink);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0;
  padding: 8px 12px;
}
#mode-essay .essay-guided-collo-example em {
  color: var(--essay-ink);
  font-style: normal;
}

#mode-essay .essay-guided-meter {
  align-items: center;
  color: var(--essay-muted);
  display: flex;
  font-size: var(--essay-guided-font-sm);
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 6px;
}
#mode-essay .essay-guided-meter strong { color: var(--essay-accent); }
#mode-essay .essay-guided-meter.is-full strong { color: var(--essay-success); }

#mode-essay .essay-guided-deflist { display: grid; gap: 0; margin: 0; }
#mode-essay .essay-guided-deflist > div {
  border-bottom: 1px solid var(--essay-border-soft);
  display: grid;
  gap: 3px;
  padding: 10px 0;
}
#mode-essay .essay-guided-deflist > div:last-child { border-bottom: 0; padding-bottom: 0; }
#mode-essay .essay-guided-deflist dt { font-weight: 700; }
#mode-essay .essay-guided-deflist dd {
  color: var(--essay-muted);
  font-size: var(--essay-guided-font-sm);
  margin: 0;
}

/* ── Plan ─────────────────────────────────────────────────────────────────── */
#mode-essay .essay-guided-plan { display: grid; gap: 14px; }
#mode-essay .essay-guided-plan-row { display: flex; gap: 10px; }
#mode-essay .essay-guided-plan-row p { margin: 2px 0 0; }
#mode-essay .essay-guided-plan-index {
  align-items: center;
  background: var(--essay-accent);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .76rem;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  margin-top: 2px;
  width: 22px;
}
#mode-essay .essay-guided-plan-label {
  color: var(--essay-muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-inline-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
#mode-essay .essay-guided-source-note { color: var(--essay-muted); font-size: .78rem; }

/* ── Sentence support ─────────────────────────────────────────────────────── */
#mode-essay .essay-guided-scaffold-guide {
  background: color-mix(in srgb, var(--essay-accent) 8%, var(--essay-paper));
  border: 1px solid color-mix(in srgb, var(--essay-accent) 25%, transparent);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px;
}
#mode-essay .essay-guided-scaffold-guide-head {
  align-items: center;
  color: var(--essay-accent);
  display: flex;
  font-size: .9rem;
  font-weight: 700;
  gap: 8px;
}
#mode-essay .essay-guided-scaffold-guide-steps {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#mode-essay .essay-guided-scaffold-guide-steps li {
  color: var(--essay-ink);
  font-size: var(--essay-guided-font-sm);
  line-height: 1.45;
}
#mode-essay .essay-guided-scaffold-guide-steps li strong {
  color: var(--essay-accent);
}
#mode-essay .essay-guided-scaffold-guide-note {
  border-top: 1px dashed color-mix(in srgb, var(--essay-accent) 25%, transparent);
  color: var(--essay-muted);
  font-size: .78rem;
  line-height: 1.4;
  margin: 0;
  padding-top: 8px;
}

#mode-essay .essay-guided-depth {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}
#mode-essay .essay-guided-depth-label {
  color: var(--essay-muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-depth-track {
  background: var(--essay-border-soft);
  border-radius: 99px;
  display: grid;
  gap: 2px;
  grid-auto-flow: column;
  padding: 3px;
}
#mode-essay .essay-guided-depth-track button {
  background: transparent;
  border: 0;
  border-radius: 99px;
  color: var(--essay-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  min-height: 34px;
  padding: 6px 8px;
}
#mode-essay .essay-guided-depth-track button.is-active {
  background: var(--essay-paper);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
  color: var(--essay-ink);
}
/* ── Scaffold Paragraph Tabs ─────────────────────────────────────────────── */
#mode-essay .essay-guided-scaffold-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding: 2px 0;
}
#mode-essay .essay-guided-scaffold-tab {
  align-items: center;
  background: var(--essay-paper);
  border: 1px solid var(--essay-border-soft);
  border-radius: 99px;
  color: var(--essay-muted);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  gap: 4px;
  min-height: 32px;
  padding: 4px 12px;
  transition: all .15s ease;
}
#mode-essay .essay-guided-scaffold-tab:hover {
  border-color: var(--essay-accent);
  color: var(--essay-ink);
}
#mode-essay .essay-guided-scaffold-tab.is-active {
  background: var(--essay-accent);
  border-color: var(--essay-accent);
  color: #fff;
  font-weight: 700;
}

#mode-essay .essay-guided-paragraph-head {
  color: var(--essay-accent);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .05em;
  margin: 20px 0 8px;
  text-transform: uppercase;
}
#mode-essay .essay-guided-sentence {
  border-bottom: 1px solid var(--essay-border-soft);
  display: grid;
  gap: 10px;
  padding: 14px 0 16px;
}
#mode-essay .essay-guided-sentence-meta {
  align-items: center;
  display: flex;
  gap: 8px;
}
#mode-essay .essay-guided-sentence-num {
  background: var(--essay-accent-soft);
  border-radius: 6px;
  color: var(--essay-accent);
  font-size: .76rem;
  font-weight: 700;
  padding: 2px 8px;
  text-transform: uppercase;
}
#mode-essay .essay-guided-sentence-purpose {
  color: var(--essay-muted);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
}
#mode-essay .essay-guided-sentence-cue {
  color: var(--essay-ink);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

/* ── Interactive Fillable Frame ──────────────────────────────────────────── */
#mode-essay .essay-guided-frame.is-interactive {
  background: var(--essay-paper);
  border: 1px solid var(--essay-border-soft);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}
#mode-essay .essay-guided-frame-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}
#mode-essay .essay-guided-frame-inputs {
  align-items: center;
  color: var(--essay-ink);
  display: flex;
  flex-wrap: wrap;
  font-size: .95rem;
  gap: 6px 8px;
  line-height: 1.6;
}
#mode-essay .essay-guided-slot-input {
  background: color-mix(in srgb, var(--essay-accent) 6%, #ffffff);
  border: 1.5px solid color-mix(in srgb, var(--essay-accent) 40%, transparent);
  border-radius: 6px;
  color: var(--essay-ink);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  min-width: 140px;
  padding: 4px 10px;
  transition: all .15s ease;
}
#mode-essay .essay-guided-slot-input:focus {
  background: #ffffff;
  border-color: var(--essay-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--essay-accent) 20%, transparent);
  outline: none;
}
#mode-essay .essay-guided-frame-assembled {
  background: color-mix(in srgb, #10b981 8%, var(--essay-paper));
  border-left: 3.5px solid #10b981;
  border-radius: 6px;
  display: grid;
  gap: 3px;
  padding: 8px 12px;
}
#mode-essay .essay-guided-assembled-label {
  color: #059669;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-assembled-text {
  color: var(--essay-ink);
  font-size: .93rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}
#mode-essay .essay-guided-filled-slot {
  background: color-mix(in srgb, #10b981 18%, transparent);
  border-radius: 4px;
  color: #047857;
  padding: 1px 6px;
}
#mode-essay .essay-guided-empty-slot {
  color: var(--essay-muted);
  font-style: italic;
}

#mode-essay .essay-guided-model {
  background: color-mix(in srgb, var(--essay-accent) 6%, var(--essay-paper));
  border-left: 3.5px solid var(--essay-accent);
  border-radius: 6px;
  display: grid;
  gap: 3px;
  padding: 8px 12px;
}
#mode-essay .essay-guided-model-text {
  color: var(--essay-ink);
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
}
#mode-essay .essay-guided-reveal-label {
  color: var(--essay-accent);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-sentence-actions { display: flex; flex-wrap: wrap; gap: 8px; }

#mode-essay .essay-guided-scaffold-footer-cta {
  margin-top: 20px;
  text-align: center;
}
#mode-essay .essay-guided-scaffold-footer-cta .essay-guided-stepnav-btn {
  font-size: .95rem;
  min-height: 42px;
  padding: 10px 20px;
}

/* ── Shared buttons ───────────────────────────────────────────────────────── */
#mode-essay .essay-guided-ghost-btn,
#mode-essay .essay-guided-unavailable button {
  background: transparent;
  border: 1px solid var(--essay-border);
  border-radius: 8px;
  color: var(--essay-accent);
  cursor: pointer;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  min-height: 36px;
  padding: 7px 12px;
}
#mode-essay .essay-guided-ghost-btn:hover:not(:disabled),
#mode-essay .essay-guided-unavailable button:hover { border-color: var(--essay-accent); }
#mode-essay .essay-guided-ghost-btn:disabled { cursor: not-allowed; opacity: .45; }
#mode-essay .essay-guided-ghost-btn.is-selected,
#mode-essay .essay-guided-ghost-btn.is-copied {
  background: var(--essay-accent-soft);
  border-color: var(--essay-accent);
}
#mode-essay .essay-guided-primary-btn,
#mode-essay .essay-request-guided-btn {
  background: var(--essay-accent);
  border: 1px solid var(--essay-accent);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  margin-top: 18px;
  min-height: 42px;
  padding: 10px 14px;
  width: 100%;
}
#mode-essay .essay-request-guided-btn[hidden] { display: none; }

#mode-essay .essay-guided-stepnav {
  border-top: 1px solid var(--essay-border-soft);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 14px;
}
#mode-essay .essay-guided-stepnav-btn {
  background: transparent;
  border: 1px solid var(--essay-border);
  border-radius: 8px;
  color: var(--essay-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  min-height: 40px;
  padding: 8px 12px;
}
#mode-essay .essay-guided-stepnav-btn.is-primary {
  background: var(--essay-accent);
  border-color: var(--essay-accent);
  color: #fff;
}

#mode-essay .essay-guided-unavailable {
  border-left: 3px solid var(--essay-danger);
  color: var(--essay-muted);
  display: grid;
  font-size: var(--essay-guided-font-sm);
  gap: 8px;
  justify-items: start;
  margin-bottom: 12px;
  padding-left: 12px;
}
#mode-essay .essay-guided-unavailable[hidden] { display: none; }
#mode-essay .essay-guided-unavailable p { margin: 0; }

/* ── Pre-submission checklist ─────────────────────────────────────────────── */
#mode-essay .essay-guided-checklist {
  border-top: 1px solid var(--essay-border-soft);
  margin-top: 22px;
  padding-top: 4px;
}
#mode-essay .essay-guided-checklist[hidden] { display: none; }
#mode-essay .essay-guided-checklist-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--essay-ink);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  gap: 8px;
  min-height: 46px;
  padding: 11px 2px;
  text-align: left;
  width: 100%;
}
#mode-essay .essay-guided-checklist-title { flex: 1 1 auto; }
#mode-essay .essay-guided-checklist-count {
  background: var(--essay-border-soft);
  border-radius: 99px;
  color: var(--essay-muted);
  font-size: .76rem;
  padding: 2px 9px;
}
#mode-essay .essay-guided-checklist-count.is-complete {
  background: color-mix(in srgb, var(--essay-success) 16%, transparent);
  color: var(--essay-success);
}
#mode-essay .essay-guided-checklist-body { display: grid; gap: 2px; padding-bottom: 8px; }
#mode-essay .essay-guided-checklist-body[hidden] { display: none; }
#mode-essay .essay-guided-checklist label {
  align-items: start;
  border-radius: 8px;
  color: var(--essay-ink);
  cursor: pointer;
  display: flex;
  font-size: var(--essay-guided-font-sm);
  gap: 10px;
  line-height: 1.5;
  padding: 9px 8px;
}
#mode-essay .essay-guided-checklist label:hover { background: var(--essay-accent-soft); }
#mode-essay .essay-guided-checklist label.is-checked { color: var(--essay-muted); }
#mode-essay .essay-guided-checklist input[type="checkbox"] {
  accent-color: var(--essay-accent);
  flex: 0 0 auto;
  height: 18px;
  margin-top: 2px;
  width: 18px;
}
#mode-essay .essay-guided-checklist small {
  color: var(--essay-muted);
  display: block;
  font-size: .76rem;
  padding: 4px 8px 0;
}
#mode-essay .essay-guided-checklist.is-complete { border-top-color: var(--essay-success); }
#mode-essay .essay-guided-checklist.is-attention {
  animation: essay-guided-attention .8s ease 2;
  border-radius: 8px;
  outline: 2px solid var(--essay-danger);
  outline-offset: 4px;
}
@keyframes essay-guided-attention {
  0%, 100% { outline-color: var(--essay-danger); }
  50% { outline-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  #mode-essay .essay-guided-checklist.is-attention { animation: none; }
}

#mode-essay .essay-guided-recycle {
  align-items: center;
  border-top: 1px solid var(--essay-border-soft);
  color: var(--essay-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .8rem;
  gap: 8px;
  margin-top: 18px;
  padding-top: 12px;
}
#mode-essay .essay-guided-recycle[hidden] { display: none; }
#mode-essay .essay-guided-recycle span { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* Focus is keyboard-critical here: the rail is all buttons. */
#mode-essay .essay-guided-rail button:focus-visible,
#mode-essay .essay-guided-rail input:focus-visible {
  outline: 2px solid var(--essay-accent);
  outline-offset: 2px;
}

/* ── Narrow screens: the rail stacks above the editor and collapses ───────── */
@media (max-width: 1023px) {
  #mode-essay .essay-guided-workspace { display: block; }
  #mode-essay .essay-guided-rail {
    border-bottom: 1px solid var(--essay-border-soft);
    border-right: 0;
    margin-bottom: 18px;
    max-height: none;
    overflow: visible;
    padding: 0 0 14px;
    position: static;
  }
  #mode-essay .essay-guided-rail-header { position: static; }
  #mode-essay .essay-guided-mobile-toggle { display: inline-block; }
  #mode-essay .essay-guided-rail.is-collapsed > :not(.essay-guided-rail-header) { display: none; }
  #mode-essay .essay-guided-rail.is-collapsed { padding-bottom: 0; }
  /* Steps become a horizontal strip so they never eat the first screen. */
  #mode-essay .essay-guided-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  #mode-essay .essay-guided-nav::-webkit-scrollbar { display: none; }
  #mode-essay .essay-guided-nav button {
    border: 1px solid var(--essay-border-soft);
    flex: 0 0 auto;
    width: auto;
  }
  #mode-essay .essay-practice-choice { align-items: flex-start; flex-direction: column; }
  #mode-essay .essay-guided-preferences { margin-left: 0; }
}

@media (max-width: 560px) {
  #mode-essay .essay-guided-nav-label { display: none; }
  #mode-essay .essay-guided-nav button { min-height: 40px; padding: 7px; }
  #mode-essay .essay-guided-nav button.is-active .essay-guided-nav-label { display: inline; }
  #mode-essay .essay-guided-stepnav { flex-direction: column-reverse; }
  #mode-essay .essay-guided-stepnav-btn { width: 100%; }
}

/* ==========================================================================
   Fullscreen overlay — breaks free of .container 1100 px and gives the
   guided rail + editor room to breathe on wide monitors.
   Toggle: #essay-fullscreen-btn flips .essay-fullscreen on #mode-essay.
   ========================================================================== */

/* ── Fullscreen toggle button ────────────────────────────────────────────── */
#mode-essay .essay-fullscreen-btn {
  align-items: center;
  background: var(--essay-paper);
  border: 1px solid var(--essay-border);
  border-radius: 10px;
  color: var(--essay-accent);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  z-index: 2;
}
#mode-essay .essay-fullscreen-btn:hover {
  background: var(--essay-accent-soft);
  border-color: var(--essay-accent);
}
#mode-essay .essay-fullscreen-btn svg { flex: 0 0 auto; }

/* ── Fullscreen overlay state ────────────────────────────────────────────── */
#mode-essay.essay-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9998;
  overflow-y: auto;
  background: var(--essay-paper, #fff);
  padding: 0 28px 40px;
  overscroll-behavior: contain;
  animation: essay-fs-in .15s ease-out;
  --essay-guided-font: calc(1.05rem * var(--essay-guided-font-scale, 1));
  --essay-guided-font-sm: calc(.94rem * var(--essay-guided-font-scale, 1));
  --essay-guided-lh: calc(1.56 + (var(--essay-guided-font-scale, 1) - 1) * 0.16);
}
#mode-essay.essay-fullscreen.essay-fs-writing {
  padding-top: 16px;
}
@keyframes essay-fs-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Widen the inner container to full width in fullscreen */
#mode-essay.essay-fullscreen .essay-container {
  max-width: 100%;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

/* De-clutter: hide picker + header in all fullscreen phases */
#mode-essay.essay-fullscreen .ra-v7-picker-bar { display: none; }
#mode-essay.essay-fullscreen .essay-header-card,
#mode-essay.essay-guided-mode .essay-header-card,
#mode-essay.essay-writing-active .essay-header-card { display: none; }

/* Toggle button inverts in fullscreen */
#mode-essay.essay-fullscreen .essay-fullscreen-btn {
  background: var(--essay-accent);
  border-color: var(--essay-accent);
  color: #fff;
}
#mode-essay.essay-fullscreen .essay-fullscreen-btn:hover { opacity: .88; }

/* ── Fullscreen toggle button in rail header & editor ────────────────────── */
#mode-essay .essay-fullscreen-btn {
  align-items: center;
  background: var(--essay-paper, #fff);
  border: 1px solid var(--essay-border, #d2e3fc);
  border-radius: 99px;
  color: var(--essay-accent, #1a73e8);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  gap: 6px;
  min-height: 34px;
  padding: 5px 12px;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  z-index: 2;
}
#mode-essay .essay-fullscreen-btn:hover {
  background: var(--essay-accent-soft, #e8f0fe);
  border-color: var(--essay-accent, #1a73e8);
}
#mode-essay .essay-fullscreen-btn svg { flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 1: WALKTHROUGH — guided steps fill the screen, editor hidden.
   Active when: #mode-essay.essay-guided-mode:not(.essay-writing-phase)
   ══════════════════════════════════════════════════════════════════════════ */

/* Hide the compose card (essay textarea) during walkthrough */
#mode-essay.essay-guided-mode:not(.essay-writing-phase) #essay-step-write,
#mode-essay.essay-fullscreen:not(.essay-fs-writing) #essay-step-write {
  display: none !important;
}

/* Switch grid to single column — rail takes full width */
#mode-essay.essay-guided-mode:not(.essay-writing-phase) .essay-guided-workspace,
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-workspace {
  grid-template-columns: 1fr;
  gap: 0;
}

/* Rail: un-sticky, no border, no scroll constraint — it IS the page */
#mode-essay.essay-guided-mode:not(.essay-writing-phase) .essay-guided-rail,
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-rail {
  border-right: 0;
  max-height: none;
  overflow-y: visible;
  padding: 0;
  position: static;
}

/* Center the guided content for comfortable readability in standard mode */
#mode-essay.essay-guided-mode:not(.essay-writing-phase):not(.essay-fullscreen) .essay-guided-content {
  max-width: 860px;
  margin-inline: auto;
}

/* Fullscreen mode: span full wide screen without wasted side margins */
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-content {
  max-width: 100%;
  width: 100%;
  margin-inline: 0;
}

/* Larger step header for immersive handheld feel */
#mode-essay.essay-guided-mode:not(.essay-writing-phase) .essay-guided-section-head h3,
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-section-head h3 {
  font-size: 1.35rem;
  margin-bottom: 8px;
}
#mode-essay.essay-guided-mode:not(.essay-writing-phase) .essay-guided-section-lede,
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-section-lede {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--essay-muted);
}
#mode-essay.essay-guided-mode:not(.essay-writing-phase) .essay-guided-step-tag,
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-step-tag {
  font-size: .82rem;
}

/* Step nav at bottom — centered in standard mode, wide in fullscreen */
#mode-essay.essay-guided-mode:not(.essay-writing-phase):not(.essay-fullscreen) .essay-guided-stepnav {
  max-width: 860px;
  margin: 28px auto 0;
  padding-top: 20px;
}
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-stepnav {
  max-width: 100%;
  width: 100%;
  margin: 32px 0 0;
  padding-top: 20px;
}

/* Spacious step nav buttons */
#mode-essay.essay-guided-mode .essay-guided-nav button,
#mode-essay.essay-fullscreen .essay-guided-nav button {
  min-height: 48px;
  padding: 9px 14px;
  font-size: .96rem;
}
#mode-essay.essay-guided-mode .essay-guided-nav-index,
#mode-essay.essay-fullscreen .essay-guided-nav-index {
  height: 28px;
  width: 28px;
  font-size: .82rem;
}

/* Section body — more gap between disclosure groups */
#mode-essay.essay-guided-mode .essay-guided-group-toggle,
#mode-essay.essay-fullscreen .essay-guided-group-toggle {
  min-height: 50px;
  font-size: 1rem;
}
#mode-essay.essay-guided-mode .essay-guided-group-body,
#mode-essay.essay-fullscreen .essay-guided-group-body {
  padding: 0 4px 18px;
}

/* Ticklists / parts / angles — more vertical spacing */
#mode-essay.essay-guided-mode .essay-guided-parts,
#mode-essay.essay-guided-mode .essay-guided-ticklist,
#mode-essay.essay-guided-mode .essay-guided-anglelist,
#mode-essay.essay-fullscreen .essay-guided-parts,
#mode-essay.essay-fullscreen .essay-guided-ticklist,
#mode-essay.essay-fullscreen .essay-guided-anglelist {
  gap: 16px;
}

/* Quiz options — easier to read */
#mode-essay.essay-guided-mode .essay-guided-quiz-opt,
#mode-essay.essay-fullscreen .essay-guided-quiz-opt {
  padding: 12px 16px;
  font-size: .96rem;
}

/* ── "I'm ready — start writing" CTA ─────────────────────────────────────── */
#mode-essay .essay-fs-ready-btn {
  align-items: center;
  background: var(--essay-accent, #1a73e8);
  border: 2px solid var(--essay-accent, #1a73e8);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  display: none;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  margin: 32px auto 8px;
  max-width: 860px;
  min-height: 54px;
  padding: 14px 28px;
  transition: background .18s ease, transform .12s ease;
  width: 100%;
}
#mode-essay .essay-fs-ready-btn:hover {
  background: color-mix(in srgb, var(--essay-accent, #1a73e8) 88%, #000);
  transform: translateY(-1px);
}
/* Show during walkthrough phase in both guided mode and fullscreen */
#mode-essay.essay-guided-mode:not(.essay-writing-phase) .essay-fs-ready-btn,
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-fs-ready-btn {
  display: flex;
}

/* ══════════════════════════════════════════════════════════════════════════
   FULLSCREEN WIDE LAYOUT & BORDERS — eliminates excess side spacing
   and expands card borders, containers, and responsive grids edge-to-edge.
   ══════════════════════════════════════════════════════════════════════════ */

#mode-essay.essay-fullscreen .essay-fs-ready-btn {
  max-width: 100%;
}

/* Fullscreen railtop: solid background pinned to top, covering scroll overflow */
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-railtop {
  background: var(--essay-paper);
  padding-top: 16px;
  margin-top: 0;
  top: 0;
  z-index: 25;
}

/* Fullscreen header: spans wide with prominent bottom separation */
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-rail-header {
  width: 100%;
  padding: 6px 0 14px;
  border-bottom: 1.5px solid var(--essay-border-soft, rgba(110, 84, 54, 0.15));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Fullscreen stepper: fills the top bar with equal distribution */
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-nav {
  width: 100%;
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-nav button {
  flex: 1 1 0;
  justify-content: center;
  min-height: 42px;
  font-size: .92rem;
  padding: 6px 14px;
}

/* Widen Part 1 prompt hero with prominent borders */
#mode-essay.essay-fullscreen .essay-guided-prompt-hero {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid rgba(154, 87, 34, 0.22);
  border-radius: 14px;
  padding: 20px 24px;
}

/* Widen flowchart cards and connectors across the wide canvas */
#mode-essay.essay-fullscreen .essay-flowchart-arrow-strip,
#mode-essay.essay-fullscreen .essay-flowchart-nodes-grid {
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
#mode-essay.essay-fullscreen .essay-flowchart-card {
  border: 1.5px solid var(--essay-border-soft, rgba(110, 84, 54, 0.18));
  border-radius: 14px;
  padding: 20px 22px;
  border-left-width: 4px;
}

/* Widen Part 2 Type Card & 4-step Blueprint */
#mode-essay.essay-fullscreen .essay-guided-type-card {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid rgba(154, 87, 34, 0.22);
  border-radius: 14px;
  padding: 22px 26px;
}
#mode-essay.essay-fullscreen .essay-blueprint-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  #mode-essay.essay-fullscreen .essay-blueprint-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Widen Common Mistakes */
#mode-essay.essay-fullscreen .essay-guided-mistakes-container {
  width: 100%;
  box-sizing: border-box;
}
#mode-essay.essay-fullscreen .essay-guided-mistake-card {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid rgba(185, 28, 28, 0.25);
  border-left: 4px solid #b91c1c;
  border-radius: 14px;
  padding: 20px 24px;
}

/* Widen Approaches Box & Side-by-Side Grid */
#mode-essay.essay-fullscreen .essay-guided-approaches-box {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid rgba(154, 87, 34, 0.22);
  border-radius: 14px;
  padding: 22px 26px;
}
#mode-essay.essay-fullscreen .essay-guided-approaches-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Widen Quiz Cards and Gap Cards */
#mode-essay.essay-fullscreen .essay-guided-quiz-card,
#mode-essay.essay-fullscreen .essay-guided-gap-card {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--essay-border-soft, rgba(110, 84, 54, 0.18));
  border-radius: 14px;
  padding: 20px 24px;
}

/* Widen Requirements List */
#mode-essay.essay-fullscreen .essay-guided-req-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
}

/* Widen Writing Phase Workspace: more breathing room for sidebar notes & editor */
#mode-essay.essay-fullscreen.essay-fs-writing .essay-guided-workspace {
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
  gap: 32px;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 2: WRITING — editor fills the area, rail becomes compact sidebar.
   Active when: .essay-writing-phase or .essay-fs-writing
   ══════════════════════════════════════════════════════════════════════════ */

/* Two-column: compact rail + wide editor */
#mode-essay.essay-guided-mode.essay-writing-phase .essay-guided-workspace {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 28px;
}
#mode-essay.essay-fullscreen.essay-fs-writing .essay-guided-workspace {
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 32px;
}

/* Rail returns to scrollable sidebar, more compact */
#mode-essay.essay-guided-mode.essay-writing-phase .essay-guided-rail,
#mode-essay.essay-fullscreen.essay-fs-writing .essay-guided-rail {
  border-right: 1px solid var(--essay-border-soft);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding-right: 20px;
  position: sticky;
  top: 20px;
}

/* Scale down guided content in writing phase */
#mode-essay.essay-guided-mode.essay-writing-phase,
#mode-essay.essay-fullscreen.essay-fs-writing {
  --essay-guided-font: calc(.95rem * var(--essay-guided-font-scale, 1));
  --essay-guided-font-sm: calc(.86rem * var(--essay-guided-font-scale, 1));
  --essay-guided-lh: calc(1.52 + (var(--essay-guided-font-scale, 1) - 1) * 0.16);
}

/* Larger textarea in writing phase */
#mode-essay.essay-guided-mode.essay-writing-phase .essay-textarea,
#mode-essay.essay-fullscreen.essay-fs-writing .essay-textarea {
  min-height: 480px;
  font-size: 1.05rem;
  line-height: 1.8;
}

/* Hide the "ready" CTA in writing phase */
#mode-essay.essay-guided-mode.essay-writing-phase .essay-fs-ready-btn,
#mode-essay.essay-fullscreen.essay-fs-writing .essay-fs-ready-btn {
  display: none;
}

/* ── "Back to guide" button in writing phase ─────────────────────────────── */
#mode-essay .essay-fs-back-btn {
  align-items: center;
  background: transparent;
  border: 1px solid var(--essay-border);
  border-radius: 8px;
  color: var(--essay-accent);
  cursor: pointer;
  display: none;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  gap: 5px;
  min-height: 32px;
  padding: 4px 12px;
}
#mode-essay .essay-fs-back-btn:hover {
  border-color: var(--essay-accent);
  background: var(--essay-accent-soft);
}
/* Show in writing phase */
#mode-essay.essay-guided-mode.essay-writing-phase .essay-fs-back-btn,
#mode-essay.essay-fullscreen.essay-fs-writing .essay-fs-back-btn {
  display: inline-flex;
}

/* ── Generated Essay Draft Card ──────────────────────────────────────────── */
#mode-essay .essay-guided-draft-card {
  background: var(--essay-card-bg, #f8fafd);
  border: 1px solid var(--essay-border, #d2e3fc);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
#mode-essay .essay-guided-draft-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--essay-border-soft, #e8f0fe);
}
#mode-essay .essay-guided-draft-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--essay-accent, #1a73e8);
}
#mode-essay .essay-guided-draft-badge {
  background: var(--essay-accent-soft, #e8f0fe);
  color: var(--essay-accent, #1a73e8);
  font-size: .75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  text-transform: uppercase;
}
#mode-essay .essay-guided-draft-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#mode-essay .essay-guided-draft-btn-insert {
  background: var(--essay-accent, #1a73e8);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s ease;
}
#mode-essay .essay-guided-draft-btn-insert:hover {
  background: color-mix(in srgb, var(--essay-accent, #1a73e8) 88%, #000);
  transform: translateY(-1px);
}
#mode-essay .essay-guided-draft-btn-copy {
  background: var(--essay-paper, #fff);
  color: var(--essay-accent, #1a73e8);
  border: 1px solid var(--essay-border, #d2e3fc);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s ease;
}
#mode-essay .essay-guided-draft-btn-copy:hover {
  background: var(--essay-accent-soft, #e8f0fe);
}
#mode-essay .essay-guided-draft-instructions {
  background: color-mix(in srgb, var(--essay-accent, #1a73e8) 6%, var(--essay-paper, #fff));
  border-left: 3.5px solid var(--essay-accent, #1a73e8);
  border-radius: 6px;
  color: var(--essay-muted, #5f6368);
  font-size: .92rem;
  line-height: 1.5;
  margin: 0 0 14px;
  padding: 8px 12px;
}
#mode-essay .essay-guided-draft-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--essay-ink, #202124);
}
#mode-essay .essay-guided-draft-para {
  background: var(--essay-paper, #fff);
  border: 1px solid var(--essay-border-soft, #e8f0fe);
  border-radius: 10px;
  padding: 14px 16px;
  display: grid;
  gap: 8px;
}
#mode-essay .essay-guided-draft-para-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
#mode-essay .essay-guided-draft-para-label {
  font-size: .88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--essay-accent, #1a73e8);
}
#mode-essay .essay-guided-draft-blueprint-tag {
  background: var(--essay-accent-soft, #e8f0fe);
  border-radius: 6px;
  color: var(--essay-accent, #1a73e8);
  font-size: .8rem;
  font-weight: 600;
  padding: 2px 8px;
}
#mode-essay .essay-guided-draft-para-blueprint {
  background: color-mix(in srgb, var(--essay-border-soft, #e8f0fe) 30%, var(--essay-paper, #fff));
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 10px 12px;
}
#mode-essay .essay-guided-draft-point-list {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#mode-essay .essay-guided-draft-point-list li {
  font-size: .92rem;
  line-height: 1.5;
}
#mode-essay .essay-guided-draft-point-list strong {
  color: var(--essay-accent, #1a73e8);
}
#mode-essay .essay-guided-draft-user-box {
  background: color-mix(in srgb, #10b981 10%, var(--essay-paper, #fff));
  border-left: 3.5px solid #10b981;
  border-radius: 6px;
  display: grid;
  gap: 2px;
  margin-top: 4px;
  padding: 8px 12px;
}
#mode-essay .essay-guided-draft-user-label {
  color: #059669;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-draft-user-text {
  color: #065f46;
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}
#mode-essay .essay-guided-draft-spoiler-wrap {
  margin-top: 4px;
}
#mode-essay .essay-guided-draft-spoiler-toggle {
  align-items: center;
  background: var(--essay-paper, #fff);
  border: 1.5px solid var(--essay-border-soft, #e8f0fe);
  border-radius: 6px;
  color: var(--essay-accent, #1a73e8);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: .86rem;
  font-weight: 700;
  gap: 6px;
  padding: 6px 12px;
  transition: all .15s ease;
}
#mode-essay .essay-guided-draft-spoiler-toggle:hover,
#mode-essay .essay-guided-draft-spoiler-toggle.is-revealed {
  background: var(--essay-accent-soft, #e8f0fe);
  border-color: var(--essay-accent, #1a73e8);
}
#mode-essay .essay-guided-draft-spoiler-content {
  background: color-mix(in srgb, var(--essay-accent, #1a73e8) 6%, var(--essay-paper, #fff));
  border: 1px solid color-mix(in srgb, var(--essay-accent, #1a73e8) 20%, transparent);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding: 10px 14px;
}
#mode-essay .essay-guided-spoiler-badge {
  color: var(--essay-accent, #1a73e8);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-draft-model-text {
  color: var(--essay-ink, #202124);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
}

/* Hide fullscreen on mobile — not useful on small screens */
@media (max-width: 1023px) {
  #mode-essay .essay-fullscreen-btn { display: none; }
}


/* ==========================================================================
   GUIDED WRITE ESSAY — v2 pass
   --------------------------------------------------------------------------
   Three things this block owns and the sheet above it did not:

   1. The clause dissector, the cohesion stages and the sentence-pattern
      workbench shipped markup with no rules at all, so they rendered as raw
      running text. They are styled here, flat: hairlines and left rules, no
      card inside a card (see the UI rule in CLAUDE.md).
   2. Freeze zones. A guided step is 2000 px tall, so the stepper, the prompt
      and the two Step-5 controls are pinned instead of scrolling away. Every
      offset comes from --essay-sticky-top, which already accounts for the
      76 px fixed site header (and collapses in the fullscreen overlay, which
      is its own scroll container and paints over that header).
   3. The <?> affordance: one floating popover, always Vietnamese, appended to
      <body> so the rail's own overflow cannot clip it.

   Decoration is typographic on purpose. Micro labels replace the emoji the
   render functions used to carry.
   ========================================================================== */

#mode-essay {
  /* Clears the fixed site header; every sticky offset in guided mode uses it. */
  --essay-sticky-top: calc(var(--site-header-height, 76px) + 14px);
  /* Was undefined, so the draft card fell back to a cool #f8fafd on warm paper. */
  --essay-card-bg: color-mix(in srgb, var(--essay-accent) 4%, var(--essay-paper));
  --essay-micro: .69rem;
}
/* The fullscreen overlay covers the site header and scrolls itself. */
#mode-essay.essay-fullscreen { --essay-sticky-top: 0px; }

/* Micro label — the typographic replacement for the old emoji prefixes. */
#mode-essay .essay-guided-clause-detail-label,
#mode-essay .essay-guided-clause-trap-label,
#mode-essay .essay-guided-clause-role-badge,
#mode-essay .essay-guided-cohesion-stage-badge,
#mode-essay .essay-guided-cohesion-demo-label,
#mode-essay .essay-guided-pattern-badge,
#mode-essay .essay-guided-vocab-example-label,
#mode-essay .essay-guided-vocab-vi-label,
#mode-essay .essay-guided-draft-user-label,
#mode-essay .essay-guided-spoiler-badge,
#mode-essay .essay-guided-subhead {
  display: block;
  font-size: var(--essay-micro);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--essay-muted);
}

/* ── The <?> affordance ───────────────────────────────────────────────────── */
#mode-essay .essay-guided-help {
  align-items: center;
  background: transparent;
  border: 1px solid var(--essay-border);
  border-radius: 50%;
  color: var(--essay-muted);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  line-height: 1;
  margin-inline-start: 6px;
  padding: 0;
  position: relative;
  transition: background var(--read-ease), border-color var(--read-ease), color var(--read-ease);
  vertical-align: middle;
  width: 22px;
}
/* Pointer target stays 40px even though the dot is 22px. */
#mode-essay .essay-guided-help::after {
  content: '';
  position: absolute;
  inset: -9px;
}
#mode-essay .essay-guided-help:hover {
  border-color: var(--essay-accent);
  color: var(--essay-accent);
}
#mode-essay .essay-guided-help[aria-expanded="true"] {
  background: var(--essay-accent);
  border-color: var(--essay-accent);
  color: #fff;
}

.essay-guided-help-pop {
  background: #fff;
  border: 1px solid var(--read-border, rgba(110, 84, 54, 0.18));
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(42, 31, 18, 0.14);
  color: var(--read-ink, #2c2418);
  font-size: .9rem;
  line-height: 1.62;
  padding: 14px 16px 16px;
  position: fixed;
  width: min(360px, calc(100vw - 24px));
  z-index: 10050;
}
.essay-guided-help-pop[hidden] { display: none; }
.essay-guided-help-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.essay-guided-help-head strong {
  font-size: .95rem;
  line-height: 1.35;
}
.essay-guided-help-close {
  background: transparent;
  border: 0;
  color: var(--read-muted, #6f5f4e);
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
  margin: -4px -4px 0 0;
  padding: 4px 8px;
}
.essay-guided-help-close:hover { color: var(--read-ink, #2c2418); }
.essay-guided-help-body code {
  background: rgba(110, 84, 54, 0.10);
  border-radius: 5px;
  font-size: .85em;
  padding: 1px 5px;
}
.essay-guided-help-pop:focus-visible {
  outline: 2px solid var(--read-accent, #9a5722);
  outline-offset: 2px;
}

/* ── Disclosure header now carries the toggle plus its <?> ────────────────── */
#mode-essay .essay-guided-group-head {
  align-items: center;
  display: flex;
  gap: 4px;
}
#mode-essay .essay-guided-group-head .essay-guided-group-toggle { flex: 1 1 auto; }
/* The toggle moved inside .essay-guided-group-head, so the original
   direct-child selector for the chevron no longer matched. */
#mode-essay .essay-guided-group.is-open .essay-guided-group-toggle .essay-guided-group-chevron {
  transform: rotate(-135deg);
}

#mode-essay .essay-guided-subhead {
  align-items: center;
  display: flex;
  gap: 4px;
  margin: 2px 0 10px;
}

/* ══ FREEZE ZONE 1 — the stepper ══════════════════════════════════════════ */
#mode-essay .essay-guided-railtop {
  background: var(--essay-paper);
  border-bottom: 1px solid var(--essay-border-soft);
  margin-bottom: 18px;
  padding-bottom: 10px;
  position: sticky;
  z-index: 5;
}
/* Walkthrough: the rail is the page, so clear the fixed site header. */
#mode-essay.essay-guided-mode:not(.essay-writing-phase):not(.essay-fullscreen) .essay-guided-railtop {
  margin-inline: auto;
  max-width: 860px;
  top: var(--essay-sticky-top);
}
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-railtop {
  margin-inline: 0;
  max-width: 100%;
  width: 100%;
  top: var(--essay-sticky-top);
}
/* Writing phase: the rail scrolls itself, so pin to the rail's own top. */
#mode-essay.essay-guided-mode.essay-writing-phase .essay-guided-railtop,
#mode-essay.essay-fullscreen.essay-fs-writing .essay-guided-railtop {
  top: 0;
}
/* One sticky context per cluster — the header used to pin on its own. */
#mode-essay .essay-guided-railtop .essay-guided-rail-header {
  position: static;
  padding-top: 8px;
}

/* Rail offsets follow the same token instead of a hardcoded 20px that let the
   header slide under the fixed site bar. */
#mode-essay .essay-guided-rail,
#mode-essay.essay-guided-mode.essay-writing-phase .essay-guided-rail,
#mode-essay.essay-fullscreen.essay-fs-writing .essay-guided-rail {
  max-height: calc(100vh - var(--essay-sticky-top) - 24px);
  top: var(--essay-sticky-top);
}

/* Walkthrough stepper: horizontal chips, so the frozen bar stays shallow. */
#mode-essay.essay-guided-mode:not(.essay-writing-phase) .essay-guided-nav,
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0;
}
#mode-essay.essay-guided-mode:not(.essay-writing-phase) .essay-guided-nav button,
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-nav button {
  border: 1px solid transparent;
  border-radius: var(--read-radius-pill, 999px);
  flex: 0 0 auto;
  font-size: .85rem;
  gap: 7px;
  min-height: 38px;
  padding: 6px 14px 6px 7px;
  width: auto;
}
#mode-essay.essay-guided-mode:not(.essay-writing-phase) .essay-guided-nav button.is-active,
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-nav button.is-active {
  border-color: color-mix(in srgb, var(--essay-accent) 35%, transparent);
}
#mode-essay.essay-guided-mode:not(.essay-writing-phase) .essay-guided-nav-index,
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-nav-index {
  font-size: .76rem;
  height: 24px;
  width: 24px;
}

/* ══ ESSAY PROMPT DISPLAY — Prominent Editorial Callout Treatment ═══════ */
#mode-essay .essay-prompt-card .essay-card-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

#mode-essay .essay-prompt-card .essay-kicker {
  color: var(--essay-accent, #9a5722);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#mode-essay .essay-prompt-card .essay-kicker::before {
  content: none;
}

/* Hero prompt preview card on setup screen */
#mode-essay .essay-prompt-display.essay-prompt-preview {
  background: linear-gradient(135deg, #ffffff 0%, rgba(254, 250, 244, 0.96) 100%);
  border: 1px solid rgba(154, 87, 34, 0.2);
  border-left: 5px solid var(--essay-accent, #9a5722);
  border-radius: 4px 14px 14px 4px;
  box-shadow: 0 4px 20px -3px rgba(154, 87, 34, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
  margin: 12px 0 24px 0;
  padding: 22px 26px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#mode-essay .essay-prompt-display.essay-prompt-preview:hover {
  border-color: rgba(154, 87, 34, 0.32);
  box-shadow: 0 6px 24px -3px rgba(154, 87, 34, 0.12), 0 2px 8px -1px rgba(0, 0, 0, 0.03);
}

#mode-essay .essay-prompt-display .essay-prompt-text,
#mode-essay .essay-prompt-preview p {
  color: #1a1612;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 1.22rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  line-height: 1.65;
  margin: 0;
  text-rendering: optimizeLegibility;
}

#mode-essay .essay-prompt-display.essay-prompt-preview.is-loading {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#mode-essay .essay-prompt-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

#mode-essay .essay-skeleton-line {
  display: block;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(154, 87, 34, 0.08) 25%, rgba(154, 87, 34, 0.18) 50%, rgba(154, 87, 34, 0.08) 75%);
  background-size: 200% 100%;
  animation: essaySkeletonShimmer 1.4s infinite ease-in-out;
}

@keyframes essaySkeletonShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ══ FREEZE ZONE 2 — prompt, timer and live word count while typing ═══════ */
#mode-essay .essay-write-sticky {
  background: var(--essay-paper);
  border-bottom: 1px solid var(--essay-border-soft);
  margin-bottom: 16px;
  padding-bottom: 10px;
  position: sticky;
  top: var(--essay-sticky-top);
  z-index: 4;
}
#mode-essay .essay-write-sticky #essay-prompt-display {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(154, 87, 34, 0.16);
  border-left: 4px solid var(--essay-accent, #9a5722);
  border-radius: 0 8px 8px 0;
  box-sizing: border-box;
  color: #1a1612;
  font-family: 'Lora', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 550;
  line-height: 1.55;
  margin-bottom: 0;
  padding: 10px 14px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  line-clamp: 2;
  overflow: hidden;
}
#mode-essay .essay-write-sticky.is-prompt-expanded #essay-prompt-display {
  -webkit-line-clamp: unset;
  display: block;
  line-clamp: unset;
  max-height: 38vh;
  overflow-y: auto;
}
#mode-essay .essay-prompt-expand-btn {
  background: transparent;
  border: 0;
  color: var(--essay-accent);
  cursor: pointer;
  display: none;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  margin-top: 4px;
  min-height: 28px;
  padding: 2px 0;
}
#mode-essay .essay-prompt-expand-btn:hover { text-decoration: underline; }
#mode-essay .essay-write-sticky.has-prompt-overflow .essay-prompt-expand-btn { display: inline-flex; }
#mode-essay .essay-prompt-expand-less,
#mode-essay .essay-write-sticky.is-prompt-expanded .essay-prompt-expand-more { display: none; }
#mode-essay .essay-write-sticky.is-prompt-expanded .essay-prompt-expand-less { display: inline; }

/* Word count mirrored into the frozen bar; the footer copy stays authoritative. */
#mode-essay .essay-word-count-sticky {
  border: 1px solid var(--essay-border);
  border-radius: var(--read-radius-pill, 999px);
  font-size: .78rem;
  font-weight: 700;
  margin-left: auto;
  padding: 4px 12px;
  white-space: nowrap;
}
#mode-essay .essay-word-count-sticky.essay-wc-good {
  border-color: color-mix(in srgb, var(--essay-success) 45%, transparent);
  color: var(--essay-success);
}
#mode-essay .essay-word-count-sticky.essay-wc-warn { color: var(--essay-accent); }
#mode-essay .essay-word-count-sticky.essay-wc-bad { color: var(--essay-muted); }
/* Only useful once the editor is on screen. */
#mode-essay:not(.essay-guided-mode) .essay-word-count-sticky,
#mode-essay.essay-guided-mode.essay-writing-phase .essay-word-count-sticky,
#mode-essay.essay-fullscreen.essay-fs-writing .essay-word-count-sticky { display: inline-flex; }

/* ══ FREEZE ZONE 3 — Step 5 paragraph + hint controls ═════════════════════ */
#mode-essay .essay-guided-scaffold-controls {
  background: var(--essay-paper);
  border-bottom: 1px solid var(--essay-border-soft);
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 0;
  position: sticky;
  z-index: 3;
}
#mode-essay.essay-guided-mode:not(.essay-writing-phase) .essay-guided-scaffold-controls,
#mode-essay.essay-fullscreen:not(.essay-fs-writing) .essay-guided-scaffold-controls {
  top: calc(var(--essay-sticky-top) + var(--essay-railtop-h, 132px));
}
#mode-essay.essay-guided-mode.essay-writing-phase .essay-guided-scaffold-controls,
#mode-essay.essay-fullscreen.essay-fs-writing .essay-guided-scaffold-controls {
  top: var(--essay-railtop-h, 132px);
}
#mode-essay .essay-guided-scaffold-tabs-row {
  align-items: center;
  display: flex;
  gap: 4px;
}
#mode-essay .essay-guided-scaffold-tabs-row .essay-guided-scaffold-tabs {
  flex: 1 1 auto;
  margin-bottom: 0;
}
#mode-essay .essay-guided-scaffold-controls .essay-guided-depth { margin: 0; }
#mode-essay .essay-guided-depth-label {
  align-items: center;
  display: flex;
  gap: 4px;
}

/* ══ STEP 1 — prompt clause dissector (was entirely unstyled) ═════════════ */
#mode-essay .essay-guided-clause-intro {
  align-items: center;
  color: var(--essay-muted);
  display: flex;
  font-size: var(--essay-guided-font-sm);
  gap: 4px;
  margin: 0 0 6px;
}
#mode-essay .essay-guided-clause-cards { display: grid; }
#mode-essay .essay-guided-clause-card {
  border-top: 1px solid var(--essay-border-soft);
  padding: 16px 0;
}
#mode-essay .essay-guided-clause-card:first-child { border-top: 0; }
#mode-essay .essay-guided-clause-head {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: 26px minmax(0, 1fr);
}
#mode-essay .essay-guided-clause-idx {
  align-items: center;
  background: var(--essay-accent-soft);
  border-radius: 50%;
  color: var(--essay-accent);
  display: inline-flex;
  font-size: .76rem;
  font-weight: 700;
  height: 26px;
  justify-content: center;
  width: 26px;
}
#mode-essay .essay-guided-clause-main { min-width: 0; }
#mode-essay .essay-guided-clause-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 8px;
}
#mode-essay .essay-guided-clause-role-badge {
  color: var(--essay-accent);
  display: inline-block;
}
#mode-essay .essay-guided-clause-target-pill {
  border: 1px solid var(--essay-border);
  border-radius: var(--read-radius-pill, 999px);
  color: var(--essay-muted);
  font-size: .73rem;
  padding: 2px 10px;
  white-space: nowrap;
}
#mode-essay .essay-guided-clause-text {
  border-left: 2px solid var(--essay-border);
  color: var(--essay-ink);
  font-style: italic;
  margin: 0;
  padding: 1px 0 1px 12px;
}
#mode-essay .essay-guided-clause-body {
  display: grid;
  gap: 12px;
  margin: 14px 0 0 38px;
}
#mode-essay .essay-guided-clause-detail-text,
#mode-essay .essay-guided-clause-trap-text {
  margin: 4px 0 0;
}
#mode-essay .essay-guided-clause-trap {
  border-left: 2px solid color-mix(in srgb, var(--essay-danger) 40%, transparent);
  padding-left: 12px;
}
#mode-essay .essay-guided-clause-trap-label { color: var(--essay-danger); }

/* ══ STEP 3 — sentence pattern workbench (was entirely unstyled) ══════════ */
#mode-essay .essay-guided-pattern-workbench { display: grid; gap: 16px; }
#mode-essay .essay-guided-pattern-purpose { display: grid; gap: 4px; }
#mode-essay .essay-guided-pattern-purpose strong {
  color: var(--essay-muted);
  font-size: var(--essay-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-pattern-purpose span {
  color: var(--essay-ink);
  font-size: var(--essay-guided-font-sm);
}
/* ══ Pattern Cards: Flattened, Single-Card Design (No Boxes-in-Boxes) ══ */
#mode-essay .essay-guided-pattern-card {
  background: var(--essay-paper, #fff);
  border: 1px solid var(--essay-border-soft, rgba(110, 84, 54, 0.15));
  border-left: 3.5px solid var(--essay-accent, #9a5722);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  transition: border-color .15s ease;
}
#mode-essay .essay-guided-pattern-card:hover {
  border-color: var(--essay-border, #d2e3fc);
  border-left-color: var(--essay-accent, #9a5722);
}
#mode-essay .essay-guided-pattern-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#mode-essay .essay-guided-pattern-sublabel {
  color: var(--essay-muted, #7c7267);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-pattern-code {
  background: var(--essay-accent-soft, rgba(154, 87, 34, 0.08));
  border-radius: 8px;
  color: var(--essay-ink, #2d241e);
  display: block;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .88rem;
  line-height: 1.6;
  padding: 10px 14px;
}
#mode-essay .essay-guided-pattern-sentence {
  color: var(--essay-ink, #2d241e);
  font-size: .95rem;
  font-style: italic;
  line-height: 1.65;
  margin: 0;
  padding-left: 2px;
}
#mode-essay .essay-guided-pattern-vi {
  color: var(--essay-muted, #665c52);
  font-size: .90rem;
  font-style: normal;
}

/* ══ Term bold & highlight in example sentences ══ */
#mode-essay .essay-term-hl {
  background: rgba(234, 88, 12, 0.15);
  border-radius: 4px;
  color: var(--essay-ink, #2d241e);
  font-weight: 700;
  padding: 1px 5px;
  display: inline;
}

/* ══ Point explanation detailed sections ══ */
#mode-essay .essay-guided-point-expl-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
#mode-essay .essay-guided-point-expl-sec {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#mode-essay .essay-guided-point-expl-tag {
  color: var(--essay-accent, #9a5722);
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-point-expl-cue-box {
  background: rgba(154, 87, 34, 0.06);
  border-radius: 8px;
  padding: 8px 12px;
}
#mode-essay .essay-guided-point-expl-cue {
  color: var(--essay-ink, #2d241e);
  font-size: 0.90rem;
  line-height: 1.55;
  margin: 0;
}

/* ══ STEP 3 — cohesion stages (was entirely unstyled) ═════════════════════ */
#mode-essay .essay-guided-cohesion-intro {
  color: var(--essay-muted);
  font-size: var(--essay-guided-font-sm);
  margin: 0 0 4px;
}
#mode-essay .essay-guided-cohesion-cards { display: grid; }
#mode-essay .essay-guided-cohesion-card {
  border-top: 1px solid var(--essay-border-soft);
  padding: 14px 0;
}
#mode-essay .essay-guided-cohesion-card:first-child { border-top: 0; }
#mode-essay .essay-guided-cohesion-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
}
#mode-essay .essay-guided-cohesion-stage-badge { color: var(--essay-accent); }
#mode-essay .essay-guided-cohesion-words {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#mode-essay .essay-guided-cohesion-pill {
  border: 1px solid var(--essay-border);
  border-radius: var(--read-radius-pill, 999px);
  color: var(--essay-ink);
  font-size: .78rem;
  font-weight: 600;
  padding: 3px 11px;
  white-space: nowrap;
}
#mode-essay .essay-guided-cohesion-purpose {
  color: var(--essay-muted);
  font-size: var(--essay-guided-font-sm);
  margin: 8px 0 0;
}
#mode-essay .essay-guided-cohesion-demo {
  border-left: 2px solid var(--essay-border);
  margin-top: 10px;
  padding-left: 12px;
}
#mode-essay .essay-guided-cohesion-demo-text {
  font-style: italic;
  margin: 3px 0 0;
}

/* ── Odds and ends the sheet above never reached ──────────────────────────── */
#mode-essay .essay-guided-collo-vi-box {
  border-left: 2px solid color-mix(in srgb, var(--essay-accent) 45%, transparent);
  margin-top: 8px;
  padding-left: 12px;
}
#mode-essay .essay-guided-collo-vi-text {
  color: var(--essay-muted);
  font-size: var(--essay-guided-font-sm);
  margin: 0;
}
#mode-essay .essay-guided-frame-static-text { color: var(--essay-ink); }
#mode-essay .essay-guided-spoiler-text { font-weight: 600; }
#mode-essay .essay-guided-paragraph-head {
  color: var(--essay-muted);
  font-size: var(--essay-micro);
  font-weight: 700;
  letter-spacing: .08em;
  margin: 22px 0 10px;
  text-transform: uppercase;
}
/* Stance is carried by a colour edge now that the thumbs are gone. */
#mode-essay .essay-guided-stance-tab { border-left-width: 3px; }
#mode-essay .essay-guided-stance-tab.is-for { border-left-color: color-mix(in srgb, var(--essay-success) 55%, transparent); }
#mode-essay .essay-guided-stance-tab.is-against { border-left-color: color-mix(in srgb, var(--essay-danger) 55%, transparent); }
#mode-essay .essay-guided-meter span {
  align-items: center;
  display: inline-flex;
  gap: 4px;
}

/* ── Draft blueprint card: warm surface + collapse ────────────────────────── */
#mode-essay .essay-guided-draft-collapse {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--essay-ink);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  gap: 9px;
  min-height: 34px;
  padding: 0;
}
#mode-essay .essay-guided-draft-collapse .essay-guided-group-chevron { transform: rotate(-135deg); }
#mode-essay .essay-guided-draft-collapse[aria-expanded="false"] .essay-guided-group-chevron { transform: rotate(45deg); }
#mode-essay .essay-guided-draft-card.is-collapsed { padding-bottom: 14px; }
#mode-essay .essay-guided-draft-collapsible[hidden] { display: none; }

/* ── Focus, motion, touch ─────────────────────────────────────────────────── */
#mode-essay .essay-guided-help:focus-visible,
#mode-essay .essay-prompt-expand-btn:focus-visible,
#mode-essay .essay-guided-draft-collapse:focus-visible {
  outline: 2px solid var(--essay-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  #mode-essay .essay-guided-help,
  #mode-essay .essay-guided-group-chevron,
  #mode-essay .essay-guided-preferences,
  #mode-essay .essay-guided-preferences-inner { transition: none !important; }
  #mode-essay .essay-skeleton-line { animation: none !important; background: rgba(154, 87, 34, 0.1) !important; }
}

/* Below the two-column breakpoint nothing is frozen: the rail and the editor
   stack, and a pinned bar would eat a phone screen. */
@media (max-width: 1023px) {
  #mode-essay .essay-guided-railtop,
  #mode-essay .essay-write-sticky,
  #mode-essay .essay-guided-scaffold-controls {
    position: static;
  }
  #mode-essay .essay-write-sticky #essay-prompt-display {
    -webkit-line-clamp: unset;
    display: block;
    line-clamp: unset;
    overflow: visible;
  }
  #mode-essay .essay-prompt-expand-btn { display: none !important; }
  #mode-essay .essay-guided-clause-body { margin-left: 0; }
}

@media (max-width: 560px) {
  #mode-essay .essay-prompt-display.essay-prompt-preview {
    border-left-width: 4px;
    margin: 10px 0 18px 0;
    padding: 16px 18px;
  }
  #mode-essay .essay-prompt-display .essay-prompt-text,
  #mode-essay .essay-prompt-preview p {
    font-size: 1.1rem;
    line-height: 1.6;
  }
  #mode-essay .essay-guided-help { height: 26px; width: 26px; }
  #mode-essay .essay-guided-clause-head { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
  #mode-essay .essay-guided-clause-idx { height: 22px; width: 22px; font-size: .72rem; }
  .essay-guided-help-pop { width: calc(100vw - 24px); }
}

/* ── Freeze-zone caps ──────────────────────────────────────────────────────
   Disabled phantom top pseudo-element that painted an opaque box over
   preceding content in normal flow. */
#mode-essay .essay-guided-railtop::before,
#mode-essay .essay-write-sticky::before {
  display: none !important;
}

/* ── Progress reads as the frozen bar's own edge, not a text underline ───── */
#mode-essay .essay-guided-progress {
  bottom: -1px;
  height: 2px;
  left: 0;
  margin: 0;
  position: absolute;
  right: 0;
  z-index: 1;
}
#mode-essay .essay-guided-progress-bar {
  background: transparent;
  height: 2px;
}

@media (max-width: 1023px) {
  #mode-essay .essay-guided-progress { position: static; margin: 0 0 12px; }
  #mode-essay .essay-guided-progress-bar { background: var(--essay-border-soft); }
}

/* style.css sets `.mode-panel.active { overflow-x: clip }`, which pairs the
   other axis into `hidden` — and `hidden` makes the panel a scroll container,
   so every `position: sticky` inside it was inert against page scroll.
   Clipping both axes keeps the horizontal guard without the scroll container.
   Excluded in fullscreen, where the panel must scroll itself. */
#mode-essay.mode-panel.active:not(.essay-fullscreen) {
  overflow: clip;
}

/* The checklist's <?> is a sibling of a full-width toggle, so the row has to
   be a grid or the button drops to its own line. */
#mode-essay .essay-guided-checklist {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
#mode-essay .essay-guided-checklist[hidden] { display: none; }
#mode-essay .essay-guided-checklist-body { grid-column: 1 / -1; }

/* ══════════════════════════════════════════════════════════════════════════
   FLATTEN — "avoid nested card structures" (CLAUDE.md UI rule)
   Every list item used to be a bordered card that then held a tinted inner
   box: two frames around one sentence. Items are separated by a hairline and
   marked with a left rule instead; the inner blocks keep only that rule.
   ══════════════════════════════════════════════════════════════════════════ */
#mode-essay .essay-guided-target-grid,
#mode-essay .essay-guided-collo-grid,
#mode-essay .essay-guided-points-list,
#mode-essay .essay-guided-stance-groups { gap: 0; }

#mode-essay .essay-guided-target-card,
#mode-essay .essay-guided-collo-card,
#mode-essay .essay-guided-point-card,
#mode-essay .essay-guided-stance-card {
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  border-top: 1px solid var(--essay-border-soft);
  box-shadow: none;
  overflow: visible;
  padding: 14px 0 14px 13px;
}
#mode-essay .essay-guided-target-grid > .essay-guided-target-card:first-child,
#mode-essay .essay-guided-collo-grid > .essay-guided-collo-card:first-child,
#mode-essay .essay-guided-points-list > .essay-guided-point-card:first-child,
#mode-essay .essay-guided-stance-groups > .essay-guided-stance-card:first-child {
  border-top: 0;
}
#mode-essay .essay-guided-target-card:hover,
#mode-essay .essay-guided-collo-card:hover,
#mode-essay .essay-guided-point-card:hover {
  border-left-color: var(--essay-border);
}
#mode-essay .essay-guided-target-card.is-selected,
#mode-essay .essay-guided-point-card.is-selected {
  background: color-mix(in srgb, var(--essay-accent) 5%, transparent);
  border-left-color: var(--essay-accent);
}
/* Stance keeps its semantic edge; it just loses the box around it. */
#mode-essay .essay-guided-stance-card.is-agree {
  background: transparent;
  border-left-color: var(--essay-success);
}
#mode-essay .essay-guided-stance-card.is-disagree {
  background: transparent;
  border-left-color: var(--essay-danger);
}
#mode-essay .essay-guided-stance-card.is-general {
  background: transparent;
  border-left-color: var(--essay-accent);
}

/* Inner example blocks: a rule, not a fill. */
#mode-essay .essay-guided-vocab-example,
#mode-essay .essay-guided-model,
#mode-essay .essay-guided-vocab-vi-box,
#mode-essay .essay-guided-point-expl-tip {
  background: transparent;
  border-left: 2px solid var(--essay-border);
  border-radius: 0;
  padding: 1px 0 1px 12px;
}
#mode-essay .essay-guided-vocab-example { border-left-color: var(--essay-accent); }
/* Was a hardcoded emerald that did not belong to the warm Reading palette. */
#mode-essay .essay-guided-vocab-vi-box {
  border-left-color: color-mix(in srgb, var(--essay-success) 55%, transparent);
}
#mode-essay .essay-guided-vocab-vi-label { color: var(--essay-success); }
#mode-essay .essay-guided-vocab-example-label { color: var(--essay-accent); }
#mode-essay .essay-guided-point-expl {
  background: transparent;
  border-top: 1px solid var(--essay-border-soft);
  padding: 12px 0 4px;
}

/* The frozen Step-5 controls must stay shallow: label beside the track, not
   above it, so the pinned block costs one row instead of two. */
@media (min-width: 1024px) {
  #mode-essay .essay-guided-scaffold-controls .essay-guided-depth {
    align-items: center;
    display: flex;
    gap: 12px;
  }
  #mode-essay .essay-guided-scaffold-controls .essay-guided-depth-label {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
  }
  #mode-essay .essay-guided-scaffold-controls .essay-guided-depth-track { flex: 1 1 auto; }
  #mode-essay .essay-guided-scaffold-controls { padding: 8px 0; gap: 8px; }
}

/* Step 5 already ends with "Start writing" in the step nav; the persistent
   rail CTA would make three identical buttons in one screen. */
#mode-essay .essay-guided-rail[data-step="further"] .essay-fs-ready-btn { display: none; }

/* The rail is a narrow column; nothing in it should scroll sideways. */
#mode-essay .essay-guided-rail { overflow-x: clip; }
/* Long targets like "Introduction (Thesis) & Body Paragraph 2 / Conclusion"
   must wrap rather than widen the rail. */
#mode-essay .essay-guided-clause-target-pill { white-space: normal; }

/* ── Guided Mode Interactivity & Quality Overhaul ───────────────────────── */
#mode-essay .essay-guided-target-card,
#mode-essay .essay-guided-point-card {
  cursor: pointer;
  user-select: none;
}
#mode-essay .essay-guided-target-title-wrap,
#mode-essay .essay-guided-point-select-wrap {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 10px;
}
#mode-essay .essay-guided-target-title-wrap {
  min-width: 0;
}
#mode-essay .essay-guided-clause-card[data-guided-action="select-prompt-segment"] {
  cursor: pointer;
}
#mode-essay .essay-guided-clause-card.is-selected {
  border-left: 3px solid var(--essay-accent);
  background: color-mix(in srgb, var(--essay-accent) 4%, transparent);
}

/* Step 1 Clear Requirement Criteria Cards */
#mode-essay .essay-guided-req-guide {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#mode-essay .essay-guided-req-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#mode-essay .essay-guided-req-badge {
  color: var(--essay-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-req-subtext {
  color: var(--essay-muted);
  font-size: 0.84rem;
  line-height: 1.4;
  margin: 0;
}
#mode-essay .essay-guided-req-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#mode-essay .essay-guided-req-card-static {
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--essay-border-soft);
  border-left: 3.5px solid var(--essay-accent);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  padding: 10px 14px;
}
#mode-essay .essay-guided-req-num {
  align-items: center;
  background: rgba(154, 87, 34, 0.1);
  border-radius: 50%;
  color: var(--essay-accent);
  display: inline-flex;
  flex: 0 0 22px;
  font-size: 0.78rem;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  margin-top: 1px;
}
#mode-essay .essay-guided-req-text {
  color: var(--essay-ink);
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Step 1 Interactive Gap-Fill (Macro Strategy Blueprint) */
#mode-essay .essay-guided-gapfill-box {
  background: linear-gradient(135deg, #ffffff 0%, rgba(254, 250, 244, 0.98) 100%);
  border: 1.5px solid rgba(154, 87, 34, 0.22);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(42, 31, 18, 0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
}
#mode-essay .essay-guided-gapfill-title-wrap {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
#mode-essay .essay-guided-gapfill-badge {
  color: var(--essay-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-gapfill-reset {
  background: transparent;
  border: 1px solid var(--essay-border-soft);
  border-radius: 6px;
  color: var(--essay-muted);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  transition: all 0.15s ease;
}
#mode-essay .essay-guided-gapfill-reset:hover {
  background: #fcfbf9;
  border-color: var(--essay-accent);
  color: var(--essay-accent);
}
#mode-essay .essay-guided-gapfill-instructions {
  color: #1a1612;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 4px 0 0;
}
#mode-essay .essay-guided-gapfill-sentence {
  background: #fdfaf6;
  border: 1.5px solid var(--essay-border);
  border-radius: 8px;
  color: #1a1612;
  font-size: 0.94rem;
  line-height: 1.85;
  padding: 14px 16px;
}
#mode-essay .essay-guided-gap-slot {
  background: #fff;
  border: 1.5px dashed var(--essay-border);
  border-radius: 6px;
  color: var(--essay-muted);
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0 4px;
  padding: 2px 10px;
  transition: all 0.2s ease;
  vertical-align: middle;
}
#mode-essay .essay-guided-gap-slot.is-filled {
  background: #e8f5e9;
  border: 1.5px solid #2e7d32;
  color: #1b5e20;
}
#mode-essay .essay-guided-gap-slot.is-wrong {
  background: #ffebee;
  border: 1.5px solid #c62828;
  color: #b71c1c;
}
#mode-essay .essay-guided-gapfill-slots {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}
#mode-essay .essay-guided-gap-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#mode-essay .essay-guided-gap-row-label {
  color: #1a1612;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#mode-essay .essay-guided-gap-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#mode-essay .essay-guided-gap-chip {
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--essay-border-soft);
  border-radius: 8px;
  color: #2c2418;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.85rem;
  gap: 6px;
  padding: 7px 12px;
  text-align: left;
  transition: all 0.15s ease;
}
#mode-essay .essay-guided-gap-chip:hover {
  border-color: var(--essay-accent);
  transform: translateY(-1px);
}
#mode-essay .essay-guided-gap-chip.is-correct {
  background: #f1f8e9;
  border-color: #2e7d32;
  color: #1b5e20;
  font-weight: 600;
}
#mode-essay .essay-guided-gap-chip.is-wrong {
  background: #fff5f5;
  border-color: #d32f2f;
  color: #b71c1c;
  font-weight: 600;
}
#mode-essay .essay-guided-gap-hint {
  color: #c62828;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.35;
  margin-top: 2px;
}
#mode-essay .essay-guided-gapfill-success {
  background: #e8f5e9;
  border: 1.5px solid #a5d6a7;
  border-radius: 8px;
  color: #1b5e20;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  padding: 12px 16px;
}

/* Step 1 Interactive Comprehension Quiz */
#mode-essay .essay-guided-interactive-quiz {
  background: linear-gradient(135deg, #ffffff 0%, rgba(254, 250, 244, 0.98) 100%);
  border: 1.5px solid rgba(154, 87, 34, 0.22);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(42, 31, 18, 0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
}
#mode-essay .essay-guided-quiz-badge {
  color: var(--essay-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-quiz-question {
  color: #1a1612;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 4px 0 0;
}
#mode-essay .essay-guided-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#mode-essay .essay-guided-quiz-opt {
  align-items: flex-start;
  background: #fff;
  border: 1.5px solid var(--essay-border-soft);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
  transition: all 0.15s ease;
  width: 100%;
}
#mode-essay .essay-guided-quiz-opt:hover {
  border-color: var(--essay-accent);
}
#mode-essay .essay-guided-quiz-opt.is-correct {
  background: #f1f8e9;
  border-color: #2e7d32;
}
#mode-essay .essay-guided-quiz-opt.is-wrong {
  background: #fff5f5;
  border-color: #d32f2f;
}
#mode-essay .essay-guided-quiz-letter {
  align-items: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  color: #1a1612;
  display: inline-flex;
  flex: 0 0 24px;
  font-size: 0.8rem;
  font-weight: 700;
  height: 24px;
  justify-content: center;
}
#mode-essay .essay-guided-quiz-opt.is-correct .essay-guided-quiz-letter {
  background: #2e7d32;
  color: #fff;
}
#mode-essay .essay-guided-quiz-opt.is-wrong .essay-guided-quiz-letter {
  background: #d32f2f;
  color: #fff;
}
#mode-essay .essay-guided-quiz-opt-text {
  color: #2c2418;
  flex: 1;
  font-size: 0.88rem;
  line-height: 1.45;
}
#mode-essay .essay-guided-quiz-feedback {
  flex-basis: 100%;
  font-size: 0.82rem;
  font-weight: 600;
  margin-left: 34px;
  margin-top: 4px;
}
#mode-essay .essay-guided-quiz-feedback.is-correct {
  color: #2e7d32;
}
#mode-essay .essay-guided-quiz-feedback.is-wrong {
  color: #d32f2f;
}

/* Step 3 Grammar Models List */
#mode-essay .essay-guided-pattern-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}
#mode-essay .essay-guided-pattern-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#mode-essay .essay-guided-pattern-purpose-note {
  color: var(--essay-muted);
  font-size: 0.84rem;
  line-height: 1.4;
  margin: 0;
}

/* Step 5 Compact Guide */
#mode-essay .essay-guided-scaffold-guide-compact {
  align-items: center;
  background: rgba(154, 87, 34, 0.06);
  border: 1px solid rgba(154, 87, 34, 0.15);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
}
#mode-essay .essay-guided-scaffold-guide-pill {
  color: var(--essay-accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#mode-essay .essay-guided-scaffold-guide-text {
  color: var(--essay-ink);
  font-size: 0.84rem;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* ── Write Essay Step 1 Overhaul & Pedagogical Visualizations ────────────── */
/* ══════════════════════════════════════════════════════════════════════════ */

#mode-essay .essay-step1-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#mode-essay .essay-step1-part {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#mode-essay .essay-step1-part-header {
  align-items: center;
  border-bottom: 1.5px solid var(--essay-border-soft, rgba(110, 84, 54, 0.15));
  display: flex;
  gap: 10px;
  padding-bottom: 8px;
}

#mode-essay .essay-step1-part-pill {
  background: var(--essay-accent, #9a5722);
  border-radius: 12px;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  text-transform: uppercase;
}

#mode-essay .essay-step1-part-title {
  color: var(--essay-ink, #2c2418);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

/* ── Part 1: Deconstructed Prompt Hero ───────────────────────────────────── */

#mode-essay .essay-guided-dissector-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#mode-essay .essay-guided-prompt-hero {
  background: rgba(154, 87, 34, 0.04);
  border: 1px solid rgba(154, 87, 34, 0.18);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  padding: 16px 18px;
}

#mode-essay .essay-guided-prompt-hero-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 12px;
}

#mode-essay .essay-prompt-hero-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#mode-essay .essay-prompt-hero-badge {
  color: var(--essay-accent, #9a5722);
  font-size: 0.88rem;
  font-weight: 700;
}

#mode-essay .essay-prompt-hero-hint {
  color: var(--essay-muted, #6f5f4e);
  font-size: 0.78rem;
}

#mode-essay .essay-guided-prompt-flow-text {
  align-items: baseline;
  color: var(--essay-ink, #2c2418);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 1.02rem;
  line-height: 1.8;
}

#mode-essay .essay-prompt-hl {
  align-items: baseline;
  border: 1.5px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  padding: 4px 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  user-select: none;
}

#mode-essay .essay-prompt-hl.hl-1 {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.3);
  color: #1e3a8a;
}
#mode-essay .essay-prompt-hl.hl-2 {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
  color: #065f46;
}
#mode-essay .essay-prompt-hl.hl-3 {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
  color: #92400e;
}
#mode-essay .essay-prompt-hl.hl-4 {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.3);
  color: #5b21b6;
}

#mode-essay .essay-prompt-hl:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
}

#mode-essay .essay-prompt-hl.hl-1.is-selected {
  background: rgba(59, 130, 246, 0.16);
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}
#mode-essay .essay-prompt-hl.hl-2.is-selected {
  background: rgba(16, 185, 129, 0.16);
  border-color: #059669;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.25);
}
#mode-essay .essay-prompt-hl.hl-3.is-selected {
  background: rgba(245, 158, 11, 0.16);
  border-color: #d97706;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.25);
}
#mode-essay .essay-prompt-hl.hl-4.is-selected {
  background: rgba(139, 92, 246, 0.16);
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
}

#mode-essay .essay-prompt-hl-num {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 800;
  height: 20px;
  justify-content: center;
  width: 20px;
}
#mode-essay .essay-prompt-hl.hl-1 .essay-prompt-hl-num { background: #2563eb; }
#mode-essay .essay-prompt-hl.hl-2 .essay-prompt-hl-num { background: #059669; }
#mode-essay .essay-prompt-hl.hl-3 .essay-prompt-hl-num { background: #d97706; }
#mode-essay .essay-prompt-hl.hl-4 .essay-prompt-hl-num { background: #7c3aed; }

#mode-essay .essay-prompt-hl-body {
  font-weight: 500;
}

/* ── Part 1: Visual Flowchart Connectors & Cards ─────────────────────────── */

#mode-essay .essay-guided-flowchart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#mode-essay .essay-flowchart-arrow-strip {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  padding: 0 10px;
}

@media (max-width: 640px) {
  #mode-essay .essay-flowchart-arrow-strip {
    display: none;
  }
}

#mode-essay .essay-flowchart-arrow-col {
  align-items: center;
  color: var(--essay-muted, #6f5f4e);
  display: flex;
  font-size: 0.8rem;
  font-weight: 600;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

#mode-essay .essay-flowchart-arrow-col:hover {
  color: var(--essay-accent, #9a5722);
  background: rgba(154, 87, 34, 0.08);
}

#mode-essay .essay-flowchart-arrow-icon {
  font-size: 1.1rem;
  line-height: 1;
}

#mode-essay .essay-flowchart-arrow-col.is-selected {
  color: var(--essay-accent, #9a5722);
  font-weight: 700;
  background: rgba(154, 87, 34, 0.1);
}

#mode-essay .essay-flowchart-nodes-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

#mode-essay .essay-flowchart-card {
  background: var(--essay-card, #fff);
  border: 1px solid var(--essay-border-soft, rgba(110, 84, 54, 0.15));
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#mode-essay .essay-flowchart-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

#mode-essay .essay-flowchart-card.card-1 {
  border-left: 3px solid #2563eb;
}
#mode-essay .essay-flowchart-card.card-2 {
  border-left: 3px solid #059669;
}
#mode-essay .essay-flowchart-card.card-3 {
  border-left: 3px solid #d97706;
}
#mode-essay .essay-flowchart-card.card-4 {
  border-left: 3px solid #7c3aed;
}

#mode-essay .essay-flowchart-card.is-selected {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
#mode-essay .essay-flowchart-card.card-1.is-selected {
  border-color: #2563eb;
  outline: 2px solid rgba(37, 99, 235, 0.3);
}
#mode-essay .essay-flowchart-card.card-2.is-selected {
  border-color: #059669;
  outline: 2px solid rgba(5, 150, 105, 0.3);
}
#mode-essay .essay-flowchart-card.card-3.is-selected {
  border-color: #d97706;
  outline: 2px solid rgba(217, 119, 6, 0.3);
}
#mode-essay .essay-flowchart-card.card-4.is-selected {
  border-color: #7c3aed;
  outline: 2px solid rgba(124, 58, 237, 0.3);
}

#mode-essay .essay-flowchart-card-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--essay-border-soft, rgba(110, 84, 54, 0.1));
  display: flex;
  gap: 10px;
  padding-bottom: 10px;
}

#mode-essay .essay-flowchart-card-num {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 800;
  height: 26px;
  justify-content: center;
  width: 26px;
}
#mode-essay .essay-flowchart-card-num.num-1 { background: #2563eb; }
#mode-essay .essay-flowchart-card-num.num-2 { background: #059669; }
#mode-essay .essay-flowchart-card-num.num-3 { background: #d97706; }
#mode-essay .essay-flowchart-card-num.num-4 { background: #7c3aed; }

#mode-essay .essay-flowchart-card-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#mode-essay .essay-flowchart-card-role {
  color: var(--essay-ink, #2c2418);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
}

#mode-essay .essay-flowchart-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#mode-essay .essay-clause-quote {
  border-bottom: 1px dashed var(--essay-border-soft, rgba(110, 84, 54, 0.15));
  color: var(--essay-muted, #6f5f4e);
  font-size: 0.84rem;
  font-style: italic;
  line-height: 1.45;
  padding-bottom: 8px;
}

#mode-essay .essay-clause-meaning {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#mode-essay .essay-clause-label {
  align-items: center;
  color: var(--essay-accent, #9a5722);
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 700;
  gap: 4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#mode-essay .essay-clause-text {
  color: var(--essay-ink, #2c2418);
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0;
}

#mode-essay .essay-clause-takeaway {
  background: rgba(154, 87, 34, 0.04);
  border: 1px solid rgba(154, 87, 34, 0.1);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
}

#mode-essay .essay-clause-takeaway-label {
  align-items: center;
  color: #b45309;
  display: inline-flex;
  font-size: 0.73rem;
  font-weight: 700;
  gap: 4px;
}

#mode-essay .essay-clause-takeaway-text {
  color: var(--essay-ink, #2c2418);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

/* ── Part 2: Essay Type Card & Recognition Guide ─────────────────────────── */

#mode-essay .essay-guided-type-card {
  background: var(--essay-card, #fff);
  border: 1px solid var(--essay-border-soft, rgba(110, 84, 54, 0.18));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

#mode-essay .essay-type-card-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#mode-essay .essay-type-badge-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

#mode-essay .essay-type-badge {
  align-items: center;
  color: var(--essay-ink, #2c2418);
  display: flex;
  gap: 6px;
  font-size: 0.96rem;
  font-weight: 700;
}

#mode-essay .essay-type-tag {
  background: var(--essay-accent, #9a5722);
  border-radius: 6px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  text-transform: uppercase;
}

#mode-essay .essay-type-trigger-row {
  align-items: center;
  background: rgba(110, 84, 54, 0.05);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
}

#mode-essay .essay-type-trigger-label {
  color: var(--essay-muted, #6f5f4e);
  font-size: 0.82rem;
  font-weight: 700;
}

#mode-essay .essay-type-trigger-code {
  color: var(--essay-accent, #9a5722);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
}

#mode-essay .essay-type-reasoning {
  background: rgba(154, 87, 34, 0.04);
  border-left: 3px solid var(--essay-accent, #9a5722);
  border-radius: 8px;
  color: var(--essay-ink, #2c2418);
  font-size: 0.84rem;
  line-height: 1.5;
  padding: 10px 12px;
}

#mode-essay .essay-type-reasoning strong {
  color: var(--essay-ink, #2c2418);
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}

#mode-essay .essay-type-reasoning p {
  margin: 0;
}

#mode-essay .essay-type-blueprint {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#mode-essay .essay-blueprint-title {
  color: var(--essay-muted, #6f5f4e);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#mode-essay .essay-blueprint-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

#mode-essay .essay-blueprint-step {
  align-items: flex-start;
  background: rgba(110, 84, 54, 0.04);
  border: 1px solid rgba(110, 84, 54, 0.1);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  padding: 8px 10px;
}

#mode-essay .essay-blueprint-step-num {
  align-items: center;
  background: var(--essay-accent, #9a5722);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  width: 22px;
}

#mode-essay .essay-blueprint-step-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#mode-essay .essay-blueprint-step-part {
  color: var(--essay-ink, #2c2418);
  font-size: 0.82rem;
  font-weight: 700;
}

#mode-essay .essay-blueprint-step-role {
  color: var(--essay-muted, #6f5f4e);
  font-size: 0.76rem;
  line-height: 1.35;
}

/* ── Part 2: PTE Scoring Criteria Guide ──────────────────────────────────── */

#mode-essay .essay-guided-req-guide {
  background: var(--essay-card, #fff);
  border: 1px solid var(--essay-border-soft, rgba(110, 84, 54, 0.15));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}

#mode-essay .essay-guided-req-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#mode-essay .essay-guided-req-badge {
  color: var(--essay-accent, #9a5722);
  font-size: 0.88rem;
  font-weight: 700;
}

#mode-essay .essay-guided-req-subtext {
  color: var(--essay-muted, #6f5f4e);
  font-size: 0.8rem;
  margin: 0;
}

#mode-essay .essay-guided-req-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

#mode-essay .essay-guided-req-card-static {
  align-items: flex-start;
  background: rgba(110, 84, 54, 0.03);
  border: 1px solid rgba(110, 84, 54, 0.1);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
}

#mode-essay .essay-guided-req-num {
  align-items: center;
  background: rgba(154, 87, 34, 0.15);
  border-radius: 50%;
  color: var(--essay-accent, #9a5722);
  display: flex;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  width: 22px;
}

#mode-essay .essay-guided-req-text {
  color: var(--essay-ink, #2c2418);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.45;
}

/* ── Part 2: 2-Column Comparative Ideation with Bullet Points ────────────── */

#mode-essay .essay-guided-approaches-box {
  background: var(--essay-card, #fff);
  border: 1px solid var(--essay-border-soft, rgba(110, 84, 54, 0.18));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

#mode-essay .essay-guided-approaches-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#mode-essay .essay-guided-approaches-badge {
  color: var(--essay-ink, #2c2418);
  font-size: 0.92rem;
  font-weight: 700;
}

#mode-essay .essay-guided-approaches-sub {
  color: var(--essay-muted, #6f5f4e);
  font-size: 0.82rem;
  margin: 0;
}

#mode-essay .essay-guided-stance-columns {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

#mode-essay .essay-guided-stance-col {
  background: rgba(110, 84, 54, 0.02);
  border: 1px solid var(--essay-border-soft, rgba(110, 84, 54, 0.15));
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

#mode-essay .essay-guided-stance-col.is-agree {
  background: rgba(16, 185, 129, 0.02);
  border-top: 3px solid #10b981;
}

#mode-essay .essay-guided-stance-col.is-disagree {
  background: rgba(245, 158, 11, 0.02);
  border-top: 3px solid #f59e0b;
}

#mode-essay .essay-guided-stance-col.is-general {
  border-top: 3px solid var(--essay-accent, #9a5722);
}

#mode-essay .essay-guided-stance-head {
  align-items: center;
  border-bottom: 1px solid rgba(110, 84, 54, 0.1);
  display: flex;
  justify-content: space-between;
  padding-bottom: 8px;
}

#mode-essay .essay-guided-stance-badge {
  align-items: center;
  color: var(--essay-ink, #2c2418);
  display: flex;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 700;
}

#mode-essay .essay-guided-stance-count {
  background: rgba(110, 84, 54, 0.08);
  border-radius: 10px;
  color: var(--essay-muted, #6f5f4e);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 7px;
}

#mode-essay .essay-guided-bullet-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style-type: disc;
  margin: 0;
  padding-left: 20px;
}

#mode-essay .essay-guided-bullet-list li {
  color: var(--essay-ink, #2c2418);
  font-size: 0.84rem;
  line-height: 1.48;
}

#mode-essay .essay-bullet-lead {
  color: var(--essay-ink, #2c2418);
  font-weight: 700;
}

/* ── In-App Ready Confirmation Modal ─────────────────────────────────────── */

.essay-ready-modal-backdrop {
  align-items: center;
  animation: essayFadeIn 0.18s ease-out;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(15, 12, 9, 0.65);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 100000;
}

.essay-ready-modal-box {
  animation: essayScaleUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--essay-card, #ffffff);
  border: 1px solid var(--essay-border, rgba(110, 84, 54, 0.2));
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  max-width: 480px;
  padding: 28px 24px 24px;
  text-align: center;
  width: 100%;
}

.essay-ready-modal-icon {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 12px;
}

.essay-ready-modal-title {
  color: var(--essay-ink, #2c2418);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.essay-ready-modal-desc {
  color: var(--essay-muted, #6f5f4e);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0 0 24px;
  text-align: left;
}

.essay-ready-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

@media (max-width: 480px) {
  .essay-ready-modal-box {
    padding: 20px 16px;
  }
  .essay-ready-modal-actions {
    flex-direction: column-reverse;
  }
  .essay-ready-modal-btn {
    width: 100%;
    text-align: center;
  }
}

.essay-ready-modal-btn {
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 10px 18px;
  transition: all 0.15s ease;
}

.essay-ready-modal-btn-back {
  background: transparent;
  border-color: var(--essay-border-soft, rgba(110, 84, 54, 0.25));
  color: var(--essay-muted, #6f5f4e);
}

.essay-ready-modal-btn-back:hover {
  background: rgba(110, 84, 54, 0.06);
  color: var(--essay-ink, #2c2418);
}

.essay-ready-modal-btn-cont {
  background: var(--essay-accent, #9a5722);
  box-shadow: 0 2px 8px rgba(154, 87, 34, 0.3);
  color: #fff;
}

.essay-ready-modal-btn-cont:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

@keyframes essayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes essayScaleUp {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* ── Guided Write Essay: Mind Map, Flowcharts & Interactive Thought Bubbles ── */
/* ══════════════════════════════════════════════════════════════════════════ */

/* View Mode Toggle Bar - Sticky Header with Smooth Mobile Scrolling */
#mode-essay .essay-guided-view-toggle-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 20px;
  padding: 8px 16px;
  position: sticky;
  top: 0;
  z-index: 25;
  background: rgba(253, 251, 247, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(154, 87, 34, 0.16);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(44, 24, 16, 0.05);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#mode-essay .essay-guided-view-toggle-bar::-webkit-scrollbar {
  display: none;
}

@media (max-width: 768px) {
  #mode-essay .essay-guided-view-toggle-bar {
    justify-content: flex-start;
    padding: 6px 10px;
    gap: 8px;
    border-radius: 12px;
  }
  #mode-essay .essay-guided-view-toggle-label {
    display: none;
  }
  #mode-essay .essay-guided-view-toggle {
    flex-shrink: 0;
    width: max-content;
  }
}

#mode-essay .essay-guided-view-toggle-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--essay-muted, #7c6855);
}

#mode-essay .essay-guided-view-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.06);
  padding: 3px;
  border-radius: 10px;
  gap: 4px;
}

#mode-essay .essay-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--essay-muted, #7c6855);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#mode-essay .essay-view-toggle-btn:hover {
  color: var(--essay-ink, #2c2418);
}

#mode-essay .essay-view-toggle-btn.is-active {
  background: #ffffff;
  color: var(--essay-ink, #2c2418);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#mode-essay .essay-view-toggle-icon {
  font-size: 0.95rem;
}

/* Mind Map Canvas (Whiteboard / Ideation Space) */
#mode-essay .essay-mindmap-canvas {
  position: relative;
  border-radius: 24px;
  padding: 36px 28px;
  background-color: var(--essay-paper, #fdfbf7);
  background-image: radial-gradient(circle, rgba(154, 87, 34, 0.15) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  border: 2px solid rgba(154, 87, 34, 0.22);
  box-shadow: 0 4px 20px rgba(154, 87, 34, 0.06);
  margin-bottom: 28px;
  overflow: hidden;
  transition: all 0.25s ease;
}

#mode-essay .essay-mindmap-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

#mode-essay .mm-path-active {
  filter: drop-shadow(0 0 5px rgba(234, 88, 12, 0.45));
  animation: mmDashAnim 1.2s linear infinite;
}

@keyframes mmDashAnim {
  from { stroke-dashoffset: 20; }
  to { stroke-dashoffset: 0; }
}

/* Step 1: Central Question Hub */
#mode-essay .essay-mindmap-core {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto 52px;
  text-align: center;
  padding: 22px 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(254, 243, 199, 0.5) 100%);
  border: 2.5px solid rgba(234, 88, 12, 0.35);
  border-radius: 26px;
  box-shadow: 0 10px 30px rgba(234, 88, 12, 0.1);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#mode-essay .essay-mindmap-core:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(234, 88, 12, 0.15);
}

#mode-essay .essay-mindmap-core-spark {
  font-size: 1.6rem;
  margin-bottom: 4px;
  animation: mmPulse 2s ease-in-out infinite;
}

@keyframes mmPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

#mode-essay .essay-mindmap-core-badge {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c2410c;
  background: rgba(234, 88, 12, 0.12);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

#mode-essay .essay-mindmap-core-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--essay-ink, #2c2418);
  margin-bottom: 6px;
}

#mode-essay .essay-mindmap-core-hint {
  font-size: 0.8rem;
  color: var(--essay-muted, #7c6855);
}

/* Step 1: Thought Bubbles Row */
#mode-essay .essay-mindmap-bubbles-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}

#mode-essay .essay-thought-bubble {
  position: relative;
  z-index: 2;
  border-radius: 28px;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.94);
  border: 2px solid rgba(154, 87, 34, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#mode-essay .essay-thought-bubble:hover {
  transform: translateY(-4px);
  border-color: rgba(234, 88, 12, 0.45);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.09);
}

#mode-essay .essay-thought-bubble.is-active {
  border-color: var(--essay-amber, #ea580c);
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(234, 88, 12, 0.16);
  transform: translateY(-2px);
}

/* Cloud thought tail dots */
#mode-essay .essay-thought-tail {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5px;
}

#mode-essay .essay-thought-tail .tail-dot {
  border-radius: 50%;
  background: rgba(154, 87, 34, 0.3);
  transition: all 0.2s ease;
}

#mode-essay .essay-thought-bubble.is-active .tail-dot {
  background: #ea580c;
}

#mode-essay .essay-thought-tail .d1 { width: 3.5px; height: 3.5px; }
#mode-essay .essay-thought-tail .d2 { width: 5.5px; height: 5.5px; }
#mode-essay .essay-thought-tail .d3 { width: 7.5px; height: 7.5px; }

#mode-essay .essay-thought-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

#mode-essay .essay-thought-icon {
  font-size: 1.3rem;
}

#mode-essay .essay-thought-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#mode-essay .essay-thought-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--essay-muted, #7c6855);
}

#mode-essay .essay-thought-role {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--essay-ink, #2c2418);
}

#mode-essay .essay-thought-quote {
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--essay-ink, #3a3226);
  margin-bottom: 12px;
}

#mode-essay .essay-thought-hint-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ea580c;
}

/* Expanded Thought Callout */
#mode-essay .essay-thought-callout {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1.5px dashed rgba(154, 87, 34, 0.2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: mmFadeIn 0.25s ease;
}

@keyframes mmFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

#mode-essay .essay-thought-callout-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#mode-essay .essay-thought-callout-tag {
  font-size: 0.76rem;
  font-weight: 700;
  color: #c2410c;
}

#mode-essay .essay-thought-callout-text {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--essay-ink, #2c2418);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* ── Step 1 Visual Paradigms: Mindmap, Flowchart, Table, Cards ──────────── */
/* ══════════════════════════════════════════════════════════════════════════ */

/* Paradigm 1: Radiating Tree Mind Map (.essay-guided-mindmap-layout) */
#mode-essay .essay-guided-mindmap-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#mode-essay .essay-mm-branches-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  align-items: start;
}

@media (max-width: 768px) {
  #mode-essay .essay-mindmap-canvas {
    padding: 20px 14px;
    border-radius: 18px;
  }
  #mode-essay .essay-mindmap-core {
    margin: 0 auto 32px;
    padding: 16px 14px;
    border-radius: 18px;
  }
  #mode-essay .essay-mm-branches-container {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #mode-essay .essay-mm-branch {
    padding: 14px 12px;
    border-radius: 16px;
  }
}

#mode-essay .essay-mm-branch {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 20px;
  padding: 18px 18px 20px;
  background: rgba(255, 255, 255, 0.94);
  border: 2px solid rgba(154, 87, 34, 0.18);
  box-shadow: 0 4px 18px rgba(44, 24, 16, 0.05);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#mode-essay .essay-mm-branch.is-active-stance {
  border-color: #ea580c;
  background: #ffffff;
  box-shadow: 0 8px 28px rgba(234, 88, 12, 0.14);
}

#mode-essay .essay-mm-branch.is-inactive-stance {
  opacity: 0.88;
}

#mode-essay .essay-mm-branch.is-inactive-stance:hover {
  opacity: 1;
  transform: translateY(-2px);
  border-color: rgba(234, 88, 12, 0.35);
}

#mode-essay .essay-mm-branch.is-agree.is-active-stance {
  border-color: #059669;
  box-shadow: 0 8px 28px rgba(5, 150, 105, 0.14);
}

#mode-essay .essay-mm-branch.is-disagree.is-active-stance {
  border-color: #dc2626;
  box-shadow: 0 8px 28px rgba(220, 38, 38, 0.14);
}

/* Stance Hub Button/Card */
#mode-essay .essay-mm-stance-hub {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(253, 251, 247, 0.98);
  border: 1.5px solid rgba(154, 87, 34, 0.18);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

#mode-essay .essay-mm-stance-hub:hover {
  background: #ffffff;
  border-color: #ea580c;
  transform: translateY(-1px);
}

#mode-essay .essay-mm-branch.is-active-stance .essay-mm-stance-hub {
  background: #fff7ed;
  border-color: #ea580c;
}

#mode-essay .essay-mm-branch.is-agree.is-active-stance .essay-mm-stance-hub {
  background: #ecfdf5;
  border-color: #059669;
}

#mode-essay .essay-mm-branch.is-disagree.is-active-stance .essay-mm-stance-hub {
  background: #fef2f2;
  border-color: #dc2626;
}

#mode-essay .essay-mm-stance-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

#mode-essay .essay-mm-stance-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#mode-essay .essay-mm-stance-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--essay-muted, #7c6855);
}

#mode-essay .essay-mm-branch.is-active-stance .essay-mm-stance-badge {
  color: #c2410c;
}

#mode-essay .essay-mm-branch.is-agree.is-active-stance .essay-mm-stance-badge {
  color: #059669;
}

#mode-essay .essay-mm-branch.is-disagree.is-active-stance .essay-mm-stance-badge {
  color: #dc2626;
}

#mode-essay .essay-mm-stance-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--essay-ink, #2c2418);
}

#mode-essay .essay-mm-stance-counter {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--essay-muted, #7c6855);
}

#mode-essay .essay-mm-branch.is-active-stance .essay-mm-stance-counter {
  background: rgba(234, 88, 12, 0.15);
  color: #c2410c;
}

/* Leaves (Arguments) */
#mode-essay .essay-mm-leaves-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#mode-essay .essay-mm-leaf {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid rgba(154, 87, 34, 0.15);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

#mode-essay .essay-mm-leaf:hover {
  transform: translateY(-2px);
  border-color: rgba(234, 88, 12, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

#mode-essay .essay-mm-leaf.is-picked {
  background: #fff7ed;
  border-color: #ea580c;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.12);
}

#mode-essay .essay-mm-leaf-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(154, 87, 34, 0.12);
  color: var(--essay-muted, #7c6855);
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.2s ease;
}

#mode-essay .essay-mm-leaf.is-picked .essay-mm-leaf-check {
  background: #ea580c;
  color: #ffffff;
}

#mode-essay .essay-mm-leaf-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#mode-essay .essay-mm-leaf-heading {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--essay-ink, #2c2418);
}

#mode-essay .essay-mm-leaf-details {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--essay-muted, #7c6855);
  margin: 0;
}

/* Paradigm 2: Flowchart Assembly Line (.essay-guided-flowchart-layout) */
#mode-essay .essay-guided-flowchart-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#mode-essay .essay-flowchart-stage {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#mode-essay .essay-flowchart-stage-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

#mode-essay .essay-flowchart-stage-pill {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c2410c;
  background: rgba(234, 88, 12, 0.12);
  padding: 3px 10px;
  border-radius: 20px;
}

#mode-essay .essay-flowchart-stage-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--essay-ink, #2c2418);
  margin: 0;
}

#mode-essay .essay-flowchart-assembly-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8px 0;
}

#mode-essay .essay-flowchart-assembly-connector::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, rgba(234, 88, 12, 0.15) 0%, rgba(234, 88, 12, 0.4) 50%, rgba(234, 88, 12, 0.15) 100%);
  transform: translateX(-50%);
  z-index: 1;
}

#mode-essay .essay-flowchart-connector-badge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 20px;
  background: #ffffff;
  border: 1.5px solid rgba(234, 88, 12, 0.35);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.08);
  font-size: 0.8rem;
  font-weight: 700;
  color: #c2410c;
}

#mode-essay .essay-flowchart-connector-badge .connector-arrow {
  font-size: 1rem;
  animation: mmPulse 1.8s ease-in-out infinite;
}

/* Stance Decision Gate */
#mode-essay .essay-flowchart-stance-gate {
  border-radius: 20px;
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.35) 0%, rgba(255, 255, 255, 0.98) 100%);
  border: 2px dashed rgba(234, 88, 12, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

#mode-essay .essay-flowchart-gate-header {
  text-align: center;
  margin-bottom: 16px;
}

#mode-essay .essay-flowchart-gate-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c2410c;
  background: rgba(234, 88, 12, 0.12);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 6px;
}

#mode-essay .essay-flowchart-gate-sub {
  font-size: 0.84rem;
  color: var(--essay-muted, #7c6855);
  margin: 0;
}

#mode-essay .essay-flowchart-gate-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  #mode-essay .essay-flowchart-gate-options {
    grid-template-columns: 1fr;
  }
}

#mode-essay .essay-flowchart-gate-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #ffffff;
  border: 2px solid rgba(154, 87, 34, 0.2);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

#mode-essay .essay-flowchart-gate-opt:hover {
  border-color: #ea580c;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

#mode-essay .essay-flowchart-gate-opt.is-active {
  border-color: #ea580c;
  background: #fff7ed;
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.15);
}

#mode-essay .essay-flowchart-gate-opt.is-agree.is-active {
  border-color: #059669;
  background: #ecfdf5;
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.15);
}

#mode-essay .essay-flowchart-gate-opt.is-disagree.is-active {
  border-color: #dc2626;
  background: #fef2f2;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.15);
}

#mode-essay .gate-opt-icon {
  font-size: 1.5rem;
}

#mode-essay .gate-opt-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#mode-essay .gate-opt-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--essay-ink, #2c2418);
}

#mode-essay .gate-opt-status {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--essay-muted, #7c6855);
}

#mode-essay .essay-flowchart-gate-opt.is-active .gate-opt-status {
  color: #c2410c;
  font-weight: 700;
}

/* Paradigm 3: 5-Dimension Dialectical Matrix Table (.essay-guided-table-layout) */
#mode-essay .essay-guided-table-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#mode-essay .essay-table-stance-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid rgba(154, 87, 34, 0.18);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

#mode-essay .essay-table-stance-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#mode-essay .essay-table-stance-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--essay-ink, #2c2418);
}

#mode-essay .essay-table-stance-hint {
  font-size: 0.78rem;
  color: var(--essay-muted, #7c6855);
}

#mode-essay .essay-table-stance-toggles {
  display: flex;
  gap: 10px;
}

#mode-essay .essay-matrix-stance-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(154, 87, 34, 0.2);
  background: #ffffff;
  color: var(--essay-ink, #2c2418);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

#mode-essay .essay-matrix-stance-btn:hover {
  border-color: #ea580c;
  transform: translateY(-1px);
}

#mode-essay .essay-matrix-stance-btn.is-active {
  border-color: #ea580c;
  background: #fff7ed;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.18);
}

#mode-essay .essay-matrix-stance-btn.is-agree.is-active {
  border-color: #059669;
  background: #ecfdf5;
}

#mode-essay .essay-matrix-stance-btn.is-disagree.is-active {
  border-color: #dc2626;
  background: #fef2f2;
}

#mode-essay .essay-matrix-stance-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: #ea580c;
  color: #ffffff;
}

#mode-essay .essay-matrix-stance-btn.is-agree .essay-matrix-stance-pill {
  background: #059669;
}

#mode-essay .essay-matrix-stance-btn.is-disagree .essay-matrix-stance-pill {
  background: #dc2626;
}

@media (max-width: 640px) {
  #mode-essay .essay-table-stance-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
  }
  #mode-essay .essay-table-stance-toggles {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  #mode-essay .essay-matrix-stance-btn {
    width: 100%;
    justify-content: space-between;
    padding: 10px 14px;
  }
}

/* Scroll hint for mobile */
#mode-essay .essay-matrix-scroll-hint {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(154, 87, 34, 0.08);
  font-size: 0.78rem;
  font-weight: 600;
  color: #c2410c;
  text-align: center;
}

@media (max-width: 768px) {
  #mode-essay .essay-matrix-scroll-hint {
    display: flex;
  }
}

/* Dialectical Matrix Table */
#mode-essay .essay-dialectical-matrix-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 2px solid rgba(154, 87, 34, 0.2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  background: #ffffff;
  -webkit-overflow-scrolling: touch;
}

#mode-essay .essay-dialectical-matrix {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  text-align: left;
}

#mode-essay .essay-dialectical-matrix th,
#mode-essay .essay-dialectical-matrix td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(154, 87, 34, 0.12);
  vertical-align: top;
}

#mode-essay .essay-dialectical-matrix thead th {
  background: #fdfbf7;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--essay-ink, #2c2418);
  border-bottom: 2px solid rgba(154, 87, 34, 0.2);
}

#mode-essay .essay-dialectical-matrix thead th.col-criteria {
  width: 22%;
  background: #f8f5ee;
}

#mode-essay .essay-dialectical-matrix thead th.col-side {
  width: 39%;
}

#mode-essay .essay-matrix-th-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#mode-essay .essay-matrix-col-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  background: #ea580c;
  color: #ffffff;
}

#mode-essay th.is-agree .essay-matrix-col-badge,
#mode-essay td.is-agree .essay-matrix-col-badge {
  background: #059669;
}

#mode-essay th.is-disagree .essay-matrix-col-badge,
#mode-essay td.is-disagree .essay-matrix-col-badge {
  background: #dc2626;
}

#mode-essay .essay-dialectical-matrix td.essay-matrix-cell-dim {
  background: #faf8f4;
  font-size: 0.84rem;
  color: var(--essay-ink, #2c2418);
  border-right: 1px solid rgba(154, 87, 34, 0.12);
}

#mode-essay .essay-matrix-dim-sub {
  font-size: 0.74rem;
  color: var(--essay-muted, #7c6855);
  margin: 4px 0 0;
  font-style: italic;
}

#mode-essay .essay-dialectical-matrix td.essay-matrix-cell-side {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--essay-ink, #2c2418);
  transition: background 0.2s ease;
}

#mode-essay .essay-dialectical-matrix td.essay-matrix-cell-side:first-of-type {
  border-right: 1px solid rgba(154, 87, 34, 0.12);
}

#mode-essay .essay-dialectical-matrix td.is-active-col,
#mode-essay .essay-dialectical-matrix th.is-active-col {
  background: rgba(255, 247, 237, 0.5);
}

#mode-essay .essay-dialectical-matrix td.is-agree.is-active-col,
#mode-essay .essay-dialectical-matrix th.is-agree.is-active-col {
  background: rgba(236, 253, 245, 0.5);
}

#mode-essay .essay-dialectical-matrix td.is-disagree.is-active-col,
#mode-essay .essay-dialectical-matrix th.is-disagree.is-active-col {
  background: rgba(244, 242, 242, 0.5);
}

/* Interactive matrix chips */
#mode-essay .essay-matrix-chips-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#mode-essay .essay-matrix-chip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(154, 87, 34, 0.18);
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

#mode-essay .essay-matrix-chip:hover {
  border-color: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

#mode-essay .essay-matrix-chip.is-active {
  border-color: #ea580c;
  background: #fff7ed;
  font-weight: 600;
}

#mode-essay .essay-matrix-chip-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(154, 87, 34, 0.12);
  color: var(--essay-muted, #7c6855);
  flex-shrink: 0;
  margin-top: 2px;
}

#mode-essay .essay-matrix-chip.is-active .essay-matrix-chip-check {
  background: #ea580c;
  color: #ffffff;
}

#mode-essay .essay-matrix-chip-text {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--essay-ink, #2c2418);
}

/* Paradigm 4: Visual Cards Layout (.essay-guided-cards-layout) */
#mode-essay .essay-guided-cards-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#mode-essay .essay-cards-clause-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

#mode-essay .essay-cards-clause-card {
  border-radius: 18px;
  padding: 18px 20px;
  background: #ffffff;
  border: 1.5px solid rgba(154, 87, 34, 0.18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#mode-essay .essay-cards-clause-card:hover {
  border-color: rgba(234, 88, 12, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

#mode-essay .essay-cards-clause-card.is-selected {
  border-color: #ea580c;
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.12);
}

#mode-essay .essay-cards-clause-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#mode-essay .essay-cards-clause-badge {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--essay-muted, #7c6855);
  background: rgba(154, 87, 34, 0.08);
  padding: 3px 8px;
  border-radius: 8px;
}

#mode-essay .essay-cards-clause-role {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--essay-ink, #2c2418);
}

#mode-essay .essay-cards-clause-quote {
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--essay-ink, #3a3226);
  padding: 8px 12px;
  border-radius: 10px;
  background: #faf8f5;
  border-left: 3px solid rgba(154, 87, 34, 0.3);
  margin-bottom: 12px;
}

#mode-essay .essay-cards-clause-meaning,
#mode-essay .essay-cards-clause-takeaway {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

#mode-essay .essay-cards-clause-lbl {
  font-size: 0.74rem;
  font-weight: 700;
  color: #c2410c;
}

#mode-essay .essay-cards-clause-meaning p,
#mode-essay .essay-cards-clause-takeaway p {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--essay-ink, #2c2418);
  margin: 0;
}

/* ── Step 1 Stage Analyzer & Prompt Deconstruction Components ───────────── */
#mode-essay .essay-step1-stage-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

#mode-essay .essay-step1-stage-pill {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c2410c;
  background: rgba(234, 88, 12, 0.12);
  padding: 3px 10px;
  border-radius: 20px;
}

#mode-essay .essay-step1-stage-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--essay-ink, #2c2418);
  margin: 0;
}

#mode-essay .essay-mindmap-stage-analyzer,
#mode-essay .essay-table-stage-analyzer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

/* Prompt Tension Banner */
#mode-essay .essay-prompt-tension-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.45) 0%, rgba(255, 255, 255, 0.96) 100%);
  border: 1.5px solid rgba(234, 88, 12, 0.3);
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.06);
  margin-top: 4px;
}

#mode-essay .essay-tension-icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
  color: #ea580c;
  padding-top: 2px;
}

#mode-essay .essay-tension-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#mode-essay .essay-tension-label {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #c2410c;
}

#mode-essay .essay-tension-text {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--essay-ink, #2c2418);
  margin: 0;
}

/* Clause Keyword Chips */
#mode-essay .essay-clause-keywords {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

#mode-essay .essay-clause-kw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#mode-essay .essay-clause-kw-tag {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(154, 87, 34, 0.08);
  border: 1px solid rgba(154, 87, 34, 0.16);
  font-size: 0.78rem;
  line-height: 1.3;
}

#mode-essay .essay-clause-kw-term {
  color: var(--essay-ink, #2c2418);
  font-weight: 700;
}

#mode-essay .essay-clause-kw-gloss {
  color: var(--essay-muted, #7c6855);
  font-size: 0.74rem;
}

/* Clause Interpretation Trap Alert */
#mode-essay .essay-clause-trap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.06);
  border-left: 3px solid #dc2626;
  margin-top: 4px;
}

#mode-essay .essay-clause-trap-lbl {
  font-size: 0.74rem;
  font-weight: 800;
  color: #dc2626;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

#mode-essay .essay-clause-trap p {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--essay-ink, #2c2418);
  margin: 0;
}

@media (max-width: 640px) {
  #mode-essay .essay-prompt-tension-banner {
    padding: 12px 14px;
    gap: 10px;
  }
  #mode-essay .essay-tension-label {
    font-size: 0.8rem;
  }
  #mode-essay .essay-tension-text {
    font-size: 0.82rem;
  }
  #mode-essay .essay-step1-stage-header {
    flex-wrap: wrap;
    gap: 6px;
  }
  #mode-essay .essay-step1-stage-title {
    font-size: 0.95rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* ── Step 2: Stance & Idea Brainstorming Mind Map ────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════ */

#mode-essay .essay-brainstorm-mindmap-wrap {
  margin-top: 24px;
}

#mode-essay .essay-brainstorm-stance-core {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 18px 24px;
  margin: 0 auto 38px;
  max-width: 540px;
  border-radius: 24px;
  background: #ffffff;
  border: 2.5px solid rgba(234, 88, 12, 0.4);
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.12);
  transition: all 0.25s ease;
}

#mode-essay .essay-brainstorm-stance-icon {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

#mode-essay .essay-brainstorm-stance-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #ea580c;
  margin-bottom: 4px;
}

#mode-essay .essay-brainstorm-stance-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--essay-ink, #2c2418);
  margin-bottom: 4px;
}

#mode-essay .essay-brainstorm-stance-sub {
  font-size: 0.8rem;
  color: var(--essay-muted, #7c6855);
}

/* Stems Row */
#mode-essay .essay-brainstorm-stems-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-bottom: 42px;
}

#mode-essay .essay-brainstorm-stem {
  position: relative;
  border-radius: 20px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(154, 87, 34, 0.2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

#mode-essay .essay-brainstorm-stem.stem-body1 {
  border-left: 5px solid #2563eb;
}

#mode-essay .essay-brainstorm-stem.stem-body2 {
  border-left: 5px solid #059669;
}

#mode-essay .essay-brainstorm-stem-badge {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--essay-muted, #7c6855);
  margin-bottom: 6px;
}

#mode-essay .essay-brainstorm-stem.stem-body1 .essay-brainstorm-stem-badge {
  color: #2563eb;
}

#mode-essay .essay-brainstorm-stem.stem-body2 .essay-brainstorm-stem-badge {
  color: #059669;
}

#mode-essay .essay-brainstorm-stem-point-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--essay-ink, #2c2418);
  line-height: 1.4;
}

#mode-essay .essay-brainstorm-stem-point-vi {
  display: block;
  font-size: 0.82rem;
  color: var(--essay-muted, #7c6855);
  margin-top: 3px;
}

#mode-essay .essay-brainstorm-stem-placeholder {
  font-size: 0.84rem;
  font-style: italic;
  color: var(--essay-muted, #a39080);
}

/* Floating Idea Bubbles Field */
#mode-essay .essay-brainstorm-bubbles-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

#mode-essay .essay-idea-bubble {
  position: relative;
  border-radius: 24px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(154, 87, 34, 0.18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

#mode-essay .essay-idea-bubble:hover {
  transform: translateY(-3px);
  border-color: rgba(234, 88, 12, 0.4);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

#mode-essay .essay-idea-bubble.is-picked {
  border-color: #ea580c;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(234, 88, 12, 0.16);
  transform: translateY(-2px);
}

#mode-essay .essay-idea-bubble-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

#mode-essay .essay-idea-bubble-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--essay-muted, #7c6855);
  background: rgba(154, 87, 34, 0.08);
  padding: 2px 8px;
  border-radius: 12px;
}

#mode-essay .essay-idea-bubble-badge.is-active {
  color: #fff;
  background: #ea580c;
}

#mode-essay .essay-idea-bubble-help-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(154, 87, 34, 0.25);
  background: transparent;
  color: var(--essay-muted, #7c6855);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

#mode-essay .essay-idea-bubble-help-btn:hover,
#mode-essay .essay-idea-bubble-help-btn.is-open {
  background: #ea580c;
  border-color: #ea580c;
  color: #fff;
}

#mode-essay .essay-idea-bubble-body {
  flex: 1;
  margin-bottom: 10px;
}

#mode-essay .essay-idea-bubble-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--essay-ink, #2c2418);
  margin-bottom: 4px;
}

#mode-essay .essay-idea-bubble-vi {
  display: block;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--essay-muted, #7c6855);
}

#mode-essay .essay-idea-bubble-foot {
  display: flex;
  justify-content: flex-end;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ea580c;
}

/* Idea Bubble Callout */
#mode-essay .essay-idea-bubble-callout {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1.5px dashed rgba(154, 87, 34, 0.2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: mmFadeIn 0.2s ease;
}

#mode-essay .essay-idea-callout-sec {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#mode-essay .essay-idea-callout-tag {
  font-size: 0.74rem;
  font-weight: 700;
  color: #c2410c;
}

#mode-essay .essay-idea-callout-sec p {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--essay-ink, #2c2418);
  margin: 0;
}

#mode-essay .essay-idea-callout-sec.cue-box {
  background: rgba(234, 88, 12, 0.07);
  border-left: 3px solid #ea580c;
  padding: 6px 10px;
  border-radius: 6px;
}

/* ════════════════════════════════════════════════════════════════════════════
   STEP 1 MULTI-LAYOUT VISUALIZATIONS (Whiteboard, Stations, Infographic HUD)
   ════════════════════════════════════════════════════════════════════════════ */

/* --- 1. Whiteboard: Prompt Recap, Stance Exclusivity, and Pipeline --- */
#mode-essay .essay-wb-prompt-recap-box {
  background: linear-gradient(135deg, rgba(254, 250, 244, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
  border: 1.5px solid rgba(154, 87, 34, 0.22);
  border-left: 4px solid var(--essay-accent, #ea580c);
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 14px;
  margin-bottom: 6px;
  box-shadow: 0 2px 8px rgba(44, 24, 16, 0.04);
}

#mode-essay .essay-wb-prompt-recap-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--essay-accent, #ea580c);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

#mode-essay .essay-wb-prompt-recap-text {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--essay-ink, #1e293b);
  line-height: 1.55;
  margin: 0;
  font-style: italic;
}

#mode-essay .essay-wb-twosides-box,
#mode-essay .essay-wb-pipeline-box {
  background: var(--essay-paper-card, #ffffff);
  border: 1px solid var(--essay-border, #e5e0d8);
  border-radius: 16px;
  padding: 18px 20px;
  margin-top: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

#mode-essay .essay-wb-section-head {
  margin-bottom: 14px;
}

#mode-essay .essay-wb-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--essay-accent, #ea580c);
  background: rgba(234, 88, 12, 0.08);
  border: 1px solid rgba(234, 88, 12, 0.2);
  border-radius: 8px;
  padding: 3px 10px;
  margin-bottom: 6px;
}

#mode-essay .essay-wb-section-sub {
  font-size: 0.84rem;
  color: var(--essay-ink-muted, #64748b);
  margin: 0;
  line-height: 1.45;
}

#mode-essay .essay-wb-twosides-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 680px) {
  #mode-essay .essay-wb-twosides-grid {
    grid-template-columns: 1fr;
  }
}

#mode-essay .essay-wb-side-card {
  border-radius: 12px;
  padding: 14px;
  border: 1.5px solid var(--essay-border, #e2e8f0);
  background: var(--essay-paper, #fbfaf8);
  transition: all 0.2s ease;
}

#mode-essay .essay-wb-side-card.is-agree {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.03);
}

#mode-essay .essay-wb-side-card.is-disagree {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.03);
}

#mode-essay .essay-wb-side-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#mode-essay .essay-wb-side-card.is-active-stance {
  opacity: 1;
  border-width: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

#mode-essay .essay-wb-side-card.is-agree.is-active-stance {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.05);
}

#mode-essay .essay-wb-side-card.is-disagree.is-active-stance {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.05);
}

#mode-essay .essay-wb-side-active-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
}

#mode-essay .essay-wb-side-card.is-disagree.is-active-stance .essay-wb-side-active-badge {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}

#mode-essay .essay-wb-side-card.is-greyed-out {
  opacity: 0.52;
  filter: grayscale(65%);
  cursor: pointer;
  background: #f8fafc;
  border-color: #cbd5e1;
  border-style: dashed;
  position: relative;
  transition: all 0.2s ease;
}

#mode-essay .essay-wb-side-card.is-greyed-out:hover {
  opacity: 0.85;
  filter: grayscale(15%);
  border-color: var(--essay-accent, #ea580c);
}

#mode-essay .essay-wb-side-inactive-banner {
  background: rgba(0, 0, 0, 0.06);
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 8px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--essay-ink-muted, #64748b);
  cursor: pointer;
  transition: all 0.2s ease;
}

#mode-essay .essay-wb-side-card.is-greyed-out:hover .essay-wb-side-inactive-banner {
  background: rgba(234, 88, 12, 0.1);
  border-color: var(--essay-accent, #ea580c);
  color: var(--essay-accent, #ea580c);
}

#mode-essay .essay-wb-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#mode-essay .essay-wb-side-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--essay-ink, #1e293b);
}

#mode-essay .essay-wb-side-count {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--essay-ink-muted, #475569);
}

#mode-essay .essay-wb-side-card.is-agree .essay-wb-side-count {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

#mode-essay .essay-wb-side-card.is-disagree .essay-wb-side-count {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

#mode-essay .essay-wb-side-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#mode-essay .essay-wb-chip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  padding: 8px 12px;
  font-size: 0.81rem;
  line-height: 1.4;
  border-radius: 9px;
  border: 1px solid var(--essay-border, #cbd5e1);
  background: var(--essay-paper-card, #ffffff);
  color: var(--essay-ink, #334155);
  cursor: pointer;
  transition: all 0.18s ease;
}

#mode-essay .essay-wb-chip:hover {
  border-color: var(--essay-accent, #ea580c);
  transform: translateX(2px);
}

#mode-essay .essay-wb-chip.is-active {
  background: rgba(234, 88, 12, 0.08);
  border-color: #ea580c;
  color: var(--essay-ink, #0f172a);
  font-weight: 600;
}

#mode-essay .essay-wb-side-card.is-agree .essay-wb-chip.is-active {
  background: rgba(16, 185, 129, 0.1);
  border-color: #10b981;
  color: #065f46;
}

#mode-essay .essay-wb-side-card.is-disagree .essay-wb-chip.is-active {
  background: rgba(245, 158, 11, 0.1);
  border-color: #f59e0b;
  color: #92400e;
}

#mode-essay .essay-wb-chip-icon {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--essay-ink-muted, #94a3b8);
}

#mode-essay .essay-wb-chip.is-active .essay-wb-chip-icon {
  color: var(--essay-accent, #ea580c);
}

#mode-essay .essay-wb-side-card.is-agree .essay-wb-chip.is-active .essay-wb-chip-icon {
  color: #059669;
}

#mode-essay .essay-wb-side-card.is-disagree .essay-wb-chip.is-active .essay-wb-chip-icon {
  color: #d97706;
}

#mode-essay .essay-wb-chip-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

#mode-essay .essay-wb-chip-heading {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--essay-ink, #0f172a);
  line-height: 1.35;
}

#mode-essay .essay-wb-chip-details {
  font-size: 0.77rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--essay-ink-muted, #475569);
}

#mode-essay .essay-wb-chip.is-active .essay-wb-chip-heading {
  color: inherit;
}

#mode-essay .essay-wb-chip.is-active .essay-wb-chip-details {
  color: inherit;
  opacity: 0.92;
}

/* --- 2. Whiteboard: "Khung dàn ý 4 đoạn" (Interactive Pipeline) --- */
#mode-essay .essay-wb-pipeline-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

@media (max-width: 768px) {
  #mode-essay .essay-wb-pipeline-stepper {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  #mode-essay .essay-wb-pipeline-stepper {
    grid-template-columns: 1fr;
  }
}

#mode-essay .essay-wb-pipe-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--essay-border, #cbd5e1);
  background: var(--essay-paper, #f8fafc);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 110px;
}

#mode-essay .essay-wb-pipe-btn:hover {
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
}

#mode-essay .essay-wb-pipe-btn.is-active {
  border: 2px solid #38bdf8;
  background: var(--essay-paper-card, #ffffff);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2);
}

#mode-essay .essay-wb-pipe-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

#mode-essay .essay-wb-pipe-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.15);
  color: #0284c7;
  font-size: 0.72rem;
  font-weight: 800;
}

#mode-essay .essay-wb-pipe-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--essay-ink, #0f172a);
}

#mode-essay .essay-wb-pipe-role {
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--essay-ink-muted, #64748b);
  margin-bottom: 8px;
  flex-grow: 1;
}

#mode-essay .essay-wb-pipe-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

#mode-essay .essay-wb-pipe-tag {
  font-size: 0.7rem;
  font-weight: 600;
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
}

#mode-essay .essay-wb-pipe-trap-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #d97706;
  background: rgba(245, 158, 11, 0.12);
  padding: 1px 5px;
  border-radius: 4px;
}

#mode-essay .essay-wb-pipeline-stepper {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

#mode-essay .essay-wb-pipeline-drawer {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  background: var(--essay-paper, #f1f5f9);
  border: 1px solid var(--essay-border, #cbd5e1);
  border-radius: 10px;
  padding: 14px 18px;
}

#mode-essay .essay-wb-drawer-head {
  margin-bottom: 8px;
}

#mode-essay .essay-wb-drawer-pill {
  font-size: 0.76rem;
  font-weight: 700;
  color: #0284c7;
  background: rgba(56, 189, 248, 0.12);
  padding: 2px 8px;
  border-radius: 6px;
}

#mode-essay .essay-wb-drawer-mission {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--essay-ink, #1e293b);
  margin: 0 0 8px 0;
}

#mode-essay .essay-wb-drawer-trap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid #f59e0b;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--essay-ink, #1e293b);
  margin-top: 10px;
}

#mode-essay .essay-wb-drawer-trap-icon {
  font-size: 0.9rem;
}

/* Dynamic POS & PEEL Outline Flowchart & Pipeline */
#mode-essay .essay-pos-peel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

/* --- A. Horizontal Branching Tree (for POS Intro & Conclusion) --- */
#mode-essay .essay-flowchart-tree {
  display: flex;
  align-items: stretch;
  gap: 16px;
  position: relative;
  padding: 6px 0;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

#mode-essay .essay-flowchart-root-col {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 145px;
}

#mode-essay .essay-flowchart-root {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 10px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

#mode-essay .essay-flowchart-root.is-intro {
  border-color: #3b82f6;
  background: linear-gradient(160deg, #eff6ff, #ffffff);
}

#mode-essay .essay-flowchart-root.is-conclusion {
  border-color: #10b981;
  background: linear-gradient(160deg, #ecfdf5, #ffffff);
}

#mode-essay .essay-flowchart-root-badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

#mode-essay .essay-flowchart-root.is-intro .essay-flowchart-root-badge {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.14);
}

#mode-essay .essay-flowchart-root-badge.is-body1 {
  color: #4338ca;
  background: rgba(99, 102, 241, 0.14);
}

#mode-essay .essay-flowchart-root-badge.is-body2 {
  color: #0369a1;
  background: rgba(14, 165, 233, 0.14);
}

#mode-essay .essay-flowchart-root.is-conclusion .essay-flowchart-root-badge {
  color: #047857;
  background: rgba(16, 185, 129, 0.14);
}

#mode-essay .essay-flowchart-root-title {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--essay-ink, #0f172a);
  line-height: 1.25;
}

#mode-essay .essay-flowchart-root-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--essay-ink-muted, #64748b);
  margin-top: 4px;
}

#mode-essay .essay-flowchart-pipeline-mini {
  font-size: 0.68rem;
  font-weight: 700;
  color: #4338ca;
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Branching Connector & Tree Lines */
#mode-essay .essay-flowchart-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  flex-shrink: 0;
  position: relative;
}

#mode-essay .essay-flowchart-connector::before {
  content: '';
  width: 100%;
  height: 2px;
  background: #cbd5e1;
}

#mode-essay .essay-flowchart-connector::after {
  content: '▶';
  position: absolute;
  right: -2px;
  font-size: 8px;
  color: #94a3b8;
  line-height: 1;
}

#mode-essay .essay-flowchart-branches {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
  position: relative;
  padding-left: 20px;
}

/* Vertical trunk connecting child branches */
#mode-essay .essay-flowchart-branches::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: #cbd5e1;
}

#mode-essay .essay-flowchart-node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.45;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.18s ease;
}

/* Differentiated left accent borders for tree nodes */
#mode-essay .essay-flowchart-node.is-p {
  border-left: 3.5px solid #3b82f6;
}

#mode-essay .essay-flowchart-node.is-o {
  border-left: 3.5px solid #10b981;
}

#mode-essay .essay-flowchart-node.is-s {
  border-left: 3.5px solid #f59e0b;
}

#mode-essay .essay-flowchart-node.is-reaffirm {
  border-left: 3.5px solid #10b981;
}

#mode-essay .essay-flowchart-node.is-synthesize {
  border-left: 3.5px solid #f59e0b;
}

#mode-essay .essay-flowchart-node.is-remark {
  border-left: 3.5px solid #3b82f6;
}

#mode-essay .essay-flowchart-node:hover {
  border-color: #cbd5e1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

/* Horizontal feeder branch from trunk to node */
#mode-essay .essay-flowchart-node::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 18px;
  width: 20px;
  height: 2px;
  background: #cbd5e1;
}

#mode-essay .essay-flowchart-node-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Enhanced Inner Callout Boxes for Content Depth */
#mode-essay .essay-flowchart-callout {
  padding: 7px 11px;
  border-radius: 6px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--essay-ink, #334155);
}

#mode-essay .essay-flowchart-callout.callout-blue {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.15);
}

#mode-essay .essay-flowchart-callout.callout-emerald {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.15);
}

#mode-essay .essay-flowchart-callout.callout-amber {
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.15);
}

#mode-essay .essay-flowchart-callout.callout-indigo {
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.15);
}

#mode-essay .essay-flowchart-callout.callout-sky {
  background: rgba(14, 165, 233, 0.05);
  border: 1px solid rgba(14, 165, 233, 0.15);
}

#mode-essay .essay-flowchart-callout.callout-orange {
  background: rgba(234, 88, 12, 0.05);
  border: 1px solid rgba(234, 88, 12, 0.15);
}

#mode-essay .essay-flowchart-callout.callout-purple {
  background: rgba(168, 85, 247, 0.05);
  border: 1px solid rgba(168, 85, 247, 0.15);
}

/* --- B. Sequential PEEL Progression Pipeline (Body 1 & 2) --- */
#mode-essay .essay-peel-pipeline {
  display: flex;
  flex-direction: column;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}

#mode-essay .essay-peel-pipeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-wrap: wrap;
  gap: 8px;
}

#mode-essay .essay-peel-header-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#mode-essay .essay-peel-pipeline-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--essay-ink, #0f172a);
  line-height: 1.25;
}

#mode-essay .essay-peel-pipeline-sub {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--essay-ink-muted, #64748b);
}

#mode-essay .essay-peel-steps-list {
  display: flex;
  flex-direction: column;
  position: relative;
}

#mode-essay .essay-peel-step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.45;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.18s ease;
}

#mode-essay .essay-peel-step-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

#mode-essay .essay-peel-step-card.is-p {
  border-left: 4px solid #6366f1;
}

#mode-essay .essay-peel-step-card.is-e {
  border-left: 4px solid #0ea5e9;
}

#mode-essay .essay-peel-step-card.is-ex {
  border-left: 4px solid #ea580c;
}

#mode-essay .essay-peel-step-card.is-l {
  border-left: 4px solid #a855f7;
}

#mode-essay .essay-peel-card-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#mode-essay .essay-peel-transition {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

#mode-essay .essay-peel-transition::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: #cbd5e1;
  z-index: 1;
}

#mode-essay .essay-peel-transition-badge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 2px 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
}

#mode-essay .essay-peel-transition-arrow {
  font-size: 0.85rem;
  font-weight: 800;
  color: #3b82f6;
  line-height: 1;
}

@media (max-width: 768px) {
  #mode-essay .essay-wb-pipeline-drawer {
    padding: 10px 12px;
  }
  #mode-essay .essay-peel-pipeline-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  #mode-essay .essay-flowchart-tree {
    flex-direction: column;
    gap: 12px;
  }
  #mode-essay .essay-flowchart-root-col {
    width: 100%;
  }
  #mode-essay .essay-flowchart-connector {
    display: none;
  }
  #mode-essay .essay-flowchart-branches {
    padding-left: 14px;
  }
  #mode-essay .essay-flowchart-node::before {
    left: -14px;
    width: 14px;
  }
}

#mode-essay .essay-pos-peel-pill {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#mode-essay .essay-pos-peel-pill.pos-p {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

#mode-essay .essay-pos-peel-pill.pos-o {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

#mode-essay .essay-pos-peel-pill.pos-s {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

#mode-essay .essay-pos-peel-pill.peel-p {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
}

#mode-essay .essay-pos-peel-pill.peel-e {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
}

#mode-essay .essay-pos-peel-pill.peel-ex {
  background: rgba(234, 88, 12, 0.12);
  color: #c2410c;
}

#mode-essay .essay-pos-peel-pill.peel-l {
  background: rgba(168, 85, 247, 0.12);
  color: #7e22ce;
}

#mode-essay .essay-pos-signposts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding-left: 4px;
}

#mode-essay .essay-signpost-point {
  font-weight: 600;
  color: var(--essay-ink, #1e293b);
}

#mode-essay .essay-peel-highlight {
  font-weight: 700;
  color: var(--essay-accent, #ea580c);
}

/* Tighten wide-screen spacing for interactive checks (eliminated overly stretched empty space) */
#mode-essay .essay-step1-part-2 > .essay-guided-interactive-quiz,
#mode-essay .essay-step1-part-2 > .essay-guided-gapfill-box,
#mode-essay .essay-guided-interactive-quiz,
#mode-essay .essay-guided-gapfill-box {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

#mode-essay .essay-guided-gapfill-sentence,
#mode-essay .essay-guided-gapfill-slots,
#mode-essay .essay-guided-gapfill-success,
#mode-essay .essay-guided-quiz-options {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* --- 3. Stations Layout (Zero Vertical Scroll) --- */
#mode-essay .essay-stations-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

#mode-essay .essay-stations-nav-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--essay-ink-muted, #64748b);
}

#mode-essay .essay-stations-nav {
  display: inline-flex;
  gap: 6px;
  background: rgba(0, 0, 0, 0.05);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--essay-border, #e2e8f0);
}

#mode-essay .essay-station-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--essay-ink-muted, #475569);
  cursor: pointer;
  transition: all 0.18s ease;
}

#mode-essay .essay-station-tab-btn:hover {
  color: var(--essay-ink, #0f172a);
}

#mode-essay .essay-station-tab-btn.is-active {
  background: var(--essay-paper-card, #ffffff);
  color: #7c3aed;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#mode-essay .essay-station-pane {
  background: var(--essay-paper-card, #ffffff);
  border: 1px solid var(--essay-border, #e2e8f0);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

#mode-essay .essay-station-blueprint-grid,
#mode-essay .essay-station-stances-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 680px) {
  #mode-essay .essay-station-blueprint-grid,
  #mode-essay .essay-station-stances-grid {
    grid-template-columns: 1fr;
  }
}

#mode-essay .essay-station-type-card,
#mode-essay .essay-station-outline-card,
#mode-essay .essay-station-stance-card,
#mode-essay .essay-station-trap-card {
  background: var(--essay-paper, #f8fafc);
  border: 1px solid var(--essay-border, #e2e8f0);
  border-radius: 12px;
  padding: 14px 16px;
}

#mode-essay .essay-station-card-badge {
  font-size: 0.74rem;
  font-weight: 700;
  color: #7c3aed;
  display: block;
  margin-bottom: 6px;
}

#mode-essay .essay-station-type-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: var(--essay-ink, #0f172a);
}

#mode-essay .essay-station-type-desc {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--essay-ink-muted, #475569);
  margin: 0 0 10px 0;
}

#mode-essay .essay-station-trigger {
  font-size: 0.78rem;
  background: rgba(0, 0, 0, 0.04);
  padding: 6px 10px;
  border-radius: 6px;
}

#mode-essay .essay-station-outline-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#mode-essay .essay-station-outline-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--essay-paper-card, #ffffff);
  border: 1px solid var(--essay-border, #e2e8f0);
  border-radius: 8px;
  padding: 8px 10px;
}

#mode-essay .essay-station-outline-num {
  font-size: 0.75rem;
  font-weight: 800;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}

#mode-essay .essay-station-outline-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#mode-essay .essay-station-outline-part {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--essay-ink, #0f172a);
}

#mode-essay .essay-station-outline-role {
  font-size: 0.76rem;
  color: var(--essay-ink-muted, #64748b);
}

#mode-essay .essay-station-traps-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  #mode-essay .essay-station-traps-cards {
    grid-template-columns: 1fr;
  }
}

#mode-essay .essay-station-trap-head {
  margin-bottom: 8px;
}

#mode-essay .essay-station-trap-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #d97706;
}

#mode-essay .essay-station-trap-title {
  font-size: 0.82rem;
  font-weight: 700;
  margin: 2px 0 0 0;
  color: var(--essay-ink, #0f172a);
}

#mode-essay .essay-station-trap-row {
  font-size: 0.78rem;
  line-height: 1.4;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 6px;
}

#mode-essay .essay-station-trap-row.is-wrong {
  background: rgba(239, 68, 68, 0.07);
  border-left: 2px solid #ef4444;
}

#mode-essay .essay-station-trap-row.is-right {
  background: rgba(16, 185, 129, 0.07);
  border-left: 2px solid #10b981;
}

#mode-essay .essay-station-trap-tag {
  font-size: 0.7rem;
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

#mode-essay .essay-station-trap-row.is-wrong .essay-station-trap-tag { color: #dc2626; }
#mode-essay .essay-station-trap-row.is-right .essay-station-trap-tag { color: #059669; }

/* --- 4. Infographic HUD Layout --- */
#mode-essay .essay-hud-ribbon-box,
#mode-essay .essay-hud-dodont-box {
  background: var(--essay-paper-card, #ffffff);
  border: 1px solid var(--essay-border, #e2e8f0);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

#mode-essay .essay-hud-section-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--essay-ink-muted, #64748b);
  display: block;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#mode-essay .essay-hud-ribbon {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
}

#mode-essay .essay-hud-ribbon-step {
  flex: 1;
  min-width: 140px;
  background: var(--essay-paper, #f8fafc);
  border: 1px solid var(--essay-border, #cbd5e1);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

#mode-essay .essay-hud-step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #38bdf8;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mode-essay .essay-hud-step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#mode-essay .essay-hud-step-part {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--essay-ink, #0f172a);
}

#mode-essay .essay-hud-step-role {
  font-size: 0.74rem;
  color: var(--essay-ink-muted, #64748b);
  line-height: 1.3;
}

#mode-essay .essay-hud-ribbon-arrow {
  color: var(--essay-ink-muted, #94a3b8);
  font-weight: 700;
}

#mode-essay .essay-hud-dodont-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 680px) {
  #mode-essay .essay-hud-dodont-grid {
    grid-template-columns: 1fr;
  }
}

#mode-essay .essay-hud-dodont-col {
  border-radius: 12px;
  padding: 14px;
  border: 1px solid var(--essay-border, #e2e8f0);
}

#mode-essay .essay-hud-dodont-col.is-dont {
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.25);
}

#mode-essay .essay-hud-dodont-col.is-do {
  background: rgba(16, 185, 129, 0.04);
  border-color: rgba(16, 185, 129, 0.25);
}

#mode-essay .essay-hud-dodont-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#mode-essay .essay-hud-dodont-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
}

#mode-essay .essay-hud-dodont-col.is-dont .essay-hud-dodont-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

#mode-essay .essay-hud-dodont-col.is-do .essay-hud-dodont-icon {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

#mode-essay .essay-hud-dodont-title {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  margin: 0;
}

#mode-essay .essay-hud-dodont-col.is-dont .essay-hud-dodont-title { color: #dc2626; }
#mode-essay .essay-hud-dodont-col.is-do .essay-hud-dodont-title { color: #059669; }

#mode-essay .essay-hud-dodont-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#mode-essay .essay-hud-dodont-list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--essay-ink, #334155);
}

#mode-essay .essay-hud-dodont-col.is-dont .bullet { color: #ef4444; font-weight: 700; }
#mode-essay .essay-hud-dodont-col.is-do .bullet { color: #10b981; font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════════
   STEP 3: FLAT TOOLBELT, COMMIT METER & BILINGUAL HIGHLIGHTING
   ════════════════════════════════════════════════════════════════════════════ */
#mode-essay .essay-term-hl {
  background: rgba(245, 158, 11, 0.22);
  color: inherit;
  font-weight: 700;
  border-bottom: 2px solid #f59e0b;
  border-radius: 3px;
  padding: 0 4px;
}

#mode-essay .essay-guided-toolbelt-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--essay-border-soft, #e2e8f0);
}

#mode-essay .essay-guided-toolbelt-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--essay-paper, #f8fafc);
  border: 1px solid var(--essay-border, #cbd5e1);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--essay-ink, #334155);
  cursor: pointer;
  transition: all 0.2s ease;
}

#mode-essay .essay-guided-toolbelt-tab:hover {
  border-color: var(--essay-accent, #ea580c);
  color: var(--essay-accent, #ea580c);
  background: rgba(234, 88, 12, 0.04);
}

#mode-essay .essay-guided-toolbelt-tab.is-active {
  background: var(--essay-accent, #ea580c);
  border-color: var(--essay-accent, #ea580c);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.25);
}

#mode-essay .essay-guided-meter-bar {
  background: var(--essay-paper, #fbfaf8);
  border: 1px solid var(--essay-border, #e5e0d8);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

#mode-essay .essay-guided-meter-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.84rem;
  color: var(--essay-ink, #2c2418);
  margin-bottom: 6px;
}

#mode-essay .essay-guided-meter-info strong {
  font-weight: 800;
  color: var(--essay-accent, #ea580c);
}

#mode-essay .essay-guided-meter-bar.is-full .essay-guided-meter-info strong {
  color: #10b981;
}

#mode-essay .essay-guided-meter-track {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 99px;
  overflow: hidden;
}

#mode-essay .essay-guided-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #ea580c, #f97316);
  border-radius: 99px;
  transition: width 0.3s ease;
}

#mode-essay .essay-guided-meter-bar.is-full .essay-guided-meter-fill {
  background: linear-gradient(90deg, #10b981, #059669);
}

#mode-essay .essay-guided-toolbelt-section {
  margin-bottom: 22px;
}

#mode-essay .essay-guided-toolbelt-sec-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

#mode-essay .essay-guided-toolbelt-sec-head strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--essay-ink, #1e293b);
}

#mode-essay .essay-guided-toolbelt-sec-head span {
  font-size: 0.8rem;
  color: var(--essay-ink-muted, #64748b);
}

#mode-essay .essay-guided-toolbelt-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#mode-essay .essay-guided-toolbelt-card {
  background: var(--essay-paper-card, #ffffff);
  border: 1px solid var(--essay-border, #e2e8f0);
  border-left: 3px solid transparent;
  border-radius: 12px;
  padding: 14px 16px;
  transition: all 0.2s ease;
}

#mode-essay .essay-guided-toolbelt-card:hover {
  border-color: var(--essay-border-hover, #cbd5e1);
  border-left-color: var(--essay-accent, #ea580c);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

#mode-essay .essay-guided-toolbelt-card.is-selected {
  border-color: rgba(234, 88, 12, 0.4);
  border-left-color: var(--essay-accent, #ea580c);
  background: rgba(234, 88, 12, 0.02);
}

#mode-essay .essay-guided-toolbelt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

#mode-essay .essay-guided-toolbelt-select-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

#mode-essay .essay-guided-toolbelt-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--essay-border, #cbd5e1);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--essay-ink-muted, #64748b);
  transition: all 0.2s ease;
}

#mode-essay .essay-guided-toolbelt-select-btn.is-selected .essay-guided-toolbelt-checkbox {
  background: var(--essay-accent, #ea580c);
  border-color: var(--essay-accent, #ea580c);
  color: #ffffff;
}

#mode-essay .essay-guided-toolbelt-term {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--essay-ink, #0f172a);
}

#mode-essay .essay-guided-toolbelt-gloss,
#mode-essay .essay-guided-toolbelt-meaning {
  font-size: 0.82rem;
  color: var(--essay-ink-muted, #64748b);
}

#mode-essay .essay-guided-toolbelt-tip-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--essay-ink-muted, #64748b);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

#mode-essay .essay-guided-toolbelt-tip-toggle:hover,
#mode-essay .essay-guided-toolbelt-tip-toggle.is-open {
  background: #ea580c;
  border-color: #ea580c;
  color: #ffffff;
}

#mode-essay .essay-guided-toolbelt-bilingual {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding-left: 30px;
}

#mode-essay .essay-guided-toolbelt-en {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--essay-ink, #1e293b);
  margin: 0;
}

#mode-essay .essay-guided-toolbelt-vi {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--essay-ink-muted, #64748b);
  margin: 0;
}

#mode-essay .essay-guided-toolbelt-tip-box {
  margin-top: 10px;
  margin-left: 30px;
  padding: 8px 12px;
  background: rgba(234, 88, 12, 0.06);
  border-left: 3px solid #ea580c;
  border-radius: 0 8px 8px 0;
  animation: mmFadeIn 0.2s ease;
}

#mode-essay .essay-guided-toolbelt-tip-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  color: #c2410c;
  margin-bottom: 2px;
}

#mode-essay .essay-guided-toolbelt-tip-text {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--essay-ink, #2c2418);
  margin: 0;
}

/* Formula Tokens for Sentence Patterns */
#mode-essay .essay-guided-formula-tokens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 10px;
}

#mode-essay .essay-guided-formula-token {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

#mode-essay .essay-guided-formula-token.is-concession {
  background: rgba(14, 165, 233, 0.1);
  color: #0369a1;
  border-color: rgba(14, 165, 233, 0.3);
}

#mode-essay .essay-guided-formula-token.is-stance {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.3);
}

#mode-essay .essay-guided-formula-token.is-reason {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.3);
}

#mode-essay .essay-guided-formula-plus {
  font-size: 0.85rem;
  font-weight: 800;
  color: #94a3b8;
}

/* ════════════════════════════════════════════════════════════════════════════
   STEP 4: INTERACTIVE 4-PARAGRAPH ESSAY TIMELINE FLOWCHART
   ════════════════════════════════════════════════════════════════════════════ */
#mode-essay .essay-plan-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 14px;
}

#mode-essay .essay-plan-timeline-card {
  background: var(--essay-paper-card, #ffffff);
  border: 1px solid var(--essay-border, #e2e8f0);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

#mode-essay .essay-plan-timeline-card:hover {
  border-color: var(--essay-accent, #ea580c);
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.08);
}

#mode-essay .essay-plan-timeline-card.is-expanded {
  border-color: var(--essay-accent, #ea580c);
  background: rgba(234, 88, 12, 0.015);
}

#mode-essay .essay-plan-node-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

#mode-essay .essay-plan-badge-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

#mode-essay .essay-plan-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--essay-accent, #ea580c);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
}

#mode-essay .essay-plan-step-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--essay-accent, #ea580c);
  background: rgba(234, 88, 12, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
}

#mode-essay .essay-plan-step-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--essay-ink, #0f172a);
}

#mode-essay .essay-plan-tip-toggle {
  background: none;
  border: 1px solid var(--essay-border, #cbd5e1);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--essay-ink-muted, #64748b);
  cursor: pointer;
  transition: all 0.2s ease;
}

#mode-essay .essay-plan-tip-toggle:hover,
#mode-essay .essay-plan-tip-toggle.is-open {
  border-color: var(--essay-accent, #ea580c);
  color: var(--essay-accent, #ea580c);
  background: rgba(234, 88, 12, 0.05);
}

#mode-essay .essay-plan-node-text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--essay-ink, #1e293b);
  margin: 0;
}

#mode-essay .essay-plan-strategy-tip {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(234, 88, 12, 0.06);
  border-left: 3px solid #ea580c;
  border-radius: 0 8px 8px 0;
  animation: mmFadeIn 0.2s ease;
}

#mode-essay .essay-plan-strategy-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  color: #c2410c;
  margin-bottom: 4px;
}

#mode-essay .essay-plan-strategy-content {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--essay-ink, #2c2418);
  margin: 0;
}

#mode-essay .essay-plan-timeline-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  position: relative;
}

#mode-essay .essay-plan-connector-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(234, 88, 12, 0.3);
}

#mode-essay .essay-plan-connector-arrow {
  position: relative;
  z-index: 2;
  font-size: 0.8rem;
  color: var(--essay-accent, #ea580c);
  background: var(--essay-paper, #ffffff);
  padding: 0 4px;
}

/* ════════════════════════════════════════════════════════════════════════════
   STEP 5: SENTENCE CONSTRUCTION STUDIO & TRANSFER BUTTON
   ════════════════════════════════════════════════════════════════════════════ */
#mode-essay .essay-guided-transfer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(234, 88, 12, 0.1);
  border: 1px solid rgba(234, 88, 12, 0.3);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--essay-accent, #ea580c);
  cursor: pointer;
  transition: all 0.2s ease;
}

#mode-essay .essay-guided-transfer-btn:hover {
  background: var(--essay-accent, #ea580c);
  color: #ffffff;
  border-color: var(--essay-accent, #ea580c);
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.25);
}

#mode-essay .essay-guided-transfer-btn.is-added {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}