/* ============================================================================
   Article content
   ----------------------------------------------------------------------------
   The display half of the article tool. Descended from A1-Soft 2026's
   HelpContent.css, with two deliberate changes:

   1. Every colour comes from a token in tokens.css. The original hard-coded
      #f8fafc / #1e40af and so on, which meant help content stayed light while
      the rest of the page went dark, and could never follow a site's palette.
   2. Headings are real h2/h3 rather than styled divs, so the outline is
      programmatically available and the contents block builds itself.

   The stored markup carries no colours of its own — see ArticleHtml.vb. That is
   what lets this file re-theme old content instead of having to migrate it.
   ========================================================================== */

.article-wrap {
    /* A4 width, literally. These documents are handbooks and policies — they are
       read on screen and printed, and 210mm makes the two match. The old 72ch
       measure is right for an essay but left a school handbook as a narrow ribbon
       down the middle of a wide monitor with the rules squeezed into it. */
    max-width: 210mm;
    margin-inline: auto;
    /* Page margins. Shrinks to nothing on a phone rather than stealing width the
       text needs. */
    padding: 1rem clamp(0px, 4vw, 18mm);
    /* `start`, not `left`. The section wrapper carries Bootstrap's `.text-start`,
       which in the LTR build is a hard-coded `left` — so an article inherited a
       left alignment on an Arabic page. Setting it logically here means the
       article reads correctly whatever the section's alignment class says. */
    text-align: start;
}
/* A wide article still keeps its byline and contents aligned with the text. */
.article-wrap:has(> .is-wide) { max-width: none; }

.article-title {
    margin: 0 0 .6em;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    line-height: 1.25;
    font-weight: 700;
    color: var(--text-heading);
}

.article-body {
    /* No measure of its own — the A4 wrapper above already sets the column, and a
       second narrower limit here would undo it. */
    max-width: none;
    color: var(--text-body);
    font-size: 1.02rem;
    line-height: 1.85;
}

.article-body.is-wide { max-width: none; }

/* --- prose ---------------------------------------------------------------- */

.article-body p { margin: 0 0 1.15em; }
.article-body > :first-child { margin-top: 0; }
.article-body > :last-child { margin-bottom: 0; }

.article-body h2,
.article-body h3,
.article-body h4 {
    color: var(--text-heading);
    line-height: 1.35;
    /* Bind a heading to the text it introduces, not to the text above it. */
    margin: 2em 0 .6em;
    scroll-margin-top: 6rem;   /* sticky header must not cover an anchor target */
}
.article-body h2 {
    font-size: 1.45rem;
    font-weight: 700;
    padding-bottom: .35em;
    border-bottom: 2px solid var(--accent);
}
.article-body h3 { font-size: 1.18rem; font-weight: 700; color: var(--accent); }
.article-body h4 { font-size: 1.02rem; font-weight: 700; }

.article-body a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: .18em;
}
.article-body a:hover { color: var(--link-hover); }

.article-body strong { font-weight: 700; color: var(--text-heading); }
.article-body mark { background: var(--accent-soft); color: var(--text-body); padding: 0 .2em; }

/* Markers restored explicitly.
   The theme ships a blanket `ul, ol { list-style: none }` — reasonable for the
   nav menus it was written for, ruinous in a policy document, where it turned a
   numbered list of rules into a run of loose sentences. Class + element beats a
   bare element selector, so no !important is needed. */
.article-body ul,
.article-body ol {
    margin: 0 0 1.15em;
    padding-inline-start: 1.7em;
    list-style-position: outside;
}
.article-body ul { list-style-type: disc; }
.article-body ol { list-style-type: decimal; }
.article-body ul ul { list-style-type: circle; }
.article-body ol ol { list-style-type: lower-alpha; }
.article-body li { margin-bottom: .45em; }
.article-body li::marker { color: var(--accent); font-weight: 700; }

.article-body blockquote {
    margin: 1.5em 0;
    padding: .2em 1.1em;
    border-inline-start: 4px solid var(--accent);
    color: var(--text-muted);
    font-style: italic;
}

.article-body code,
.article-body .art-badge,
.article-body kbd {
    font-size: .88em;
    border-radius: 4px;
}
.article-body code {
    background: var(--bg-sunken);
    color: var(--accent-strong);
    padding: .1em .4em;
    font-family: Consolas, "Courier New", monospace;
}
.article-body pre {
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1em;
    overflow-x: auto;      /* code must scroll itself, never the page */
    margin: 0 0 1.15em;
}
.article-body pre code { background: none; padding: 0; }

.article-body kbd {
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    padding: .1em .45em;
    font-family: inherit;
}

.art-divider {
    height: 1px;
    background: var(--border);
    border: 0;
    margin: 2.2em 0;
}

/* --- images --------------------------------------------------------------- */

.art-figure {
    margin: 1.8em 0;
    text-align: center;
}
.art-figure img,
.article-body img {
    max-width: 100%;
    height: auto;          /* honour the intrinsic ratio from width/height attrs */
    border-radius: 8px;
    border: 1px solid var(--border);
}
.art-caption,
.art-figure figcaption {
    margin-top: .6em;
    color: var(--text-muted);
    font-size: .88rem;
    line-height: 1.5;
}

/* --- callouts ------------------------------------------------------------- */

.art-intro,
.art-note,
.art-tip,
.art-warn,
.art-success {
    margin: 1.5em 0;
    padding: 1em 1.15em;
    border-radius: 8px;
    border-inline-start: 4px solid;
    background: var(--bg-sunken);
}
.art-box-title {
    font-weight: 700;
    margin-bottom: .35em;
    color: inherit;
}

/* Each callout takes its accent from a status token, so a site that restyles
   "warning" restyles these too. */
.art-intro   { border-color: var(--accent);  background: var(--accent-soft); }
.art-note    { border-color: var(--info);    }
.art-tip     { border-color: var(--success); }
.art-warn    { border-color: var(--warning); }
.art-success { border-color: var(--success); }

.art-note .art-box-title    { color: var(--info); }
.art-tip .art-box-title     { color: var(--success); }
.art-warn .art-box-title    { color: var(--warning); }
.art-success .art-box-title { color: var(--success); }

.art-lead {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 1.5em;
}

/* --- cards, steps, flows, key-values -------------------------------------- */

.art-card {
    margin: 1.5em 0;
    padding: 1.1em 1.25em;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}
.art-card-title { font-weight: 700; color: var(--text-heading); margin-bottom: .4em; }

.art-steps { margin: 1.5em 0; counter-reset: art-step; }
.art-step {
    display: flex;
    gap: .85em;
    align-items: flex-start;
    padding: .7em 0;
    border-bottom: 1px solid var(--border);
}
.art-step:last-child { border-bottom: 0; }
.art-step-num {
    flex: 0 0 auto;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .85em;
}
.art-step-text { flex: 1 1 auto; }

.art-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5em;
    margin: 1.5em 0;
}
.art-flow-step {
    padding: .4em .9em;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600;
    font-size: .9em;
}
/* The arrow is drawn by CSS and mirrors with the text, so one markup shape
   works in both directions instead of hard-coding ← or →. */
.art-flow-step + .art-flow-step::before {
    content: "\2192";
    margin-inline-end: .55em;
    color: var(--text-muted);
    font-weight: 400;
}
[dir="rtl"] .art-flow-step + .art-flow-step::before { content: "\2190"; }

.art-kv {
    margin: 1.5em 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.art-kv-row { display: flex; border-bottom: 1px solid var(--border); }
.art-kv-row:last-child { border-bottom: 0; }
.art-kv-key {
    flex: 0 0 34%;
    padding: .6em .9em;
    background: var(--bg-sunken);
    font-weight: 600;
    color: var(--text-heading);
}
.art-kv-val { flex: 1 1 auto; padding: .6em .9em; }

.art-badge {
    display: inline-block;
    padding: .18em .6em;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600;
    font-size: .82em;
}

/* --- tables --------------------------------------------------------------- */

/* A table is the one block that legitimately outgrows the measure. Let it use
   the full column and scroll on its own rather than pushing the page sideways. */
.article-body .art-table,
.article-body table {
    width: 100%;
    margin: 1.5em 0;
    border-collapse: collapse;
    border: 1px solid var(--border);
    font-size: .95rem;
}
.article-body th,
.article-body td {
    padding: .6em .8em;
    border: 1px solid var(--border);
    text-align: start;
    vertical-align: top;
}
.article-body th {
    background: var(--bg-sunken);
    color: var(--text-heading);
    font-weight: 700;
}
.article-body tbody tr:nth-child(even) { background: var(--bg-sunken); }

.art-table-scroll { overflow-x: auto; margin: 1.5em 0; }

/* --- document layout -------------------------------------------------------
   The shape A1-Soft 2026's user guides use, and the reason they read as a
   manual rather than as a long page: a cover, then numbered cards, each one a
   self-contained answer to a question. A reader scanning for "how do I add a
   student" finds the numbered card and stops there.
   -------------------------------------------------------------------------- */

/* Cover. Sets the document apart from the page it sits on and states what the
   guide covers before any of the detail. */
.art-cover {
    margin: 0 0 1.6em;
    padding: 2em 2.2em;
    border-radius: 14px;
    /* A dark overlay over the accent gradient. The accent alone is not reliably
       dark — a theme can set it to a mid orange — and white text on it fails
       contrast. Compositing a fixed dark layer on top guarantees the text is
       readable whatever palette the site is using. */
    background:
        linear-gradient(135deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .18)),
        linear-gradient(135deg, var(--accent-strong), var(--accent));
    text-align: center;
    /* White explicitly, not --accent-contrast: that token means "what reads on a
       button of the accent colour", which a theme is free to make dark. */
    color: #fff;
}
/* The !important here is deliberate and is the only place in this file that uses
   it. Measured on the school theme: the cover title computed to rgb(0,48,21) —
   dark green on a dark gradient, effectively invisible — because a theme rule
   inside a @media block was setting every heading's colour and outranked a
   selector two classes deep. Text on this block sits on a dark overlay by
   construction, so its colour is a readability guarantee, not a style
   preference, and a theme must not be able to override it into invisibility. */
.art-cover h2,
.art-cover h3,
.art-cover .art-cover-title {
    margin: 0 0 .15em;
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    font-weight: 700;
    color: #fff !important;
    border: 0;
    padding: 0;
}
/* The other-language name of the same thing, quieter than the title but not so
   faint it stops being readable on the gradient. */
.art-cover-sub {
    margin: 0 0 .9em;
    font-size: 1rem;
    color: rgba(255, 255, 255, .9) !important;
}
.art-cover p { color: rgba(255, 255, 255, .96) !important; margin: 0 0 1em; }
.art-cover strong,
.art-cover a { color: #fff !important; }
.art-cover > :last-child { margin-bottom: 0; }

/* Where this document sits — module, area, kind. */
.art-crumb {
    display: inline-block;
    padding: .45em 1.2em;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: var(--accent-contrast);
    font-size: .85rem;
}

/* A numbered section. */
.art-sec {
    margin: 0 0 1.4em;
    padding: 1.3em 1.5em;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.art-sec-head {
    display: flex;
    align-items: center;
    gap: .7em;
    /* The number leads on whichever side the language starts from. */
    flex-direction: row-reverse;
    justify-content: flex-end;
    padding-bottom: .7em;
    margin-bottom: 1em;
    border-bottom: 1px solid var(--border);
}
[dir="ltr"] .art-sec-head { flex-direction: row; }

.art-sec-num {
    flex: 0 0 auto;
    width: 2em;
    height: 2em;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 700;
    font-size: .95rem;
}
/* The card head already draws the dividing rule, so the plain-h2 underline set
   further up would be a second line right beneath it. Written with the ancestor
   selectors it needs to outrank `.article-body h2`. */
.article-body .art-sec .art-sec-title,
.art-sec .art-sec-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-strong);
    border: 0;
    padding: 0;
}
/* The English name of an Arabic section (or the reverse). Deliberately smaller
   and muted: it is a label for someone scanning, not a second heading. */
.art-sec-en {
    font-size: .85rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-inline-start: auto;
}

/* An inline reference to something on screen — a button, a field, a tab. Set
   apart so "press Save" cannot be misread as ordinary prose. */
.art-ui {
    display: inline-block;
    padding: .12em .6em;
    margin: 0 .15em;
    border-radius: 5px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600;
    font-size: .9em;
    white-space: nowrap;
}

/* --- FAQ -------------------------------------------------------------------
   Built on <details>, so it opens and closes with no JavaScript, is keyboard
   operable for free, and — importantly for a manual — Ctrl+F still finds text
   inside a closed answer in current browsers.
   -------------------------------------------------------------------------- */

.art-faq { margin: 0 0 1.4em; }
.art-faq details {
    margin-bottom: .5em;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.art-faq summary {
    padding: .8em 1.1em;
    font-weight: 600;
    color: var(--accent-strong);
    cursor: pointer;
    list-style: none;          /* the default triangle points the wrong way in RTL */
    display: flex;
    align-items: center;
    gap: .6em;
}
.art-faq summary::-webkit-details-marker { display: none; }
.art-faq summary::before {
    content: "\25B8";           /* ▸ — rotated by CSS, so one glyph serves both directions */
    font-size: .8em;
    transition: transform .15s ease;
}
[dir="rtl"] .art-faq summary::before { transform: rotate(180deg); }
.art-faq details[open] summary::before { transform: rotate(90deg); }
.art-faq details[open] summary { border-bottom: 1px solid var(--border); }
.art-faq details > :not(summary) { padding: .3em 1.1em; }
.art-faq details > :last-child { padding-bottom: .9em; }

@media (prefers-reduced-motion: reduce) {
    .art-faq summary::before { transition: none; }
}

/* --- contents ------------------------------------------------------------- */

.art-toc {
    margin: 0 0 2.2em;
    padding: 1.1em 1.35em;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--accent);
    border-radius: 8px;
}
.art-toc-title {
    margin: 0 0 .6em;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-heading);
    border: 0;
    padding: 0;
}
.art-toc-list { margin: 0; padding-inline-start: 1.3em; }
.art-toc-list li { margin-bottom: .3em; }
/* An h3 sits under its h2 so the list mirrors the article outline. */
.art-toc-l3 { padding-inline-start: 1.1em; font-size: .93em; list-style-type: circle; }
.art-toc-l4 { padding-inline-start: 2.2em; font-size: .9em;  list-style-type: square; }
.art-toc a { color: var(--link); text-decoration: none; }
.art-toc a:hover { text-decoration: underline; }

/* --- byline --------------------------------------------------------------- */

.art-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1em;
    margin-bottom: 1.8em;
    padding-bottom: .9em;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .88rem;
}

/* --- motion --------------------------------------------------------------- */

/* Anchor jumps glide by default, but honour a system preference for less
   movement — smooth scrolling is a known migraine and nausea trigger. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* --- print ---------------------------------------------------------------- */

@media print {
    .article-body { max-width: none; color: #000; font-size: 11pt; }
    .article-body h2, .article-body h3, .article-body h4 { color: #000; }
    /* Never strand a heading at the foot of a page. */
    .article-body h2, .article-body h3, .article-body h4 { break-after: avoid; }
    .art-figure, .art-card, .art-step, .article-body blockquote { break-inside: avoid; }
    .art-toc { display: none; }
    /* On paper a link's destination is lost unless it is written out. */
    .article-body a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: .85em;
        word-break: break-all;
    }
}