/* ═══════════════════════════════════════════════════════════════════════════════════════
   fe-print.css — THE SAVED CHAPTER'S PAPER DESIGN (T7.14 · F39)

   WHAT THIS FILE IS. docs/content-sources/**/ch-*.html are the chapter documents this
   product's content was transcribed from, and each one is a finished, printable page:
   cream paper, a pine-and-brass masthead, a tinted block per question, plain paper under
   it for the answer, brass counters down the points. That is the format a reader expects
   back when they press Save, and until this file existed they got the website instead —
   the mint-on-navy screen design, rendered onto A4.

   SO THIS IS NOT A THEME. It is the same document the site draws, repainted for paper, and
   it applies to EVERY SUBJECT: the Qur'an chapters the design came from, and Physics,
   Islamiat, Maths and everything after them. Nothing here names a subject, and nothing
   keys off one. The Arabic-only blocks (.source) simply do not appear in a Physics chapter,
   so their rules never match; every other rule matches every sheet.

   HOW IT REACHES EVERY SUBJECT WITHOUT ENUMERATING THEM. Section 1 re-points the design
   system's own tokens — --surface, --fg, --border, --accent and the rest — at the paper
   palette. Every FreeEdu component already draws itself out of those tokens, so one block
   converts the whole sheet, including components this file has never heard of and the ones
   written after it. The rules below section 1 are only for the places where the paper
   design differs in SHAPE, not merely in colour.

   ── THREE CONSTRAINTS THIS FILE IS BUILT AROUND ─────────────────────────────────────────

   1. IT IS LINKED media="print" (App.razor) AND WRAPPED IN @media print ANYWAY. The link
      keeps it off the screen and out of the render-blocking path; the wrapper keeps it
      correct if it is ever linked unconditionally, imported, or bundled. Neither is
      redundant with the other — one is a fetch policy, the other is a guarantee.

   2. EVERY SELECTOR IS FENCED html[data-fe-site]. This document is shared with the staff
      portal, which has its own .card, .status, .lbl and .btn. The fence is the same one
      fe-ds.css uses, and it is not optional.

   3. SPECIFICITY IS DELIBERATE, NOT DEFENSIVE. fe-ds.css writes [data-fe-site] .q-card
      (0,2,0) and the scoped component sheets write .source[b-xxxxxxx] (0,2,0).
      html[data-fe-site] .q-card is (0,2,1) and beats both regardless of load order, which
      is what lets this file sit last without depending on sitting last. The token block
      needs (0,3,1) to clear html[data-fe-site][data-theme="dark"], hence its second
      selector — WITHOUT IT, A DARK-MODE READER SAVES A BLACK PDF.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

@media print {

  /* ── 1 — THE PALETTE ──────────────────────────────────────────────────────────────────
     The chapter documents' own variables, verbatim, under fe- names so they cannot collide
     with the design system's or the portal's. Below them, the design system's tokens are
     re-pointed at these: that second half is what makes the conversion total.

     BOTH SELECTORS ARE REQUIRED. The bare fence is (0,2,1) and loses to fe-ds.css's dark
     block at (0,3,1); the [data-theme] form matches it and wins on order. Light and dark
     therefore print identically, which is the correct behaviour for a file that outlives
     the setting that produced it — a reader who saves at night and prints at school must
     not get a black page, and a chapter mailed to somebody else must not carry the
     sender's theme. */
  html[data-fe-site],
  html[data-fe-site][data-theme] {
    --fe-paper: #FCFAF3;
    --fe-ink: #22302D;
    --fe-pine: #173F3B;
    --fe-pine-soft: #EAF0EC;
    --fe-brass: #A8842C;
    --fe-brass-ink: #7E6018;
    --fe-rule: #D6CBB0;
    --fe-hair: #E6DECA;
    --fe-quote: #F3EEDF;

    /* The small-label face. The documents call it --ui and set it to Amiri; ours is reached
       through --fe-font-arabic, whose unicode-range covers Arabic only — so an Arabic label
       is Amiri and a Latin one falls through to the stack's serif. That is the same
       distinction the documents draw, arrived at by the font machinery rather than by a
       second variable. */
    --fe-label: var(--fe-font-arabic);

    /* The re-point. Every line here is a design-system token that FreeEdu components
       already consume; nothing below this comment is invented. */
    --bg: #FFFFFF;
    --surface: var(--fe-paper);
    --surface-2: var(--fe-pine-soft);
    --surface-ink: var(--fe-pine);
    --fg: var(--fe-ink);
    --fg-on-ink: #F4EDD8;
    --muted: #6B7370;
    --muted-on-ink: #D8CBA2;
    --border: var(--fe-hair);
    --border-strong: var(--fe-rule);
    --border-ink: var(--fe-rule);
    --rule: var(--fe-hair);
    --accent: var(--fe-brass-ink);
    --accent-2: var(--fe-brass-ink);
    --negative: #9A3B2E;
    --on-accent: #FFFFFF;

    /* Paper does not hover, press or animate. Radii go near-square because the documents
       are square: 3px on a badge, nothing anywhere else. */
    --r-sm: 2px;
    --r: 2px;
    --r-lg: 0px;
  }

  /* ── 2 — THE SHEET ────────────────────────────────────────────────────────────────────
     The page box itself (@page: A4 and the margins) is injected by feInterop.print and
     cannot live here — @page takes no selector, and this document is shared with the
     portal. See the note in fe.css §2 and FeInterop.PrintAsync. */

  html[data-fe-site] body { background: #FFFFFF; }

  /* THE INSET IS THE PAGE MARGIN, NOT THE WRAP'S PADDING. .fe-wrap centres the site in a
     1160px measure and pads it with a viewport-relative clamp — both meaningless on a sheet
     of A4, and the clamp resolves against the print surface rather than the window, so it
     produced a different gutter on every driver. The 22/16/20mm @page injected by
     feInterop.print is the document's real margin; this gets out of its way. */
  html[data-fe-site] .fe-wrap {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* BLOCK LAYOUT FRAGMENTS; GRID AND FLEX ARGUE ABOUT IT (§16). A block box splits across a
     page boundary predictably in every engine. Grid and flex containers are the two layouts
     where support is partial and version-dependent, and where the usual failure is to refuse
     to split at all — which on paper means the container jumps to the next page whole and
     leaves the rest of the current one white.

     These three are the tall ones on a chapter sheet: the reader's two-column shell, the list
     of points, and the list of worked steps. None of them needs its layout mode on paper —
     the rail is not printed, and the other two are single columns stacked vertically, which
     is what block layout already does. The CHILDREN keep their grid (a point is a number
     column and a text column, and it is short); only the containers change.

     .fe-reader is already collapsed to one column by fe.css §3; this goes further and drops
     the grid entirely. */
  html[data-fe-site] .fe-wrap .fe-reader,
  html[data-fe-site] .fe-wrap .fe-reader.rail-off {
    display: block;
  }

  /* Shadows are ink on paper and nothing else. */
  html[data-fe-site] .fe-wrap * { box-shadow: none !important; }

  /* An iframe prints as a grey rectangle at best and a "content not available" box at
     worst. A saved chapter is the text; the video stays on the site. */
  html[data-fe-site] .fe-wrap iframe { display: none !important; }

  /* ── 3 — THE MASTHEAD ─────────────────────────────────────────────────────────────────
     .page-head is the site's heading block and .masthead is the documents' — same three
     parts in the same order (eyebrow, title, standfirst), so this is a repaint rather than
     a rebuild. The doubled rule is the documents' signature: 2px pine, then a 1px brass
     hairline 4px under it. */
  html[data-fe-site] .fe-wrap .page-head {
    margin: 0 0 26px;
    padding: 0 0 16px;
    border-bottom: 2px solid var(--fe-pine);
  }

  html[data-fe-site] .fe-wrap .page-head::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 4px;
    background: var(--fe-brass);
  }

  html[data-fe-site] .fe-wrap .page-head .kicker {
    margin: 0 0 8px;
    font-family: var(--fe-label);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fe-brass-ink);
  }

  html[data-fe-site] .fe-wrap .page-head h1 {
    margin: 0;
    max-width: none;
    font-size: 28px;
    font-weight: 700;
    line-height: 2;
    color: var(--fe-pine);
  }

  html[data-fe-site] .fe-wrap .page-head .lede {
    margin-top: 10px;
    max-width: none;
    font-size: 15px;
    line-height: 2.2;
    color: #3C4744;
  }

  /* The meta pills — question count, marks, status. The documents have no equivalent, so
     they take the documents' quietest voice: a hairline pill in brass, not a coloured
     status chip. */
  html[data-fe-site] .fe-wrap .page-meta { margin-top: 12px; }

  html[data-fe-site] .fe-wrap .status {
    font-family: var(--fe-label);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fe-brass-ink);
    border: 1px solid var(--fe-hair);
    border-radius: 2px;
    padding: 2px 7px;
  }

  /* ── 4 — THE BAND ─────────────────────────────────────────────────────────────────────
     Each .q-section heading becomes the documents' .band: a 5px-tall double rule, then the
     section's name in pine. The rule is drawn on the section rather than added to the
     markup — ::before costs no element and cannot be forgotten by a future section. */
  html[data-fe-site] .fe-wrap .q-section { margin: 0 0 20px; }

  html[data-fe-site] .fe-wrap .q-section + .q-section { margin-top: 40px; }

  html[data-fe-site] .fe-wrap .q-section > h2 {
    margin: 0 0 20px;
    padding: 10px 0 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 2;
    color: var(--fe-pine);
    break-after: avoid;
    page-break-after: avoid;
  }

  html[data-fe-site] .fe-wrap .q-section > h2::before {
    content: "";
    display: block;
    height: 5px;
    margin-bottom: 10px;
    border-top: 1px solid var(--fe-rule);
    border-bottom: 1px solid var(--fe-rule);
  }

  html[data-fe-site] .fe-wrap .q-section > .hint {
    margin: -10px 0 18px;
    font-size: 14px;
    line-height: 2.1;
    color: var(--muted);
  }

  /* ── 5 — THE QUESTION BLOCK ───────────────────────────────────────────────────────────
     The documents' .qcard is one tinted box holding the tag, the ayah and the question,
     with the answer on plain paper below it. This build's card is .q-head (tag row) +
     .q-ask (ayah, question, translation) + .q-ans (the answer) — three elements where the
     documents have two, so the first two are drawn as one box by giving .q-head the top
     half of the border and .q-ask the bottom half.

     .q-card ITSELF STOPS DRAWING, AND STOPS RESISTING PAGE BREAKS. On screen it is the
     bordered, rounded container. Here it is nothing — see §16 and the withdrawn rule in
     fe.css: a card is a question plus its whole answer, usually more than half a page, and
     forbidding a break inside one does not keep it whole so much as shove it onto the next
     sheet and leave the current one half empty. The answer flows; the question does not. */
  html[data-fe-site] .fe-wrap .q-card {
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
    margin: 0 0 26px;
  }

  /* THE TINTED BLOCK IS THE THING KEPT WHOLE, and it is the chapter documents' own rule:
     their .qcard carries page-break-inside:avoid and page-break-after:avoid, and holds the
     tag, the ayah and the question — nothing else. .q-head and .q-ask are that element in
     two halves, so the pair is fenced as one: no break inside either, none between them, and
     none immediately after, which keeps at least the first line of the answer with the
     question it answers.

     THIS IS CHEAP IN A WAY THE CARD RULE WAS NOT. A question block is a few lines; when one
     does not fit in the remaining space the gap it pushes down is a few lines' worth. And an
     ayah long enough to exceed a whole page makes the rule unsatisfiable, at which point the
     engine is required to ignore it and break anyway — so there is no case where this can
     strand a page. */
  html[data-fe-site] .fe-wrap .q-head {
    background: var(--fe-pine-soft);
    border: 1px solid var(--fe-hair);
    border-bottom: 0;
    border-inline-start: 4px solid var(--fe-pine);
    padding: 14px 18px 0;
    gap: .4rem .8rem;
    break-inside: avoid;
    page-break-inside: avoid;
    break-after: avoid;
    page-break-after: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html[data-fe-site] .fe-wrap .q-head .qn {
    min-width: 30px;
    padding: 0 6px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: var(--fe-pine);
    color: #F4EDD8;
    border-radius: 3px;
    font-family: var(--fe-label);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* :lang(ur) restated because fe-ds.css sizes the Urdu label separately and Nastaliq needs
     the taller box — a 24px line on Nastaliq clips the descenders. */
  html[data-fe-site] .fe-wrap .q-head .qn:lang(ur) {
    font-family: var(--fe-font-urdu);
    font-size: 13px;
    height: 28px;
    line-height: 28px;
  }

  /* The bottom half of the tinted box. display:block replaces the display:contents that
     keeps this element invisible on screen — see FeQuestionCard.razor.css §0. */
  html[data-fe-site] .fe-wrap .q-ask {
    display: block;
    background: var(--fe-pine-soft);
    border: 1px solid var(--fe-hair);
    border-top: 0;
    border-inline-start: 4px solid var(--fe-pine);
    padding: 12px 18px 16px;
    break-inside: avoid;
    page-break-inside: avoid;
    break-before: avoid;
    page-break-before: avoid;
    break-after: avoid;
    page-break-after: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* .q-body was the padded container on screen; the padding now belongs to the two halves. */
  html[data-fe-site] .fe-wrap .q-body { padding: 0; }

  /* The ayah. Paper inside the tint, with the brass edge that marks scripture throughout
     the documents — the one rule in this file that only ever matches a Qur'an chapter, and
     it matches nothing at all in the others rather than needing a subject test. */
  html[data-fe-site] .fe-wrap .source {
    margin: 0 0 10px;
    font-family: var(--fe-font-arabic);
    font-size: 21px;
    line-height: 2.05;
    color: #10322E;
    background: var(--fe-paper);
    border: 1px solid var(--fe-hair);
    border-inline-start: 3px solid var(--fe-brass);
    border-radius: 0;
    padding: 13px 15px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* The question. The documents' .ask: pine, bold, and given the line-height Nastaliq needs
     rather than the screen's 1.5. */
  html[data-fe-site] .fe-wrap .qtext {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 2.15;
    color: var(--fe-pine);
  }

  /* ── 6 — THE ANSWER ───────────────────────────────────────────────────────────────────
     Plain paper, indented from the tinted block above it, exactly as .abody is. */
  html[data-fe-site] .fe-wrap .q-ans {
    display: block;
    padding: 14px 6px 2px;
    padding-inline-start: 18px;
  }

  html[data-fe-site] .fe-wrap .intro {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 2.2;
    color: #3C4744;
  }

  /* The documents' h3: a short brass dash on the leading side, then the heading in pine. */
  html[data-fe-site] .fe-wrap .heading {
    margin: 16px 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 2.1;
    color: var(--fe-pine);
    break-after: avoid;
    page-break-after: avoid;
  }

  html[data-fe-site] .fe-wrap .heading::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 1px;
    vertical-align: middle;
    margin-inline-end: 8px;
    background: var(--fe-brass);
  }

  /* The points. The documents number them with a brass ring; this build renders a
     .point-num span, so the ring is drawn on the span rather than with a counter — same
     result, and the numbering keeps working when a chapter starts its list at something
     other than one. */
  /* display:block, not the screen's column flex — see the note in §2. The gap becomes a
     margin on the child, which is the same 11px and survives fragmentation. */
  html[data-fe-site] .fe-wrap .points {
    display: block;
    margin-top: 12px;
  }

  /* NO break-inside HERE, deliberately (§16). A point in a Mutala chapter runs four or five
     lines of Nastaliq at line-height 2.2 — an inch and a half — and one that will not split
     drags that much white space onto the previous page every time it lands near a fold. The
     orphans/widows pair in §10 is what stops a point breaking BADLY; it costs a line, not a
     third of a sheet. */
  html[data-fe-site] .fe-wrap .point {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 11px;
  }

  html[data-fe-site] .fe-wrap .point-num {
    width: 22px;
    height: 22px;
    margin-top: 8px;
    border: 1px solid #C9B27C;
    border-radius: 50%;
    background: var(--fe-paper);
    color: var(--fe-brass-ink);
    font-family: var(--fe-label);
    font-size: 11px;
    font-weight: 700;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html[data-fe-site] .fe-wrap .point-text {
    font-size: 16px;
    line-height: 2.2;
  }

  /* The worked steps. The documents set these as a definition list — label in pine with a
     brass tick, body beneath — and .step/.k/.v is the same two-part shape. The screen's
     mono face goes: a printed derivation is read, not scanned. */
  html[data-fe-site] .fe-wrap .steps { display: block; }

  html[data-fe-site] .fe-wrap .step {
    border-top: 1px solid var(--fe-hair);
    padding-block: .6rem;
  }

  html[data-fe-site] .fe-wrap .step .k {
    font-family: var(--fe-label);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fe-pine);
  }

  html[data-fe-site] .fe-wrap .step .k:lang(ur) {
    font-family: var(--fe-font-urdu);
    font-size: 15px;
  }

  html[data-fe-site] .fe-wrap .step .v {
    font-family: inherit;
    font-size: 15.5px;
    line-height: 2.2;
    color: #333F3C;
  }

  /* The given/find chips. Hairline on paper; the mono face stays because these are equation
     fragments and tabular figures are the point. */
  html[data-fe-site] .fe-wrap .chip {
    background: var(--fe-paper);
    border: 1px solid var(--fe-hair);
    border-radius: 2px;
    color: var(--fe-ink);
  }

  html[data-fe-site] .fe-wrap .chip-find {
    background: none;
    border-color: #C9B27C;
    color: var(--fe-brass-ink);
  }

  /* The final answer. The documents' .ans line: label in brass, value after it, on the paper
     ground with the brass edge.

     display:block UNDOES THE FLEX ROW, deliberately. On screen .answer is a row with the
     label at one end and a short quantity at the other, and fe-ds.css then has to give an
     Urdu prose answer flex-basis:100% so it drops to its own line instead of wrapping only
     once it happens to be long enough. The documents have no row: the label is a bold span
     that the answer simply continues from, which is the same shape for "100 m" and for four
     lines of Urdu. The special case disappears rather than being restated. */
  html[data-fe-site] .fe-wrap .answer {
    display: block;
    margin-top: 14px;
    padding: 13px 15px;
    background: var(--fe-paper);
    border: 1px solid var(--fe-hair);
    border-inline-start: 3px solid var(--fe-brass);
    border-radius: 0;
    font-size: 16px;
    line-height: 2.25;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html[data-fe-site] .fe-wrap .answer .lbl,
  html[data-fe-site] .fe-wrap[lang="ur"] .answer .lbl {
    font-family: var(--fe-label);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fe-brass-ink);
  }

  html[data-fe-site] .fe-wrap[lang="ur"] .answer .lbl {
    display: inline;
    margin-inline-end: .4em;
    font-family: var(--fe-font-urdu);
  }

  html[data-fe-site] .fe-wrap .answer .lbl {
    display: inline;
    margin-inline-end: .4em;
  }

  /* A quantity — "100 m" — still gets the emphasis it was written with: mono, larger, pine.
     The two rules below split on the SOLUTION MEDIUM rather than the site language, which is
     the distinction fe-ds.css draws and the reason it uses :lang() here. */
  html[data-fe-site] .fe-wrap .answer strong {
    display: inline;
    font-size: 17px;
    color: var(--fe-pine);
  }

  /* Urdu prose is not a quantity. The documents set an answer as body text with a bold label
     in front of it, and a four-line Nastaliq paragraph at 17px bold pine reads as a heading
     that will not stop. Same size, same weight and same ink as the points around it. */
  html[data-fe-site] .fe-wrap .answer strong:lang(ur) {
    display: inline;
    font-size: 16px;
    font-weight: 400;
    line-height: 2.25;
    color: var(--fe-ink);
  }

  /* The panels — translation and common-mistake. Both become the documents' blockquote:
     a warmer ground than the paper, hairlines top and bottom, and the accent down the
     leading edge. The warning keeps its own colour there, because a mistake the reader is
     being warned off is not a translation. */
  html[data-fe-site] .fe-wrap .panel {
    margin-top: 14px;
    padding: 16px 18px;
    background: var(--fe-quote);
    border: 1px solid var(--fe-hair);
    border-inline-start: 3px solid var(--fe-brass);
    border-radius: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html[data-fe-site] .fe-wrap .panel-warn { border-inline-start-color: #9A3B2E; }

  html[data-fe-site] .fe-wrap .panel-label,
  html[data-fe-site] .fe-wrap[lang="ur"] .panel-label {
    font-family: var(--fe-label);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fe-brass-ink);
  }

  html[data-fe-site] .fe-wrap[lang="ur"] .panel-label { font-family: var(--fe-font-urdu); }

  html[data-fe-site] .fe-wrap .panel-label-warn { color: #9A3B2E; }

  html[data-fe-site] .fe-wrap .panel-body {
    font-size: 15.5px;
    line-height: 2.25;
    color: #2C3936;
  }

  html[data-fe-site] .fe-wrap .panel-warn .panel-body { font-size: 15.5px; }

  /* ── 7 — THE SELF-TEST ────────────────────────────────────────────────────────────────
     The MCQ block prints as questions and options. The score row is a control and a running
     tally of what the reader did in the browser: neither survives being saved, and a "0 / 8"
     printed on a chapter is simply wrong the moment it leaves the tab. */
  html[data-fe-site] .fe-wrap .mcq-score { display: none !important; }

  html[data-fe-site] .fe-wrap .mcq {
    background: var(--fe-paper);
    border: 1px solid var(--fe-hair);
    border-inline-start: 4px solid var(--fe-pine);
    border-radius: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* The stem stays with its first option; the option list flows. Same trade as the question
     block above, at a smaller scale. */
  html[data-fe-site] .fe-wrap .mcq-q {
    break-inside: avoid;
    page-break-inside: avoid;
    break-after: avoid;
    page-break-after: avoid;
  }

  html[data-fe-site] .fe-wrap .mcq-opt {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  html[data-fe-site] .fe-wrap .mcq-q .n,
  html[data-fe-site] .fe-wrap .mcq-opt .key {
    font-family: var(--fe-label);
    font-weight: 700;
    color: var(--fe-brass-ink);
    letter-spacing: 0;
    text-transform: none;
  }

  html[data-fe-site] .fe-wrap .mcq-opt {
    background: none;
    border: 1px solid var(--fe-hair);
    border-radius: 2px;
    color: var(--fe-ink);
  }

  /* ── 8 — TABLES ───────────────────────────────────────────────────────────────────────
     Nothing in the content model renders one today; the chapter documents do, and a
     transcribed table arriving in a later chapter must not print as an unruled grid with
     its header stranded on the previous page. Cheap, and correct in advance. */
  html[data-fe-site] .fe-wrap table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 15px;
    line-height: 2;
  }

  html[data-fe-site] .fe-wrap thead { display: table-header-group; }

  html[data-fe-site] .fe-wrap tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  html[data-fe-site] .fe-wrap th,
  html[data-fe-site] .fe-wrap td {
    border: 1px solid var(--fe-rule);
    padding: 8px 11px;
    text-align: start;
    vertical-align: top;
  }

  html[data-fe-site] .fe-wrap th {
    background: var(--fe-pine-soft);
    color: var(--fe-pine);
    font-weight: 700;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── 9 — THE COLOPHON ─────────────────────────────────────────────────────────────────
     The verification sentence closes the file the way the documents' footer closes theirs:
     one quiet line under a hairline, not a paragraph of body text. */
  html[data-fe-site] .fe-wrap .stamp {
    margin-top: 34px;
    padding-top: 12px;
    border-top: 1px solid var(--fe-rule);
    font-family: var(--fe-label);
    font-size: 12.5px;
    line-height: 2;
    color: var(--fe-brass-ink);
  }

  html[data-fe-site] .fe-wrap[lang="ur"] .stamp { font-family: var(--fe-font-urdu); }

  /* ── 10 — WIDOWS AND ORPHANS ──────────────────────────────────────────────────────────
     Stated once for the sheet rather than per element. A heading alone at the foot of a
     page and a single line of an answer at the head of the next are the two ways a
     correctly styled document still reads badly on paper. */
  html[data-fe-site] .fe-wrap p,
  html[data-fe-site] .fe-wrap li {
    orphans: 2;
    widows: 2;
  }

  html[data-fe-site] .fe-wrap h1,
  html[data-fe-site] .fe-wrap h2,
  html[data-fe-site] .fe-wrap h3,
  html[data-fe-site] .fe-wrap h4 {
    break-after: avoid;
    page-break-after: avoid;
  }
}