/* ==========================================================================
   Reading Mode Base — shared design language for Reading and Writing tasks
   --------------------------------------------------------------------------
   Extracted from the Fill in the Blanks (Dropdown) mode, which is the
   reference implementation for the Reading visual language.

   Applies to: rfib, dd, rmcsa, rmcma, rop, swt, essay

   The two Writing tasks joined later. They obey all four rules, but they own
   two primitives Reading has no equivalent for — a countdown timer chip and a
   live word counter. Those live in swt-mode.css / write-essay-mode.css, styled
   from the tokens below so they read as part of the same system.

   THE FOUR RULES
   1. The panel carries an ambient warm/cool gradient wash. Nothing else does.
   2. The page header is the ONLY elevated surface. It is a translucent
      "glass" card: hairline border, 24px radius, blur, wide soft shadow.
   3. Everything below the header is flat. Sections are separated by a
      full-width hairline rule on their top edge — never by a nested card.
   4. Results are a flat, centred, colour-coded score line. Not a box.

   Load order: after practice-mode-base.css, before the per-mode sheets so
   individual modes can still opt out of a rule when a task genuinely needs it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Single source for the Reading palette and surface recipes. The per-mode
   --{mode}-* names alias these, so existing selectors keep working.
   -------------------------------------------------------------------------- */
#mode-rfib,
#mode-dd,
#mode-rmcsa,
#mode-rmcma,
#mode-rop,
#mode-swt,
#mode-essay {
  /* Palette.
     --read-accent was #b86d2d, which is 3.84:1 on the paper background and
     4.0:1 behind white — under WCAG AA (4.5:1) for normal text. It is used for
     the 12px uppercase kickers and for white-on-accent pills, so it had to
     carry small text at a failing ratio. #9a5722 is the same hue, and reaches
     4.9:1 on paper / 5.3:1 behind white. */
  --read-paper: #fffaf2;
  --read-ink: #2c2418;
  --read-muted: #6f5f4e;
  --read-accent: #9a5722;
  /* Channels of --read-accent, so tints and shadows track the accent instead of
     being hand-copied. Use as rgb(var(--read-accent-rgb) / <alpha>); always
     supply the literal fallback for rules that also apply outside a Reading
     panel, where the custom property does not resolve. */
  --read-accent-rgb: 154 87 34;
  --read-accent-soft: rgb(var(--read-accent-rgb) / 0.14);

  /* Borders — three weights, no more */
  --read-border: rgba(110, 84, 54, 0.18);
  --read-border-soft: rgba(110, 84, 54, 0.10);
  --read-border-faint: rgba(110, 84, 54, 0.08);

  /* Semantic */
  --read-success: #1f7a4d;
  --read-success-bg: rgba(31, 122, 77, 0.06);
  --read-success-border: rgba(31, 122, 77, 0.5);
  --read-danger: #9b2f3a;
  --read-danger-bg: rgba(155, 47, 58, 0.06);
  --read-danger-border: rgba(155, 47, 58, 0.5);

  /* Surfaces — one elevated recipe, used once per page */
  --read-glass: rgba(255, 255, 255, 0.88);
  --read-radius-surface: 24px;
  --read-shadow-surface: 0 18px 45px rgba(42, 31, 18, 0.06);

  /* Controls — one radius, one shadow, one hover shadow */
  --read-radius-control: 12px;
  --read-radius-pill: 999px;
  /* Containers that hold controls: word bank, drop zones, popovers */
  --read-radius-container: 16px;
  --read-shadow-control: 0 6px 14px rgba(42, 31, 18, 0.05);
  --read-shadow-control-hover: 0 10px 22px rgba(42, 31, 18, 0.10);

  /* Motion — one curve */
  --read-ease: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* RFIB-derived action recipes. Keep these scoped to Reading panels so the
     global button system remains unchanged for other practice surfaces. */
  --read-btn-back-start: #6b7280;
  --read-btn-back-end: #4b5563;
  --read-btn-next-start: #8b5cf6;
  --read-btn-next-end: #7c3aed;
  --read-btn-play-start: #3b82f6;
  --read-btn-play-end: #2563eb;
  --read-btn-primary-start: #22c55e;
  --read-btn-primary-end: #16a34a;
  --read-btn-retry-start: #f59e0b;
  --read-btn-retry-end: #d97706;
  --read-btn-control-min-height: 44px;
  --read-btn-compact-size: 36px;
  --read-btn-focus: #9a5722;
}

/* --------------------------------------------------------------------------
   2. Panel wash (Rule 1)
   -------------------------------------------------------------------------- */
#mode-rfib,
#mode-dd,
#mode-rmcsa,
#mode-rmcma,
#mode-rop,
#mode-swt,
#mode-essay {
  position: relative;
  overflow: hidden;
  padding: 8px 2px 18px;
  background:
    radial-gradient(circle at top right, rgb(var(--read-accent-rgb, 154 87 34) / 0.12), transparent 30%),
    radial-gradient(circle at left bottom, rgba(90, 130, 168, 0.10), transparent 28%),
    linear-gradient(180deg, #fff 0%, #fffdf8 100%);
}

/* Suppress the generic .mode-panel decoration from style.css */
#mode-rfib::before,
#mode-dd::before,
#mode-rmcsa::before,
#mode-rmcma::before,
#mode-rop::before,
#mode-swt::before,
#mode-essay::before {
  display: none;
}

/* One measure for all five modes.
   The panel owns the gutter; inner containers only cap the width. Previously
   rfib/dd ran 1200px, rmcsa/rmcma 1168px, and .rop-container was content-box
   (1200 + 32 padding = 1232) inside a 1204px panel, so 32px of the workspace
   was silently clipped by the panel's overflow:hidden. */
#mode-rfib,
#mode-dd,
#mode-rmcsa,
#mode-rmcma,
#mode-rop,
#mode-swt,
#mode-essay {
  padding-inline: var(--space-md, 16px);
}

.rmcsa-container,
.rmcma-container,
.rop-container,
.swt-container,
.essay-container {
  box-sizing: border-box;
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   3. Header — the one elevated surface (Rule 2)
   -------------------------------------------------------------------------- */
.rfib-header-card,
.dd-header-card,
.rmcsa-header-card,
.rmcma-header-card,
.rop-header-card,
.swt-header-card,
.essay-header-card {
  border: 1px solid var(--read-border);
  border-radius: var(--read-radius-surface);
  background: var(--read-glass);
  box-shadow: var(--read-shadow-surface);
  backdrop-filter: blur(8px);
  padding: 18px;
  margin-bottom: 16px;
}

.rfib-kicker,
.dd-kicker,
.rmcsa-kicker,
.rmcma-kicker,
.rop-kicker,
.swt-kicker,
.essay-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--read-accent);
  font-weight: 700;
}

.rfib-header-copy h2,
.dd-header-copy h2,
.rmcsa-header-copy h2,
.rmcma-header-copy h2,
.rop-header-copy h2,
.swt-header-copy h2,
.essay-header-copy h2 {
  margin: 6px 0 8px;
  font-family: 'Lora', serif;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--read-ink);
}

.rfib-header-copy p,
.dd-header-copy p,
.rmcsa-header-copy p,
.rmcma-header-copy p,
.rop-header-copy p,
.swt-header-copy p,
.essay-header-copy p {
  margin: 0;
  color: var(--read-muted);
  line-height: 1.55;
  /* Use the full card measure; the former 58ch cap caused premature wrapping. */
  max-width: none;
}

/* Secondary line under the task description — keyboard shortcuts etc. */
.rop-keyboard-hint {
  margin-top: 8px !important;
  font-size: 0.86rem;
  opacity: 0.85;
}

.rop-keyboard-hint kbd {
  font-family: inherit;
  font-size: 0.82em;
  font-weight: 700;
  padding: 1px 6px;
  border: 1px solid var(--read-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--read-ink);
}

/* --------------------------------------------------------------------------
   4. Flat sections (Rule 3)
   A section is separated from what precedes it by a hairline on its top edge.
   Kickers inside a section are labels, not card headers — they get no rule.
   -------------------------------------------------------------------------- */
.read-section,
.rfib-passage-card,
.rfib-support-panel,
.dd-passage-card,
.dd-word-bank-card,
.rmcsa-passage-card,
.rmcsa-question-card,
.rmcma-passage-card,
.rmcma-question-card,
.rop-source-card,
.rop-target-card,
.swt-source-card,
.swt-compose-card,
.swt-feedback-card,
.essay-prompt-card,
.essay-compose-card,
.essay-feedback-panel {
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  border-top: 1px solid var(--read-border-soft);
  padding: 18px 0 8px;
  margin-bottom: 14px;
}

/* ROP already presents two flat workspace regions side by side. The outer
   workspace cards must not acquire the section divider used by linear
   Reading sections. */
.rop-source-card,
.rop-target-card {
  border-top: 0;
}

/* Section label — replaces the old underlined ".{mode}-card-header" rhythm */
.rfib-card-header,
.dd-card-header,
.rmcsa-card-header,
.rmcma-card-header,
.rop-card-header,
.swt-card-header,
.essay-card-header {
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: none;
}

/* Side-by-side layout (passage | question).
   Owned here, defaults AND responsive together: this file loads before the
   per-mode sheets, so a mode sheet redeclaring grid-template-columns would
   beat the base media query no matter which one is "more mobile". */
.rmcsa-split-layout,
.rmcma-split-layout,
.swt-split-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  margin-bottom: 20px;
  align-items: stretch;
}

/* One hairline spans the whole row rather than one per column, which would
   leave a visible break at the grid gap. */
.rmcsa-split-layout,
.rmcma-split-layout,
.swt-split-layout {
  border-top: 1px solid var(--read-border-soft);
}

.rmcsa-split-layout > .rmcsa-passage-card,
.rmcsa-split-layout > .rmcsa-question-card,
.rmcma-split-layout > .rmcma-passage-card,
.rmcma-split-layout > .rmcma-question-card,
.swt-split-layout > .swt-source-card,
.swt-split-layout > .swt-compose-card {
  border-top: none;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   5. Results — flat centred score line (Rule 4)
   -------------------------------------------------------------------------- */
.read-result,
.rfib-result-box,
.dd-result-summary-box,
.rmcsa-result-box,
.rmcma-result-box,
.rop-result-box,
.swt-result-box,
.essay-result-box {
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 14px 0;
  min-height: 0;
  text-align: center;
}

/* Fill in the Blanks (Dropdown) reveals its result purely by writing innerHTML,
   so :empty is what hides it. The other four toggle style.display inline from
   their mode JS, which beats this rule — harmless, but it means :empty is only
   load-bearing for rfib. Worth collapsing onto one mechanism later. */
.read-result:empty,
.rfib-result-box:empty,
.dd-result-summary-box:empty,
.rmcsa-result-box:empty,
.rmcma-result-box:empty,
.rop-result-box:empty,
.swt-result-box:empty,
.essay-result-box:empty {
  display: none;
}

/* Score line typography — shared by every mode's summary element */
.read-result-summary,
.rfib-result-summary,
.dd-result-summary-box,
.rmcsa-result-header,
.rmcma-result-header,
.rop-score-display,
.swt-result-summary,
.essay-result-summary {
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.read-result-summary.is-perfect,
.rfib-result-summary.is-perfect,
.dd-result-summary-box.is-perfect,
.rmcsa-result-header.is-correct,
.rmcma-result-header.is-correct,
.swt-result-summary.is-perfect,
.essay-result-summary.is-perfect {
  color: var(--read-success);
}

.read-result-summary.has-misses,
.rfib-result-summary.has-misses,
.dd-result-summary-box.has-misses,
.rmcsa-result-header.is-incorrect,
.rmcma-result-header.is-incorrect,
.swt-result-summary.has-misses,
.essay-result-summary.has-misses {
  color: var(--read-danger);
}

.rmcma-result-header.is-partial,
.swt-result-summary.is-partial,
.essay-result-summary.is-partial {
  color: var(--read-accent);
}

/* Supporting line under the score */
.read-result-desc,
.rmcsa-result-desc,
.rmcma-result-desc,
.swt-result-desc,
.essay-result-desc {
  font-size: 0.92rem;
  color: var(--read-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. Controls — one radius, one shadow, one curve
   Covers the draggable/selectable primitives in every mode.
   -------------------------------------------------------------------------- */
.dd-option-chip,
.rmcsa-choice-card,
.rmcma-choice-card,
.rop-item {
  border-radius: var(--read-radius-control);
  border: 1px solid var(--read-border);
  background: #ffffff;
  box-shadow: var(--read-shadow-control);
  transition: transform var(--read-ease), box-shadow var(--read-ease),
    border-color var(--read-ease), background-color var(--read-ease);
}

.dd-option-chip:hover,
.rmcsa-choice-card:hover:not(:disabled),
.rmcma-choice-card:hover:not(:disabled),
.rop-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--read-shadow-control-hover);
  border-color: rgba(110, 84, 54, 0.35);
}

/* Visible focus on every interactive primitive — full-opacity ring.
   A 14%-alpha ring is not a focus indicator.
   .rop-item is included: rop-mode.js now renders it as a real listbox option
   with a roving tabindex, so it can genuinely take focus. */
.dd-option-chip:focus-visible,
.rmcsa-choice-card:focus-visible,
.rmcma-choice-card:focus-visible,
.rop-item:focus-visible,
.rfib-blank-select:focus-visible,
.rop-arrow-btn:focus-visible {
  outline: 2px solid var(--read-accent);
  outline-offset: 2px;
  border-color: var(--read-accent);
}

.dd-blank-slot,
.rfib-blank-select {
  border-radius: var(--read-radius-control);
}

/* --------------------------------------------------------------------------
   7. Pills — the toggle language (voice switch, support variants, filters)
   -------------------------------------------------------------------------- */
.read-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: var(--read-radius-pill);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--read-accent-soft);
}

.read-pill,
.rfib-voice-btn,
.rfib-support-toggle {
  border: 0;
  cursor: pointer;
  border-radius: var(--read-radius-pill);
  font-weight: 700;
  transition: transform var(--read-ease), background-color var(--read-ease),
    color var(--read-ease), box-shadow var(--read-ease);
}

.read-pill.is-active,
.rfib-voice-btn.is-active,
.rfib-support-toggle.is-active {
  background: var(--read-accent);
  color: #ffffff;
  box-shadow: 0 8px 18px rgb(var(--read-accent-rgb, 154 87 34) / 0.28);
}

.read-pill:hover,
.rfib-voice-btn:hover,
.rfib-support-toggle:hover {
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   8. Responsive — one set of breakpoints for all Reading modes
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .rmcsa-split-layout,
  .rmcma-split-layout,
  .swt-split-layout {
    grid-template-columns: 1fr;
  }

  .rmcsa-split-layout > .rmcsa-question-card,
  .rmcma-split-layout > .rmcma-question-card,
  .swt-split-layout > .swt-compose-card {
    margin-bottom: 14px;
  }
}

@media (max-width: 640px) {
  #mode-rfib,
  #mode-dd,
  #mode-rmcsa,
  #mode-rmcma,
  #mode-rop,
  #mode-swt,
  #mode-essay {
    padding-inline: 0;
  }

  .rfib-header-card,
  .dd-header-card,
  .rmcsa-header-card,
  .rmcma-header-card,
  .rop-header-card,
  .swt-header-card,
  .essay-header-card {
    border-radius: 20px;
    padding: 16px;
  }

  .rfib-header-copy h2,
  .dd-header-copy h2,
  .rmcsa-header-copy h2,
  .rmcma-header-copy h2,
  .rop-header-copy h2,
  .swt-header-copy h2,
  .essay-header-copy h2 {
    font-size: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dd-option-chip,
  .rmcsa-choice-card,
  .rmcma-choice-card,
  .rop-item,
  .rop-correct-item,
  .read-pill,
  .rfib-voice-btn,
  .rfib-support-toggle {
    transition: none;
  }

  .dd-option-chip:hover,
  .rmcsa-choice-card:hover:not(:disabled),
  .rmcma-choice-card:hover:not(:disabled),
  .rop-item:hover,
  .read-pill:hover,
  .rfib-voice-btn:hover,
  .rfib-support-toggle:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   14. RFIB-derived semantic controls
   Keep this layer under the five Reading panels. The global .nav-btn and
   .modern-btn recipes remain available to unrelated modes. */
#mode-rfib .nav-btn,
#mode-dd .modern-btn,
#mode-rmcma .modern-btn,
#mode-rmcsa .modern-btn,
#mode-rop .modern-btn,
#mode-swt .modern-btn,
#mode-essay .modern-btn,
#mode-rfib .modern-btn,
#mode-rfib .difficulty-filter-btn,
#mode-dd .difficulty-filter-btn,
#mode-rmcma .difficulty-filter-btn,
#mode-rmcsa .difficulty-filter-btn,
#mode-rop .difficulty-filter-btn {
  min-height: var(--read-btn-control-min-height);
  border-radius: var(--read-radius-control);
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  font-weight: 600;
  transition: transform var(--read-ease), box-shadow var(--read-ease),
    background var(--read-ease), border-color var(--read-ease), color var(--read-ease);
}

#mode-rfib .nav-btn-back,
#mode-rfib #rfib-back-btn {
  background: linear-gradient(135deg, var(--read-btn-back-start), var(--read-btn-back-end));
  color: #fff;
  box-shadow: 0 2px 6px rgb(75 85 99 / 0.3);
}

#mode-rfib .nav-btn-next,
#mode-rfib #rfib-next-btn,
#mode-rfib .modern-btn--next,
#mode-dd .modern-btn--next,
#mode-rmcma .modern-btn--next,
#mode-rmcsa .modern-btn--next,
#mode-rop .modern-btn--next {
  background: linear-gradient(135deg, var(--read-btn-next-start), var(--read-btn-next-end));
  color: #fff;
  box-shadow: 0 2px 6px rgb(124 58 237 / 0.3);
}

#mode-rfib .modern-btn--play,
#mode-dd .modern-btn--play,
#mode-rmcma .modern-btn--play,
#mode-rmcsa .modern-btn--play,
#mode-rop .modern-btn--play,
#mode-swt .modern-btn--play,
#mode-essay .modern-btn--play {
  background: linear-gradient(135deg, var(--read-btn-play-start), var(--read-btn-play-end));
  color: #fff;
  box-shadow: 0 2px 6px rgb(37 99 235 / 0.3);
}

#mode-rfib .modern-btn--check,
#mode-dd .modern-btn--check,
#mode-rmcma .modern-btn--check,
#mode-rmcsa .modern-btn--check,
#mode-rop .modern-btn--check,
#mode-swt .modern-btn--check,
#mode-essay .modern-btn--check {
  background: linear-gradient(135deg, var(--read-btn-primary-start), var(--read-btn-primary-end));
  color: #fff;
  box-shadow: 0 2px 6px rgb(22 163 74 / 0.3);
}

#mode-rfib .modern-btn--retry,
#mode-dd .modern-btn--retry,
#mode-rmcma .modern-btn--retry,
#mode-rmcsa .modern-btn--retry,
#mode-rop .modern-btn--retry,
#mode-swt .modern-btn--retry,
#mode-essay .modern-btn--retry {
  background: linear-gradient(135deg, var(--read-btn-retry-start), var(--read-btn-retry-end));
  color: #fff;
  box-shadow: 0 2px 6px rgb(217 119 6 / 0.3);
}

#mode-rfib .modern-btn--easy-reading,
#mode-rfib .rfib-support-toggle,
#mode-rfib .modern-btn--hint {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  color: #c2410c;
  border: 1px solid rgb(194 65 12 / 0.25);
}

#mode-rfib .modern-btn--easy-reading:hover,
#mode-rfib .rfib-support-toggle:hover,
#mode-rfib .modern-btn--hint:hover {
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  border-color: rgb(194 65 12 / 0.4);
}

#mode-rfib .modern-btn--secondary,
#mode-dd .modern-btn--secondary,
#mode-rmcma .modern-btn--secondary,
#mode-rmcsa .modern-btn--secondary,
#mode-rop .modern-btn--secondary,
#mode-swt .modern-btn--secondary,
#mode-essay .modern-btn--secondary,
#mode-rfib .difficulty-filter-btn,
#mode-dd .difficulty-filter-btn,
#mode-rmcma .difficulty-filter-btn,
#mode-rmcsa .difficulty-filter-btn,
#mode-rop .difficulty-filter-btn {
  background: #fff;
  color: #4b5563;
  border: 1px solid var(--read-border);
  box-shadow: var(--read-shadow-control);
}

#mode-rfib .modern-btn:hover:not(:disabled),
#mode-dd .modern-btn:hover:not(:disabled),
#mode-rmcma .modern-btn:hover:not(:disabled),
#mode-rmcsa .modern-btn:hover:not(:disabled),
#mode-rop .modern-btn:hover:not(:disabled),
#mode-swt .modern-btn:hover:not(:disabled),
#mode-essay .modern-btn:hover:not(:disabled),
#mode-rfib .nav-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

#mode-rfib .modern-btn:active:not(:disabled),
#mode-dd .modern-btn:active:not(:disabled),
#mode-rmcma .modern-btn:active:not(:disabled),
#mode-rmcsa .modern-btn:active:not(:disabled),
#mode-rop .modern-btn:active:not(:disabled),
#mode-swt .modern-btn:active:not(:disabled),
#mode-essay .modern-btn:active:not(:disabled),
#mode-rfib .nav-btn:active:not(:disabled) {
  transform: translateY(0);
}

#mode-rfib .modern-btn:disabled,
#mode-dd .modern-btn:disabled,
#mode-rmcma .modern-btn:disabled,
#mode-rmcsa .modern-btn:disabled,
#mode-rop .modern-btn:disabled,
#mode-swt .modern-btn:disabled,
#mode-essay .modern-btn:disabled,
#mode-rfib .nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#mode-rfib .modern-btn:focus-visible,
#mode-dd .modern-btn:focus-visible,
#mode-rmcma .modern-btn:focus-visible,
#mode-rmcsa .modern-btn:focus-visible,
#mode-rop .modern-btn:focus-visible,
#mode-swt .modern-btn:focus-visible,
#mode-essay .modern-btn:focus-visible,
#mode-rfib .nav-btn:focus-visible,
#mode-dd .difficulty-filter-btn:focus-visible,
#mode-rmcma .difficulty-filter-btn:focus-visible,
#mode-rmcsa .difficulty-filter-btn:focus-visible,
#mode-rop .difficulty-filter-btn:focus-visible {
  outline: 2px solid var(--read-btn-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   15. Writing primitives
   The two Writing tasks share a compose surface that Reading has no analogue
   for: a countdown timer chip, a textarea, and a live word counter. They live
   here rather than in swt-mode.css / write-essay-mode.css because both modes
   need them identically, and because the unscoped .essay-* rules in style.css
   are also consumed by #mode-rts (Respond To Situation) — retinting them
   globally would drag Speaking into the Reading palette. Everything below is
   scoped to the two Writing panels for exactly that reason.
   -------------------------------------------------------------------------- */

/* Section label rows carry the timer on their trailing edge. */
#mode-swt .swt-card-header,
#mode-essay .essay-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Timer chip — a quiet pill, not a headline number. The warning state is the
   only place a Writing panel goes red on its own. */
#mode-swt .essay-timer,
#mode-essay .essay-timer {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--read-ink);
  font-variant-numeric: tabular-nums;
  background: var(--read-glass);
  border: 1px solid var(--read-border);
  padding: 6px 14px;
  border-radius: var(--read-radius-pill);
  min-width: 84px;
  text-align: center;
  box-shadow: var(--read-shadow-control);
  transition: color var(--read-ease), background-color var(--read-ease),
    border-color var(--read-ease);
}

#mode-swt .essay-timer-warning,
#mode-essay .essay-timer-warning {
  color: var(--read-danger) !important;
  background: var(--read-danger-bg) !important;
  border-color: var(--read-danger-border);
}

/* Prompt / source text — same reading treatment as a Reading passage, flat. */
#mode-swt .essay-prompt-display {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 16px;
  font-family: 'Lora', serif;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--read-ink);
}

#mode-swt .essay-prompt-label,
#mode-essay .essay-prompt-label {
  color: var(--read-accent);
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
}

#mode-swt .essay-prompt-text,
#mode-essay .essay-prompt-text {
  color: var(--read-ink);
}

/* Compose surface */
#mode-swt .essay-textarea,
#mode-essay .essay-textarea {
  border: 1px solid var(--read-border);
  border-radius: var(--read-radius-container);
  background: #ffffff;
  color: var(--read-ink);
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  box-shadow: var(--read-shadow-control);
  transition: border-color var(--read-ease), box-shadow var(--read-ease);
}

#mode-swt .essay-textarea:focus,
#mode-essay .essay-textarea:focus {
  outline: 2px solid var(--read-accent);
  outline-offset: 2px;
  border-color: var(--read-accent);
  box-shadow: var(--read-shadow-control-hover);
  background: #ffffff;
}

#mode-swt .essay-textarea::placeholder,
#mode-essay .essay-textarea::placeholder {
  color: var(--read-muted);
  opacity: 0.75;
}

/* Word counter — the three bands map onto the semantic tokens. */
#mode-swt .essay-wc-good,
#mode-essay .essay-wc-good {
  background: var(--read-success-bg);
  color: var(--read-success);
}

#mode-swt .essay-wc-warn,
#mode-essay .essay-wc-warn {
  background: var(--read-accent-soft);
  color: var(--read-accent);
}

#mode-swt .essay-wc-bad,
#mode-essay .essay-wc-bad {
  background: var(--read-danger-bg);
  color: var(--read-danger);
}

/* Footer: counter left, action right, wrapping to two rows on narrow screens
   without either control losing its 44px target. */
#mode-swt .essay-input-footer,
#mode-essay .essay-input-footer {
  flex-wrap: wrap;
  gap: 12px;
}

/* Results. The JS renderers own this DOM, so nothing is renamed — the boxes
   are simply flattened onto the panel per Rule 3, and retinted. */
#mode-swt .essay-results-summary,
#mode-essay .essay-results-summary {
  background: transparent;
  border-radius: 0;
  padding: 8px 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--read-border-soft);
}

#mode-swt .essay-results-score-circle,
#mode-essay .essay-results-score-circle {
  color: var(--read-ink);
}

#mode-swt .essay-score-number,
#mode-essay .essay-score-number {
  color: var(--read-accent);
}

#mode-swt .essay-results-percentage,
#mode-essay .essay-results-percentage,
#mode-swt .essay-score-detail,
#mode-essay .essay-score-detail,
#mode-swt .essay-ai-score-hint,
#mode-essay .essay-ai-score-hint {
  color: var(--read-muted);
}

#mode-swt .essay-score-row,
#mode-essay .essay-score-row {
  background: #ffffff;
  border: 1px solid var(--read-border);
  border-radius: var(--read-radius-control);
  box-shadow: var(--read-shadow-control);
}

#mode-swt .essay-score-label,
#mode-essay .essay-score-label {
  color: var(--read-ink);
}

#mode-swt .essay-score-full,
#mode-essay .essay-score-full {
  background: var(--read-success-bg);
  color: var(--read-success);
}

#mode-swt .essay-score-partial,
#mode-essay .essay-score-partial {
  background: var(--read-accent-soft);
  color: var(--read-accent);
}

#mode-swt .essay-score-zero,
#mode-essay .essay-score-zero {
  background: var(--read-danger-bg);
  color: var(--read-danger);
}

#mode-swt .essay-submitted,
#mode-essay .essay-submitted,
#mode-swt .essay-feedback-card,
#mode-essay .essay-feedback-card,
#mode-swt .essay-feedback-loading,
#mode-essay .essay-feedback-loading {
  background: #ffffff;
  border: 1px solid var(--read-border);
  border-radius: var(--read-radius-container);
  color: var(--read-ink);
}

/* Footer action rows follow the Reading order: primary first, then Retry,
   then any AI/secondary action. Centred, like every Reading actions row. */
#mode-swt .essay-results-controls,
#mode-essay .essay-results-controls {
  justify-content: center;
  gap: 12px;
  padding-top: 8px;
}