/* ============================================================================
   v24-knowledge.css — the SACRED KNOWLEDGE archetype. 13 routes.
   ----------------------------------------------------------------------------
   WHAT AN ARCHETYPE SHEET IS ALLOWED TO CONTAIN

   Only what is true of THIS experience and no other. Everything a second
   archetype would also want belongs one layer up, in v24-components.css, and
   the test is applied in both directions: a part that only this archetype uses
   must not be promoted, and a part two archetypes use must not be copied.

   So the list below is short on purpose. The hub index, the breadcrumb, the
   eyebrow, the standfirst, the cards, the buttons, the notices and the
   provenance strip are all SYSTEM parts used as they are — the Sacred Learning
   hub was rebuilt in this gate with no new CSS at all, which is the evidence
   Gate 2 exists to produce. What is left here is the five things that make a
   teaching page a teaching page.

   THE THREE READING LEVELS, WHICH ARE THE ARCHETYPE

   A teaching page is not an article. It is the same subject written three
   times at three depths, and a reader is meant to stop at whichever one
   answers their question:

     LEVEL 1  .ln-quick   the minute. Insight, why it matters, take away.
     LEVEL 2  .ln-full    the teaching. Headings, prose, what a family may do,
                          what is often misunderstood, where traditions differ.
     LEVEL 3  .ln-deep    the derivation, where the subject warrants one.

   The visual job of this sheet is to make the boundary between levels legible
   without making the page look like three pages. Level 1 is a bounded panel,
   level 2 is open page, level 3 is a bounded panel again — so the eye can see
   that the middle is the body and the ends are optional.

   WHY THE CLASS NAMES ARE STILL ln-*

   tools/verify_learn.py asserts on them: they are the contract that says a
   teaching has all three levels and states its review status. They are the
   archetype's own vocabulary, scoped to it, and renaming them would cost a
   verifier and buy a prefix. The same decision was taken for the ceremony
   hub's ch-* behaviour hooks.

   WHAT LEFT THIS SHEET THAT USED TO BE IN learn.css
     .ln-cards / .ln-card / .ln-c-k / .ln-c-t / .ln-c-d   -> .sp-list (system)
     .ln-lede                                             -> .sp-standfirst
     .ln-wrap                                             -> .sp-wrap-text
     .ln-status                                           -> .sp-note + the
                                                             status border below
     .ln-ask                                              -> .sp-ask (promoted)
   learn.css itself is NOT deleted: index.html uses .rm-learn and .rm-lesson-*
   from it and index.html is a Gate 3 route. Trimming it belongs with that
   migration, and is recorded as debt rather than done halfway here.
   ============================================================================ */

/* --- the Sanskrit or Tamil name of the subject -----------------------------
   Directly under the h1, before anything is said about it. It is the word
   itself, which is why it is set in the Devanagari face at display size rather
   than being a parenthetical. assets/js/a11y.js has already marked the run with
   lang, and v24-base.css routes the family from that; the size and the colour
   are what this rule adds. */
.ln-sa {
  font-family: var(--sp-deva);
  font-size: var(--sp-t-h3);
  line-height: 1.6;
  color: var(--sp-accent);
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-5);
}

/* --- LEVEL 1 — the minute --------------------------------------------------
   The one block on the page a reader is expected to finish. It sits on the
   quiet band rather than the raised surface: a card lifts off the page and
   invites a click, and this is not a link to anywhere — it is the page, short. */
.ln-quick {
  background: var(--sp-quiet);
  border: 1px solid var(--sp-line);
  border-left: 4px solid var(--sp-accent);
  border-radius: var(--sp-r-sm);
  padding: var(--sp-5);
  margin: 0 0 var(--sp-sec-tight);
}
.ln-k {
  font-family: var(--sp-sc);
  font-size: var(--sp-t-eyebrow);
  letter-spacing: var(--sp-track-eyebrow);
  text-transform: uppercase;
  color: var(--sp-bronze);
  margin: 0 0 var(--sp-3);
}
.ln-insight {
  font-size: var(--sp-t-lg);
  line-height: 1.6;
  color: var(--sp-ink);
  margin: 0 0 var(--sp-4);
}
.ln-today,
.ln-take {
  font-size: var(--sp-t-sm);
  color: var(--sp-ink-2);
  margin: 0 0 var(--sp-2);
}
.ln-take { margin-bottom: 0; }
/* The label inside each line. It is an inline run, not a heading: these two
   sentences are part of the summary, and promoting their labels to headings
   would put four entries in the document outline that nobody wants to navigate
   to. */
.ln-today > span,
.ln-take > span {
  display: inline-block;
  font-family: var(--sp-sc);
  font-size: var(--sp-t-xs);
  letter-spacing: var(--sp-track-eyebrow);
  text-transform: uppercase;
  color: var(--sp-ink-3);
  margin-right: var(--sp-2);
}

/* --- LEVEL 2 — the teaching ------------------------------------------------
   Open page, not a panel. The hairline is the only mark: it says the summary
   has ended and the body has started, which is the one thing the reader needs
   to be told here. */
.ln-full {
  border-top: 1px solid var(--sp-line);
  padding-top: var(--sp-6);
}
/* The in-prose h2 USED TO BE SET HERE and is not any more: the document
   routes migrated with no archetype sheet at all and needed the same thing,
   so it belongs to the reading container rather than to this archetype.
   v24-layout.css sets it on .sp-wrap-text. */

/* A list inside a teaching. The marker is bronze because a dot in body ink
   reads as a full stop at the start of a line in this face. */
.ln-list > li::marker { color: var(--sp-bronze); }
/* "Often misunderstood" — the accent marks the one list on the page that is
   correcting something, and the heading above it says so in words. The colour
   is never the only carrier. */
.ln-warn > li::marker { color: var(--sp-accent); }

/* "Explaining it to a child." Set apart because it changes who is being
   addressed, which no heading can do on its own. */
.ln-child {
  border-left: 3px solid var(--sp-bronze-soft);
  padding-left: var(--sp-4);
  color: var(--sp-ink-2);
  margin-bottom: var(--sp-5);
}

/* --- LEVEL 3 — the derivation ----------------------------------------------
   Dashed rather than solid: the boundary is real but the content is optional,
   and a solid-bordered panel at this size reads as a warning. */
.ln-deep {
  border: 1px dashed var(--sp-line-strong);
  border-radius: var(--sp-r);
  background: var(--sp-raised);
  padding: var(--sp-5);
  margin: var(--sp-sec-tight) 0 0;
}
.ln-deep > h2:first-of-type { margin-top: var(--sp-3); }

/* --- the review-status strip -----------------------------------------------
   The element is a .sp-note; what this archetype adds is the left edge, keyed
   to how the page knows what it says. The three states are the same three the
   provenance strip uses elsewhere on the site, and they are the distinction
   §13 of the brief insists on keeping: computed, curated and reviewed are not
   the same status. The WORD is always present in the sentence beside it — the
   colour is a second signal, never the only one. */
.ln-status[data-status="methodological"] { border-left: 3px solid var(--sp-good); }
.ln-status[data-status="general"]        { border-left: 3px solid var(--sp-bronze); }
.ln-status[data-status="reviewed"]       { border-left: 3px solid var(--sp-accent); }

.ln-meta {
  font-size: var(--sp-t-xs);
  color: var(--sp-ink-3);
  margin: var(--sp-4) 0 0;
}

/* The block that ends a teaching MOVED OUT of this sheet on 2026-10-03: the
   standards and methodology pages close with the same object, and two
   archetypes using one object is the definition of a component. It is
   `.sp-ask` in v24-components.css now. */

@media print {
  .ln-quick,
  .ln-deep { border-color: #999; background: transparent; }
}