/* =========================================================================
   World Admission — portfolio stylesheet

   Palette derived from the World Admission mark — navy wordmark, azure globe,
   gold capitol. Everything visual is a token in :root below and no template
   refers to a colour directly, so a future brand revision is edited in one place.

   Written as plain CSS rather than through Vite so there is no build step
   between a change and the page, and nothing to compile on shared hosting.

   Logical properties (margin-inline, padding-inline, inset-inline) are used
   throughout so the Arabic RTL layout mirrors correctly without a second
   stylesheet.
   ========================================================================= */

:root {
    /* ---------------------------------------------------------------------
       Brand, taken from the World Admission mark:
         navy   — the wordmark
         azure  — the globe and ".ORG"
         gold   — the capitol building
       Navy carries structure and headings, azure carries interaction, gold is
       reserved for genuine emphasis so it keeps its meaning.
       --------------------------------------------------------------------- */
    --navy:             #1b3a6b;
    --navy-deep:        #12294d;
    --azure:            #1e93d6;
    --azure-deep:       #1577b0;
    --azure-light:      #7fcbef;
    --gold:             #eba23c;
    --gold-deep:        #c9832a;

    --brand:            var(--navy);
    --brand-strong:     var(--navy-deep);
    --brand-soft:       #eaf2fb;
    --accent:           var(--azure);
    --accent-strong:    var(--azure-deep);
    --highlight:        var(--gold);

    /* Neutrals carry a slight navy bias so greys sit with the brand
       rather than beside it. */
    --ink:              #16202f;
    --ink-mid:          #4a5568;
    --ink-soft:         #77839a;
    --ground:           #ffffff;
    --ground-alt:       #f5f8fb;
    --rule:             #e0e7f0;
    --rule-strong:      #c3cddb;

    --ok:               #2c6e49;
    --warn:             var(--gold-deep);
    --danger:           #a03328;

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-serif: "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-ar: "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif;

    --measure: 68ch;
    --radius: 4px;
    --shadow: 0 1px 2px rgba(22, 32, 47, .06), 0 4px 12px rgba(22, 32, 47, .05);
}

[dir="rtl"] body { font-family: var(--font-ar); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Navy is the ground in dark mode, so azure takes over as the brand
           colour — the mark's own light blue, doing the work navy cannot. */
        --brand:        #7fbde8;
        --brand-strong: #a4d2f2;
        --brand-soft:   #14263c;
        --accent:       #4dabe4;
        --accent-strong: #7fcbef;
        --highlight:    #f0b45f;

        --ink:          #e6ecf3;
        --ink-mid:      #adbaca;
        --ink-soft:     #8291a5;
        --ground:       #101722;
        --ground-alt:   #17202e;
        --rule:         #26313f;
        --rule-strong:  #364354;
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-strong); text-underline-offset: 2px; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { line-height: 1.2; text-wrap: balance; margin: 0 0 .5em; font-weight: 640; color: var(--brand); }
h3 a, h1 a, h2 a { color: inherit; text-decoration: none; }
h3 a:hover { color: var(--accent-strong); }
h1 { font-size: clamp(28px, 4.5vw, 42px); letter-spacing: -.02em; }
h2 { font-size: clamp(22px, 3vw, 28px); letter-spacing: -.012em; }
h3 { font-size: 19px; }
p  { margin: 0 0 1em; max-width: var(--measure); }

.container { width: min(1140px, 100% - 2.5rem); margin-inline: auto; }
.stack > * + * { margin-block-start: var(--gap, 1rem); }
.muted { color: var(--ink-soft); }
.small { font-size: 14px; }

/* ---------------------------------------------------------------- skip link */

.skip {
    position: absolute; inset-inline-start: -9999px; top: 0;
    background: var(--brand); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip:focus { inset-inline-start: 0; }

/* ------------------------------------------------------------ announcements */

.announcement-bar {
    background: var(--navy);
    color: #fff;
    font-size: 14px;
    padding: .55rem 0;
}
.announcement-bar a { color: #fff; text-decoration: underline; }
.announcement-bar .container { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.announcement-bar button {
    background: none; border: 0; color: #fff; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 .25rem;
}

/* -------------------------------------------------------------------- header */

.site-header { border-bottom: 1px solid var(--rule); background: var(--ground); position: sticky; top: 0; z-index: 50; }
.site-header .container { display: flex; align-items: center; gap: 1.25rem; min-height: 66px; }

/* Wordmark mirroring the logo lockup: navy name, azure suffix.
   Replaced entirely by the image once brand.logo is configured. */
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand img { height: 38px; width: auto; }
.wordmark {
    font-weight: 760; font-size: 17px; letter-spacing: -.015em; line-height: 1.05;
    color: var(--navy); text-transform: uppercase;
}
.wordmark .suffix { color: var(--azure); }
[data-theme="dark"] .wordmark, :root:not([data-theme="light"]) .wordmark { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wordmark { color: var(--ink); } }

.brand-mark {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(150deg, var(--azure-light), var(--azure) 55%, var(--azure-deep));
    display: grid; place-items: center; flex: none;
}
.brand-mark svg { width: 18px; height: 18px; }

.site-nav { margin-inline-start: auto; display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.site-nav a {
    color: var(--ink-mid); text-decoration: none; font-size: 14.5px;
    padding: .45rem .6rem; border-radius: var(--radius);
}
.site-nav a:hover { background: var(--ground-alt); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--brand); font-weight: 620; }

.lang-switch { display: flex; gap: .2rem; margin-inline-start: .5rem; border-inline-start: 1px solid var(--rule); padding-inline-start: .75rem; }
.lang-switch a { font-size: 13px; padding: .3rem .5rem; }
.lang-switch a.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 640; }

/* --------------------------------------------------------------------- hero */

.hero { background: linear-gradient(180deg, var(--brand-soft), var(--ground-alt)); border-bottom: 1px solid var(--rule); padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.hero p.lead { font-size: clamp(17px, 2vw, 19px); color: var(--ink-mid); max-width: 60ch; }
.eyebrow {
    font-size: 12px; font-weight: 660; letter-spacing: .1em; text-transform: uppercase;
    color: var(--brand); margin: 0 0 .6rem;
}

/* -------------------------------------------------------------------- pieces */

section.band { padding-block: clamp(2rem, 5vw, 3.5rem); }
section.band + section.band { border-top: 1px solid var(--rule); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head a { font-size: 14px; }

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.card {
    border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ground);
    padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .5rem;
}
.card h3 { margin: 0; font-size: 17px; }
.card p { margin: 0; font-size: 14.5px; color: var(--ink-mid); }
.card a.stretched { text-decoration: none; color: inherit; }
.card:hover { border-color: var(--rule-strong); }

.pill {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: 12px; font-weight: 600; letter-spacing: .02em;
    padding: .18rem .5rem; border-radius: 100px;
    background: var(--brand-soft); color: var(--brand);
}
.pill.neutral { background: var(--ground-alt); color: var(--ink-soft); }
/* Gold is held back for things that genuinely warrant attention — an exclusive
   scholarship, an offer — so it keeps meaning rather than becoming decoration. */
.pill.highlight {
    background: color-mix(in srgb, var(--highlight) 18%, transparent);
    color: var(--gold-deep);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pill.highlight { color: var(--highlight); }
}

.meta-row { display: flex; flex-wrap: wrap; gap: .4rem .75rem; font-size: 12.5px; color: var(--ink-soft); }

.btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--accent); color: #fff; text-decoration: none;
    padding: .6rem 1.1rem; border-radius: var(--radius); border: 0;
    font-size: 15px; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--accent-strong); color: #fff; }
.btn.ghost { background: transparent; color: var(--brand); border: 1px solid var(--rule-strong); font-weight: 620; }
.btn.ghost:hover { background: var(--brand-soft); }

/* -------------------------------------------------------------------- forms */

.field { display: grid; gap: .3rem; margin-bottom: 1rem; max-width: 34rem; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field textarea, .field select {
    font: inherit; font-size: 15px; padding: .55rem .7rem;
    border: 1px solid var(--rule-strong); border-radius: var(--radius);
    background: var(--ground); color: var(--ink); width: 100%;
}
.field .error { color: var(--danger); font-size: 13px; }
.notice {
    border: 1px solid var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent);
    color: var(--ink); padding: .8rem 1rem; border-radius: var(--radius); margin-bottom: 1.5rem;
}

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

.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2rem; }
.prose ul { padding-inline-start: 1.25rem; }

/* --------------------------------------------------------------------- tabs */

.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem; flex-wrap: wrap; }
.tabs a {
    padding: .55rem .9rem; text-decoration: none; color: var(--ink-mid);
    font-size: 14.5px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 620; }

/* ------------------------------------------------------------------- footer */

.site-footer { background: var(--ground-alt); border-top: 1px solid var(--rule); margin-top: 3rem; padding-block: 2.5rem 1.5rem; }
.site-footer h4 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .7rem; }
.site-footer a { color: var(--ink-mid); text-decoration: none; font-size: 14.5px; display: block; padding: .15rem 0; }
.site-footer a:hover { color: var(--brand); }
.footer-bottom {
    border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 1.25rem;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-size: 13.5px; color: var(--ink-soft);
}
.office { font-size: 14px; color: var(--ink-mid); margin-bottom: 1rem; }
.office strong { color: var(--ink); display: block; font-size: 14.5px; }
.office .open-now { color: var(--ok); font-weight: 620; font-size: 12.5px; }
.office .closed-now { color: var(--ink-soft); font-size: 12.5px; }

/* -------------------------------------------------------------- empty state */

.empty {
    border: 1px dashed var(--rule-strong); border-radius: var(--radius);
    padding: 2rem 1.5rem; text-align: center; color: var(--ink-soft); font-size: 14.5px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Authentication
   Reuses the tokens above rather than introducing colours of its own. The
   sign-in page is the first screen many people ever see of us, so it holds the
   same navy/azure relationship as the rest of the site — navy for structure,
   azure for the one thing to press.
   ========================================================================== */

.auth-body { background: var(--ground-alt); }

.auth-shell {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.25rem; padding: 2rem 1rem;
}

.auth-card {
    width: 100%; max-width: 26rem;
    background: var(--ground); border: 1px solid var(--rule);
    border-radius: calc(var(--radius) * 2); box-shadow: var(--shadow);
    padding: 2rem 1.75rem;
}
.auth-card h1 { font-size: 1.5rem; margin: 0 0 .35rem; text-wrap: balance; }

.auth-brand {
    display: inline-flex; align-items: center; gap: .5rem;
    text-decoration: none; margin-bottom: 1.5rem;
}

.auth-lede { color: var(--ink-mid); margin: 0 0 1.5rem; font-size: 15px; }

.auth-foot { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; font-size: 13px; color: var(--ink-soft); }
.auth-foot a { color: var(--ink-mid); }
.auth-foot a.is-active { color: var(--brand); font-weight: 650; }

.auth-alt { margin-top: 1.5rem; text-align: center; font-size: 14.5px; color: var(--ink-mid); }

/* Logical properties, not left/right — the whole layout mirrors under dir=rtl
   and a hard-coded margin-left would strand these on the wrong edge. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.field-aside { font-size: 13px; }
.field-hint { font-size: 13px; color: var(--ink-soft); margin: .15rem 0 0; }
.field-error { font-size: 13px; color: var(--danger); margin: .15rem 0 0; font-weight: 600; }

.form .field { max-width: none; }
.form-inline { margin-top: .5rem; }

.check { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: 1rem; font-size: 14px; color: var(--ink-mid); }
.check input { margin-block-start: .2rem; flex: 0 0 auto; }

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and a field that is merely out of view still looks fillable to them.
   aria-hidden and tabindex="-1" keep it away from real people either way. */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-block { width: 100%; justify-content: center; }
.btn-quiet { background: transparent; color: var(--brand); border: 1px solid var(--rule-strong); font-weight: 620; }
.btn-quiet:hover { background: var(--brand-soft); color: var(--brand); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger); }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-strong); cursor: pointer; text-align: start; }

.button-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }

/* ------------------------------------------------------------- providers */

.auth-providers { margin-top: 1.5rem; }
.auth-divider { display: flex; align-items: center; gap: .75rem; color: var(--ink-soft); font-size: 13px; margin: 0 0 .9rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.provider-buttons { display: grid; gap: .5rem; }
.btn-provider {
    background: var(--ground); color: var(--ink); border: 1px solid var(--rule-strong);
    justify-content: center; font-weight: 600;
}
.btn-provider:hover { background: var(--ground-alt); color: var(--ink); }
.provider-glyph { display: inline-flex; width: 17px; height: 17px; }

/* ---------------------------------------------------------- two-factor */

.input-code {
    font-size: 22px; letter-spacing: .5em; text-align: center;
    font-variant-numeric: tabular-nums; padding-inline-start: .7em;
}
.recovery { margin-top: 1.25rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.recovery summary { cursor: pointer; font-size: 14px; color: var(--ink-mid); }
.recovery .field { margin-top: .75rem; }

.qr { display: inline-block; padding: .75rem; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); margin: .5rem 0 1rem; }
.qr svg { display: block; }
.manual-key { margin-bottom: 1rem; font-size: 14px; }
.manual-key code { display: inline-block; margin-top: .35rem; padding: .35rem .5rem; background: var(--ground-alt); border-radius: var(--radius); word-break: break-all; }

.code-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .4rem; list-style: none; padding: 0; margin: 1rem 0 0;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 14px;
}
.code-list li { background: var(--ground); border: 1px solid var(--rule); border-radius: var(--radius); padding: .35rem .5rem; text-align: center; }

/* ----------------------------------------------------------- security page */

.container.narrow { max-width: 44rem; }

.panel {
    background: var(--ground); border: 1px solid var(--rule);
    border-radius: calc(var(--radius) * 2); padding: 1.5rem; margin-bottom: 1.5rem;
}
.panel h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
.panel-warn { border-color: var(--warn); background: color-mix(in srgb, var(--highlight) 7%, var(--ground)); }

.pill-good { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.pill-bad { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

.list-rows { list-style: none; padding: 0; margin: 0; }
.list-rows li {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap;
}
.list-rows li:last-child { border-bottom: 0; }
.list-rows .meta { display: block; font-size: 13px; color: var(--ink-soft); }

.table-plain { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-plain th { text-align: start; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding-bottom: .5rem; }
.table-plain td { padding: .5rem 0; border-top: 1px solid var(--rule); }

.notice-good { border-color: var(--ok); }
.notice-bad { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent); }
.notice-bad ul { margin: .4rem 0 0; padding-inline-start: 1.1rem; }

/* --------------------------------------------------------- account menu */

.account-menu { position: relative; }
.account-menu summary { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; list-style: none; font-size: 14.5px; }
.account-menu summary::-webkit-details-marker { display: none; }
.avatar {
    display: inline-grid; place-items: center; width: 26px; height: 26px;
    border-radius: 100px; background: var(--brand); color: #fff;
    font-size: 12px; font-weight: 700;
}
.account-panel {
    position: absolute; inset-inline-end: 0; top: calc(100% + .5rem); z-index: 20;
    min-width: 13rem; display: grid; gap: .5rem;
    background: var(--ground); border: 1px solid var(--rule);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: .75rem;
}
.account-panel .meta { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 .25rem; word-break: break-all; }
.account-panel a, .account-panel .link-button { font-size: 14px; text-decoration: none; }

.nav-cta {
    padding: .35rem .85rem; border: 1px solid var(--rule-strong);
    border-radius: var(--radius); font-weight: 620;
}

@media (max-width: 34rem) {
    .field-row { grid-template-columns: 1fr; }
    .auth-card { padding: 1.5rem 1.15rem; }
}
/* ==========================================================================
   Community writes and the partner area
   ========================================================================== */

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- composer */

.composer {
    background: var(--ground); border: 1px solid var(--rule);
    border-radius: calc(var(--radius) * 2); padding: 1rem 1.15rem; margin-bottom: 1.25rem;
}
.composer-head { display: flex; gap: .75rem; align-items: flex-start; }
.composer-head textarea {
    flex: 1; font: inherit; font-size: 15px; resize: vertical; min-height: 3rem;
    border: 0; background: transparent; color: var(--ink); padding: .35rem 0;
}
.composer-head textarea:focus { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.composer-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--rule);
}
.composer-signin { margin-bottom: 1.25rem; }

/* ----------------------------------------------------------- engagement */

.engagement {
    display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem;
    margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--rule);
}
.engagement form { display: contents; }

.engage {
    display: inline-flex; align-items: center; gap: .35rem;
    background: none; border: 0; padding: .35rem .55rem; border-radius: var(--radius);
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-mid);
    cursor: pointer; text-decoration: none; list-style: none;
}
.engage::-webkit-details-marker { display: none; }
.engage:hover { background: var(--ground-alt); color: var(--brand); }
/* Pressed state carries colour AND weight, so it does not rely on hue alone. */
.engage.is-on { color: var(--accent-strong); background: var(--brand-soft); font-weight: 700; }
.engage-danger { color: var(--danger); }
.engage-danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger); }
.engage-count { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-weight: 600; }

.report[open] { display: block; width: 100%; }
.report-form { display: grid; gap: .5rem; margin-top: .5rem; padding: .75rem; background: var(--ground-alt); border-radius: var(--radius); }
.report-form select, .report-form input { font: inherit; font-size: 14px; padding: .45rem .6rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--ground); color: var(--ink); }

.pill-button { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }

/* -------------------------------------------------------------- comments */

.comments { margin-top: 1.5rem; }
.comments-title { font-size: 1rem; margin: 0 0 .75rem; }

.comment-form { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.comment-form textarea {
    font: inherit; font-size: 14.5px; padding: .6rem .75rem; resize: vertical;
    border: 1px solid var(--rule-strong); border-radius: var(--radius);
    background: var(--ground); color: var(--ink); width: 100%;
}
.comment-form button { justify-self: start; }

.comment-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.comment { display: flex; gap: .75rem; align-items: flex-start; }
.comment-body { flex: 1; min-width: 0; }
.comment-body p { margin: 0 0 .35rem; }
.comment-meta { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.comment-actions { display: flex; gap: .25rem; flex-wrap: wrap; }
/* Replies indent on the inline start, so they nest correctly in Arabic too. */
.comment-replies { margin-block-start: .85rem; padding-inline-start: 1rem; border-inline-start: 2px solid var(--rule); }

.reply[open] { width: 100%; }
.reply .comment-form { margin-top: .5rem; }

/* ---------------------------------------------------------- partner area */

.partner-nav {
    display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
    font-size: 13.5px; color: var(--ink-soft); margin-bottom: 1.5rem;
    padding-bottom: .75rem; border-bottom: 1px solid var(--rule);
}
.partner-nav a { color: var(--ink-mid); text-decoration: none; }
.partner-nav a:hover { color: var(--brand); text-decoration: underline; }
.partner-nav [aria-current="page"] { color: var(--brand); font-weight: 650; }

.checkbox-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .25rem .75rem; max-height: 18rem; overflow-y: auto;
    padding: .5rem; border: 1px solid var(--rule); border-radius: var(--radius);
}
.checkbox-grid .check { margin-bottom: 0; font-size: 13.5px; }

.panel .form { margin-top: .5rem; }
.panel code { background: var(--ground-alt); padding: .2rem .4rem; border-radius: 3px; font-size: 13px; word-break: break-all; }

fieldset.field { border: 0; padding: 0; margin: 0 0 1rem; }
fieldset.field legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: .5rem; }
/* ==========================================================================
   Mailbox (module 11)
   ========================================================================== */

.mail-shell { display: grid; grid-template-columns: minmax(190px, 220px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }

.mail-sidebar { position: sticky; top: 1rem; }
.mail-address { font-size: 13px; color: var(--ink-soft); word-break: break-all; margin: 0 0 .75rem; }
.mail-sidebar ul { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .1rem; }
.mail-sidebar a {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .45rem .6rem; border-radius: var(--radius); text-decoration: none;
    color: var(--ink-mid); font-size: 14.5px;
}
.mail-sidebar a:hover { background: var(--ground-alt); color: var(--brand); }
.mail-sidebar a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); font-weight: 650; }

.mail-quota { padding-top: 1rem; border-top: 1px solid var(--rule); }
.quota-bar { height: 6px; background: var(--rule); border-radius: 100px; overflow: hidden; margin: .35rem 0; }
.quota-bar span { display: block; height: 100%; background: var(--accent); }

.mail-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.mail-toolbar h1 { font-size: 1.3rem; margin: 0; margin-inline-end: auto; }
.mail-search { display: flex; gap: .4rem; }
.mail-search input {
    font: inherit; font-size: 14px; padding: .45rem .6rem;
    border: 1px solid var(--rule-strong); border-radius: var(--radius);
    background: var(--ground); color: var(--ink);
}

.mail-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.mail-row { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--rule); }
.mail-row > a {
    flex: 1; min-width: 0; display: grid; gap: .1rem .75rem; padding: .7rem .5rem;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto;
    text-decoration: none; color: var(--ink);
}
.mail-row:hover { background: var(--ground-alt); }
/* Unread carries weight as well as colour, so it survives a colour-blind
   reader and a low-contrast screen alike. */
.mail-row.is-unread .mail-from, .mail-row.is-unread .mail-subject { font-weight: 700; }
.mail-row.is-unread { background: color-mix(in srgb, var(--brand-soft) 45%, transparent); }

.mail-from { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-subject { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-date { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.mail-snippet {
    grid-column: 2 / -1; font-size: 13px; color: var(--ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mail-view-subject { font-size: 1.35rem; margin: 0 0 .5rem; }
.mail-body {
    width: 100%; min-height: 22rem; border: 1px solid var(--rule);
    border-radius: var(--radius); background: #fff; margin-top: 1.25rem;
}
.mail-attachments-title { font-size: 1rem; margin: 1.5rem 0 .5rem; }

@media (max-width: 48rem) {
    .mail-shell { grid-template-columns: 1fr; }
    .mail-sidebar { position: static; }
    .mail-row > a { grid-template-columns: minmax(0, 1fr) auto; }
    .mail-snippet { display: none; }
}
/* ==========================================================================
   Admin shell
   A denser, quieter surface than the public site: this is a place of work, so
   the navy carries structure and colour is spent only on what needs attention.
   ========================================================================== */

.admin-body { background: var(--ground-alt); }

.admin-header { background: var(--navy-deep); color: #fff; position: sticky; top: 0; z-index: 30; }
.admin-header-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .6rem 1.25rem; max-width: 100rem; margin: 0 auto;
}
.admin-brand { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-weight: 700; }
.admin-header-right { display: flex; align-items: center; gap: 1rem; font-size: 14px; }
.admin-header-right .meta, .admin-header-right .link-button, .admin-exit { color: rgba(255,255,255,.85); }
.admin-exit { text-decoration: none; border: 1px solid rgba(255,255,255,.3); padding: .25rem .7rem; border-radius: var(--radius); }
.admin-exit:hover { background: rgba(255,255,255,.12); color: #fff; }

.admin-shell {
    display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: 2rem; max-width: 100rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem;
    align-items: start;
}

.admin-nav { position: sticky; top: 4rem; }
.admin-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.admin-nav a {
    display: block; padding: .5rem .7rem; border-radius: var(--radius);
    text-decoration: none; color: var(--ink-mid); font-size: 14.5px;
}
.admin-nav a:hover { background: var(--ground); color: var(--brand); }
.admin-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); font-weight: 650; }

.admin-main { min-width: 0; }
.admin-main h1 { font-size: 1.5rem; margin: 0 0 .35rem; }

/* The work queues. */
.queue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.queue-card {
    display: grid; gap: .25rem; padding: 1.15rem;
    background: var(--ground); border: 1px solid var(--rule);
    border-radius: calc(var(--radius) * 2); text-decoration: none; color: var(--ink);
}
.queue-card:hover { border-color: var(--accent); color: var(--ink); }
/* A left rail rather than a whole red card: the count still has to be readable,
   and a fully tinted card makes the number harder to read, not easier. */
.queue-card.is-urgent { border-inline-start: 3px solid var(--danger); }
.queue-count { font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--brand); }
.queue-card .pill { justify-self: start; margin-top: .35rem; }

.stat-row { display: flex; flex-wrap: wrap; gap: 2rem; margin: .5rem 0 1rem; }
.stat-row > div { display: grid; }
.stat-number { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.admin-main .table-plain td, .admin-main .table-plain th { padding: .55rem .5rem; }
.admin-main .table-plain tbody tr:hover { background: var(--ground-alt); }

.admin-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: 1.25rem; }
.admin-filters .field { margin-bottom: 0; max-width: 14rem; }

@media (max-width: 52rem) {
    .admin-shell { grid-template-columns: 1fr; gap: 1rem; }
    .admin-nav { position: static; }
    .admin-nav ul { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
}

/* Status tabs above a queue. Links, so the state stays in the URL. */
.admin-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.admin-tabs a {
    padding: .45rem .75rem; text-decoration: none; color: var(--ink-mid); font-size: 14.5px;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-tabs a:hover { color: var(--brand); }
.admin-tabs a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--accent); font-weight: 650; }
.tab-count { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 13px; margin-inline-start: .2rem; }

/* Detail screens: the record, and the actions on it beside it. */
.admin-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); gap: 1.5rem; align-items: start; }
.admin-columns aside { position: sticky; top: 4.5rem; display: grid; gap: 1rem; }

.crumb { font-size: 14px; margin: 0 0 .25rem; }

/* A wide table scrolls inside its own box; the page never scrolls sideways. */
.table-scroll { overflow-x: auto; margin-bottom: 1rem; }
.tnum { font-variant-numeric: tabular-nums; }
.ta-end { text-align: end; }
.db { display: block; }
.mt { margin-top: .75rem; }

.btn-sm { padding: .3rem .65rem; font-size: 13.5px; }

.lead-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.lead-head h2, .lead-head h3 { margin: 0; font-size: 1.05rem; }
.lead-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-top: .75rem; }
.lead-actions .field { margin-bottom: 0; max-width: 20rem; }
.inline-form { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }

.checkline { display: inline-flex; align-items: center; gap: .4rem; font-size: 14px; }
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.event-line { margin: 0 0 .35rem; font-size: 14px; }
.empty { color: var(--ink-soft); padding: 2rem 0; }

/* A definition list read as a two-column record. */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .75rem; margin: .5rem 0 1rem; font-size: 14px; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; }

/* A deadline that has already passed. Named as well as coloured, everywhere it
   is used — the colour alone would be the only signal for a reader who cannot
   see it. */
.is-past { color: var(--danger); font-weight: 650; }
.is-unread td { font-weight: 650; }

/* An emergency enquiry, marked the same way an urgent queue card is. */
.enquiry.is-urgent { border-inline-start: 3px solid var(--danger); }

@media (max-width: 60rem) {
    .admin-columns { grid-template-columns: 1fr; }
    .admin-columns aside { position: static; }
}

/* The student's document library. */
.doc-row {
    display: flex; justify-content: space-between; align-items: start; gap: 1rem;
    padding: .9rem 0; border-top: 1px solid var(--rule);
}
.doc-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 40rem) {
    .doc-row { flex-direction: column; }
    .doc-actions { justify-content: flex-start; }
}

/* The discipline tree. Indented on the inline start, so the four tiers nest
   correctly in Arabic as well as English. */
.tree { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tree .tree { padding-inline-start: 1.25rem; border-inline-start: 1px solid var(--rule); margin-top: .5rem; }
.tree-root { margin-bottom: 1.5rem; }
.tree-node { padding: .6rem 0 0; border-top: 1px solid var(--rule); }
.tree-node .lead-head { align-items: center; }
.tree-edit summary { cursor: pointer; font-size: 13.5px; color: var(--ink-mid); margin: .25rem 0; }
.tree-edit[open] { padding: .5rem 0 .75rem; }
.tree-edit .form { max-width: 44rem; }

/* Member trust. The tier is the whole point of the row, so it reads first. */
.trust-tier { font-weight: 650; }
.trust-manual { border-inline-start: 3px solid var(--accent); padding-inline-start: .5rem; }

/* Onboarding: a saved row with its actions on the trailing edge. Its own class
   rather than borrowing .doc-row, which belongs to the verification queue —
   sharing it would tie two unrelated screens to one set of paddings and make
   either one impossible to adjust alone. */
.onboard-row {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .6rem 0; border-top: 1px solid var(--rule);
}
.onboard-row > span { display: grid; gap: .15rem; }
.onboard-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 40rem) {
    .onboard-row { flex-direction: column; align-items: start; }
    .onboard-actions { justify-content: flex-start; }
}

/* ------------------------------------------------ the requirement tree editor

   Nesting is shown with an indent and a rule down the left rather than with
   colour, because the depth of a node is what changes its meaning — a leaf
   inside an "any" group is an alternative, and the same leaf one level out is a
   demand. A reader who cannot see which one they are looking at cannot check
   the rule, and colour alone would not survive being printed or read by anyone
   who does not see it.

   Logical properties throughout so the Arabic layout mirrors without a second
   stylesheet. */
.req-tree { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.req-tree .req-tree {
    margin-block-start: .5rem;
    margin-inline-start: .75rem;
    padding-inline-start: .9rem;
    border-inline-start: 2px solid var(--rule);
}

.req-node { padding: .6rem .75rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ground); }
.req-node-group { background: var(--ground-alt); }

.req-node-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.req-node-label { font-weight: 600; }

/* The all/any word, kept next to the label rather than below it — it is the
   difference between "and" and "or", and it must never be the thing a reader
   scrolls past. */
.req-badge {
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
    padding: .15rem .45rem; border-radius: 999px;
    background: var(--brand-soft); color: var(--brand-strong); white-space: nowrap;
}
.req-badge-any { background: color-mix(in srgb, var(--highlight) 22%, transparent); color: var(--gold-deep); }

.req-node-actions { display: flex; gap: .3rem; margin-inline-start: auto; flex-wrap: wrap; }
.req-node-actions form { display: inline; }

.req-edit summary,
.req-scores summary,
.req-add summary { cursor: pointer; font-size: 13.5px; color: var(--ink-mid); margin: .4rem 0 0; }

.req-add { margin-top: .75rem; }
.req-add .form + .form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }

.req-scores-read { margin-top: .35rem; }

/* One node of a checklist, at whatever depth it sits.
   Indent comes from the row itself (inline, from the walked parent chain)
   rather than from a nesting selector: the rows are a flat list on purpose,
   because a nested <ul> per branch makes an "any" group render as a bullet
   list of demands — which is precisely how "IELTS or TOEFL" starts reading as
   "IELTS and TOEFL". */
.checklist-row { padding-block: .6rem; border-top: 1px solid var(--rule); }
.checklist-row:first-child { border-top: 0; }
.checklist-row .meta { display: block; font-size: 13px; }
.checklist-row .field-hint { margin-top: .4rem; }

/* ---------------------------------------------------------------- content

   The block editor. Each block is a small form in its own right, so the rule
   between them is what tells an editor where one ends — without it a page of
   six paragraph blocks reads as one long undifferentiated form. */
.block-row { padding: 1rem 0; border-top: 1px solid var(--rule); }
.block-row:first-of-type { border-top: 0; }
.block-new { margin-top: 1.25rem; padding-top: 1rem; border-top: 2px solid var(--rule); }

/* Capped rather than natural size: a 4000px hero would otherwise push the
   sidebar's other panels off the fold on every article. */
.block-thumb {
    display: block; max-width: 100%; max-height: 12rem;
    border-radius: 6px; margin-bottom: .75rem;
}

/* The statement we send OUT to an agent: what they earned, what was deducted.
   It is read on screen and then printed or saved as a PDF and attached to an
   email, so the print rules are part of the document rather than a nicety —
   without them the admin chrome prints with it and the agent receives a page
   with our navigation down the side of their money. */
.statement-out h2 { margin-top: 1.5rem; }
.statement-out .stat-row { border-top: 1px solid var(--rule); padding-top: .9rem; margin-top: 1rem; }

@media print {
    .admin-nav, .admin-header, .crumb, .lead-actions, form { display: none; }
    .admin-shell, .admin-main { display: block; margin: 0; padding: 0; }
    .statement-out { border: 0; box-shadow: none; padding: 0; }
}

/* Fees and tuition.

   The discount form sits folded inside the row of the fee it belongs to. A
   discount only means anything against a line, and a separate panel below the
   table would let somebody attach twenty per cent to the wrong one — the
   arrangement is the guard, so the fold is styled rather than left raw. */
.fee-add summary { cursor: pointer; font-size: 13.5px; color: var(--ink-mid); margin: .4rem 0 0; }
.fee-add .form { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--rule); }

/* The resolved total, beside the fields that produced it. A wrong digit is
   caught by this number moving by a factor of ten while somebody watches, which
   is the only check validation cannot make. */
.fee-total { border-top: 1px solid var(--rule); padding-top: .75rem; margin-top: .75rem; }
.fee-total th { border-top: 1px solid var(--rule); font-weight: 700; }