/* Document foundation, not a component skin. Theme is resolved by the pre-boot script. */
*, *::before, *::after { box-sizing: border-box; }
/* Every native checkbox, radio, range and progress bar wears the product's own accent.
   On :root so it inherits to every control, and a token so no theme is second-guessed.
   Deliberately not `appearance: none`: a rebuilt control loses the platform's forced-
   colours rendering and, on some assistive stacks, its role — this changes the one thing
   that was wrong and keeps everything that was right. */
:root { accent-color: var(--rw-control-accent); }
html {
    font-family: var(--rw-font-body);
    font-size: 100%;
    line-height: var(--rw-leading-body);
    color: var(--rw-ink);
    background: var(--rw-ground);
    /* The concept's courtyard light: one warm radial from above the fold, fixed so it does
       not scroll with the page. No wallpaper behind data — the glow token is a whisper
       (5% brass) and the girih stays reserved for deliberate night moments. */
    background-image: radial-gradient(circle at 50% -8%, var(--rw-ground-glow), transparent 52%);
    background-attachment: fixed;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-block: var(--rw-sticky-clearance);
}
body { margin: 0; min-inline-size: 0; }
#app { min-block-size: 100dvh; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
h1, h2, h3 { font-family: var(--rw-font-body); font-weight: 700; line-height: var(--rw-leading-display); }
/* The page title speaks in the display face, as the public site does. */
h1 { font-size: var(--rw-text-heading); font-family: var(--rw-font-display); font-weight: 400; letter-spacing: -.005em; }
p, h1, h2, h3, h4, h5, h6, a, label, summary { overflow-wrap: anywhere; }
/* Headings balance their lines and prose avoids a lone last word ("…the masjid holds / it"). */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
img, picture, video, canvas, svg { max-inline-size: 100%; }
img, video { block-size: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    min-block-size: var(--rw-target-min);
    max-inline-size: 100%;
}
button, [role="button"], summary { min-inline-size: var(--rw-target-min); min-block-size: var(--rw-target-min); }
textarea { max-inline-size: 100%; min-block-size: 6rem; resize: vertical; }
a { color: var(--rw-accent-text); text-underline-offset: .2em; }
/* Class-less prose links had no hover at all; zero specificity, so every named link keeps its own. */
:where(a:not([class])):hover { text-decoration-thickness: 2px; }
:where(button, input, select, textarea) { border: 1px solid var(--rw-control-border); background: var(--rw-surface); }
:where(button, a, input, select, textarea, summary, [tabindex], [contenteditable]:not([contenteditable="false"]), audio[controls], video[controls], area[href]):focus-visible {
    outline: 2px solid var(--rw-focus-dark);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--rw-focus-light), 0 0 0 6px var(--rw-focus-light);
}
:where([id], button, a, input, select, textarea, summary, [tabindex], [contenteditable]:not([contenteditable="false"]), audio[controls], video[controls], area[href]) {
    scroll-margin-block: var(--rw-sticky-clearance);
}
[hidden] { display: none !important; }
:lang(ar), :lang(ur) { font-family: var(--rw-font-arabic); line-height: var(--rw-leading-arabic); }
/* Amiri's small x-height reads a size smaller at 14px; one token moves every hint, meta line and chip. */
:root:lang(ar), :root:lang(ur) { --rw-text-small: .9375rem; }
/* Class rules set 1.04–1.25 on these titles and beat the :lang 1.9; wrapped, marked Amiri collides. */
:lang(ar) :is(.ic-hero__title, .ic-nextclass__title, .ic-outage__title),
:lang(ur) :is(.ic-hero__title, .ic-nextclass__title, .ic-outage__title) { line-height: var(--rw-leading-arabic-display); }
bdi, [dir="auto"] { unicode-bidi: isolate; }
.rw-identifier { direction: ltr; unicode-bidi: isolate; }
.rw-icon-fixed { direction: ltr; }
.rw-sr-only {
    position: absolute; inline-size: 1px; block-size: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.rw-display { font-family: var(--rw-font-display); font-weight: 400; }

/* The concept's eyebrow kicker, as one foundation recipe: .72rem, .28em tracking,
   uppercase, 700. The concept letters it in raw brass, which measures 2.90:1 on
   limestone — the nearest AA token is --rw-accent-text (5.74:1 on limestone, 6.65:1 on
   parchment), so the eyebrow keeps the concept's shape and AA's numbers (recorded
   adaptation, task-6a-report.md). Both spellings on purpose: .ic-eyebrow is the retained
   markup API; .rw-eyebrow is the foundation name new work reaches for. */
.rw-eyebrow, .ic-eyebrow {
    font-size: .72rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--rw-accent-text);
}
/* Tracking breaks cursive joins and .72rem Amiri is about 11px: in Arabic script every tracked kicker goes plain. */
:lang(ar) :is(.rw-eyebrow, .ic-eyebrow, .ic-nextclass__label, .ic-nextclass__when span, .ic-niche__kicker, .rw-read__kicker, .rw-read__lang, .ic-mockclass__k, .ic-mockclass__bar),
:lang(ur) :is(.rw-eyebrow, .ic-eyebrow, .ic-nextclass__label, .ic-nextclass__when span, .ic-niche__kicker, .rw-read__kicker, .rw-read__lang, .ic-mockclass__k, .ic-mockclass__bar) {
    letter-spacing: 0; text-transform: none; font-size: var(--rw-text-small);
}

/* ── The appearance crossfade ─────────────────────────────────────────────────────────
   Day does not become night in one frame. `theme.js` puts `.rw-theming` on the root for the
   length of the change and takes it off again, so the transition exists only while the
   appearance is actually changing — nothing here slows down a hover, a press or a route.
   Colour, edges and marks are what change between the two worlds, so those are what move;
   layout is untouched, so nothing shifts under the reader's hand while it happens. */
@media (prefers-reduced-motion: no-preference) {
    html.rw-theming,
    html.rw-theming *,
    html.rw-theming *::before,
    html.rw-theming *::after {
        /* 220ms, spelled as --rw-motion-theme since Task 7F rather than six times as a literal:
           the appearance change is one of the named durations now, so no other screen has to
           guess at it. theme.js keeps its own 260ms settle, which is this plus the margin it
           needs to take the class off after the transition has finished. */
        transition: background-color var(--rw-motion-theme) ease, border-color var(--rw-motion-theme) ease,
                    color var(--rw-motion-theme) ease, fill var(--rw-motion-theme) ease,
                    stroke var(--rw-motion-theme) ease, box-shadow var(--rw-motion-theme) ease;
    }
}