/* ============================================================================ student-documents.css - the ONE stylesheet that draws a session document. WHAT IT STYLES. Two things, and they are different layers of the same page: .sdoc* the document BODY: the reading column and the block and inline vocabulary a stored `body_html` may contain. Every template root (`sdoc--summary`, `sdoc--brief`, `sdoc--checklist`) is a modifier on it, applied by the RENDERER wrapper and never stored in the body. .stu-doc* the CARD the student page draws around a document: the collapsible opener, its title and its body pane. THERE IS NO MIRROR OF THIS FILE, AND THAT IS THE POINT. The slide vocabulary exists twice - `class-app/public/css/slide-templates.css` and `public/css/deck-slide-templates.css` - because two applications draw a slide, and a spec has to pin the two byte for byte. Only ONE application ever draws a document: class-app reads neither `session_documents` nor `documents_draft` and gains no document stylesheet. So the /editor template gallery and the /editor preview load THIS file, not a port of it, which is what makes the gallery honest - it draws the real thing. IT IS IN THE PUBLIC BUNDLE, and that is a stated cost: every marketing visitor downloads it, exactly as they already download student-session-deck.css. It must NOT be renamed to anything starting with "admin", or `scripts/bundle-css.mjs` would move it into the admin bundle and no student page would ever receive it. THREE RULES THIS FILE KEEPS, each with a reason: 1. NO `direction` DECLARATION ANYWHERE. The students area is `` host-wide, so a document inherits RTL for free, and the /editor gallery declares its own island with the `dir` ATTRIBUTE. A `direction: rtl` here would be a second island in a sheet the LTR editor page also loads, and `tests/editorContentTranslation.spec.ts` pins that the editor has exactly one. LTR is per element: `` and ``, both of which the document sanitiser preserves and the shared site sanitiser would strip. 2. NO `container-type` AND NO `cqw`, anywhere. A `cqw` resolves against the nearest container ancestor, and the /editor templates page has one - the 1920x1080 slide box. A second container on that page silently re-bases every size in the slide vocabulary, and the gallery starts lying with nothing to say so. A document has no canvas and needs none. 3. NO FONT STACK IS RE-DECLARED. `var(--font-body)` and `var(--font-mono)` are read from global.css and nothing else. The first file a search finds is the dead `src/assets/fonts/fonts.css`, whose mono stack omits 'Noto Sans Hebrew' and ends in Courier New; copying it renders every Hebrew character in a mono run as Courier. Every selector is scoped under `.sdoc` or `.stu-doc`. This sheet is loaded on every public page, so a bare element rule here would restyle the marketing site. ============================================================================ */ /* ── The document body: tokens and the reading column ────────────────────── */ .sdoc { /* The three tokens `.tpl-code` and `.tpl-kbd` read. Those two classes are the whole of DOC_CLASSES, they are styled by deck-slide-templates.css (already on every public page), and that sheet declares these tokens on `.slide` - which a document is not inside. With them missing the two rules resolve to an invalid var() and the inline code renders with no colour and no border. Declared here, the same two classes draw correctly in a reading column. */ --tpl-ink: var(--text-color); --tpl-line: var(--border-light); --tpl-surface: var(--bg-surface); /* The measure. 72ch is the same reading width the shipped session-1 summaries already use, so a document and a static summary on one page do not disagree about where a line ends. */ --sdoc-measure: 72ch; font-family: var(--font-body); font-size: 15px; line-height: 1.85; color: var(--text-color); } .sdoc > * { max-width: var(--sdoc-measure); } /* ── The block vocabulary ─────────────────────────────────────────────────── */ .sdoc p { margin: 0 0 14px; } .sdoc > :last-child { margin-bottom: 0; } /* No h1 exists in the vocabulary: the card draws the document title, and a heading repeating it under itself is the defect this omission prevents. */ .sdoc h2 { margin: 24px 0 10px; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--text-color); } .sdoc h3 { margin: 20px 0 8px; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--primary-color); } .sdoc :first-child:is(h2, h3) { margin-top: 0; } .sdoc ul, .sdoc ol { /* Logical, not `padding-right`. The student page is RTL and the /editor gallery draws the same markup inside a `dir="rtl"` attribute island on an LTR page, so the indentation has to follow the direction rather than a side. */ margin: 0 0 14px; padding-inline-start: 22px; } .sdoc li { margin-bottom: 6px; } .sdoc li:last-child { margin-bottom: 0; } /* A list item holds BLOCK content - `

  • text

    • ` - because the document schema's list item does, and a bare `
  • text
    • ` comes back out of the editor with a paragraph inside it. Flattening the margin here is what makes that structural fact cost nothing on the page. */ .sdoc li > p { margin: 0; } .sdoc li > p + p { margin-top: 8px; } .sdoc blockquote { margin: 0 0 14px; padding: 2px 14px; border-inline-start: 2px solid var(--border-light); color: var(--text-secondary); } .sdoc blockquote p:last-child { margin-bottom: 0; } /* ── The inline vocabulary ────────────────────────────────────────────────── */ .sdoc b { font-weight: 500; } .sdoc em { /* The Hebrew face has no italic axis, so this is a synthesised oblique. It is in the brief's vocabulary for a Latin title or a quoted term, and the template's own note says as much. */ font-style: italic; } .sdoc small { font-size: 0.88em; color: var(--text-secondary); } .sdoc a { color: var(--primary-color); text-decoration: none; border-bottom: 1px solid transparent; } .sdoc a:hover, .sdoc a:focus-visible { border-bottom-color: var(--primary-color); } /* `.tpl-code` and `.tpl-kbd` are NOT redeclared here. They are styled once, in deck-slide-templates.css, and this file supplies the three tokens they read (top of the file). Two spellings of one thing is what the rich-text schema refuses, and two stylesheets for one class is the same failure one level up. */ /* ── The refusal notice ───────────────────────────────────────────────────── */ /* `StudentDocumentBody.vue` draws `

    ` INSTEAD of a body when `sanitizeDocumentResult` refuses one, and on that branch the notice is the renderer's ROOT - so the template's `sdoc sdoc--` classes, which both surfaces bind onto the component, fall through onto this very element. Two consequences the declarations below rest on: * it has to sit AFTER `.sdoc` in this file. The two selectors carry the same specificity, so source order is the whole of what makes the muted colour and the smaller size win over the reading column's. * `--sdoc-measure` is declared on `.sdoc`, which IS this element in that case, so the measure resolves. Mounted bare, with no `.sdoc` on it, the var is undefined, `max-width` computes to `none`, and the line simply follows its container - the right outcome, and the reason no second copy of the 72ch literal is written here. QUIET ON PURPOSE. This says "the document cannot be shown", not "something has gone wrong": no red, no icon, no panel, nothing that reads as an error banner to a student who did nothing. What it does need is to be visibly SET APART from the document, or a reader takes the sentence for the document's own first paragraph - hence the inset rule, which is the one this sheet already uses for a blockquote rather than a second idiom for the same gesture. The path is reachable only when the read sanitiser will not settle, which nothing in the document vocabulary can produce, so it is rare and it must still be legible. */ .sdoc__notice { max-width: var(--sdoc-measure); margin: 0; padding: 2px 14px; border-inline-start: 2px solid var(--border-light); font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: var(--text-secondary); } /* ── D1 summary: the six-paragraph rubric ────────────────────────────────── */ .sdoc--summary p { /* Six paragraphs with no labels between them, so the paragraph gap is the only thing separating one rubric section from the next. It is wider than the base for exactly that reason. */ margin-bottom: 18px; } /* ── D2 brief: a heading, paragraphs, one list ───────────────────────────── */ .sdoc--brief h2:first-child { /* The one template that opens on a heading. Nothing to add above it. */ margin-top: 0; } /* ── D3 checklist: an ordered sequence of steps ──────────────────────────── */ .sdoc--checklist ol { padding-inline-start: 0; list-style: none; counter-reset: sdoc-step; } .sdoc--checklist ol > li { position: relative; margin-bottom: 12px; padding-inline-start: 34px; counter-increment: sdoc-step; } /* The number is the whole point of this template: it is how a reader who stopped halfway says where they stopped, and how a staff answer names the step. Solid `--primary-color`, never the brand gradient: the ramp reads as the brand only on a hairline, and on a 500-weight numeral it reads as a stock gradient. */ .sdoc--checklist ol > li::before { content: counter(sdoc-step); position: absolute; inset-inline-start: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--bg-secondary); font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1; color: var(--primary-color); } /* ── The card the student page draws around a document ────────────────────── */ /* The visual vocabulary of the shipped session-1 summary cards, under names of its own. Deliberately NOT the same class names: those sixteen cards are live to a running cohort from a static file, and a document publish must not be able to change how they look. */ .stu-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .stu-doc__card { border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-surface); overflow: hidden; } .stu-doc__opener { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: none; background: none; font-family: var(--font-body); text-align: right; cursor: pointer; } .stu-doc__opener:hover { background: var(--fsp-hover-bg); } .stu-doc__opener:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; } .stu-doc__titles { flex: 1 1 auto; min-width: 0; } /* `display: block` is load-bearing on both, for the reason the session-1 sheet records: the two are SPANs inside a button - a

    inside a