/* ==========================================================================
   Forums — index, board, thread, moderation.
   Same tokens as courses.css so the two features look like one platform.
   RTL-safe: logical properties only, never left/right.
   ========================================================================== */

:root {
    --f-accent:      #650640;
    --f-accent-soft: rgba(101, 6, 64, 0.07);
    --f-accent-line: rgba(101, 6, 64, 0.16);
    --f-card:        #ffffff;
    --f-text:        #33303a;
    --f-subtle:      #6b7280;
    --f-border:      rgba(101, 6, 64, 0.12);
    --f-radius:      14px;
    --f-success:     #15803d;
    --f-warn:        #b45309;
    --f-danger:      #b91c1c;
}

/* The page itself is full width: it is a stack of .band sections (styles.css)
   whose .band-inner sets the reading width. */
.fo-page { display: block; padding: 0; }

/* The site has no global border-box; scoped here for the same reason it is
   scoped in courses.css. */
.fo-page *,
.fo-page *::before,
.fo-page *::after,
.fo-limit-dialog * { box-sizing: border-box; }

/* Buttons: .btn-primary / .btn-ghost live in admin.css, which student pages do
   not load. Restated here, scoped, exactly as the course pages do. */
.fo-page .btn-primary,
.fo-page .btn-ghost,
.fo-limit-dialog .btn-primary,
.fo-limit-dialog .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border-radius: 9px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.fo-page .btn-primary,
.fo-limit-dialog .btn-primary { background: var(--f-accent); color: #fff; }

.fo-page .btn-primary:hover,
.fo-limit-dialog .btn-primary:hover { background: #4a0430; color: #fff; }

.fo-page .btn-ghost,
.fo-limit-dialog .btn-ghost {
    background: var(--f-card);
    border-color: var(--f-border);
    color: var(--f-accent);
}

.fo-page .btn-ghost:hover,
.fo-limit-dialog .btn-ghost:hover { background: var(--f-accent-soft); }

.fo-page .btn-tiny,
.fo-limit-dialog .btn-tiny { padding: 0.32rem 0.7rem; font-size: 0.8rem; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.fo-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block-end: 1.1rem;
    margin-block-end: 1.5rem;
    border-block-end: 1px solid var(--f-accent-line);
}

.fo-hero h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0 0 0.3rem;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.2;
    color: var(--f-accent);
    letter-spacing: -0.015em;
}

.fo-hero p { margin: 0; color: var(--f-subtle); font-size: 0.94rem; }
.fo-hero-icon { font-size: 0.85em; opacity: 0.8; }

.fo-crumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 1rem;
    font-size: 0.84rem;
    color: var(--f-subtle);
}

.fo-crumbs a { color: var(--f-accent); text-decoration: none; font-weight: 600; }
.fo-crumbs a:hover { text-decoration: underline; }
.fo-crumbs i { font-size: 0.65rem; opacity: 0.5; }

/* ── Notices ──────────────────────────────────────────────────────────── */
.fo-notice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    margin-block-end: 1.25rem;
    border: 1px solid var(--f-accent-line);
    border-radius: 11px;
    background: var(--f-accent-soft);
    font-size: 0.88rem;
    color: var(--f-text);
}

.fo-notice i { color: var(--f-accent); }

.fo-notice--warn {
    border-color: rgba(180, 83, 9, 0.3);
    background: rgba(180, 83, 9, 0.08);
}

.fo-notice--warn i { color: var(--f-warn); }

/* ── Board list ───────────────────────────────────────────────────────── */
.fo-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }

.fo-cat {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-card);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.fo-cat:hover {
    border-color: var(--f-accent-line);
    box-shadow: 0 8px 22px rgba(101, 6, 64, 0.09);
}

.fo-cat.is-locked { opacity: 0.75; }

.fo-cat-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 12px;
    background: var(--f-accent-soft);
    color: var(--f-accent);
    font-size: 1.1rem;
}

.fo-cat-body { flex: 1 1 auto; min-inline-size: 0; }

.fo-cat-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.fo-cat-title a { color: var(--f-text); text-decoration: none; }
.fo-cat-title a:hover { color: var(--f-accent); }

.fo-cat-desc { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--f-subtle); }

.fo-cat-note {
    margin: 0.4rem 0 0;
    font-size: 0.79rem;
    color: var(--f-warn);
}

.fo-cat-stats {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    font-size: 0.78rem;
    color: var(--f-subtle);
    text-align: end;
}

.fo-cat-stats strong { color: var(--f-text); font-size: 0.9rem; }
.fo-cat-when { opacity: 0.8; }

/* ── Tags and badges ──────────────────────────────────────────────────── */
.fo-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: rgba(107, 114, 128, 0.14);
    color: var(--f-subtle);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.fo-tag--staff { background: rgba(101, 6, 64, 0.12); color: var(--f-accent); }
.fo-tag--sub   { background: rgba(180, 83, 9, 0.14);  color: var(--f-warn); }
.fo-tag--open  { background: rgba(21, 128, 61, 0.13); color: var(--f-success); }

.fo-badge {
    display: inline-block;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: rgba(101, 6, 64, 0.12);
    color: var(--f-accent);
}

.fo-badge.is-admin { background: var(--f-accent); color: #fff; }
.fo-badge.is-mod   { background: rgba(180, 83, 9, 0.16); color: var(--f-warn); }
.fo-badge.is-coord { background: rgba(21, 128, 61, 0.14); color: var(--f-success); }

/* ── Latest activity ──────────────────────────────────────────────────── */
.fo-recent { margin-block-start: 2.25rem; }
.fo-recent h2 { margin: 0 0 0.75rem; font-size: 1.05rem; color: var(--f-accent); }

.fo-recent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.fo-recent-list li {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--f-border);
    border-radius: 10px;
    background: var(--f-card);
}

.fo-recent-title {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--f-text);
    text-decoration: none;
}

.fo-recent-title:hover { color: var(--f-accent); }

.fo-recent-meta { display: block; margin-block-start: 0.15rem; font-size: 0.76rem; color: var(--f-subtle); }
.fo-recent-meta a { color: var(--f-accent); text-decoration: none; }

/* ── Filters ──────────────────────────────────────────────────────────── */
.fo-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 1.25rem;
}

.fo-search { position: relative; flex: 1 1 220px; min-inline-size: 180px; }

.fo-search > i {
    position: absolute;
    inset-inline-start: 0.85rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--f-subtle);
    font-size: 0.85rem;
    pointer-events: none;
}

.fo-search input {
    inline-size: 100%;
    padding: 0.58rem 0.9rem;
    padding-inline-start: 2.3rem;
    border: 1px solid var(--f-border);
    border-radius: 10px;
    background: var(--f-card);
    font: inherit;
    font-size: 0.88rem;
    color: var(--f-text);
}

.fo-search input:focus {
    outline: none;
    border-color: var(--f-accent);
    box-shadow: 0 0 0 3px var(--f-accent-soft);
}

.fo-chip {
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--f-border);
    border-radius: 999px;
    background: var(--f-card);
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--f-subtle);
    text-decoration: none;
}

.fo-chip:hover { border-color: var(--f-accent-line); color: var(--f-accent); }
.fo-chip.is-on { background: var(--f-accent); border-color: var(--f-accent); color: #fff; }

/* ── New topic form ───────────────────────────────────────────────────── */
.fo-new,
.fo-replybox {
    display: grid;
    gap: 0.75rem;
    padding: 1.1rem 1.2rem;
    margin-block-end: 1.5rem;
    border: 1px solid var(--f-accent-line);
    border-radius: var(--f-radius);
    background: var(--f-card);
}

.fo-new .field,
.fo-replybox .field { display: flex; flex-direction: column; gap: 0.3rem; }

.fo-new .field-label {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--f-text);
}

.fo-new input[type="text"],
.fo-new textarea,
.fo-replybox textarea,
.fo-limit-dialog input,
.fo-limit-dialog select {
    inline-size: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--f-border);
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 0.9rem;
    color: var(--f-text);
    resize: vertical;
}

.fo-new input:focus,
.fo-new textarea:focus,
.fo-replybox textarea:focus,
.fo-limit-dialog input:focus,
.fo-limit-dialog select:focus {
    outline: none;
    border-color: var(--f-accent);
    box-shadow: 0 0 0 3px var(--f-accent-soft);
}

.fo-new-actions,
.fo-replybox-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.fo-status { font-size: 0.82rem; color: var(--f-subtle); }
.fo-status.is-bad { color: var(--f-danger); font-weight: 600; }
.fo-status.is-ok  { color: var(--f-success); font-weight: 600; }

.fo-replying-to { margin: 0; font-size: 0.82rem; color: var(--f-subtle); }

/* ── Thread list ──────────────────────────────────────────────────────── */
.fo-threads { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.fo-thread {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--f-border);
    border-radius: 12px;
    background: var(--f-card);
    transition: border-color 0.15s ease;
}

.fo-thread:hover { border-color: var(--f-accent-line); }

.fo-thread.is-pinned {
    border-color: var(--f-accent-line);
    background: linear-gradient(0deg, var(--f-card), var(--f-accent-soft));
}

.fo-thread-avatar,
.fo-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 50%;
    background: var(--f-accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
}

.fo-avatar.is-mod   { background: var(--f-warn); }
.fo-avatar.is-coord { background: var(--f-success); }

.fo-thread-body { flex: 1 1 auto; min-inline-size: 0; }

.fo-thread-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0;
    font-size: 0.97rem;
    font-weight: 600;
    line-height: 1.35;
}

.fo-thread-title a { color: var(--f-text); text-decoration: none; }
.fo-thread-title a:hover { color: var(--f-accent); }

.fo-pin  { color: var(--f-accent); font-size: 0.8rem; }
.fo-lock { color: var(--f-warn);   font-size: 0.8rem; }

.fo-thread-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin: 0.2rem 0 0;
    font-size: 0.77rem;
    color: var(--f-subtle);
}

.fo-thread-stats {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.74rem;
    color: var(--f-subtle);
}

.fo-count strong { display: block; font-size: 1rem; color: var(--f-accent); }
.fo-count.is-zero strong { color: var(--f-subtle); }

/* ── Thread view ──────────────────────────────────────────────────────── */
.fo-thread-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-block-end: 1.5rem;
}

.fo-thread-head h1 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 0.3rem;
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    line-height: 1.25;
    color: var(--f-text);
}

.fo-thread-sub { margin: 0; font-size: 0.82rem; color: var(--f-subtle); }

.fo-mod-bar { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* styles.css sets `form { max-width: 800px; margin-bottom: 40px }` globally.
   In a centre-aligned flex row that 40px makes the form box taller than its
   neighbours, so the button inside it floats above them. Same rule as
   courses.css — restated because forum_thread.php does not load that file. */
.inline-form { display: inline-flex; align-items: center; margin: 0; }

.fo-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }

.fo-posts--opening { margin-block-end: 1.75rem; }

.fo-posts--opening > .fo-post > .fo-post-main {
    border-color: var(--f-accent-line);
    background: linear-gradient(0deg, var(--f-card), var(--f-accent-soft));
}

.fo-replies-heading {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    color: var(--f-accent);
}

.fo-post-main {
    display: flex;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--f-border);
    border-radius: 12px;
    background: var(--f-card);
}

.fo-post.is-removed .fo-post-main { opacity: 0.7; background: rgba(107, 114, 128, 0.05); }

.fo-post-body { flex: 1 1 auto; min-inline-size: 0; }

.fo-post-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin: 0 0 0.4rem;
    font-size: 0.84rem;
    color: var(--f-text);
}

.fo-when, .fo-edited { font-size: 0.75rem; color: var(--f-subtle); font-weight: 400; }
.fo-edited { font-style: italic; }

.fo-post-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--f-text);
    overflow-wrap: anywhere;
}

.fo-post-text a { color: var(--f-accent); }

.fo-quote {
    display: block;
    padding-inline-start: 0.7rem;
    border-inline-start: 3px solid var(--f-accent-line);
    color: var(--f-subtle);
    font-style: italic;
}

.fo-removed-note { color: var(--f-subtle); font-style: italic; }

.fo-reveal { margin-block-start: 0.5rem; font-size: 0.82rem; }
.fo-reveal summary { cursor: pointer; color: var(--f-accent); }

.fo-post-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-block-start: 0.6rem;
}

/* Bare `button { background: #650640; color: white }` in styles.css would make
   these solid blocks, so they state their own colours. */
.fo-act {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--f-subtle);
    cursor: pointer;
}

.fo-act:hover { color: var(--f-accent); background: none; }
.fo-act i { font-size: 0.72rem; }

.fo-del-btn:hover, .fo-limit-btn:hover { color: var(--f-danger); }

/* Nesting. The indent stops at the configured depth, so a long argument does
   not walk off the side of a phone. */
.fo-replies {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
    padding-inline-start: 1.5rem;
    border-inline-start: 2px solid var(--f-accent-soft);
}

@media (max-width: 560px) {
    .fo-replies { padding-inline-start: 0.75rem; }
}

/* ── Inline edit ──────────────────────────────────────────────────────── */
.fo-edit textarea {
    inline-size: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--f-accent-line);
    border-radius: 9px;
    font: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

.fo-edit-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
    flex-wrap: wrap;
}

/* ── Pager ────────────────────────────────────────────────────────────── */
.fo-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-block-start: 1.75rem;
}

.fo-pager-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--f-border);
    border-radius: 10px;
    background: var(--f-card);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--f-accent);
    text-decoration: none;
}

.fo-pager-link:hover { background: var(--f-accent-soft); }
.fo-pager-of { font-size: 0.82rem; color: var(--f-subtle); }

/* ── Empty states ─────────────────────────────────────────────────────── */
.fo-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--f-subtle);
}

.fo-empty i { font-size: 2.3rem; color: var(--f-accent); opacity: 0.32; }
.fo-empty h2 { margin: 0.8rem 0 0.3rem; color: var(--f-text); font-size: 1.15rem; }
.fo-empty p { margin: 0 0 1rem; font-size: 0.9rem; }
.fo-empty a { color: var(--f-accent); }

/* ── Moderation: report queue ─────────────────────────────────────────── */
.fo-queue-count {
    display: inline-block;
    margin-inline-start: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--f-danger);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.fo-reports { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.fo-report {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(185, 28, 28, 0.2);
    border-radius: 12px;
    background: rgba(185, 28, 28, 0.03);
}

.fo-report-body { flex: 1 1 320px; min-inline-size: 0; }

.fo-report-head {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    color: var(--f-text);
}

.fo-report-head a { color: var(--f-accent); }

.fo-report-reason {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--f-danger);
}

.fo-report-quote {
    margin: 0;
    padding: 0.6rem 0.8rem;
    border-inline-start: 3px solid var(--f-accent-line);
    background: #fff;
    border-radius: 0 8px 8px 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--f-text);
    overflow-wrap: anywhere;
}

.fo-report-author { margin: 0.3rem 0 0; font-size: 0.76rem; color: var(--f-subtle); }

.fo-report-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
    align-items: flex-start;
}

/* ── Limit dialog ─────────────────────────────────────────────────────── */
.fo-limit-dialog {
    inline-size: min(460px, 92vw);
    padding: 1.4rem;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: var(--f-text);
}

.fo-limit-dialog::backdrop { background: rgba(24, 6, 18, 0.5); }

.fo-limit-dialog h2 { margin: 0 0 0.3rem; font-size: 1.1rem; color: var(--f-accent); }
.fo-limit-hint { margin: 0 0 1rem; font-size: 0.82rem; color: var(--f-subtle); }

.fo-limit-dialog .field { display: flex; flex-direction: column; gap: 0.3rem; margin-block-end: 0.85rem; }
.fo-limit-dialog .field-label { font-size: 0.83rem; font-weight: 600; }
.fo-limit-dialog .field-label em { font-weight: 400; font-style: normal; color: var(--f-subtle); }

.fo-limit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.fo-limit-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-block-start: 0.5rem;
}

@media (max-width: 560px) {
    .fo-cat { flex-wrap: wrap; }
    .fo-cat-stats { flex-direction: row; gap: 0.75rem; inline-size: 100%; justify-content: flex-start; }
    .fo-thread { flex-wrap: wrap; }
    .fo-thread-stats { flex-direction: row; gap: 0.75rem; }
    .fo-limit-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ROUND 3
   ========================================================================== */

/* `hidden` is a UA rule, and ANY author `display` declaration beats it however
   low its specificity. `.fo-new { display: grid }` therefore kept the
   new-topic form on screen permanently, which is why the board pages opened
   with an empty Title and Your post staring at you. Same trap as the reward
   type picker; fixed here for the whole feature rather than per component. */
.fo-page [hidden],
.fo-limit-dialog [hidden] { display: none !important; }

/* styles.css sets `form { max-width: 800px }`, which caps the composer well
   short of the column it sits in. */
.fo-page form { max-inline-size: none; }

/* ── The author panel ─────────────────────────────────────────────────────
   A post used to be an avatar and a bubble, which reads like a chat app. The
   panel carries what a bubble cannot: who this person is to the academy, how
   long they have been here, and what they have finished.

   Desktop: a tinted 192px column flush with the card edge, three tiers -
   identity (avatar, name, role), facts (joined, contributions), badges with
   their names. Nothing in it is smaller than 12px. */
.fo-post-main { padding: 0; gap: 0; overflow: hidden; }

.fo-post-body { padding: 1.1rem 1.35rem 1.2rem; }

.fo-author {
    flex: 0 0 192px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.35rem 1rem 1.25rem;
    border-inline-end: 1px solid var(--f-border);
    background: #faf5f8;
    text-align: center;
    min-inline-size: 0;
}

.fo-author .fo-avatar {
    inline-size: 56px;
    block-size: 56px;
    font-size: 1.2rem;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--f-accent-line);
}

.fo-author-id {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-inline-size: 0;
    max-inline-size: 100%;
}

.fo-author-name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--f-text);
    overflow-wrap: anywhere;
}

.fo-author .fo-badge { font-size: 0.75rem; padding: 0.18rem 0.6rem; }

.fo-author-stats {
    list-style: none;
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding: 0.7rem 0 0;
    inline-size: 100%;
    border-block-start: 1px solid var(--f-border);
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--f-subtle);
}

.fo-author-stats i { color: var(--f-accent); opacity: 0.75; margin-inline-end: 0.3rem; }

.fo-author-badges {
    list-style: none;
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    inline-size: 100%;
}

.fo-flair {
    --rw: var(--f-accent);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-inline-size: 0;
    padding: 0.2rem 0.6rem 0.2rem 0.2rem;
    border: 1px solid var(--f-border);
    border-radius: 999px;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--f-text);
    text-align: start;
}

.fo-flair-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 24px;
    block-size: 24px;
    border-radius: 50%;
    background: var(--rw);
    color: #fff;
    font-size: 0.75rem;
}

.fo-flair-label {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Screen-reader-only text for the icon-only controls. */
.fo-page .sr-only,
.fo-limit-dialog .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;
}

.fo-permalink { margin-inline-start: auto; color: var(--f-subtle); font-size: 0.8rem; }
.fo-permalink:hover { color: var(--f-accent); }

/* Phones: the panel becomes one strip above the post - avatar, then name and
   role over joined / contributions, badges as icons at the far end (their
   names stay in the title tooltip and for screen readers). A 192px column
   beside a 40-character line is unreadable. */
@media (max-width: 720px) {
    .fo-post-main { flex-direction: column; }

    .fo-post-body { padding: 0.9rem 1rem 1rem; }

    .fo-author {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "av id fl" "av st fl";
        align-items: center;
        column-gap: 0.75rem;
        row-gap: 0.2rem;
        padding: 0.75rem 1rem;
        border-inline-end: 0;
        border-block-end: 1px solid var(--f-border);
        text-align: start;
    }

    .fo-author .fo-avatar {
        grid-area: av;
        inline-size: 42px;
        block-size: 42px;
        font-size: 0.95rem;
        box-shadow: none;
    }

    .fo-author-id {
        grid-area: id;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.2rem 0.5rem;
    }

    .fo-author-stats {
        grid-area: st;
        display: flex;
        flex-wrap: wrap;
        gap: 0.1rem 0.9rem;
        padding: 0;
        border: 0;
        inline-size: auto;
        font-size: 0.75rem;
    }

    .fo-author-badges {
        grid-area: fl;
        display: flex;
        gap: 0.3rem;
        inline-size: auto;
    }

    .fo-flair { padding: 0; border: 0; background: none; }
    .fo-flair-icon { inline-size: 28px; block-size: 28px; font-size: 0.8rem; }

    .fo-flair-label {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
}

/* ── Full-width bands (2026-09-25) ────────────────────────────────────────
   Each forum screen is a brand hero band (crumbs, title, actions) over a
   white content band; the index adds a tinted "latest activity" band. The
   bands come from styles.css - .fo-page no longer caps the width itself. */
.fo-hero-band,
.fo-recent-band { padding-block: clamp(1.6rem, 4vw, 2.75rem); }
.fo-body      { padding-block: clamp(1.5rem, 3.5vw, 2.5rem) clamp(2rem, 5vw, 3.5rem); }

.fo-hero-band .fo-hero {
    margin: 0;
    padding: 0;
    border: 0;
}

.fo-hero-band .fo-hero h1,
.fo-hero-band .fo-thread-head h1 { color: #fff; }

.fo-hero-band .fo-hero p,
.fo-hero-band .fo-thread-sub { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; }

.fo-hero-band .fo-crumbs,
.fo-hero-band .fo-crumbs a { color: rgba(255, 255, 255, 0.9); }

.fo-hero-band .fo-thread-head { margin: 0; }
.fo-hero-band .fo-pin,
.fo-hero-band .fo-lock { color: #fff; }

.fo-hero-band .fo-tag { background: rgba(255, 255, 255, 0.18); color: #fff; }

.fo-hero-band .fo-notice { background: #fff; }

/* On the brand gradient the primary button inverts: white with brand text. */
.fo-hero-band .btn-primary { background: #fff; color: var(--f-accent); }
.fo-hero-band .btn-primary:hover { background: #f6e9f1; color: var(--f-accent); }
.fo-hero-band .btn-ghost {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}
.fo-hero-band .btn-ghost:hover { background: rgba(255, 255, 255, 0.22); }

.fo-recent-band .fo-recent { margin: 0; }

/* styles.css centres every h2; the forum headings sit at the start. */
.fo-page .fo-replies-heading { text-align: start; }

/* The reply box or gate notice after the thread needs air above it. */
.fo-body .fo-posts + .fo-notice,
.fo-body .fo-posts + .fo-replybox { margin-block-start: 1.5rem; }
.fo-recent-band .fo-recent h2 { font-size: 1.2rem; text-align: start; }
.fo-recent-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }

.fo-page > .fo-empty { max-inline-size: var(--page-max, 1200px); margin-inline: auto; }

/* ── The composer ───────────────────────────────────────────────────────── */
.fo-editor { display: grid; gap: 0; }

.fo-tools {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-wrap: wrap;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--f-border);
    border-block-end: 0;
    border-start-start-radius: 9px;
    border-start-end-radius: 9px;
    background: var(--f-accent-soft);
}

.fo-tool {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-inline-size: 30px;
    block-size: 28px;
    justify-content: center;
    padding: 0 0.45rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--f-accent);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.fo-tool:hover { background: rgba(101, 6, 64, 0.12); color: var(--f-accent); }
.fo-tool[aria-pressed="true"] { background: var(--f-accent); color: #fff; }
.fo-tool-preview { margin-inline-start: auto; }
.fo-tool-sep { inline-size: 1px; block-size: 18px; background: var(--f-accent-line); margin-inline: 0.25rem; }

.fo-editor textarea {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

.fo-preview {
    min-block-size: 6rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--f-border);
    border-block-start: 0;
    border-end-start-radius: 9px;
    border-end-end-radius: 9px;
    background: var(--f-card);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--f-text);
    overflow-wrap: anywhere;
}

.fo-preview-wait { color: var(--f-subtle); font-style: italic; font-size: 0.85rem; }

/* ── What the renderer can now produce ──────────────────────────────────── */
.fo-post-text .fo-list,
.fo-preview .fo-list { margin: 0.3rem 0; padding-inline-start: 1.4rem; }

.fo-post-text .fo-list li,
.fo-preview .fo-list li { margin-block: 0.1rem; }

.fo-code {
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    background: rgba(101, 6, 64, 0.08);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
}

.fo-post-text strong, .fo-preview strong { font-weight: 700; }
.fo-post-text em, .fo-preview em { font-style: italic; }

/* The Subscriber tag - the only one that comes from the billing axis. */
.fo-badge.is-sub  { background: rgba(101, 6, 64, 0.1); color: var(--f-accent); }
.fo-avatar.is-sub { background: #8a2f6b; }

/* ── Side widgets (2026-10-21) ──────────────────────────────────────────── */
.fo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.75rem; align-items: start; }
.fo-main { min-inline-size: 0; }
.fo-widgets { display: grid; gap: 1rem; min-inline-size: 0; }
.fo-widget { padding: 1rem; border: 1px solid var(--f-border); border-radius: var(--f-radius); background: var(--f-card); }
.fo-widget h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; font-size: 1rem; text-align: start; color: var(--f-accent); }
.fo-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.fo-widget li + li { padding-block-start: 0.65rem; border-block-start: 1px solid var(--f-border); }
.fo-w-title { display: block; font-size: 0.9rem; font-weight: 600; line-height: 1.4; color: var(--f-text); text-decoration: none; overflow-wrap: anywhere; }
.fo-w-title:hover { color: var(--f-accent); }
.fo-w-meta { display: block; margin-block-start: 0.15rem; font-size: 0.76rem; color: var(--f-subtle); overflow-wrap: anywhere; }
.fo-w-empty { margin: 0; font-size: 0.85rem; color: var(--f-subtle); }
@media (max-width: 900px) { .fo-layout { grid-template-columns: minmax(0, 1fr); } }

/* Keyboard focus on the forum's links and buttons. */
.fo-page a:focus-visible, .fo-page button:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; }

/* ── Arabic and mixed-language content ──────────────────────────────────
   User content carries dir="auto", so direction follows the text itself.
   Arial/Segoe render Arabic small, so Arabic glyphs alone get a sized-up
   system face (unicode-range) and a taller line. */
@font-face {
    font-family: "FoArabic";
    src: local("Segoe UI"), local("Tahoma"), local("Noto Naskh Arabic"), local("Geeza Pro");
    unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
    size-adjust: 118%;
}
.fo-post-text, .fo-thread-title, .fo-thread-head h1, .fo-w-title, .fo-preview, .fo-replybox textarea, .fo-new textarea {
    font-family: Arial, "FoArabic", sans-serif;
}
.fo-post-text, .fo-preview { line-height: 1.75; }
.fo-post-text[dir="auto"], .fo-thread-head h1 span { unicode-bidi: plaintext; }

/* ── Permalink target ───────────────────────────────────────────────────── */
.fo-post { scroll-margin-block-start: 5rem; }
.fo-post:target > .fo-post-main, .fo-post.is-flash > .fo-post-main { animation: fo-flash 2.2s ease-out; }
@keyframes fo-flash { from { box-shadow: 0 0 0 3px var(--f-accent); background: var(--f-accent-soft); } to { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .fo-post:target > .fo-post-main, .fo-post.is-flash > .fo-post-main { animation: none; box-shadow: 0 0 0 3px var(--f-accent); } }