/* Mansatak Articles (مقالات منصتك) -- layout + visual design on top of
   site.css's tokens (linked before this file on every Articles page, same
   convention index.css/faq.css/contact.css follow), so the feature reads as
   part of the platform rather than a bolted-on mini-site. */

/* The browser's own `[hidden] { display: none }` UA rule and a class rule
   like `.ar-staff-tabs { display: flex }` have equal specificity, so
   whichever is later in the cascade wins -- this file, loaded after the UA
   stylesheet, was silently overriding `hidden` on every element that also
   sets its own `display`. That is what let the staff review tabs keep
   rendering after JS had already set `hidden = true` on them: the DOM
   property was correct, the paint wasn't. Must stay first in this file. */
[hidden] { display: none !important; }

.ar-shell {
    max-width: 880px;
    margin: 0 auto;
    padding: 40px 24px 72px;
}

.ar-shell-wide {
    max-width: 1120px;
}

.ar-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 28px;
}

.ar-page-title {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--text);
    margin: 0 0 20px;
}

/* ── nav ─────────────────────────────────────────────────────────── */
/* Sticky, matching .topbar (site.css) and every page that already uses
   it -- what changed is the .scrolled gate below: the border/shadow used
   to be there unconditionally, so the bar looked identical (and equally
   "present") whether the page was at the very top or three screens down,
   which is what made it read as a fixed panel sitting permanently over
   the page rather than page chrome. .topbar (and faq/legal/protection/
   contact) all gate theirs behind a .scrolled class for the same reason;
   nav-drawer.js's own scroll listener is the direct copy of
   site-content.js's initScrollChrome(). */
.ar-nav {
    border-bottom: 1px solid transparent;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 10;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ar-nav.scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
.ar-nav-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 28px;
}
.ar-nav-brand {
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: -.01em;
    background: linear-gradient(135deg, var(--brand), var(--lime-600));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-decoration: none;
    flex-shrink: 0;
}
/* Deliberately not flex:1 (and no margin-auto pinning the CTA to the far
   edge) -- either would leave the same amount of empty space, just wedged
   between the categories and the button instead of trailing the whole
   group. With few categories that reads as the button floating on its own;
   clustering brand+categories+button together and letting the leftover
   space collect after all of them, in one place, reads as an ordinary
   compact nav rather than a stray control. */
/* Above 720px .nav-collapse is a plain flex row -- categories + the CTA
   button sit inline exactly as before this existed. */
.nav-collapse { display: flex; align-items: center; gap: 28px; }
.ar-nav-categories { display: flex; gap: 22px; flex-wrap: wrap; }
.ar-nav-categories a {
    position: relative;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    padding: 4px 0;
    transition: var(--transition);
}
.ar-nav-categories a::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -2px;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s var(--ease);
}
.ar-nav-categories a:hover { color: var(--text); }
.ar-nav-categories a:hover::after,
.ar-nav-categories a.active::after { transform: scaleX(1); }
.ar-nav-categories a.active { color: var(--brand); }
.ar-nav-join { flex-shrink: 0; padding: 10px 22px; font-size: .88rem; }
/* A plain link, not a second .ar-btn -- "اكتب معنا" is the CTA for a new
   visitor, this is a secondary way back in for someone who already has an
   account. Two solid brand buttons side by side would fight for the same
   attention and read as two equally-important asks. */
.ar-nav-login {
    flex-shrink: 0;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 700;
    font-size: .88rem;
    transition: var(--transition);
}
.ar-nav-login:hover { color: var(--brand); }

/* ── mobile nav: three dashes, the same pattern as the teacher's public
   page (page-templates.css) -- a dropdown under the bar, not a side
   drawer, so Articles reads as one platform convention rather than a
   second kind of mobile nav. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 38px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: var(--text);
    transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
    .ar-nav-inner { flex-wrap: nowrap; justify-content: space-between; padding: 14px 18px; }
    .nav-toggle { display: flex; }

    .nav-collapse {
        position: absolute;
        inset-inline: 0;
        top: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 10px 18px 18px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 18px 30px rgba(0, 0, 0, .14);
        /* Collapsed rather than display:none so it can animate, and
           `visibility` so a closed panel is not focusable. */
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        transition: max-height .28s ease, opacity .2s ease, visibility .28s;
    }
    .nav-collapse.open {
        max-height: 70vh;
        opacity: 1;
        visibility: visible;
        overflow-y: auto;
    }
    .ar-nav-categories {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    .ar-nav-categories a {
        padding: 12px 6px;
        font-size: 1rem;
        border-radius: 10px;
    }
    .ar-nav-categories a::after { display: none; }
    .ar-nav-categories a:hover { background: var(--bg-alt); }
    .ar-nav-categories a.active { background: var(--brand-100); }
    .ar-nav-login {
        padding: 12px 6px;
        font-size: 1rem;
        border-radius: 10px;
    }
    .ar-nav-login:hover { background: var(--bg-alt); }
    .ar-nav-join { align-self: flex-start; margin-top: 6px; }
}

/* ── footer ──────────────────────────────────────────────────────── */
.ar-footer {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    padding: 36px 20px;
    margin-top: 24px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .88rem;
}
.ar-footer a { color: inherit; text-decoration: none; transition: var(--transition); }
.ar-footer a:hover { color: var(--brand); }

/* ── hero band (homepage / join page) ───────────────────────────── */
.ar-hero {
    position: relative;
    text-align: center;
    padding: clamp(2.75rem, 6vw, 4.5rem) 24px clamp(2.25rem, 5vw, 3.25rem);
    overflow: hidden;
    background: linear-gradient(to bottom, var(--bg-alt) 0%, var(--bg-alt) 60%, var(--bg) 100%);
}
.ar-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 55%),
        radial-gradient(circle at 88% 100%, color-mix(in srgb, var(--lime) 20%, transparent), transparent 55%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
    pointer-events: none;
}
.ar-hero > * { position: relative; z-index: 1; }
.ar-hero-eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--brand);
    background: var(--brand-100);
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.ar-hero h1 {
    font-size: clamp(1.9rem, 4.5vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--text);
    margin: 0 0 14px;
}
.ar-hero p {
    color: var(--text-muted);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    max-width: 56ch;
    margin: 0 auto 26px;
    line-height: 1.7;
}

/* ── closing CTA band (homepage) ─────────────────────────────────── */
/* The join invitation the hero used to repeat right under the nav's own
   "اكتب معنا" -- moved down here so it reads as a second, later prompt
   instead of the same button twice in one screen. */
.ar-cta-band {
    text-align: center;
    padding: 48px 24px;
    margin-top: 24px;
    border-top: 1px solid var(--border);
}
.ar-cta-band h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 8px;
}
.ar-cta-band p {
    color: var(--text-muted);
    margin: 0 0 22px;
}

/* ── auth / application forms ────────────────────────────────────── */
.ar-form { display: flex; flex-direction: column; gap: 16px; max-width: 480px; }
.ar-field { display: flex; flex-direction: column; gap: 7px; }
.ar-field label { font-weight: 700; color: var(--text); font-size: .9rem; }
.ar-field input, .ar-field textarea, .ar-field select {
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    font-family: inherit;
    font-size: .95rem;
    background: var(--bg);
    color: var(--text);
    transition: var(--transition);
}
.ar-field input:focus, .ar-field textarea:focus, .ar-field select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-100);
}
.ar-field textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

/* ── editor: cover image picker ─────────────────────────────────── */
.ar-cover-picker { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.ar-cover-picker-preview {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-100), var(--surface-2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: 1.6rem;
    border: 1px solid var(--border);
}
.ar-cover-picker-preview img { width: 100%; height: 100%; object-fit: cover; }
.ar-cover-picker-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ar-cover-picker-actions label.ar-btn { cursor: pointer; }

/* Shared by the editor's save/preview/submit/close row and the dashboard
   header's link group -- both used to be a bare inline `display:flex` with
   no wrap, which is what let 3-4 buttons push the page wider than the
   viewport on a phone instead of wrapping onto a second line. */
.ar-editor-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.ar-dashboard-header-inner .ar-editor-actions { margin-top: 0; } /* a flex row item here, not a block below a form */

/* ── editor: preview overlay ────────────────────────────────────── */
.ar-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, .55);
    display: flex;
    justify-content: center;
    padding: 28px 16px;
    overflow-y: auto;
}
.ar-preview-panel {
    width: 100%;
    max-width: 780px;
    height: fit-content;
    max-height: calc(100vh - 56px);
    background: var(--bg);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ar-preview-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    font-weight: 800;
    color: var(--text);
    font-size: .92rem;
}
/* The title span, not the close button (kept at its natural size, or a
   narrow screen could shrink it into an unclickable sliver): min-width: 0
   is what lets a flex item's text actually wrap/ellipsize instead of the
   row just growing past the panel to fit it on one line. */
.ar-preview-header span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-preview-scroll { overflow-y: auto; padding-bottom: 40px; }
.ar-preview-scroll .ar-article-cover { border-radius: 0; margin-bottom: 0; }
.ar-preview-scroll .ar-shell { padding-top: 28px; }

.ar-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, var(--brand), var(--brand-600));
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(19, 121, 128, .25);
    transition: var(--transition);
}
.ar-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(19, 121, 128, .34); }
.ar-btn:active { transform: translateY(0); }
.ar-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.ar-btn-outline {
    background: var(--surface);
    color: var(--brand);
    border: 1.5px solid var(--border);
    box-shadow: none;
}
.ar-btn-outline:hover { border-color: var(--brand); background: var(--brand-100); box-shadow: none; }
.ar-btn-danger { background: linear-gradient(135deg, #d64545, #b8342f); box-shadow: 0 8px 20px rgba(184, 52, 47, .22); }
.ar-btn-danger:hover { box-shadow: 0 12px 26px rgba(184, 52, 47, .3); }
.ar-error {
    color: #a93226;
    background: #fde3e1;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: .88rem;
}
.ar-hint { color: var(--text-muted); font-size: .88rem; line-height: 1.6; }

/* Centred auth card (login/register) */
.ar-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: linear-gradient(to bottom, var(--bg-alt), var(--bg));
}
.ar-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 40px 36px;
}
.ar-auth-brand {
    display: block;
    text-align: center;
    font-weight: 900;
    font-size: 1.3rem;
    background: linear-gradient(135deg, var(--brand), var(--lime-600));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-decoration: none;
    margin-bottom: 22px;
}
.ar-auth-card .ar-page-title { text-align: center; margin-bottom: 6px; }
.ar-auth-card > p.ar-hint { text-align: center; margin-bottom: 26px; }
.ar-auth-card .ar-form { max-width: none; }
.ar-auth-footer { text-align: center; margin-top: 22px; }
.ar-auth-footer a { color: var(--brand); font-weight: 700; text-decoration: none; }
.ar-auth-footer a:hover { text-decoration: underline; }

/* ── status badges ───────────────────────────────────────────────── */
.ar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}
.ar-badge::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
.ar-badge-pending { background: #fff4dd; color: #8a5a00; }
.ar-badge-approved, .ar-badge-published { background: #e2f4e6; color: #1d7a3a; }
.ar-badge-rejected { background: #fde3e1; color: #a93226; }
.ar-badge-draft { background: var(--surface-2); color: var(--text-muted); }

/* ── writer dashboard ────────────────────────────────────────────── */
.ar-dashboard-header {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.ar-dashboard-header-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ar-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.ar-section-heading h2 { font-size: 1.25rem; font-weight: 800; margin: 0; color: var(--text); }

.ar-articles-list { display: flex; flex-direction: column; gap: 12px; }
.ar-article-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    transition: var(--transition);
}
.ar-article-row:hover { border-color: var(--brand-100); box-shadow: var(--shadow-sm); }
.ar-article-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ar-article-row-title { font-weight: 700; color: var(--text); }
/* Only a published row's title is a real <a> (see dashboard.js) -- text-
   decoration stays off at rest so it doesn't read as a link everywhere
   else, and appears on hover as the one hint that this one specifically
   opens the article. */
a.ar-article-row-title { text-decoration: none; }
a.ar-article-row-title:hover { color: var(--brand); text-decoration: underline; }
.ar-article-row-meta { font-size: .82rem; color: var(--text-muted); }
.ar-article-row-actions { display: flex; gap: 8px; flex-shrink: 0; }
.ar-icon-btn {
    border: none; background: var(--surface-2); color: var(--text-muted);
    width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.ar-icon-btn:hover { background: var(--brand-100); color: var(--brand); }

.ar-empty-state {
    text-align: center;
    padding: 48px 24px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
}
.ar-empty-state-error {
    border-color: #f3c8c4;
    background: #fdf3f2;
    color: #a93226;
}

/* ── the block editor ─────────────────────────────────────────────── */
.ae-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.ae-toolbar {
    position: sticky; top: 0; z-index: 5;
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 10px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.ae-tool-btn {
    border: none; background: transparent; color: var(--text-muted);
    height: 36px; padding: 0 10px; border-radius: 9px; cursor: pointer;
    display: flex; align-items: center; gap: 7px; justify-content: center;
    transition: var(--transition);
}
.ae-tool-btn:hover { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }
.ae-tool-btn.active { background: var(--brand-100); color: var(--brand); }
.ae-tool-label { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.ae-sep { width: 1px; align-self: stretch; background: var(--border); margin: 6px 6px; }

/* The link tool's inline popover, replacing window.prompt so the editor
   never breaks out into a native dialog. */
.ae-link-popover {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}
.ae-link-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 6px 10px;
    font-size: .88rem;
    color: var(--text);
    direction: ltr;
    text-align: right;
}
.ae-link-input:focus { outline: none; }
.ae-link-confirm {
    border: none; background: var(--brand); color: #fff;
    width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}
.ae-link-confirm:hover { background: var(--brand-600); }

.ae-blocks {
    padding: 28px clamp(20px, 4vw, 48px);
    min-height: 320px;
    background: var(--bg);
}

.ae-footer {
    padding: 10px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    text-align: end;
}
.ae-word-count { font-size: .78rem; color: var(--text-muted); }

.ae-block { position: relative; margin-bottom: 20px; padding-inline-end: 44px; border-radius: 8px; }
.ae-block-controls {
    position: absolute; inset-inline-end: 0; top: 0;
    display: flex; flex-direction: column; gap: 4px;
    opacity: 0; transition: opacity .15s ease;
}
.ae-block:hover .ae-block-controls, .ae-block:focus-within .ae-block-controls { opacity: 1; }
.ae-block-btn {
    width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 7px;
    background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: .75rem;
    transition: var(--transition);
}
.ae-block-btn:hover { background: var(--surface-2); border-color: var(--brand); color: var(--brand); }
.ae-block-del:hover { color: #c0392b; border-color: #c0392b; }

.eb-content {
    outline: none;
    /* Same #fontSwitch/--ar-reading-font as .article-body -- a writer
       composing in Amiri when the article will actually render in Cairo
       (or vice versa) was drafting against the wrong rhythm/line length. */
    font-family: var(--ar-reading-font, 'Amiri', serif);
    line-height: 1.9;
    color: var(--text);
    min-height: 1.4em;
    border-radius: 6px;
    transition: box-shadow .15s ease;
}
.eb-content:focus { box-shadow: 0 0 0 3px var(--brand-100); }
.eb-content:empty:before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    opacity: .7;
}
h2.eb-content { font-size: 1.5rem; font-weight: 800; }
h3.eb-content { font-size: 1.2rem; font-weight: 800; }
blockquote.eb-content {
    border-inline-start: 4px solid var(--brand);
    padding-inline-start: 16px;
    color: var(--text-muted);
    font-style: italic;
}

.ae-block[data-block-type="image"] { text-align: center; }
.eb-image-preview { max-width: 100%; border-radius: 12px; box-shadow: var(--shadow-sm); }
.eb-position-toggle { display: block; font-size: .85rem; color: var(--text-muted); margin-top: 8px; }
.eb-caption-input {
    display: block; width: 100%; margin-top: 8px;
    padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 10px;
    font-size: .85rem; text-align: center;
}

/* ── article reading page ─────────────────────────────────────────── */
.ar-article-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}
.ar-article-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; background: var(--surface-2);
    flex-shrink: 0;
}
.ar-article-meta-text { display: flex; flex-direction: column; gap: 1px; }
.ar-article-author-name { font-weight: 700; color: var(--text); font-size: .92rem; }
.ar-article-meta-sub { color: var(--text-muted); font-size: .8rem; }

.article-body {
    /* Overridable via .ar-font-switch, present on all three pages that
       render a body -- but driven by two DIFFERENT mechanisms that
       happen to share this one property, and that split matters:
       article.html's is js/articles/reading-font.js, a READER's own
       localStorage preference, carried across every article they open.
       dashboard.html's and staff.html's are each page's own small script
       (dashboard.js/staff.js) applying the WRITER's reading_font stored
       on the article itself -- not a personal preference, never written
       to localStorage. The plain Amiri fallback below is only ever seen
       on a page that loads neither. */
    font-family: var(--ar-reading-font, 'Amiri', serif);
    font-size: 1.15rem;
    line-height: 2.05;
    color: var(--text);
}
/* ── reading font switcher (article page) ───────────────────────── */
.ar-font-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 26px; }
.ar-font-switch-label { font-size: .82rem; font-weight: 700; color: var(--text-muted); }
.ar-font-switch-btn {
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.ar-font-switch-btn:hover { border-color: var(--brand); color: var(--brand); }
.ar-font-switch-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.article-body h2 { font-size: 1.55rem; font-weight: 800; margin: 1.6em 0 .6em; color: var(--text); }
.article-body h3 { font-size: 1.25rem; font-weight: 800; margin: 1.4em 0 .5em; color: var(--text); }
.article-body p { margin: 0 0 1.2em; }
.article-body blockquote {
    border-inline-start: 4px solid var(--brand);
    padding-inline-start: 18px;
    margin: 1.6em 0;
    color: var(--text-muted);
    font-style: italic;
    font-size: 1.05em;
}
.article-body mark { background: var(--lime); color: #14262a; padding: .05em .2em; border-radius: 3px; }
.article-body a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.article-image { margin: 1.8em 0; text-align: center; }
.article-image img { max-width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.article-image figcaption { font-size: .85rem; color: var(--text-muted); margin-top: 10px; }
.article-image-top { margin-top: 0; }

.ar-article-cover {
    width: 100%;
    max-height: 440px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: 28px;
}

/* ── section titles + card grids (homepage / category) ─────────────── */
.ar-section-title {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--text);
    margin: 44px 0 18px;
}
.ar-section-title:first-of-type { margin-top: 0; }

/* Scroll reveal -- the same convention as the main site (index.css) and the
   teacher public page: .reveal starts hidden, js/articles/scroll-reveal.js
   adds .in-view via IntersectionObserver once a card scrolls into view. */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

.ar-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 22px;
}
.ar-card-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.ar-card-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.ar-card-item-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--surface-2); }
.ar-card-item-cover-placeholder {
    width: 100%; aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--brand-100), var(--surface-2));
    display: flex; align-items: center; justify-content: center;
    color: var(--brand);
    font-size: 1.6rem;
}
.ar-card-item-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ar-card-item-category { color: var(--brand); font-size: .76rem; font-weight: 800; letter-spacing: .02em; }
.ar-card-item-title { font-weight: 700; color: var(--text); line-height: 1.45; }
.ar-card-item-meta { color: var(--text-muted); font-size: .8rem; margin-top: auto; padding-top: 6px; }

/* A tinted, rounded panel rather than a plain grid sitting between the two
   article grids -- with the same .ar-section-title margin (44px) on every
   section, "الكتاب المميزون" read as just a third list, not the spotlight
   it's meant to be. The panel's own margin replaces that title's top
   margin (zeroed below), so the gap above/below is set once, deliberately,
   rather than stacking two unrelated spacing rules. */
#writersSection {
    margin: 56px 0;
    padding: 40px clamp(20px, 4vw, 40px);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--brand-100), var(--surface) 60%);
    border: 1px solid var(--border);
}
#writersSection .ar-section-title { margin-top: 0; text-align: center; }

.ar-writers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
}
.ar-writer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 26px 18px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.ar-writer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.ar-writer-avatar {
    width: 76px; height: 76px; border-radius: 50%;
    object-fit: cover; background: var(--surface-2);
    /* A halo (surface ring + brand ring) rather than one flat border -- it
       reads as a portrait set apart from the card, not a photo with an
       outline, and it survives sitting on the panel's own tinted
       background because the inner ring matches the card, not the page. */
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 3px var(--brand-100);
}
.ar-writer-name { font-weight: 800; color: var(--text); }
.ar-writer-bio { font-size: .82rem; color: var(--text-muted); line-height: 1.5; }

/* buildAvatar()'s fallback when a writer has no profile picture -- an
   initial-letter circle, not the platform logo standing in for a person. */
.ar-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand), var(--lime-600));
    color: #fff;
    font-weight: 800;
}

/* ── join page: feature grid ────────────────────────────────────── */
.ar-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 760px;
    margin: 0 auto 36px;
}
.ar-feature-card {
    padding: 24px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}
.ar-feature-icon {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
    border-radius: 14px;
    background: var(--brand-100);
    color: var(--brand);
    font-size: 1.25rem;
}
.ar-feature-title { font-weight: 700; color: var(--text); margin-bottom: 6px; }
.ar-feature-text { font-size: .85rem; color: var(--text-muted); line-height: 1.6; }

/* ── staff review page ──────────────────────────────────────────── */
.ar-staff-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.ar-staff-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}
.ar-staff-tab:hover { color: var(--text); }
.ar-staff-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.ar-staff-tab-count {
    background: var(--brand-100);
    color: var(--brand);
    font-size: .72rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
}

/* Capped, not the full 1120px shell -- a review card's actual content
   (a name, a paragraph or two, two buttons) is a reading-width task, and
   stretching it edge-to-edge is what left short field values stranded
   against a wall of empty space. */
.ar-review-list { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.ar-review-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 22px 24px;
}
.ar-review-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.ar-review-card-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    object-fit: cover; background: var(--surface-2);
    flex-shrink: 0;
    font-size: 1rem;
}
.ar-review-card-header-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ar-review-card-title { font-weight: 800; font-size: 1.05rem; color: var(--text); }
.ar-review-card-subtitle { font-size: .8rem; color: var(--text-muted); }

.ar-review-field {
    background: var(--surface-2);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.ar-review-field-label {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.ar-review-field p { margin: 0; color: var(--text); line-height: 1.6; white-space: pre-wrap; }

.ar-review-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.ar-review-preview-row .ar-hint { margin: 0; }
.ar-review-actions { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.ar-reject-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 360px;
    padding: 12px;
    background: var(--surface-2);
    border-radius: 10px;
}
.ar-reject-form textarea {
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: .88rem;
    resize: vertical;
}