/**
 * F1GMAT APU Theme · apu-essay-review.css
 * Verdict markup + editor-note popover styling.
 *
 * Two popover designs from the same HTML:
 *   - Desktop (≥768px): floating bubble next to the trigger, arrow pointing back
 *   - Mobile (<768px):  full-width bottom sheet sliding up from screen edge
 *
 * Both use the browser-native [popover] attribute. No JavaScript.
 *
 * Critical: browser UA stylesheet for [popover] sets `inset: 0; margin: auto;`
 * which centers the popover by default. We must explicitly reset both before
 * applying our positioning, or the auto-margins fight our `bottom: 0` etc.
 */

/* ============================================================
   1. Verdict spans — applied via CKEditor 5 Style dropdown
   ============================================================ */

.essay-good {
  text-decoration: underline;
  text-decoration-color: #15803D;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
}

.essay-bad {
  text-decoration: underline;
  text-decoration-color: #DC2626;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
}

.essay-ugly {
  text-decoration: line-through;
  text-decoration-color: #6B7280;
  text-decoration-thickness: 1.5px;
  color: #6B7280;
}

.essay-good:hover { background: rgba(21, 128, 61, 0.06); }
.essay-bad:hover  { background: rgba(220, 38, 38, 0.06); }
.essay-ugly:hover { background: rgba(107, 114, 128, 0.08); }

/* ============================================================
   2. Popover trigger button (inline with text)
   ============================================================ */

.apu-comment-trigger {
  font-size: 0.85em;
  line-height: 1;
  vertical-align: super;
  margin-left: 4px;
  padding: 0 2px;
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--fg-teal, #0E7490);
  transition: transform 0.15s ease, color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.apu-comment-trigger:hover,
.apu-comment-trigger:focus {
  color: var(--fg-ink, #1A1A1A);
  transform: translateY(-1px);
}

.apu-comment-trigger:focus-visible {
  outline: 2px solid var(--fg-teal, #0E7490);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Paragraph-level trigger variant.
 *
 * Plum, distinct from the teal of inline {{comment:}} triggers and the
 * gold of structure dividers and transition highlighters. Reader trains
 * on three colors: teal = inline phrase commentary, plum = paragraph-
 * level commentary, gold = structural roles and transitions.
 *
 * Visual treatment: a small plum pill displaying "PARA" instead of the
 * 💬 emoji. The pill shape signals "paragraph-level" through geometry
 * (pill vs. circle of the inline trigger), the plum color signals it
 * through hue, and the "PARA" label makes the meaning explicit. Three
 * reinforcing visual signals at the same trigger size.
 *
 * The PHP filter still emits the same emoji span inside the button.
 * CSS hides that emoji on paragraph variants and renders the chat-bubble
 * shape with "PARA NOTE" inside via pseudo-elements. Saves the filter
 * from needing to know about bubble rendering. */
.apu-comment-trigger--paragraph {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  padding: 0 8px;
  margin: 0 6px 4px 3px;
  background: var(--fg-plum, #7C3AED);
  color: #FFFFFF;
  /* Rounded rectangle bubble body — slightly less pill-like than the
   * previous version (border-radius 6px instead of 10px), which reads as
   * "chat bubble" rather than "capsule pill". */
  border-radius: 6px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  vertical-align: 1px;
  /* Override base .apu-comment-trigger super-vertical-align so the
   * bubble sits neatly on the text baseline. */
  transform: none;
}

/* Hide the emoji span the PHP filter emits — the bubble shape and text
 * are drawn entirely in CSS. */
.apu-comment-trigger--paragraph > span {
  display: none;
}

/* The bubble's text content. Source is title-case "Para Note", rendered
 * as "PARA NOTE" via text-transform: uppercase on the parent (line 114).
 *
 * Why title-case in source rather than literal "PARA NOTE": some screen
 * readers in certain configurations announce all-caps source text
 * letter-by-letter ("P-A-R-A N-O-T-E"). CSS-transformed uppercase reads
 * as the natural word semantically while displaying as uppercase visually.
 * This is the WCAG-recommended pattern for uppercase styled text. Don't
 * change this to "PARA NOTE" in source without understanding the trade. */
.apu-comment-trigger--paragraph::before {
  content: "Para Note";
}

/* Speech-bubble tail at bottom-left, pointing down at the prose the
 * bubble comments on. Built as a small triangle via border trickery:
 * a 0×0 element whose top-left border is solid plum and other borders
 * are transparent renders as a downward-left-pointing triangle. */
.apu-comment-trigger--paragraph::after {
  content: "";
  position: absolute;
  left: 6px;
  bottom: -4px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 4px 0 0;
  border-color: var(--fg-plum, #7C3AED) transparent transparent transparent;
}

.apu-comment-trigger--paragraph:hover,
.apu-comment-trigger--paragraph:focus {
  background: var(--fg-plum-dark, #6D28D9);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* Tail follows the bubble color on hover. */
.apu-comment-trigger--paragraph:hover::after,
.apu-comment-trigger--paragraph:focus::after {
  border-top-color: var(--fg-plum-dark, #6D28D9);
}

.apu-comment-trigger--paragraph:focus-visible {
  outline: 2px solid var(--fg-plum, #7C3AED);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================================================
   3. Shared base — RESET BROWSER UA DEFAULTS
   This block must come before the responsive overrides so the
   reset values apply everywhere, then media queries position.
   ============================================================ */

.apu-editor-note[popover] {
  /* Minimal base styles. UA stylesheet defaults (`inset: 0`,
   * `margin: auto`) are reset in the media-query blocks where
   * positioning actually happens (desktop at 768+ uses anchor or
   * centered placement; mobile uses bottom-sheet). Setting them
   * here would either be overridden by media queries (redundant)
   * or compete with them (the cascade bug that caused Firefox
   * regressions earlier). */
  width: auto;
  height: auto;

  /* Base typography (specific dimensions come from media queries) */
  color: var(--fg-ink-soft, #2C2C2C);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.95rem;
  line-height: 1.6;
  overflow: visible;

  /* Default to no visible chrome; media queries provide the real
   * background, border, padding for desktop and mobile. */
  border: 0;
  padding: 0;
  background: transparent;
}

.apu-editor-note[popover] p {
  margin: 0;
}

.apu-editor-note[popover] p + p {
  margin-top: 8px;
}

.apu-editor-note[popover]::backdrop {
  background: transparent;
}

/* Insurance against UA edge cases where the popover's display: none ->
 * display: block transition on :popover-open doesn't fire. Explicit
 * display:block when open guarantees the element is visible. */
.apu-editor-note[popover]:popover-open {
  display: block;
}

/* ============================================================
   4. DESKTOP — floating bubble (≥768px)
   ============================================================ */

@media (min-width: 768px) {

  .apu-editor-note[popover] {
    /* UA reset — kills inset:0 + margin:auto that the browser applies
     * by default to all [popover] elements. NOT marked !important
     * because inset is shorthand for top/right/bottom/left; !important
     * on inset would defeat the anchor positioning block below (which
     * sets top/left individually). The non-important reset is enough
     * since no other rule in this stylesheet competes for these
     * properties on desktop. */
    position: fixed;
    inset: auto;
    margin: 0;
    width: 380px;
    max-width: 380px;
    padding: 14px 18px;
    background: var(--fg-paper, #FBFAF6);
    border: 1px solid var(--fg-hairline, #D6CDB4);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* Reliable centered fallback. Used when anchor() is unsupported
     * (older Firefox, older Safari, older Edge) or when the @supports
     * query below evaluates false. The -40% Y translate raises the
     * popover slightly above true vertical center so it does not feel
     * buried mid-viewport. */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    height: auto;
    max-height: 80vh;
    overflow-y: auto;
  }

  /* ==================== ANCHOR POSITIONING ====================
   * Trigger-anchored popover for browsers with anchor positioning.
   * Pins the popover next to the button that opened it.
   *
   * Feature query: @supports (top: anchor(bottom)) is the proper way
   * to detect anchor positioning support. It tests whether the browser
   * parses anchor(bottom) as a valid value for the top property —
   * which is exactly what this code needs. (The earlier attempt to
   * gate on `position-try-fallbacks: --x` was rejected as invalid
   * syntax by every browser, sending all of them to the fallback.)
   *
   * Implicit anchor: when a button with popovertarget="some-id" opens
   * a popover with id="some-id", the browser creates an implicit
   * anchor relationship between them. Calling anchor(bottom) /
   * anchor(left) without a named anchor resolves to that implicit
   * anchor (the button).
   *
   * Supported: Chrome 125+, Safari 18+, Firefox 147+.
   * position: fixed (inherited from base rule above) is required
   * because anchor() returns viewport-relative coordinates. */
  @supports (top: anchor(bottom)) {
    /* Routing flip: in browsers with anchor positioning, the popover
     * path is active. The checkbox-path elements are all hidden, and
     * the popover button + aside take over. This is the inverse of
     * the section 3b defaults. */
    .apu-editor-note[popover] {
      top: anchor(bottom);
      left: anchor(left);
      transform: none;
      margin-top: 8px;
      margin-left: -8px;
      height: auto;
      max-height: 80vh;
    }

    /* Arrow pointing up at the trigger */
    .apu-editor-note[popover]::before {
      content: "";
      position: absolute;
      top: -7px;
      left: 24px;
      width: 12px;
      height: 12px;
      background: var(--fg-paper, #FBFAF6);
      border-left: 1px solid var(--fg-hairline, #D6CDB4);
      border-top: 1px solid var(--fg-hairline, #D6CDB4);
      transform: rotate(45deg);
      z-index: 1;
    }
  }
}

/* ============================================================
   4b. DESKTOP FIREFOX — bottom sheet fallback
   ============================================================
   When desktop viewport doesn't support anchor positioning (Firefox
   without enabled flag, older Safari, etc), the popover renders as a
   bottom sheet instead of a centered floating box. Pattern matches
   the mobile bottom sheet (section 5) but sized for desktop:

   - 50vh tall (half viewport, so reader doesn't have to scroll)
   - 900px max-width, centered horizontally (not full-width like mobile)
   - Slides up from bottom on open
   - Rounded top corners since not flush to viewport edges

   The @supports not feature query catches browsers that don't have
   anchor positioning. As of May 2026 that's Firefox pre-147 and any
   older browsers. Chrome 125+, Safari 18+, and Firefox 147+ all
   support `top: anchor(bottom)` and skip this block.
   ============================================================ */

@media (min-width: 768px) {
  @supports not (top: anchor(bottom)) {
    .apu-editor-note[popover] {
      /* Bottom-sheet positioning: pinned to bottom-center of viewport. */
      position: fixed;
      bottom: 0;
      left: 50%;
      right: auto;
      top: auto;
      transform: translateX(-50%) translateY(0);

      /* Width and height: 900px max, centered; 50% of viewport height
       * so reader sees comment without scroll AND keeps essay visible. */
      width: min(900px, calc(100vw - 40px));
      max-width: min(900px, calc(100vw - 40px));
      height: 50vh;
      max-height: 50vh;

      /* Padding for comfortable reading. */
      padding: 28px 36px 32px;

      /* Visual: paper background, gold top edge accent (instead of
       * full border since the sheet pulls up from the page). Rounded
       * top corners give it the sheet feel. */
      background: var(--fg-paper, #FBFAF6);
      border: 1px solid var(--fg-hairline, #D6CDB4);
      border-bottom: 0;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;

      /* Shadow rises from the top edge since the sheet is anchored
       * to the bottom of the viewport. */
      box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);

      /* Internal scroll if comment content overflows the 50vh. */
      overflow-y: auto;

      /* Reading typography. */
      color: var(--fg-ink-soft, #2C2C2C);
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 1.05rem;
      line-height: 1.65;
    }

    /* Subtle backdrop dimming so reader's eye focuses on the sheet. */
    .apu-editor-note[popover]::backdrop {
      background: rgba(0, 0, 0, 0.18);
    }

    /* Slide-up entrance animation. */
    .apu-editor-note[popover]:popover-open {
      animation: apu-sheet-rise 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    }
  }
}

@keyframes apu-sheet-rise {
  from {
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* ============================================================
   5. MOBILE — bottom sheet (<768px)
   ============================================================ */

@media (max-width: 767px) {

  .apu-comment-trigger {
    font-size: 1em;
    padding: 4px 6px;
    margin-left: 2px;
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }

  .apu-editor-note[popover] {
    /* Explicit corner positioning — overrides UA `inset: 0; margin: auto` */
    position: fixed;
    inset: auto 0 0 0;        /* top: auto, right: 0, bottom: 0, left: 0 */
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 60vh;
    overflow-y: auto;

    background: var(--fg-paper, #FBFAF6);
    border-top: 1px solid var(--fg-hairline, #D6CDB4);
    border-radius: 16px 16px 0 0;
    padding: 14px 20px 24px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    font-size: 1rem;
    line-height: 1.55;

    /* Slide-up animation when opened.
     * cubic-bezier matches native iOS sheet deceleration curve. */
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.28s ease-out,
                overlay 0.32s ease-out allow-discrete,
                display 0.32s ease-out allow-discrete;
  }

  .apu-editor-note[popover]:popover-open {
    transform: translateY(0);
    opacity: 1;
  }

  @starting-style {
    .apu-editor-note[popover]:popover-open {
      transform: translateY(100%);
      opacity: 0;
    }
  }

  .apu-editor-note[popover]::backdrop {
    background: rgba(0, 0, 0, 0.35);
    transition: background 0.3s ease-out;
  }

  /* Drag handle bar at top center */
  .apu-editor-note[popover]::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--fg-hairline, #D6CDB4);
    border-radius: 2px;
    margin: 0 auto 14px;
  }

  /* "Editor's note" label in small caps */
  .apu-editor-note[popover]::after {
    content: "Editor's note";
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--fg-ink-muted, #5F5E5A);
    margin-bottom: 10px;
    position: absolute;
    top: 28px;
    left: 20px;
  }

  .apu-editor-note[popover] p:first-child {
    margin-top: 24px;
  }
}

/* ============================================================
   6. FALLBACK — browsers without [popover] support
   ============================================================ */

@supports not selector([popover]) {
  .apu-editor-note {
    display: none;
  }
}

/* ============================================================
   7. PRINT — render notes inline as block quotes
   ============================================================ */

@media print {
  .apu-comment-trigger {
    display: none;
  }

  .apu-editor-note,
  .apu-editor-note[popover] {
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 6px 0 12px 24px;
    padding: 8px 12px;
    border: 0;
    border-left: 2px solid #6B7280;
    border-radius: 0;
    background: #F7F7F5;
    box-shadow: none;
    max-width: none;
    max-height: none;
    overflow: visible;
    font-family: Georgia, serif;
    font-size: 0.85rem;
    color: #2C2C2C;
    page-break-inside: avoid;
  }

  .apu-editor-note[popover]::before,
  .apu-editor-note[popover]::after {
    display: none;
  }

  .apu-editor-note::before {
    content: "Editor's note: ";
    display: inline;
    font-weight: 600;
    color: #1A1A1A;
    background: transparent;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
  }
}

/* ============================================================
   8. Paragraph-level structure brackets — opener, middle,
   transition, closer. Classes applied by the apu_essay_review
   PHP filter when it processes {{popener: text}},
   {{pmiddle: text}}, {{pcomment: text}}, and {{pcloser: text}}
   markers in body text.

   AUTHOR WORKFLOW
   ───────────────
   In CKEditor, type one of the four p* comment markers anywhere
   in a paragraph:
     {{popener: Why this opener works.}}
     {{pmiddle: How this beat sustains tension.}}
     {{pcomment: The transition pivots from setup to consequence.}}
     {{pcloser: Why the resolution lands without rhetorical flourish.}}

   The filter emits a 💬 popover trigger at the marker position
   AND adds the matching paragraph-* class to the containing <p>.

   The plain {{comment: text}} marker still works for inline
   editorial commentary that doesn't change the paragraph's
   structural role.

   VISUAL TREATMENT
   ────────────────
   Each marked section gets bracketed top AND bottom — a gold
   rule with a centered uppercase label both above the section
   start and below the section end. The reader sees where the
   section opens and where it closes, so the editorial scope
   ("opener = first line" vs "opener = first paragraph") is
   visually unambiguous before they click the popover.

   ADJACENCY SUPPRESSION
   ─────────────────────
   For a multi-paragraph section (e.g. two consecutive
   {{popener: ...}} paragraphs), only the outermost brackets
   render. The top bracket is suppressed on continuation
   paragraphs (same class as previous sibling). The bottom
   bracket is suppressed when the next sibling is the same
   class — uses :has() to detect that.

   Result: one bracket above the first paragraph of the
   section, one bracket below the last. Middle paragraphs
   flow as prose under the section scope.
   ============================================================ */

.paragraph-opener,
.paragraph-middle,
.paragraph-transition,
.paragraph-closer {
  /* The PHP filter wraps inline ranges in <span class="paragraph-*">.
   * display: block makes the span occupy its own line inside the
   * paragraph so the brackets render full-width and the prose flow
   * continues above and below the bracketed section. */
  display: block;
  position: relative;
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  /* TWO gold rules — one across the top edge, one across the bottom.
   * The label chips (::before, ::after) sit centered on each rule with
   * paper-colored padding so they visually "break" the rule behind them. */
  background-image:
    linear-gradient(var(--fg-hairline-gold, #C9B47A), var(--fg-hairline-gold, #C9B47A)),
    linear-gradient(var(--fg-hairline-gold, #C9B47A), var(--fg-hairline-gold, #C9B47A));
  background-size: 100% 1px, 100% 1px;
  background-position: top left, bottom left;
  background-repeat: no-repeat;
}

/* Top label chip — paper background masks the top rule where the chip sits. */
.paragraph-opener::before,
.paragraph-middle::before,
.paragraph-transition::before,
.paragraph-closer::before {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 14px;
  background: var(--fg-paper, #FBFAF7);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-gold-dark, #8A6B1F);
  line-height: 1.2;
}

.paragraph-opener::before     { content: "Opener"; }
.paragraph-middle::before     { content: "Middle"; }
.paragraph-transition::before { content: "Transition"; }
.paragraph-closer::before     { content: "Closer"; }

/* Bottom label chip — mirrors the top chip on the bottom rule. */
.paragraph-opener::after,
.paragraph-middle::after,
.paragraph-transition::after,
.paragraph-closer::after {
  position: absolute;
  bottom: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 14px;
  background: var(--fg-paper, #FBFAF7);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-gold-dark, #8A6B1F);
  line-height: 1.2;
}

.paragraph-opener::after     { content: "Opener"; }
.paragraph-middle::after     { content: "Middle"; }
.paragraph-transition::after { content: "Transition"; }
.paragraph-closer::after     { content: "Closer"; }

/* Continuation paragraphs (same class as previous sibling) drop
 * the TOP rule and TOP label. Tighten top spacing so the section
 * reads as one block. */
.paragraph-opener + .paragraph-opener,
.paragraph-middle + .paragraph-middle,
.paragraph-transition + .paragraph-transition,
.paragraph-closer + .paragraph-closer {
  margin-top: 0;
  padding-top: 0;
  background-image:
    linear-gradient(transparent, transparent),
    linear-gradient(var(--fg-hairline-gold, #C9B47A), var(--fg-hairline-gold, #C9B47A));
}

.paragraph-opener + .paragraph-opener::before,
.paragraph-middle + .paragraph-middle::before,
.paragraph-transition + .paragraph-transition::before,
.paragraph-closer + .paragraph-closer::before {
  content: none;
}

/* Paragraphs with a following same-class sibling drop the BOTTOM
 * rule and BOTTOM label. Uses :has() which is supported in all
 * modern browsers (Chrome 105+, Safari 15.4+, Firefox 121+). */
.paragraph-opener:has(+ .paragraph-opener),
.paragraph-middle:has(+ .paragraph-middle),
.paragraph-transition:has(+ .paragraph-transition),
.paragraph-closer:has(+ .paragraph-closer) {
  margin-bottom: 0;
  padding-bottom: 0;
  background-image:
    linear-gradient(var(--fg-hairline-gold, #C9B47A), var(--fg-hairline-gold, #C9B47A)),
    linear-gradient(transparent, transparent);
}

/* A paragraph that's both a continuation AND has a following same-class
 * sibling (middle paragraph in a 3+ run) needs BOTH rules dropped. */
.paragraph-opener + .paragraph-opener:has(+ .paragraph-opener),
.paragraph-middle + .paragraph-middle:has(+ .paragraph-middle),
.paragraph-transition + .paragraph-transition:has(+ .paragraph-transition),
.paragraph-closer + .paragraph-closer:has(+ .paragraph-closer) {
  background-image:
    linear-gradient(transparent, transparent),
    linear-gradient(transparent, transparent);
}

.paragraph-opener:has(+ .paragraph-opener)::after,
.paragraph-middle:has(+ .paragraph-middle)::after,
.paragraph-transition:has(+ .paragraph-transition)::after,
.paragraph-closer:has(+ .paragraph-closer)::after {
  content: none;
}

/* ============================================================
   9. Inline transition highlighter — gold wash behind a phrase.
   30% alpha so the wash recedes when an essay has many
   transitions. Great essays use them densely; visual weight
   stays low so the page never feels busy.
   ============================================================ */

.essay-transition {
  background: rgba(201, 180, 122, 0.30);
  padding: 1px 4px;
  border-radius: 2px;
}

/* ============================================================
   10. Example phrase styling — applied via CKEditor 5 Style
   dropdown to a selected phrase. Two states distinguish weak
   examples (in the original essay, critiqued) from strong
   examples (in the corrected essay, recommended).
   ============================================================ */

.essay-example-weak {
  border-bottom: 1px dashed var(--fg-gold-dark, #8A6B1F);
  padding-bottom: 1px;
}

.essay-example-strong {
  border-bottom: 2px solid var(--fg-gold-dark, #8A6B1F);
  padding-bottom: 1px;
}

/* ============================================================
   11. Mobile adjustments
   ============================================================ */

@media (max-width: 480px) {
  .paragraph-opener,
  .paragraph-middle,
  .paragraph-transition,
  .paragraph-closer {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .paragraph-opener::before,
  .paragraph-middle::before,
  .paragraph-transition::before,
  .paragraph-closer::before,
  .paragraph-opener::after,
  .paragraph-middle::after,
  .paragraph-transition::after,
  .paragraph-closer::after {
    font-size: 9px;
    letter-spacing: 0.12em;
    padding: 0 10px;
  }

  /* Continuation paragraphs stay tight on mobile too. */
  .paragraph-opener + .paragraph-opener,
  .paragraph-middle + .paragraph-middle,
  .paragraph-transition + .paragraph-transition,
  .paragraph-closer + .paragraph-closer {
    margin-top: 0;
    padding-top: 0;
  }

  .paragraph-opener:has(+ .paragraph-opener),
  .paragraph-middle:has(+ .paragraph-middle),
  .paragraph-transition:has(+ .paragraph-transition),
  .paragraph-closer:has(+ .paragraph-closer) {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

/* ============================================================
   12. Print
   ============================================================ */

@media print {
  /* Grayscale rules and labels for paper-friendly print. The rules
   * come from background-image on the paragraph itself, the chips
   * from ::before (top) and ::after (bottom). */
  .paragraph-opener,
  .paragraph-middle,
  .paragraph-transition,
  .paragraph-closer {
    background-image:
      linear-gradient(#888, #888),
      linear-gradient(#888, #888);
  }

  .paragraph-opener::before,
  .paragraph-middle::before,
  .paragraph-transition::before,
  .paragraph-closer::before,
  .paragraph-opener::after,
  .paragraph-middle::after,
  .paragraph-transition::after,
  .paragraph-closer::after {
    color: #444;
    background: #FFF;
  }

  /* Continuation paragraphs lose their top labels and rules. */
  .paragraph-opener + .paragraph-opener,
  .paragraph-middle + .paragraph-middle,
  .paragraph-transition + .paragraph-transition,
  .paragraph-closer + .paragraph-closer {
    background-image:
      linear-gradient(transparent, transparent),
      linear-gradient(#888, #888);
  }

  .paragraph-opener + .paragraph-opener::before,
  .paragraph-middle + .paragraph-middle::before,
  .paragraph-transition + .paragraph-transition::before,
  .paragraph-closer + .paragraph-closer::before {
    content: none;
  }

  /* Paragraphs followed by same-class siblings lose bottom labels and rules. */
  .paragraph-opener:has(+ .paragraph-opener),
  .paragraph-middle:has(+ .paragraph-middle),
  .paragraph-transition:has(+ .paragraph-transition),
  .paragraph-closer:has(+ .paragraph-closer) {
    background-image:
      linear-gradient(#888, #888),
      linear-gradient(transparent, transparent);
  }

  .paragraph-opener:has(+ .paragraph-opener)::after,
  .paragraph-middle:has(+ .paragraph-middle)::after,
  .paragraph-transition:has(+ .paragraph-transition)::after,
  .paragraph-closer:has(+ .paragraph-closer)::after {
    content: none;
  }

  /* Paragraphs that are both continuation AND followed by same-class
   * sibling (the middle of a 3+ run) lose both rules entirely. */
  .paragraph-opener + .paragraph-opener:has(+ .paragraph-opener),
  .paragraph-middle + .paragraph-middle:has(+ .paragraph-middle),
  .paragraph-transition + .paragraph-transition:has(+ .paragraph-transition),
  .paragraph-closer + .paragraph-closer:has(+ .paragraph-closer) {
    background-image:
      linear-gradient(transparent, transparent),
      linear-gradient(transparent, transparent);
  }

  .essay-transition {
    background: rgba(0, 0, 0, 0.08);
  }

  .essay-example-weak {
    border-bottom-color: #888;
  }

  .essay-example-strong {
    border-bottom-color: #444;
  }
}

/* ============================================================
   13. COMMENTS PANEL — active comment + numbered chips
   ============================================================
   The panel is built by JS at page load (apu-essay-review.js scans
   for .apu-editor-note elements and creates the markup). This block
   styles whatever the JS emits.

   Layout per viewport:
   - Desktop ≥768px with anchor positioning (Chrome/Safari): right
     rail, ~320px wide, slides in from the right edge.
   - Desktop ≥768px without anchor positioning (Firefox): bottom sheet
     50vh tall, ~900px max width, centered horizontally.
   - Mobile <768px: bottom sheet, full width minus 16px margins, 50vh.

   Internal structure (same across all viewports):
     .apu-comment-panel
       .apu-comment-panel__header     · "Editor note N of M" + close
       .apu-comment-panel__type       · "PARAGRAPH REVIEW" / "LINE-BY-LINE REVIEW"
       .apu-comment-panel__body       · active comment text
       .apu-comment-panel__chips      · numbered nav chips row

   Toggle button (always-visible launcher when panel is closed):
     .apu-comment-panel-toggle        · "💬 N" pill, click to open
   ============================================================ */

/* Toggle launcher button — visible when panel is closed.
 *
 * Color: F1GMAT brand red, NOT the plum used elsewhere in the comment
 * system. Reasoning: the floating bubble is the primary CTA to engage
 * with editor commentary. Most editor notes critique problems in the
 * draft (bad and ugly writing), so brand red is semantically right —
 * red signals "critique lives here" without being preachy. Also pulls
 * double duty as brand color reinforcement.
 *
 * PARA NOTE pills inside the prose remain plum (--fg-plum) because
 * they're a different affordance: lightweight paragraph-level
 * commentary, not the primary panel handle. Two purposes, two colors.
 *
 * Variables --fg-brand-red and --fg-brand-red-dark are intentionally
 * new (not aliasing --fg-plum) so a theme can override them
 * independently of plum. */
.apu-comment-panel-toggle {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--fg-brand-red, #B91C1C);
  color: #FFFFFF;
  border: 0;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 12px 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: -2px 4px 12px rgba(0, 0, 0, 0.18);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.apu-comment-panel-toggle:hover {
  background: var(--fg-brand-red-dark, #991B1B);
}

.apu-comment-panel-toggle:focus-visible {
  outline: 2px solid var(--fg-brand-red, #B91C1C);
  outline-offset: 4px;
}

.apu-comment-panel-toggle__icon {
  font-size: 1.1rem;
  line-height: 1;
}

.apu-comment-panel-toggle__count {
  font-variant-numeric: tabular-nums;
}

/* Hide toggle when panel is open (avoids visual conflict). */
.apu-comment-panel-toggle[aria-expanded="true"] {
  display: none;
}

/* The panel itself. Default styles cover the universal pieces (paper
 * background, gold border accent, typography). Position-specific
 * styling lives in media queries below. */
.apu-comment-panel {
  position: fixed;
  background: var(--fg-paper, #FBFAF6);
  color: var(--fg-ink-soft, #2C2C2C);
  font-family: Georgia, 'Times New Roman', serif;
  z-index: 95;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Hidden by default. JS adds .apu-comment-panel--open to show. */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.2s;
}

.apu-comment-panel--open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Panel header: "Editor note N of M" + close button. */
.apu-comment-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--fg-hairline, #D6CDB4);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-ink-muted, #6B6B6B);
  font-weight: 500;
  flex-shrink: 0;
}

.apu-comment-panel__position {
  font-variant-numeric: tabular-nums;
}

.apu-comment-panel__close {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--fg-ink-muted, #6B6B6B);
  border-radius: 4px;
  transition: background 0.15s ease;
}

.apu-comment-panel__close:hover {
  background: rgba(0, 0, 0, 0.05);
}

.apu-comment-panel__close:focus-visible {
  outline: 2px solid var(--fg-plum, #7C3AED);
  outline-offset: 2px;
}

/* Type label. Renders as "PARAGRAPH REVIEW" or "LINE-BY-LINE REVIEW"
 * (text-transform uppercase). The four internal paragraph-marker
 * subtypes (opener/middle/closer/transition) all collapse into
 * "Paragraph Review" at this layer — readers don't need to see the
 * structural role; the highlighted paragraph in the essay carries
 * that information visually. */
.apu-comment-panel__type {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-gold-dark, #8C7414);
  padding: 14px 18px 6px;
  flex-shrink: 0;
}

/* Active comment body — the actual editorial text. */
.apu-comment-panel__body {
  padding: 4px 18px 16px;
  font-size: 1rem;
  line-height: 1.65;
  overflow-y: auto;
  flex-grow: 1;
}

.apu-comment-panel__body p {
  margin: 0 0 10px;
}

.apu-comment-panel__body p:last-child {
  margin-bottom: 0;
}

/* Numbered chip row — the navigation strip at the bottom. */
.apu-comment-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--fg-hairline, #D6CDB4);
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.015);
}

.apu-comment-panel__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--fg-gold, #C9A227);
  color: var(--fg-gold-dark, #8C7414);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  font-variant-numeric: tabular-nums;
  padding: 0;
}

.apu-comment-panel__chip:hover {
  background: rgba(201, 162, 39, 0.12);
  transform: scale(1.05);
}

.apu-comment-panel__chip[aria-current="true"] {
  background: var(--fg-gold, #C9A227);
  color: #FFFFFF;
  border-color: var(--fg-gold, #C9A227);
}

.apu-comment-panel__chip:focus-visible {
  outline: 2px solid var(--fg-plum, #7C3AED);
  outline-offset: 2px;
}

/* Desktop right-rail layout: ≥768px with anchor positioning. */
@media (min-width: 768px) {
  .apu-comment-panel {
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    border-left: 1px solid var(--fg-hairline, #D6CDB4);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
    transform: translateX(100%);
  }

  .apu-comment-panel--open {
    transform: translateX(0);
  }
}

/* Desktop Firefox bottom-sheet layout: ≥768px without anchor positioning. */
@media (min-width: 768px) {
  @supports not (top: anchor(bottom)) {
    .apu-comment-panel {
      top: auto;
      right: auto;
      bottom: 0;
      left: 50%;
      width: min(900px, calc(100vw - 40px));
      height: 50vh;
      border-left: 1px solid var(--fg-hairline, #D6CDB4);
      border-right: 1px solid var(--fg-hairline, #D6CDB4);
      border-top: 1px solid var(--fg-hairline, #D6CDB4);
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
      transform: translateX(-50%) translateY(100%);
    }

    .apu-comment-panel--open {
      transform: translateX(-50%) translateY(0);
    }

    /* Firefox-desktop toggle button: bottom-right instead of mid-right
     * since the panel rises from the bottom. */
    .apu-comment-panel-toggle {
      top: auto;
      bottom: 24px;
      transform: none;
      border-radius: 999px;
      padding: 12px 18px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }
  }
}

/* Mobile bottom-sheet layout: <768px. */
@media (max-width: 767px) {
  .apu-comment-panel {
    top: auto;
    right: 8px;
    /* Anchor to bottom of visible viewport, respecting safe-area insets
     * (Android gesture bar, iOS home indicator). Without env() padding
     * the panel can sit BEHIND OS chrome on some devices.
     *
     * vh fallback for very old mobile browsers; dvh is the modern unit
     * that correctly shrinks when browser chrome appears (the URL bar
     * sliding in on DuckDuckGo Android, Safari, Firefox). vh would
     * keep referring to the full layout height regardless, causing
     * the panel to extend ABOVE the visible viewport — pushing the
     * header (with the close X) off-screen.
     *
     * Browser support: dvh is in all major mobile browsers since 2022.
     * env(safe-area-inset-bottom) since 2017. Both safe to use. */
    bottom: env(safe-area-inset-bottom, 0);
    left: 8px;
    width: auto;
    /* Content-fit height with cap. Short comments (most are 1-3 sentences)
     * produce a compact panel that takes ~25% of viewport, leaving the
     * essay as the dominant element above. Long comments hit the 38dvh
     * cap and scroll internally via .apu-comment-panel__body's overflow.
     *
     * dvh (dynamic viewport height) chosen over vh because DuckDuckGo
     * Android, mobile Safari, and Firefox shrink the visible viewport
     * when chrome is shown. vh would over-allocate height, pushing the
     * panel's top edge (where the close X lives) above the fold. dvh
     * correctly tracks the visible viewport. */
    height: auto;
    max-height: 38vh;       /* fallback for browsers without dvh */
    max-height: 38dvh;
    border: 1px solid var(--fg-hairline, #D6CDB4);
    border-bottom: 0;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    transform: translateY(100%);
  }

  .apu-comment-panel--open {
    transform: translateY(0);
  }

  .apu-comment-panel-toggle {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0));
    right: 16px;
    transform: none;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 0.85rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  }

  /* Slightly smaller chip + tighter padding on mobile. */
  .apu-comment-panel__chip {
    width: 26px;
    height: 26px;
    font-size: 0.74rem;
  }

  .apu-comment-panel__chips {
    padding: 10px 14px 12px;
    gap: 5px;
  }

  .apu-comment-panel__body {
    padding: 4px 14px 14px;
    font-size: 0.95rem;
  }

  .apu-comment-panel__header,
  .apu-comment-panel__type {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ============================================================
   14. FOCUSED PARAGRAPH — indent + tint + flash
   ============================================================
   When a panel chip or essay trigger activates a comment, the
   corresponding paragraph gets the .apu-comment-focused class added
   by JS. The visual treatment is purely CSS:

     - 80px left padding (24px on mobile)
     - Faint gold background tint (4% opacity)
     - One-shot 1.5s flash animation on activation
     - Smooth 300ms transition when focus moves between paragraphs

   No glyph or marker in the margin. Earlier iterations added a "{"
   character sized via JS to span the paragraph height. The glyph
   was removed because (a) it required font-size calibration that
   was fragile across themes, and (b) the indent + tint alone
   reads cleanly enough as "this is the active paragraph" without
   typographic flourish.
   ============================================================ */

.apu-comment-focused {
  position: relative;
  background: rgba(201, 162, 39, 0.04);
  padding-left: 80px;
  transition: background 0.3s ease, padding-left 0.3s ease;
}

/* Flash animation on activation — a quick background pulse to draw
 * the eye to the newly-focused paragraph. */
.apu-comment-flash {
  animation: apu-flash 1.5s ease;
}

@keyframes apu-flash {
  0% { background: rgba(201, 162, 39, 0.04); }
  20% { background: rgba(201, 162, 39, 0.14); }
  100% { background: rgba(201, 162, 39, 0.04); }
}

/* On mobile, reduce the indent slightly to preserve column width on
 * narrow viewports. The flash and tint still apply. */
@media (max-width: 767px) {
  .apu-comment-focused {
    padding-left: 24px;
  }
}

/* The focused paragraph creates its own left indent via padding-left
 * on .apu-comment-focused above. No global column padding rule needed
 * — the indent appears only on the active paragraph, not site-wide. */

/* ============================================================
   15. HIDE NATIVE POPOVER WHEN PANEL TAKES OVER
   ============================================================
   When the panel is open, suppress any native popover that might have
   been opened by the user clicking a trigger directly. The panel is
   the canonical reading surface; the floating popover would duplicate
   content and create visual conflict.

   In browsers where the popover is normally fine (Chrome anchor-
   positioned bubble), this hide only fires while the panel is open.
   Clicking a trigger when panel is closed still opens the popover
   normally — that's the entry point that ALSO opens the panel.
   ============================================================ */

body:has(.apu-comment-panel--open) .apu-editor-note[popover]:popover-open {
  display: none;
}


/* ============================================================
   16. CONCEPT MARKERS — inline superscript pill
   ============================================================
   The {{concept: <a>name</a>}} marker renders as a small outlined
   burgundy superscript pill sitting above the prose baseline.
   Distinct visual register from the editorial controls:

     - Plum PARA NOTE pill   = interactive editorial commentary
     - Burgundy concept pill = scholarly reference (this section)
     - Gold focus indicators = structural / navigation

   The pill is a real <sup> element wrapping a real <a>, so even if
   CSS fails to load the markup still degrades to a small raised link.
   Click opens the dedicated F1GMAT concept page in a new tab.
   ============================================================ */

.apu-concept-pill {
  /* Override browser default <sup> font-size and vertical-align so the
   * pill sits at a consistent baseline regardless of host typography.
   * Inline-block lets padding take effect; transparent padding becomes
   * the hit area, not visible. */
  font-size: 0;            /* prevents sup font-size from cascading to the inner element */
  vertical-align: super;
  line-height: 0;
  margin-left: 2px;
  margin-right: 1px;
  padding: 4px 0;          /* expands tap target without enlarging visible square */
  display: inline-block;
}

.apu-concept-pill__link {
  /* Option C: filled copper square, cream C, 2px rounded corners, 14×14px.
   * Visually paired with the comment trigger (💬) — both small interactive
   * markers in the prose, both at superscript scale. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--fg-copper, #C97A1F);
  color: var(--fg-paper, #FBFAF6);
  border-radius: 2px;
  border: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  top: -0.15em;            /* small lift for cleaner alignment with surrounding text */
  transition: background 0.12s ease, transform 0.12s ease;
}

.apu-concept-pill__link:hover,
.apu-concept-pill__link:focus {
  background: #B36818;     /* slightly darker copper on hover */
  transform: scale(1.08);
}

.apu-concept-pill__link:focus-visible {
  outline: 2px solid var(--fg-copper, #C97A1F);
  outline-offset: 2px;
}

/* When the concept marker appears inside a focused paragraph, keep the
 * copper fill as-is — the contrast against the focused paragraph
 * background remains acceptable. */

/* ============================================================
   17. PANEL CONCEPTS SECTION — desktop split layout
   ============================================================
   The comment panel's lower section (below the gold chip row) shows
   craft concepts referenced in the essay. Paper tone shifts to
   #F0EBE0 to signal "different content register" without needing a
   heavy divider rule. Burgundy section header echoes the inline pill
   color so the reader links the two surfaces.

   Each concept card has up to four elements:
     - name           (always present)
     - tagline        (when admin-configured field has data)
     - description    (when admin-configured field has data)
     - "Read full concept" link (always present)

   The card adapts to whatever metadata is available — no empty
   placeholders, no "loading..." states. Missing fields just don't
   render their elements.
   ============================================================ */

.apu-comment-panel__concepts-section {
  background: #F0EBE0;
  padding: 14px 16px;
  border-top: 0.5px solid #E5DCC2;
}

/* Mobile concepts tab — make the concepts section behave as the
 * scrollable flex child within the panel's constrained height
 * (38dvh on mobile). Without these properties, long concept content
 * (tagline + description + named-after paragraph) pushes the section
 * past the panel's max-height, taking the header (and close X) above
 * the visible viewport.
 *
 * The pattern matches __body's behavior on the Notes tab: flex-grow:1
 * claims remaining vertical space, min-height:0 lets the section
 * shrink BELOW its content size (required for overflow:auto to take
 * effect inside a flex container), overflow-y:auto enables internal
 * scroll for content that exceeds the available space.
 *
 * Desktop is unaffected — there the concepts-section is part of a
 * naturally-flowing sidebar with no height cap, no flex behavior to
 * override. */
@media (max-width: 767px) {
  .apu-comment-panel[data-active-tab="concepts"] .apu-comment-panel__concepts-section {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
  }
}

.apu-comment-panel__concepts-header {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  color: #9F1239;
  margin: 0 0 12px 0;
}

.apu-concept-card {
  padding: 10px 0;
  border-bottom: 0.5px solid rgba(159, 18, 57, 0.12);
}

.apu-concept-card:last-child {
  border-bottom: none;
}

.apu-concept-card__name {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 500;
  color: #2C2C2C;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.apu-concept-card__tagline {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10.5px;
  color: #5A5A5A;
  line-height: 1.4;
  margin: 0 0 6px 0;
}

.apu-concept-card__description {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px;
  color: #2C2C2C;
  line-height: 1.55;
  margin: 0 0 8px 0;
}

.apu-concept-card__link {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  color: #9F1239;
  text-decoration: none;
  display: inline-block;
  letter-spacing: 0.2px;
  line-height: 1.5;
  /* Allow text to wrap on narrow viewports. The concept name suffix
   * makes the link substantially longer than the previous "Read full
   * concept" version — on mobile, a single-line forced layout would
   * overflow the card. */
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.apu-concept-card__link::after {
  content: " ↗";
  font-size: 10px;
  /* Non-breaking space and the arrow are part of the text flow so
   * the arrow stays attached to the last word even when the text
   * wraps. */
  white-space: nowrap;
}

.apu-concept-card__link:hover,
.apu-concept-card__link:focus {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.apu-concept-card__link:focus-visible {
  outline: 2px solid #9F1239;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   18. PANEL MOBILE TABBED MODE
   ============================================================
   On mobile, the desktop split (notes on top, concepts on bottom)
   doesn't fit — the panel auto-fits to a max 38vh which isn't
   enough room for both. Switch to a tabbed layout: two tabs at
   the top (Notes / Concepts) showing one section at a time.

   Tabs only render in mobile-tabbed mode; desktop continues to
   use the stacked split. JS adds the tabs and toggles which
   tab-content is visible.
   ============================================================ */

.apu-comment-panel__tabs {
  display: none;
  border-bottom: 0.5px solid #E5DCC2;
}

.apu-comment-panel__tab {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 14px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 500;
  color: #888888;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.apu-comment-panel__tab[aria-selected="true"] {
  color: #2C2C2C;
  border-bottom-color: #C9A227;
}

/* When the concepts tab is the selected one, use burgundy underline
 * to match the concept color register. */
.apu-comment-panel__tab[data-tab="concepts"][aria-selected="true"] {
  border-bottom-color: #9F1239;
}

.apu-comment-panel__tab-count {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 9px;
  color: inherit;
}

/* Mobile activation: show tabs, hide one of the two content sections
 * based on tab state. The notes section (everything except the
 * concepts section) and the concepts section toggle visibility via
 * a data attribute the JS sets on the panel root. */
@media (max-width: 767px) {
  .apu-comment-panel--has-concepts .apu-comment-panel__tabs {
    display: flex;
  }

  /* When notes tab is active: hide the concepts section. */
  .apu-comment-panel[data-active-tab="notes"] .apu-comment-panel__concepts-section {
    display: none;
  }

  /* When concepts tab is active: hide everything but the concepts
   * section. The panel header (close button) stays visible. */
  .apu-comment-panel[data-active-tab="concepts"] .apu-comment-panel__type,
  .apu-comment-panel[data-active-tab="concepts"] .apu-comment-panel__body,
  .apu-comment-panel[data-active-tab="concepts"] .apu-comment-panel__chips {
    display: none;
  }
}

/* ============================================================
   19. CONCEPT BAR — fixed top, scroll-driven concept indicator
   ============================================================
   Renders ONLY on essay-review pages that contain at least one
   concept marker. The bar is created and managed by JS; its
   visibility and content update with scroll position.

   On page load:    "Concepts in this essay (N) · View All ›"
                    (singular: "Concept in this essay · View ›")
   After 1st mark:  "Bacon Strike · View ›"
   After last:      faded out (opacity 0, pointer-events none)
   Past article:    faded out

   Bar is interactive. Click anywhere on the bar opens the
   comment panel scrolled to the active concept's card. When
   the bar shows the neutral count state, click scrolls to the
   panel's concepts section (first card visible). */

.apu-concept-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;             /* below panel toggle (90) and panel (95) */
  background: var(--fg-paper, #FBFAF6);
  border-bottom: 1px solid var(--fg-hairline, #D6CDB4);
  display: flex;
  align-items: stretch;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  color: var(--fg-ink-soft, #2C2C2C);
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  min-height: 36px;
  /* Smooth fade for opacity + visibility transitions. */
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Left zone — clickable link to the F1GMAT concepts index page.
 * Identifies the section ("ESSAY CONCEPTS (N)") AND serves as the
 * "all essay concepts across the site" entry point. Faint copper tint
 * on background acts as a visual anchor for the bar's identity. */
.apu-concept-bar__left {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: rgba(201, 122, 31, 0.06);
  border-right: 1px solid var(--fg-hairline, #D6CDB4);
  flex-shrink: 0;
  text-decoration: none;
  transition: background 0.12s ease;
}

.apu-concept-bar__left:hover,
.apu-concept-bar__left:focus {
  background: rgba(201, 122, 31, 0.12);
  text-decoration: none;
}

.apu-concept-bar__left:focus-visible {
  outline: 2px solid var(--fg-copper, #C97A1F);
  outline-offset: -2px;
}

.apu-concept-bar__label {
  color: var(--fg-copper, #C97A1F);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  flex-shrink: 0;
}

.apu-concept-bar__count {
  color: var(--fg-ink-soft, #2C2C2C);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Middle zone — single anchor element. Content switches by state:
 *   Initial: "Concepts in the Essay (N)" — opens panel
 *   Active: concept name — links to that concept's page
 *
 * Takes the flexible space between left label and right link, ellipses
 * if the concept name is unusually long. */
.apu-concept-bar__middle {
  flex: 1;
  padding: 0 14px;
  display: flex;
  align-items: center;
  font-weight: 500;
  color: var(--fg-copper, #C97A1F);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  transition: opacity 0.18s ease, color 0.12s ease;
}

.apu-concept-bar__middle:hover,
.apu-concept-bar__middle:focus {
  color: #B36818;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.apu-concept-bar__middle:focus-visible {
  outline: 2px solid var(--fg-copper, #C97A1F);
  outline-offset: -2px;
}

.apu-concept-bar__middle--fading {
  opacity: 0;
}

/* Faded state — applied by JS via class toggle. Bar stays in the DOM
 * (preserves layout) but becomes invisible and non-interactive. */
.apu-concept-bar--faded {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

/* Hide the bar when the comment panel is open — MOBILE ONLY.
 *
 * Mobile: panel slides up from bottom and dominates vertical space.
 * Toolbar at top creates visual clutter while reader engages with panel.
 * Hide it. Returns when panel closes.
 *
 * Desktop: panel is a right-side column, toolbar is full-width at top.
 * They occupy different regions and don't conflict. Toolbar stays
 * visible so the reader sees which concept is active in the essay
 * while reading editor notes / concept cards in the panel. Useful
 * context, not noise.
 *
 * Class apu-panel-open is added/removed on <body> by openPanel/closePanel
 * in the JS. Using a JS-toggled class rather than :has() to support
 * older browsers that don't support :has() (Safari < 15.4, Chrome < 105). */
@media (max-width: 767px) {
  body.apu-panel-open .apu-concept-bar {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
  }
}

/* Apply the same fade behavior to the panel toggle button. JS adds the
 * apu-comment-panel-toggle--faded class to the toggle at the same scroll
 * boundary where the concept bar fades. */
.apu-comment-panel-toggle--faded {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Mobile: tighter padding, smaller font. */
@media (max-width: 767px) {
  .apu-concept-bar {
    padding: 8px 16px;
    font-size: 12px;
    gap: 10px;
  }

  .apu-concept-bar__label {
    font-size: 9px;
  }
}

/* Reduced motion: instant content swap, no crossfade. The fade-out
 * on scroll-past-article still applies but uses a shorter duration
 * (the position change is the meaningful signal; the opacity is
 * cosmetic). */
@media (prefers-reduced-motion: reduce) {
  .apu-concept-bar,
  .apu-concept-bar__middle,
  .apu-comment-panel-toggle--faded {
    transition-duration: 0.01s;
  }
}

/* ============================================================
   20. FOCUS MODE — sidebar hides on engagement
   ============================================================
   When the reader clicks any editorial engagement tool (inline C
   concept marker, 💬 comment trigger, PARA NOTE pill, or the
   floating red bubble), JS adds the .apu-focus-mode class to
   <body>. This hides the left sidebar (book promos, related
   links) so the reading column stands alone.

   The main column does NOT expand to take the freed sidebar
   space. Line length stays at its current reading-optimal width.
   The sidebar's space becomes left-side padding around the main
   column, which re-centers as a result.

   Focus mode exits automatically when the reader scrolls past
   the article into the .block-author-bio block (same boundary
   used by the toolbar/bubble fade). At that point the sidebar
   restores so the reader has access to promotional and related
   content for their next click.

   Pure scrolling without engagement never triggers focus mode.
   Readers who skim the article without clicking any tools see
   the sidebar throughout. */

/* Sidebar hides via display: none. transition on opacity for
 * smoother visual entrance/exit. display: none kills layout
 * participation entirely so the row reflows.
 *
 * Bootstrap selector for the sidebar block on F1GMAT essay-review
 * pages. The id is stable; the class list is theme-dependent. */
/* Sidebar hides via display: none. Selector uses body.apu-focus-mode
 * (rather than just .apu-focus-mode) to lift specificity above
 * Bootstrap's responsive grid rules. !important is needed because
 * Bootstrap's responsive display utilities use !important themselves
 * (e.g. .col-md-2 may set display via !important utilities), and
 * without it our rule loses the cascade tie. */
body.apu-focus-mode #sidebar_first {
  display: none !important;
}

/* Constrain the main content column so it doesn't expand into
 * the freed sidebar space. The reading column stays the same
 * width it had when the sidebar was present, but now centered
 * in the row.
 *
 * Bootstrap's `.col` (without explicit width) defaults to
 * `flex: 1 0 0%`, which fills available row width. We override
 * to give it a max-width AND auto-center via margin.
 *
 * Numbers chosen to match approximately the same column width
 * the reader experiences with sidebar visible. Adjust if the
 * theme's main column rendering differs from expectation. */
body.apu-focus-mode .main-content {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  transition: max-width 0.25s ease;
}

/* Smooth the transition when entering and exiting focus mode.
 * The sidebar display:none/display:block is not transitionable
 * (display property doesn't tween), but opacity can be tweened
 * if we want a fade effect. For simplicity and to avoid layout
 * flash, we use the abrupt hide; the main column's max-width
 * change carries the perceived smoothness.
 *
 * If users find the abrupt hide too jarring, we can layer in
 * a 200ms opacity fade on .apu-focus-mode #sidebar_first BEFORE
 * applying display: none. For now, simpler is better. */

/* Concept toolbar and floating bubble are NOT affected by focus
 * mode directly. They have their own fade behavior tied to the
 * .block-author-bio boundary (handled by IntersectionObserver
 * in the JS). When the reader enters focus mode, both stay
 * visible because they're useful engagement tools. They fade
 * later when the reader scrolls past the article. */

/* Reduced motion: skip the transition. */
@media (prefers-reduced-motion: reduce) {
  body.apu-focus-mode .main-content {
    transition: none;
  }
}

/* ============================================================
   F1GMAT essay CTA buttons — namespaced, self-contained.
   modules/custom/apu_essay_review/css/apu-essay-review.css
   Doubled class (.essay-cta-btn.essay-cta-btn) = specificity 0-2-0,
   outranks Barrio .field a / article a without !important.
   ============================================================ */

.essay-cta-btn.essay-cta-btn {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;        /* cancel inherited italic */
  line-height: 1.4;
  text-align: center;
  text-decoration: none;     /* cancel link underline */
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.essay-cta-btn.essay-cta-btn:link,
.essay-cta-btn.essay-cta-btn:visited {
  text-decoration: none;
}

/* Primary — ink fill, teal hover */
.essay-cta-btn--primary.essay-cta-btn--primary {
  background: var(--fg-ink, #1A1A1A);
  color: var(--fg-paper, #FBFAF7);
  border-color: var(--fg-ink, #1A1A1A);
}
.essay-cta-btn--primary.essay-cta-btn--primary:link,
.essay-cta-btn--primary.essay-cta-btn--primary:visited {
  color: var(--fg-paper, #FBFAF7);
}
.essay-cta-btn--primary.essay-cta-btn--primary:hover,
.essay-cta-btn--primary.essay-cta-btn--primary:focus-visible {
  background: var(--fg-teal, #0E7490);
  border-color: var(--fg-teal, #0E7490);
  color: var(--fg-paper, #FBFAF7);
}

/* Outline — transparent, fills on hover */
.essay-cta-btn--outline.essay-cta-btn--outline {
  background: transparent;
  color: var(--fg-ink, #1A1A1A);
  border-color: var(--fg-ink, #1A1A1A);
}
.essay-cta-btn--outline.essay-cta-btn--outline:link,
.essay-cta-btn--outline.essay-cta-btn--outline:visited {
  color: var(--fg-ink, #1A1A1A);
}
.essay-cta-btn--outline.essay-cta-btn--outline:hover,
.essay-cta-btn--outline.essay-cta-btn--outline:focus-visible {
  background: var(--fg-ink, #1A1A1A);
  color: var(--fg-paper, #FBFAF7);
}

/* Keyboard focus ring */
.essay-cta-btn.essay-cta-btn:focus-visible {
  outline: 2px solid var(--fg-teal-dark, #0A5669);
  outline-offset: 2px;
}
/* Maroon — brand red fill, ink on hover */
.essay-cta-btn--maroon.essay-cta-btn--maroon {
  background: var(--fg-maroon, #7E1417);
  color: var(--fg-paper, #FBFAF7);
  border-color: var(--fg-maroon, #7E1417);
}
.essay-cta-btn--maroon.essay-cta-btn--maroon:link,
.essay-cta-btn--maroon.essay-cta-btn--maroon:visited {
  color: var(--fg-paper, #FBFAF7);
}
.essay-cta-btn--maroon.essay-cta-btn--maroon:hover,
.essay-cta-btn--maroon.essay-cta-btn--maroon:focus-visible {
  background: var(--fg-ink, #1A1A1A);
  border-color: var(--fg-ink, #1A1A1A);
  color: var(--fg-paper, #FBFAF7);
}
/* Violet — #7C3AED fill, ink on hover */
.essay-cta-btn--violet.essay-cta-btn--violet {
  background: var(--fg-violet, #7C3AED);
  color: var(--fg-paper, #FBFAF7);
  border-color: var(--fg-violet, #7C3AED);
}
.essay-cta-btn--violet.essay-cta-btn--violet:link,
.essay-cta-btn--violet.essay-cta-btn--violet:visited {
  color: var(--fg-paper, #FBFAF7);
}
.essay-cta-btn--violet.essay-cta-btn--violet:hover,
.essay-cta-btn--violet.essay-cta-btn--violet:focus-visible {
  background: var(--fg-ink, #1A1A1A);
  border-color: var(--fg-ink, #1A1A1A);
  color: var(--fg-paper, #FBFAF7);
}
/* Mobile: focus mode is essentially a no-op visually because
 * the sidebar already stacks below content on small screens.
 * The class still gets added/removed but has no visible effect.
 * No CSS overrides needed — the Bootstrap responsive layout
 * already collapses the sidebar at narrow viewports. */