/**
 * @file essay-concept.css
 *
 * Styling for essay_concept nodes on F1GMAT.
 *
 * OWNERSHIP LINE
 *   apu-essay-review.css styles everything the text filter emits:
 *   .apu-comment-trigger, .apu-editor-note, .apu-concept-pill,
 *   .essay-good, .essay-bad, .essay-ugly, .essay-correct, .essay-transition.
 *   It attaches only on the bundles ticked at
 *   /admin/config/content/apu-essay-review. Tick Essay Concept there.
 *
 *   This file styles what node--essay-concept.html.twig emits. Where the two
 *   meet, it sets spacing and alignment on module components only, and never
 *   colour, size or box properties. Section 7 is the single point of contact.
 *
 *   Cascade order comes from the theme: apu.libraries.yml puts this file in
 *   the `theme:` bucket, which lands after the module's `component:` CSS.
 *   That is deliberate and is why section 7 needs no !important. A hard
 *   dependency on the module library is not declared, because the module
 *   attaches per bundle from its own config screen and a dependency would
 *   change that behaviour.
 *
 * PALETTE
 *   Every colour resolves to an existing --fg-* property from style.css, with
 *   one exception: --ec-tick-border has no theme equivalent because no
 *   existing token clears 3:1 on paper. It falls back to a literal so the
 *   file works before --fg-tick-border is added to style.css.
 *   Gold-dark marks the fault case, teal marks the resolution and all
 *   wayfinding. Copper stays owned by the module for editorial apparatus.
 *
 * CHIP COLLISION
 *   The theme already carries three small-uppercase-Arial treatments that a
 *   classification label could be mistaken for: the taxonomy and category
 *   pills (gold outline, 10 to 11px, 1.5px tracking), .fg-badge (aged paper
 *   fill, ink border) and .fg-status. The concept type therefore takes no box
 *   at all. It is a dateline entry separated by a rule, not a chip, and the
 *   tag pills that appear elsewhere on the same page stay visually distinct
 *   because they are bordered and this is not.
 *
 * DIRECTION
 *   Inline logical properties throughout, so the board, the origin plate
 *   accent, the practitioner note bar and the dateline all flip with the
 *   document. Block-axis properties stay physical, because top and bottom do
 *   not change under RTL and the logical spellings only add noise.
 *
 * NO CDN. No external font. No external icon set.
 */

/* ==========================================================================
   1. Tokens
   --------------------------------------------------------------------------
   Declared on .essay-concept. The practitioner component in section 8 also
   renders inside this scope today, but its selectors are unscoped globals,
   so every var() there carries a literal fallback. Without one, a
   .practitioner rendered anywhere else on the site would resolve
   var(--ec-hairline) to nothing and drop the whole declaration at
   computed-value time, taking the row separator with it.
   ========================================================================== */

.essay-concept {
  --ec-paper: var(--fg-paper, #FBFAF7);
  --ec-paper-warm: var(--fg-paper-warm, #F5EFDF);
  --ec-paper-aged: var(--fg-paper-aged, #EDE5D1);
  --ec-ink: var(--fg-ink, #1A1A1A);
  --ec-ink-soft: var(--fg-ink-soft, #3D3D3D);
  --ec-ink-muted: var(--fg-ink-muted, #525252);
  --ec-teal: var(--fg-teal, #0E7490);
  --ec-gold-dark: var(--fg-gold-dark, #8A6B1F);
  --ec-hairline: var(--fg-hairline, #D4CFC4);

  --ec-gutter: 1.375rem;
  --ec-rhythm: 2rem;

  /* Inactive tick border. 3.4:1 on --ec-paper, clearing the 3:1 floor for
     graphical objects in WCAG 2.2 AA 1.4.11. --fg-hairline measures 1.4:1
     and is used for rules, which carry no state. */
  --ec-tick-border: var(--fg-tick-border, #8C877B);

  /* Origin plate accent. Set to var(--ec-gold-dark) to keep the theme's
     existing blockquote colour instead of the teal plate treatment. */
  --ec-plate-accent: var(--ec-teal);
}

/* ==========================================================================
   2. Article container and position band
   --------------------------------------------------------------------------
   The band replaced the left rail. Four segments, marked ones filled. Markers
   are decorative and the label text carries the meaning, so no aria-hidden is
   needed here; the visually-hidden line in the template names which positions
   apply. The template also sets role="list" on the ol, because list-style:
   none below strips list semantics in Safari with VoiceOver.
   ========================================================================== */

.essay-concept--full {
  color: var(--ec-ink-soft);
}

.essay-concept__positions {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ec-hairline);
  /* The ticks extend 5px above this border. With the eyebrow's inherited
     underline removed, the band would otherwise sit 12px under the heading
     text and leave the markers 7px of clearance, which is tight for
     something that reads as a control. */
  margin: 0.5rem 0 0;
  padding: 0;
}

.essay-concept__position {
  position: relative;
  padding: 0.9375rem 0.25rem 0;
  text-align: center;
}

.essay-concept__position::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  background: var(--ec-paper);
  border: 1px solid var(--ec-tick-border);
}

.essay-concept__position.is-current::before {
  background: var(--ec-teal);
  border-color: var(--ec-teal);
}

.essay-concept__position-label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ec-ink-muted);
}

.essay-concept__position.is-current .essay-concept__position-label {
  font-weight: 700;
  color: var(--ec-teal);
}


/* ==========================================================================
   3. Header and dateline
   --------------------------------------------------------------------------
   The Page title block supplies the h1 from outside the node, so this
   template prints no headline and the dateline closes the header instead of
   opening it. The rule therefore sits on the top edge: it separates the
   metadata from the tagline above it, not from the body below.

   Concept type and literary style are independent axes. Type says what kind
   of move this is; the form says which written genre it came from. A Theme
   concept has no form, the field is empty and the second entry does not
   print, so neither field is conditional on the other.

   Both entries are plain spans. The template reads both fields raw and maps
   them in Twig, so no field wrapper reaches this markup and no rule here
   needs to undo one. Rendering literary style through the view builder
   produced a block-level .field div that broke the line and carried the
   theme's Georgia field styling past inheritance, which is why it is read
   raw. If either field is ever switched back to a rendered display, this
   section needs `display: inline` and `font: inherit` on `.field` and
   `.field__item` to survive it.
   ========================================================================== */

.essay-concept__title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ec-ink);
  margin: 0.5rem 0 0;
}

.essay-concept__tagline {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ec-ink-soft);
  margin-top: 0.5rem;
}

/* space-between rather than a float, and text-align: end rather than right,
   so both entries stay on their own side of the line under RTL. */
.essay-concept__dateline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--ec-hairline);
  padding-top: 0.5rem;
  margin: 1rem 0 0;
}

.essay-concept__type {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ec-gold-dark);
}

.essay-concept__source-form {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ec-ink-muted);
  text-align: end;
}

/* ==========================================================================
   4. Sections and eyebrows
   ========================================================================== */

.essay-concept__section {
  margin-top: var(--ec-rhythm);
}

.essay-concept__eyebrow {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  /* Tracking eases off as the size rises. At 0.15em a 14px cap line runs
     wide enough to wrap on a narrow column. */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ec-teal);
  margin: 0 0 0.75rem;
  /* style.css line 199 puts padding-bottom: 8px and a hairline border-bottom
     on every h2. The margin shorthand above already overrides that rule's
     margins, but padding and border survive it, so every eyebrow drew a
     second rule: one under the heading and one from whatever followed. Worst
     under the position band, where it doubled the band's own border-top.
     Only h2 carries the border in the theme, so h3 and h4 need no reset and
     the cell labels are unaffected. */
  padding-bottom: 0;
  border-bottom: 0;
}

/* :where() zeroes the type selector's weight, so this rule scores one class
   and the single-class component rules further down the file win on source
   order. Written as `.essay-concept__section p` it scored 0-1-1 and beat
   .essay-concept__register-foot at 0-1-0, printing the writer count in
   Georgia at 0.9375rem instead of Arial at 0.75rem. */
.essay-concept__section :where(p) {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9375rem;
  line-height: 1.68;
  color: var(--ec-ink-soft);
}

/* ==========================================================================
   5. Origin plate
   --------------------------------------------------------------------------
   Scoped override of the theme's global blockquote treatment. Set
   --ec-plate-accent to gold-dark in section 1 to revert to the site default.
   ========================================================================== */

.essay-concept__origin blockquote {
  background: var(--ec-paper-warm);
  border-inline-start: 3px solid var(--ec-plate-accent);
  border-radius: 0;
  padding: 0.875rem 1.125rem;
  margin: 0.75rem 0 0;
}

.essay-concept__origin blockquote p {
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ec-ink);
  margin: 0;
}

.essay-concept__origin blockquote cite,
.essay-concept__origin blockquote footer {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ec-ink-muted);
  margin-top: 0.5rem;
}

/* ==========================================================================
   6. Board: works / fails
   ========================================================================== */

.essay-concept__board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}

.essay-concept__cell--works {
  padding-inline-end: 1rem;
}

.essay-concept__cell--fails {
  padding-inline-start: 1rem;
  border-inline-start: 1px solid var(--ec-hairline);
}

.essay-concept__cell-label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.essay-concept__cell--works .essay-concept__cell-label {
  color: var(--ec-teal);
}

.essay-concept__cell--fails .essay-concept__cell-label {
  color: var(--ec-gold-dark);
}

/* Single-cell fallback when only one example is authored. */
.essay-concept__board > .essay-concept__cell:only-child {
  padding: 0;
  border-inline-start: 0;
  grid-column: 1 / -1;
}

/* ==========================================================================
   7. Inline comment trigger rhythm
   --------------------------------------------------------------------------
   The trigger button and its popover are styled by apu-essay-review.css.
   These rules only stop an inline-block button from stretching the serif
   line box, and give it room after a sentence-final period.
   ========================================================================== */

.essay-concept .apu-comment-trigger {
  vertical-align: baseline;
  margin-inline-start: 0.25em;
  line-height: 1;
}

.essay-concept__section p:has(.apu-comment-trigger) {
  line-height: 1.72;
}

/* ==========================================================================
   8. Practitioner register
   --------------------------------------------------------------------------
   Unscoped globals by necessity, since the paragraph template emits them
   without a parent class of its own. Every var() carries a literal fallback
   for the case where this component renders outside .essay-concept.
   ========================================================================== */

.practitioner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.75rem;
  border-top: 1px solid var(--ec-hairline, #D4CFC4);
  padding: 0.75rem 0 0.6875rem;
}

.practitioner__identity {
  min-width: 0;
}

.practitioner__name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--ec-ink, #1A1A1A);
}

.practitioner__dates {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--ec-ink-muted, #525252);
  margin-inline-start: 0.5625rem;
  white-space: nowrap;
}

.practitioner__region {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ec-ink-muted, #525252);
  text-align: end;
  white-space: nowrap;
}

.practitioner__note {
  grid-column: 1 / -1;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--ec-ink-muted, #525252);
  border-inline-start: 2px solid var(--ec-hairline, #D4CFC4);
  border-radius: 0;
  padding-inline-start: 0.8125rem;
  margin-top: 0.3125rem;
  white-space: pre-line;
}

.essay-concept__register-foot {
  border-top: 1px solid var(--ec-hairline);
  padding-top: 0.6875rem;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75rem;
  color: var(--ec-ink-muted);
}

/* ==========================================================================
   9. Dynamic region
   ========================================================================== */

.essay-concept__dynamic:empty {
  display: none;
}

.essay-concept__dynamic {
  margin-top: var(--ec-rhythm);
}

/* ==========================================================================
   9b. Compact branch
   --------------------------------------------------------------------------
   Teaser, search result and anything else falling to the else branch. The
   library attaches in both branches so these rules are always present.
   ========================================================================== */

.essay-concept__teaser-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
}

.essay-concept__teaser-title a {
  color: var(--ec-ink);
  text-decoration: none;
}

.essay-concept__teaser-title a:hover,
.essay-concept__teaser-title a:focus-visible {
  color: var(--ec-teal);
  text-decoration: underline;
}

.essay-concept__teaser-tagline {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ec-ink-muted);
  margin-top: 0.25rem;
}

/* ==========================================================================
   10. Responsive
   ========================================================================== */

@media (max-width: 767.98px) {

  /* Two uppercase strings with wide tracking collide on a narrow column
     long before the flex container runs out of room, so stack rather than
     wrap and align both entries to the start edge. */
  .essay-concept__dateline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }

  .essay-concept__source-form {
    text-align: start;
  }

  .essay-concept__positions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .essay-concept__position:nth-child(n + 3) {
    margin-top: 0.75rem;
  }

  .essay-concept__board {
    grid-template-columns: minmax(0, 1fr);
  }

  .essay-concept__cell--works {
    padding-inline-end: 0;
    padding-bottom: 1rem;
  }

  .essay-concept__cell--fails {
    padding-inline-start: 0;
    padding-top: 1rem;
    border-inline-start: 0;
    border-top: 1px solid var(--ec-hairline);
  }
}

/* ==========================================================================
   11. Focus and motion
   ========================================================================== */

.essay-concept a:focus-visible,
.essay-concept button:focus-visible {
  outline: 2px solid var(--ec-teal);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .essay-concept__position::before {
    border: 1px solid CanvasText;
    background: Canvas;
  }

  .essay-concept__position.is-current::before {
    background: Highlight;
    border-color: Highlight;
  }
}

@media (prefers-reduced-motion: reduce) {
  .essay-concept *,
  .practitioner * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

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

@media print {

  .essay-concept__positions-wrap,
  .essay-concept__dynamic,
  .essay-concept__capture {
    display: none !important;
  }

  /* The dateline survives in print because the classification is worth
     carrying onto paper, but the rule goes: with the position band gone the
     header would otherwise end on a hairline leading to nothing. */
  .essay-concept__dateline {
    border-top: 0;
    padding-top: 0;
  }

  .essay-concept__board {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The stacked-cell teardown lives in max-width: 767.98px, which the print
     page box at 8.5 inches never matches, so without this reset the failure
     cell keeps an inline-start rule running down the edge of a single-column
     layout with nothing beside it. */
  .essay-concept__cell--works {
    padding-inline-end: 0;
    padding-bottom: 1rem;
  }

  .essay-concept__cell--fails {
    padding-inline-start: 0;
    padding-top: 1rem;
    border-inline-start: 0;
    border-top: 1px solid var(--ec-hairline);
  }
}