html, body {
    /* height:100% lets the layout flex column push the footer down without a
       hardcoded viewport calculation. */
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.body-content {
    flex: 1;
}

.main {
    flex: 1 1 auto;
    min-height: 0;
}

.content {
    width: 100%;
}

code {
    font-family: var(--ql-font-mono);
}

a {
    color: var(--accent-foreground-rest);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ── Shell: header and footer ───────────────────────────────────────────────
   The Fluent header defaults to the accent blue, which the teal wordmark cannot
   sit on legibly. Terminal ink is both readable and the actual brand surface.
   Selector doubles up on .header to match Fluent's scoped specificity; app.css
   is linked last, so the tie resolves here. */

.header.ql-header {
    background-color: var(--ql-surface-ink);
    border-bottom: 1px solid var(--ql-surface-border);
}

.ql-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
}

.ql-lockup:hover {
    text-decoration: none;
}

.ql-lockup .ql-wordmark {
    font-size: 1.2rem;
}

.ql-nav {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
}

.ql-nav-link {
    color: var(--ql-text-fg);
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
}

.ql-nav-link:hover {
    color: var(--ql-accent-teal);
    text-decoration: none;
}

.ql-tag {
    font-family: var(--ql-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    color: var(--ql-text-fg-muted);
    border: 1px solid var(--ql-surface-border);
    border-radius: var(--ql-radius-sm);
    padding: 0.1rem 0.4rem;
}

.footer.ql-footer {
    border-top: 1px solid var(--ql-paper-border);
    color: var(--ql-text-ink-muted);
    font-size: 0.8rem;
}

/* ── Standing demo warning ──────────────────────────────────────────────────
   A floating yellow card rather than a full-width strip, so it reads as a
   dismissible popup instead of part of the chrome. Same width as .ql-page so
   it lines up with page content. */

.ql-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    max-width: 42rem;
    margin: 1.25rem auto 0;
    padding: 0.75rem 0.875rem;
    background: var(--ql-notice-bg);
    color: var(--ql-notice-fg);
    border: 1px solid var(--ql-notice-border);
    border-radius: var(--ql-radius-md);
    box-shadow: 0 2px 10px var(--ql-notice-shadow);
    font-size: 0.875rem;
    line-height: 1.45;
}

.ql-notice::before {
    content: "";
    flex: 0 0 auto;
    /* Centres the dot on the first line of text rather than the whole block. */
    margin-top: 0.47em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ql-notice-mark);
}

.ql-notice strong {
    font-weight: 600;
}

.ql-notice-text {
    flex: 1 1 auto;
}

.ql-notice-dismiss {
    flex: 0 0 auto;
    appearance: none;
    background: none;
    border: 0;
    border-radius: var(--ql-radius-sm);
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0.1rem 0.3rem;
    opacity: 0.6;
}

.ql-notice-dismiss:hover,
.ql-notice-dismiss:focus-visible {
    opacity: 1;
    background: var(--ql-notice-border);
}

/* ── Page scaffolding ───────────────────────────────────────────────────────
   Two containers own horizontal rhythm so pages stop inventing their own inline
   margins: .ql-page for reading widths, .ql-page-wide for grids and the log
   viewport. Both use the same side gutter so the gutter never jumps between
   pages. Nothing inside sets its own max-width — that is what left the text
   ending short of the code block and looking ragged. */

.ql-page {
    max-width: 42rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.ql-page-wide {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

/* FocusOnNavigate parks focus on the page heading for screen readers. The ring
   it paints around the wordmark is noise for sighted users, and tabindex="-1"
   elements are never reachable by keyboard, so hiding it costs nothing. */
h1:focus,
[tabindex="-1"]:focus {
    outline: none;
}

.ql-hero-title {
    margin: 0 0 1rem;
    font-size: 2.5rem;
}

.ql-lede {
    margin: 0 0 0.75rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ql-text-ink);
}

.ql-muted {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ql-text-ink-muted);
}

.ql-section {
    margin-top: 2.5rem;
}

.ql-section-title {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ql-text-ink-muted);
}

/* Terminal block: same ink surface as the tail viewport, so the snippet reads
   as "this is the thing you will see" rather than generic sample code. */
.ql-terminal {
    margin: 0;
    padding: 1rem 1.125rem;
    background: var(--ql-surface-ink);
    color: var(--ql-text-fg);
    border: 1px solid var(--ql-surface-border);
    border-radius: var(--ql-radius-md);
    font-family: var(--ql-font-mono);
    font-size: 0.8125rem;
    line-height: 1.7;
    overflow-x: auto;
}

.ql-terminal-prompt {
    color: var(--ql-accent-teal);
    user-select: none;
}

.ql-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}