/* ============================================================================
   admin-editor-doc-templates.css - the DOCUMENT sections of the /editor
   template gallery.

   WHAT IT DRAWS: the chrome of the two `edt-sec` blocks at the foot of
   `src/views/editor/EditorTemplates.vue` - `#edt-sec-documents`, which is one
   card per record in `src/data/documentTemplates.ts`, and `#edt-sec-doc-vocab`,
   which is the vocabulary those cards are written in. The card is
   `src/components/editor/documents/DocumentCard.vue` and the rendering inside
   it is `src/components/editor/documents/DocumentSample.vue`.

   WHAT IT DOES NOT DRAW, and this is the point of the whole family: the
   document ITSELF. The sample is rendered through
   `src/components/student/StudentDocumentBody.vue` - the one component the
   student's meeting page uses - and every pixel inside it comes from
   `public/css/student-documents.css`, which the /editor page also loads. That
   is what makes the gallery honest: it draws the real thing rather than a port
   of it. A rule here that restyled an `.sdoc*` or `.stu-doc*` class would turn
   this page into a second opinion about the student page, and
   `tests/editorCssIsolation.spec.ts` reds on one. Do not write one. Everything
   below stops at the frame around the rendering.

   Nothing about the Documents TAB goes here either: that is
   `admin-editor-documents.css`, a separate file, so that the gallery and the
   tab are never written by two hands in one place.

   FIVE RULES, each of which fails silently rather than loudly:

     1. EVERY CLASS IS PREFIXED `edtdoc-`. The admin bundle is ONE stylesheet
        loaded whole by every admin page and by /editor, so a bare `.foo {}`
        here is a global rule that lands on any element carrying that class
        anywhere in the panel, and the editor sheets are linked late enough to
        WIN at equal specificity. `tests/editorCssIsolation.spec.ts` is the
        guard, and it now opens `student-documents.css` too. The two sections
        also WEAR a few of the page's own frame classes - `edt-sec`,
        `edt-sec__title`, `edt-sec__lede`, `edt-readonly` - which are declared
        once in `admin-editor-templates.css` and are deliberately not
        redeclared here: a section of this page should look like a section of
        this page, and a second declaration of a shared frame is the drift a
        single artefact exists to end.
     2. THE FILENAME KEEPS ITS `admin-editor` PREFIX. `bundle-css.mjs`
        partitions the public bundle from the admin bundle on
        `href.startsWith('/css/admin')` and on nothing else, so a name like
        `editor-doc-templates.css` would ship the whole admin panel's CSS to
        every marketing visitor, with a completely green build and no test to
        catch it.
     3. NO `direction: rtl`. The sample is a Hebrew RTL island declared with the
        `dir` and `lang` ATTRIBUTES on the element, never with a rule here.
        `tests/editorContentTranslation.spec.ts` asserts this page declares
        `direction` in exactly one place, and that place is the slide canvas in
        `admin-editor-templates.css`.
     4. NO `container-type`, anywhere, not even on the document sample. The
        templates page already has one container - the 1920x1080 slide box - and
        `cqw` resolves against the NEAREST container ancestor, so a second one
        silently re-bases every size in the slide vocabulary and the slide half
        of the gallery starts lying with nothing to say so. A document has no
        `cqw` in it at all: it is a flowing reading column sized in px and ch,
        and it is drawn here at its true reading size rather than scaled.
     5. NO `.slide` CLASS and no reuse of the slide canvas.
        `tests/editorTemplatesGallery.spec.ts` requires every `.slide` on that
        page to have `.edt-canvas__inner` as its DIRECT parent, and the document
        cards are not inside one.

   It is linked after `admin-editor.css`, which declares the `--edt-*` tokens
   this file reads.
   ============================================================================ */

/* ── The list of cards ─────────────────────────────────────────────────────
   The root of the document half of the gallery, and the name is authoritative:
   the wrapper in `EditorTemplates.vue` carries `edtdoc-gallery`. Three cards
   today, stacked one per row - the definition beside each rendering is prose,
   and prose in a two-across grid is a column nobody reads. */
.edtdoc-gallery {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 0;
}

/* ── One card ──────────────────────────────────────────────────────────────
   The same shape and weight the slide card has (`.edt-tpl`), because the two
   halves of one page should not read as two pages. A separate declaration
   rather than a shared class, because the two cards hold different things and
   will diverge: a slide card carries build-step controls and image warnings, a
   document card carries an authoring rubric and a source view. */
.edtdoc-tpl {
  padding: 1.1rem 1.2rem 1.3rem;
  border-radius: 12px;
  background: var(--edt-surface-solid);
  box-shadow: inset 0 0 0 1px var(--edt-line);
}

.edtdoc-tpl__head {
  margin-bottom: 1rem;
}

.edtdoc-tpl__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--edt-ink);
}

/* The root classes the RENDERER applies. They are never stored in `body_html`,
   which is what keeps the sanitiser's class allow-list at two members, so the
   card states them rather than leaving a reader to infer them from a sample
   that does not contain them. */
.edtdoc-tpl__class {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--edt-accent-ink);
}

.edtdoc-tpl__purpose {
  max-width: 86ch;
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--edt-ink-2);
}

.edtdoc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.edtdoc-chip {
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  background: var(--edt-glass-strong);
  box-shadow: inset 0 0 0 1px var(--edt-line);
  font-size: 0.72rem;
  color: var(--edt-ink-3);
}

/* ── Rendering left, definition right ──────────────────────────────────────
   Below 1100px they stack, for the reason the slide card stacks: a definition
   list squeezed beside a reading column is unreadable, and a reading column
   squeezed beside a definition list stops being a reading column, which is the
   one thing this rendering has to be honest about. */
.edtdoc-tpl__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.edtdoc-tpl__render,
.edtdoc-tpl__def {
  min-width: 0;
}

@media (max-width: 1100px) {
  .edtdoc-tpl__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── The sample: an RTL island, at its true reading size ───────────────────
   The frame only. Everything inside it comes from `student-documents.css`,
   through the student's own renderer.

   NOT SCALED, and that is a real difference from the slide half of this page.
   A slide is a fixed 1920x1080 box that has to be transform-scaled to fit a
   card; a document is a flowing column whose type is sized in px, so scaling it
   would show the owner a size no student ever sees. What is drawn here is the
   size it is read at.

   `dir="rtl"` and `lang="he"` are ATTRIBUTES on the element, in the markup,
   never a rule here - see rule 3 in the header. The page around this island is
   English and left to right, and nothing English is placed inside it. */
.edtdoc-sample {
  padding: 1.1rem 1.2rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--edt-line);
}

.edtdoc-sample__note {
  max-width: 78ch;
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--edt-ink-3);
}

/* ── The source, beside the rendering ──────────────────────────────────────
   The half of the artefact Claude Code actually writes: the `sample` string as
   it is stored, which is the same shape a stored `body_html` has. It is folded
   away by default because the rendering is what a reader came for, and the
   button that unfolds it is a VIEW control - it changes what you are looking at
   and writes nothing. `data-view-control` in the markup is what lets the
   read-only spec tell a view control from an edit affordance. */
.edtdoc-src {
  margin-top: 0.7rem;
}

.edtdoc-src__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border: 0;
  border-radius: 6px;
  background: var(--edt-glass-strong);
  box-shadow: inset 0 0 0 1px var(--edt-line);
  font: inherit;
  font-size: 0.72rem;
  color: var(--edt-ink-2);
  cursor: pointer;
}

.edtdoc-src__btn:hover,
.edtdoc-src__btn:focus-visible {
  color: var(--edt-accent-ink);
}

/* The source is markup with Hebrew inside it, and it is shown left to right
   with a `dir` ATTRIBUTE because tags read that way. `--font-mono` is read from
   global.css and never restated: the first mono stack a search in this repo
   finds is the dead `src/assets/fonts/fonts.css`, which omits 'Noto Sans
   Hebrew' and ends in Courier New, so a copied stack renders every Hebrew
   character in this block as Courier. */
.edtdoc-src__pre {
  overflow-x: auto;
  max-height: 16rem;
  margin: 0.5rem 0 0;
  padding: 0.7rem 0.8rem;
  border-radius: 8px;
  background: #f7f8fa;
  box-shadow: inset 0 0 0 1px var(--edt-line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.7;
  color: var(--edt-ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* THE DECLARATION ABOVE NEVER REACHES THE TEXT WITHOUT THIS RULE. The markup
   nests the source in a `<code>` child of the `<pre>`, and `fonts.css` carries
   a repo-wide `* { font-family: var(--font-body, ...) }` whose universal
   selector MATCHES that child directly. A declaration that matches an element
   always beats a value inherited from its parent, whatever the specificity, so
   the child resolved to the body stack and the panel rendered markup in
   Helvetica Neue - proportional, which is the one thing a source panel may not
   be. Measured in a browser, not reasoned about: Departure Mono with equal
   advances after this rule, Helvetica Neue before it. It is the same reason the
   sibling editor sheets carry fifteen `X code { font-family: var(--font-mono) }`
   rules. The token, never a hand-typed stack, for the Courier reason above. */
.edtdoc-src__pre code {
  font-family: var(--font-mono);
}

/* ── The definition column ─────────────────────────────────────────────── */

.edtdoc-tpl__def {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--edt-ink-2);
}

.edtdoc-def__h {
  margin: 1rem 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--edt-ink-3);
}

.edtdoc-def__h:first-child {
  margin-top: 0;
}

/* A role and the tags it renders as. Chips rather than a table: the definition
   column is half a card wide, and declared column widths past the available
   width give every other column a width of 0 and stack the row unscrolled,
   which is a failure this repo has already shipped twice. */
.edtdoc-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.edtdoc-role {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  background: var(--edt-glass-strong);
  box-shadow: inset 0 0 0 1px var(--edt-line);
  font-size: 0.74rem;
}

.edtdoc-role__name {
  color: var(--edt-ink);
}

.edtdoc-role__tags {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--edt-ink-3);
}

/* The rubric. A fixed set of paragraphs an author fills in order - a shape, not
   a schema: nothing stores a section, no gate counts the paragraphs, and a
   document filling five of six is stored and published like any other. */
.edtdoc-sections {
  margin: 0;
  padding: 0;
  list-style: none;
}

.edtdoc-section {
  padding: 0.4rem 0;
}

.edtdoc-section + .edtdoc-section {
  border-top: 1px solid var(--edt-line);
}

.edtdoc-section__label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--edt-ink);
}

.edtdoc-section__note {
  max-width: 70ch;
  margin: 0.15rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
}

/* ── Rules, with their own severity vocabulary ─────────────────────────────
   `must` / `should` / `note`, which is NOT the slide family's `error` /
   `warning`: a document rule is authoring guidance addressed to a person, a
   slide rule is a check a generator runs. The two vocabularies are COMPARED by
   `tests/documentTemplatesJsonSync.spec.ts` rather than merged, so this file
   declares its own three swatches and reuses none of `.edt-sev--*`. */
.edtdoc-rules {
  margin: 0;
  padding: 0;
  list-style: none;
}

.edtdoc-rule {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  max-width: 100ch;
  padding: 0.4rem 0;
  font-size: 0.8rem;
  line-height: 1.55;
}

.edtdoc-rule + .edtdoc-rule {
  border-top: 1px solid var(--edt-line);
}

.edtdoc-sev {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.edtdoc-sev--must {
  background: rgba(214, 45, 45, 0.1);
  color: #a51f1f;
}

.edtdoc-sev--should {
  background: rgba(255, 163, 4, 0.14);
  color: #8a5200;
}

.edtdoc-sev--note {
  background: rgba(25, 26, 35, 0.06);
  color: var(--edt-ink-3);
}

.edtdoc-notes {
  max-width: 86ch;
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  line-height: 1.55;
}

/* ── The vocabulary section ────────────────────────────────────────────────
   One block per closed list, plus the two caps and the two notes the artefact
   carries about what is checked here and what is not. */
.edtdoc-vocab {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.9rem;
  margin: 0 0 1rem;
}

.edtdoc-vocab__block {
  padding: 0.8rem 0.9rem;
  border-radius: 10px;
  background: var(--edt-surface-solid);
  box-shadow: inset 0 0 0 1px var(--edt-line);
}

.edtdoc-vocab__h {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--edt-ink-3);
}

.edtdoc-vocab__note {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--edt-ink-2);
}

.edtdoc-vocab__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.edtdoc-vocab__item {
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: var(--edt-glass-strong);
  box-shadow: inset 0 0 0 1px var(--edt-line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--edt-ink-2);
}

/* The two caps, of which there is exactly ONE declaration each in this
   repository (`src/data/documentTemplates.ts`). They are read here rather than
   restated, which is what `tests/documentCapsSingleOrigin.spec.ts` enforces
   everywhere else. */
.edtdoc-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0 0 1rem;
  padding: 0;
}

.edtdoc-cap {
  margin: 0;
}

.edtdoc-cap dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--edt-ink-3);
}

.edtdoc-cap dd {
  margin: 0.1rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--edt-ink);
}

/* The two honesty notes: why there is no fit harness here, and why there is no
   usage snapshot. Both are strings in the artefact, so what this page says and
   what a JSON consumer reads are one sentence rather than two. */
.edtdoc-honesty {
  max-width: 92ch;
  margin: 0 0 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  background: var(--edt-glass);
  box-shadow: inset 0 0 0 1px var(--edt-line);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--edt-ink-2);
}