/* Sprint fiche-v2 — styles for the v2 sections of the fiche livre.
   Loaded by reader/product_page.html. Complements the existing inline
   styles ; introduces three pre-reading key-phrase variants (decision
   K.1 — Thierry validates one at CHECKPOINT 3), plus styles for the
   new §III Glossateurs, §IV Plan, §V Empreinte.

   Tokens are read from tokens.css (loaded first by the template).
   No new color tokens are introduced — we re-use --ink, --ink-2,
   --rubric, --paper, --rule, --rule-soft. The "encre seconde" used
   by .key-phrase-second-ink is --rubric (the existing accent ink).
*/

/* ========================================================================
   Pre-reading key phrases — 3 visual variants (K.1)

   The IA-Glossator marks one phrase per block (block_*_pre_reading_key_phrase)
   that the template wraps in <span class="key-phrase ...">. Three classes
   are all implemented — switching the active one is one class swap in the
   template. V1 default : .key-phrase-second-ink (most subtle).
========================================================================== */

.key-phrase {
  /* Common reset — no underline, no italic, no weight change by default.
     Each variant adds its own treatment. */
  text-decoration: none;
  font-style: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Variant 1 — manuscript-style fine underline in sepia ink. Closest to
   the historical glossatorial geste (cf. littera bononiensis). */
.key-phrase-underline-manuscript {
  text-decoration: underline;
  text-decoration-color: var(--rubric);
  text-decoration-thickness: 0.5px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
}

/* Variant 2 — typographic italic + bold. Reads like a printed emphasis,
   less scribal but more legible at small sizes. */
.key-phrase-italic-bold {
  font-style: italic;
  font-weight: 600;
}

/* Variant 3 — second ink colour on the entire phrase. The most subtle
   of the three — the eye lands on it without grammatical disruption.
   V1 DEFAULT. */
.key-phrase-second-ink {
  color: var(--rubric);
}

/* ========================================================================
   §III — Glossateurs présents

   3-row signalétique table. ¶ IA-Glossator (always active V1), † Auteur
   (vide for V1 — all books have has_author_glosses=False), ◇ Glossateurs
   reconnus (V3 future). Scribal register, telegraphic.
========================================================================== */

.section-glossateurs {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--rule-soft);
}

.section-glossateurs-table {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  row-gap: 12px;
  column-gap: 16px;
  margin-top: 16px;
}

.section-glossateurs-sigil {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--rubric);
  font-size: 18px;
  text-align: center;
}

.section-glossateurs-label {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink);
}

.section-glossateurs-state {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.section-glossateurs-state.is-active {
  color: var(--rubric);
}

.section-glossateurs-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed var(--rule-soft);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-2);
  font-size: var(--fs-caption);
  max-width: 56ch;
}

/* ========================================================================
   §IV — Plan

   List of chapters with Roman numeral, title, estimated minutes, optional
   ◐ pivot sigil. Compact, scannable in 15 seconds.
========================================================================== */

.section-plan {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--rule-soft);
}

.section-plan-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.section-plan-item {
  display: grid;
  grid-template-columns: 56px 1fr 80px 24px;
  column-gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dotted var(--rule-soft);
  align-items: baseline;
}

/* Sprint test-publish — chapitres charnière (``{.unnumbered}``) :
   titre italique discret, pas de numéro romain, en cohérence avec
   l'encart sommaire du reader (cf. reader.css .book-plan__item--unnumbered). */
.section-plan-item--unnumbered .section-plan-title {
  font-style: italic;
  color: var(--ink-3);
}
/* Front/back-matter (prologue, introduction, conclusion, glossaire…) —
   label de type en small-caps au-dessus du titre (block) plutôt qu'à
   la place du numéro romain. Sortir le label de la colonne 56px évite
   qu'il déborde sur la colonne titre quand le texte est long
   ("INTRODUCTION", "CONCLUSION"…). Même pattern que .book-plan__type
   côté reader sommaire. */
.section-plan-type {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 2px;
}

.section-plan-roman {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-2);
  font-size: var(--fs-body);
}

.section-plan-title {
  font-family: var(--font-serif);
  color: var(--ink);
  font-size: var(--fs-body);
}

.section-plan-minutes {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
  letter-spacing: 0.04em;
}

.section-plan-pivot {
  font-family: var(--font-serif);
  color: var(--rubric);
  font-size: 16px;
  text-align: center;
  line-height: 1;
}

.section-plan-pivot::after {
  content: "";  /* sigil drawn from template (◐) — kept visible only when pivot=true */
}

.section-plan-footer {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--ink-3);
}

/* ========================================================================
   §V — Empreinte de lecture (∮)

   Diagnostic d'usage agrégé. Shown only when empreinte_seuil_met. Below
   threshold, the template renders the .section-empreinte-placeholder.
========================================================================== */

.section-empreinte {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--rule-soft);
}

.section-empreinte-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.section-empreinte-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.section-empreinte-sigil {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--rubric);
  font-size: 20px;
}

.section-empreinte-commentary {
  font-family: var(--font-serif);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-reading);
  max-width: 64ch;
}

.section-empreinte-placeholder {
  margin-top: 48px;
  padding: 24px 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-2);
  font-size: var(--fs-body);
  max-width: 56ch;
}

/* ========================================================================
   §II — Bloc 3 angles array (new shape, fiche v2 only)

   The IA's `block_3_how_it_speaks_to_you` is an array of
   {angle_label, angle_body}. Each entry renders as a small card with the
   label as a header and the body as a paragraph.
========================================================================== */

.angle-entry {
  margin-top: 16px;
}

.angle-entry:first-of-type {
  margin-top: 8px;
}

.angle-label {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  font-size: var(--fs-body);
  display: block;
  margin-bottom: 4px;
}

.angle-body {
  font-family: var(--font-serif);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-reading);
  margin: 0;
}

/* ========================================================================
   §II — Bloc 4 how-to-approach object (new shape, fiche v2 only)

   open_when / read_alongside / read_after — three labelled paragraphs.
========================================================================== */

.howto-entry {
  margin-top: 12px;
}

.howto-label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 2px;
}

.howto-body {
  font-family: var(--font-serif);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-reading);
  margin: 0;
}

/* ========================================================================
   Glose en cours de régénération (v1 → v2 transition placeholder)

   Shown when fiche_is_v2=False — i.e. the edition still carries the
   legacy V3 schema. Phase E/F runs the regen ; this is the safety net
   until then.
========================================================================== */

.glose-regenerating {
  margin-top: 24px;
  padding: 16px;
  border: 1px dashed var(--rule);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-2);
  max-width: 64ch;
}