@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Cairo:wght@400;500;600;700&display=swap');

/* Scholar Outlook — polish pass on the existing markup.
   Same class names as before, so this file can replace public/css/scholars.css.
   Headings: Source Serif 4 (Latin) / Cairo (Arabic, via the fallback chain).
   Interface + Arabic body: Cairo. Navy #1e3a5f is the brand; terracotta #9c4b2f
   is reserved for deadlines, urgency and destructive actions. */

:root {
  --ink: #1b1b19;
  --ink-soft: #3f3d38;
  --muted: #5f5c55;
  --page: #f6f5f2;
  --surface: #fff;
  --border: #e6e2d9;
  --border-strong: #c9c4b8;
  --rule: #efece5;
  --primary: #1e3a5f;
  --primary-tint: #eaeff5;
  --primary-tint-border: #d3dce7;
  --accent: #9c4b2f;
  --accent-ink: #8f3f22;
  --accent-tint: #f9ece6;
  --ok-ink: #2f5d43;
  --ok-tint: #e7efe9;
  --wait-ink: #77621f;
  --wait-tint: #f4f0e6;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Cairo', Tahoma, Arial, sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--page);
  font-size: 16px;
  line-height: 1.7;
}

* { box-sizing: border-box }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column }

/* Type ------------------------------------------------------------------ */

h1, h2, h3 { font-family: var(--serif); letter-spacing: -.015em; line-height: 1.2; font-weight: 600 }
:root[lang="ar"] h1, :root[lang="ar"] h2, :root[lang="ar"] h3 { font-family: var(--sans); font-weight: 700; letter-spacing: 0; line-height: 1.35 }
h1 { font-size: clamp(2rem, 3.4vw, 2.4rem); margin: 0 0 1rem }
h2 { font-size: 1.375rem; margin: 0 0 .5rem }
h3 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0 }
p { margin: 0 0 1rem }
p:last-child { margin-bottom: 0 }
.muted { color: var(--muted) }
.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .65rem;
}
.intro .eyebrow { color: var(--accent) }
:root[lang="ar"] .eyebrow { letter-spacing: .04em; text-transform: none; font-size: .82rem }
.preserve-lines { white-space: pre-line; max-width: 66ch; color: var(--ink-soft); line-height: 1.8 }
a { color: var(--primary); text-underline-offset: 4px; text-decoration-thickness: 1px }
a:hover { color: var(--accent) }

/* Controls -------------------------------------------------------------- */

button, input, select, textarea { font: inherit }
button, .button {
  cursor: pointer; display: inline-block; text-align: center; text-decoration: none;
  background: var(--primary); color: #fff; border: 1px solid var(--primary);
  border-radius: 7px; padding: .7rem 1.25rem; font-size: .9375rem; font-weight: 600;
}
button[hidden], .button[hidden] { display: none }
button:hover, .button:hover { background: #17304f; color: #fff }
button.secondary, .button.secondary { background: var(--surface); color: var(--primary); border-color: var(--border-strong) }
button.secondary:hover, .button.secondary:hover { background: #faf9f6; color: var(--primary); border-color: #b4ada0 }
button.danger, .button.danger { background: var(--surface); color: var(--accent-ink); border-color: #e3cec4 }
button.danger:hover, .button.danger:hover { background: var(--accent-tint); color: var(--accent-ink); border-color: var(--accent) }
button[disabled], .button[disabled], .button[aria-disabled="true"] { background: #f6f4ef; color: #9a968d; border-color: var(--border); cursor: not-allowed }
.full { width: 100% }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px }

.field { margin: 0 0 1.15rem }
.field label { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .4rem }
.field input, .field select, .field textarea {
  width: 100%; max-width: 100%; padding: .7rem .8rem; border: 1px solid var(--border-strong);
  border-radius: 7px; background: var(--surface); color: var(--ink);
}
.field textarea { resize: vertical; min-height: 7rem }
.field small { display: block; margin-top: .4rem; font-size: .8125rem; color: var(--muted) }
.field input[type=email], .field input[type=password], .field input[type=url] { direction: ltr; text-align: start }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #b4ada0 }
.field input[readonly], .field input[readonly]:hover { background: #f6f4ef; color: var(--muted); border-color: var(--border) }

fieldset { border: 0; padding: 0; margin: 0 0 1.25rem }
legend { padding: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink) }
:root[lang="ar"] legend { letter-spacing: 0; text-transform: none; font-size: .875rem }

/* Option lists (select-search.js): the site's own list replaces the browser's menu, and a multiple choice
   shows chips. The native select stays in the form; a multiple one is only hidden from sight. */
select { cursor: pointer }
select.is-open { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint) }
.select-native-hidden {
  position: absolute !important; inline-size: 1px !important; block-size: 1px !important; min-block-size: 0 !important;
  padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none;
}
.select-trigger {
  display: flex; align-items: center; gap: .5rem; inline-size: 100%; max-inline-size: 100%; min-block-size: 2.875rem;
  padding: .4rem .6rem; padding-inline-start: .45rem; border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--surface); color: var(--ink); cursor: pointer; text-align: start;
}
.select-trigger:hover { border-color: #b4ada0 }
.select-trigger.is-open { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint) }
.select-trigger[aria-disabled="true"] { background: #f6f4ef; color: #9a968d; cursor: not-allowed }
.select-trigger[aria-invalid="true"] { border-color: var(--accent-ink) }
.select-chips { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1; min-inline-size: 0 }
.select-placeholder, .select-summary { padding: .25rem .3rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.select-summary { color: var(--ink) }
.select-chip {
  display: inline-flex; align-items: center; gap: .2rem; max-inline-size: 100%; padding-block: .2rem; padding-inline: .6rem .2rem;
  background: var(--primary-tint); border: 1px solid var(--primary-tint-border); border-radius: 100px;
  color: var(--primary); font-size: .84rem; font-weight: 600; line-height: 1.4;
}
.select-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
button.select-chip-remove {
  display: inline-grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; padding: 0; flex: none;
  background: transparent; border: 0; border-radius: 50%; color: var(--primary);
}
button.select-chip-remove:hover { background: #d3dce7; color: var(--accent-ink) }
.select-chip-remove svg { inline-size: .65rem; block-size: .65rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round }
.select-caret {
  flex: none; inline-size: .6rem; block-size: .6rem; margin-inline-end: .25rem; border: solid var(--muted);
  border-width: 0 1.6px 1.6px 0; transform: translateY(-25%) rotate(45deg); transition: transform .15s;
}
.select-trigger.is-open .select-caret { transform: translateY(20%) rotate(-135deg) }

.select-panel {
  position: fixed; z-index: 70; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 16px 36px -12px rgba(27, 27, 25, .22), 0 3px 8px rgba(27, 27, 25, .06);
  font-size: .9375rem; color: var(--ink); animation: select-in .12s ease-out;
}
.select-panel.is-up { animation-name: select-in-up }
.select-panel[hidden] { display: none }
@keyframes select-in { from { opacity: 0; transform: translateY(-4px) } }
@keyframes select-in-up { from { opacity: 0; transform: translateY(4px) } }
@media (prefers-reduced-motion: reduce) { .select-panel { animation: none } .select-caret { transition: none } }
.select-panel-search { flex: none; padding: .5rem; border-bottom: 1px solid var(--rule) }
.select-search {
  inline-size: 100%; padding: .55rem .7rem; padding-inline-start: 2.1rem; border: 1px solid #d7d2c6; border-radius: 7px;
  background: #faf9f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%235f5c55' stroke-width='1.6'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%235f5c55' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left .75rem center;
  font-size: .875rem; color: var(--ink);
}
.select-panel[dir="rtl"] .select-search { background-position: right .75rem center }
.select-search:focus { outline: 0; border-color: var(--primary); background-color: var(--surface) }
.select-options { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: .3rem; list-style: none }
.select-options:focus { outline: 0 }
.select-group {
  padding: .6rem .65rem .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
:root[lang="ar"] .select-group { letter-spacing: 0; font-size: .8rem }
.select-option {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 6px;
  color: var(--ink-soft); cursor: pointer; line-height: 1.4; user-select: none;
}
.select-option-label { flex: 1; min-inline-size: 0; overflow-wrap: anywhere }
.select-option.is-blank { color: var(--muted) }
.select-option.is-active { background: #f3f1ec; color: var(--ink) }
.select-option[aria-selected="true"] { color: var(--primary); font-weight: 600 }
.select-option[aria-selected="true"].is-active { background: var(--primary-tint) }
.select-option[aria-disabled="true"] { color: #aaa59b; cursor: not-allowed; background: none }
.select-mark { order: 2; flex: none; display: grid; place-items: center; inline-size: 1.1rem; block-size: 1.1rem; color: var(--primary); visibility: hidden }
.select-mark svg { inline-size: .95rem; block-size: .95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.select-option[aria-selected="true"] .select-mark { visibility: visible }
.is-multi .select-mark { order: 0; visibility: visible; border: 1.5px solid var(--border-strong); border-radius: 4px; background: var(--surface); color: #fff }
.is-multi .select-mark svg { visibility: hidden; inline-size: .75rem; block-size: .75rem; stroke-width: 2.4 }
.is-multi .select-option[aria-selected="true"] .select-mark { background: var(--primary); border-color: var(--primary) }
.is-multi .select-option[aria-selected="true"] .select-mark svg { visibility: visible }
.select-empty { margin: 0; padding: 1rem .9rem 1.1rem; text-align: center; font-size: .875rem; color: var(--muted) }
.select-panel-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .5rem .5rem .5rem .8rem; border-top: 1px solid var(--rule); background: #faf9f6; font-size: .84rem; color: var(--muted);
}
.select-foot-actions { display: flex; gap: .4rem; margin-inline-start: auto }
.select-panel-foot button { padding: .35rem .75rem; font-size: .84rem; border-radius: 6px }
button.select-clear { background: none; border-color: transparent; color: var(--muted) }
button.select-clear:hover { background: #f0ede6; color: var(--accent-ink); border-color: transparent }

/* Shell ----------------------------------------------------------------- */

header { background: var(--surface); border-bottom: 1px solid var(--border) }
.nav {
  max-width: 1160px; margin: auto; display: flex; gap: 2rem; align-items: center;
  min-height: 72px; padding: 1rem 1.5rem; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; line-height: 0 }
.brand img { display: block; height: 26px; width: auto }
.nav-links { display: flex; align-items: center; gap: 1.5rem; flex: 1; flex-wrap: wrap }
.nav-links a { text-decoration: none; font-size: .9375rem; font-weight: 600; color: var(--ink-soft); display: inline-block; padding-block: .5rem }
.nav-links a:hover { color: var(--primary) }
.nav-links a[aria-current] { color: var(--primary); border-bottom: 2px solid var(--accent) }
.nav-actions { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap }
.nav-actions a { text-decoration: none; font-size: .9375rem; font-weight: 600; display: inline-block; padding-block: .5rem }
.nav-actions button, .nav-actions .button { padding: .5rem .9rem; font-size: .875rem }

main { max-width: 1160px; width: 100%; margin: 0 auto; flex: 1 0 auto; padding: 2.75rem 1.5rem 3.25rem; min-height: 72vh }
main > * + * { margin-top: 1.5rem }
.page-heading { margin-bottom: .5rem }
.page-heading h1 { margin-bottom: .5rem }
.page-heading .muted { max-width: 72ch }
.intro { max-width: 46rem; padding: 2.5rem 0 1rem }
.intro h1 { font-size: clamp(2.2rem, 4.2vw, 3.25rem); line-height: 1.1; letter-spacing: -.02em }
:root[lang="ar"] .intro h1 { line-height: 1.35 }
.intro .muted { font-size: 1.125rem; max-width: 38rem }
.actions { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1.5rem }

.site-footer { border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: .9rem }
.footer-columns { max-width: 1160px; margin: auto; padding: 2.75rem 1.5rem 2.25rem; display: flex; flex-wrap: wrap; gap: 2.5rem }
.footer-brand-column { flex: 1.3 1 16rem; max-width: 34ch; display: flex; flex-direction: column; gap: .75rem }
.footer-brand-column p { margin: 0 }
.footer-brand-column a:not(.brand) { font-weight: 600 }
.footer-links { flex: 1 1 9rem; display: flex; flex-direction: column; gap: .65rem }
.footer-links h3 { margin: 0 0 .15rem; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted) }
:root[lang="ar"] .footer-links h3 { font-size: .8125rem; letter-spacing: 0; text-transform: none }
.footer-links a { text-decoration: none; color: var(--ink-soft) }
.footer-links a:hover { color: var(--primary); text-decoration: underline }
.footer-bar { border-top: 1px solid var(--border); background: #faf9f6 }
.footer-bar > div {
  max-width: 1160px; margin: auto; padding: 1.1rem 1.5rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-size: .84rem;
}
.footer-bar p { margin: 0 }
.footer-bar-links { display: flex; align-items: center; gap: .9rem }
.footer-bar-links a { color: var(--muted) }
.footer-bar-links button { padding: .45rem .8rem; font-size: .84rem }
.skip { position: absolute; inset-inline-start: 1rem; top: -100px }
.skip:focus { top: 1rem; background: var(--primary); color: #fff; border-radius: 7px; padding: .56rem .875rem; font-size: .875rem; font-weight: 600; text-decoration: none; z-index: 60 }

/* Surfaces -------------------------------------------------------------- */

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.75rem }
.panel + .panel { margin-top: 1rem }
.panel > h2 { margin-bottom: .75rem }
.empty { text-align: center; padding: 3rem 1.5rem }
.empty h2 { margin-bottom: .5rem }
.auth { max-width: 28.25rem; margin: 2.5rem auto; padding: 2.125rem }
.auth > p.muted { font-size: .97rem; line-height: 1.6 }
.auth .divider { margin: 1.25rem 0 .75rem }
.errors-title { margin: 0; font-weight: 700; font-size: .97rem }
.auth h1 { font-size: 1.875rem }
.divider { border: 0; border-top: 1px solid var(--rule); margin: 1.4rem 0 }

.notice {
  background: var(--surface); border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent); border-radius: 10px;
  padding: 1.1rem 1.35rem; margin-bottom: 1rem;
}
.notice p { margin-bottom: .75rem }
.errors {
  color: var(--accent-ink); background: #fcf3ef; border: 1px solid #e3cec4;
  border-radius: 10px; padding: 1.1rem 1.35rem;
}
.errors ul { margin: .35rem 0 0; padding-inline-start: 1.25rem }

/* Filters and compact forms -------------------------------------------- */

.filters, .compact-form { display: flex; flex-direction: column; gap: 1.35rem }
.filter-head { display: grid; grid-template-columns: 2fr 1fr; gap: 1.1rem }
.compact-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; align-items: end }
.filter-field { display: flex; flex-direction: column; gap: .45rem }
.filter-field > span { font-size: .8125rem; font-weight: 600; color: var(--ink-soft) }
.filter-field input, .filter-field select {
  padding: .7rem .8rem; border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--surface); color: var(--ink);
}
.filter-groups {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem;
  padding-top: 1.35rem; border-top: 1px solid var(--rule);
}
.filter-group { display: flex; flex-direction: column; gap: .65rem; margin: 0 }
.option-search {
  padding: .55rem .7rem; border: 1px solid #d7d2c6; border-radius: 6px;
  background: #faf9f6; font-size: .875rem;
}
.check-list { display: flex; flex-direction: column; gap: .55rem; max-height: 11rem; overflow: auto }
.check { display: flex; align-items: center; gap: .55rem; font-size: .9375rem; color: var(--ink-soft); padding-block: .1rem }
.check input { accent-color: var(--primary) }
.check-empty { font-size: .875rem; color: var(--muted) }
details > summary {
  cursor: pointer; font-size: .9375rem; font-weight: 600; color: var(--primary);
  padding-block: .5rem; border-top: 1px solid var(--rule); padding-top: 1.1rem;
}
details[open] > summary { margin-bottom: 1rem }
.filter-actions { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap }
.filters .filter-actions { padding-top: 1.35rem; border-top: 1px solid var(--rule); justify-content: flex-end }

.applied { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-size: .875rem }
.applied > span { font-weight: 600; color: var(--muted) }
.chip {
  display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
  background: var(--primary-tint); border: 1px solid var(--primary-tint-border);
  color: var(--primary); border-radius: 100px; padding: .35rem .75rem; font-weight: 600;
}
.chip:hover { background: #dee7f1; color: var(--primary) }
.chip .remove { color: #5f7691 }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }

.results-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  padding-bottom: .35rem; border-bottom: 1px solid #e0dcd2;
}
.results-count { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; margin: 0 }
:root[lang="ar"] .results-count { font-family: var(--sans); font-weight: 700 }
.results-head .muted { margin: 0; font-size: .84rem; max-width: 30rem; text-align: end }

/* Result cards ---------------------------------------------------------- */

.scholarship-list { display: flex; flex-direction: column; gap: 1rem }
.scholarship-card { display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; gap: 2rem }
.scholarship-card > div:first-child { display: flex; flex-direction: column; gap: .75rem }
.scholarship-card h2 { margin: 0; font-size: 1.5rem; line-height: 1.25 }
.scholarship-card h2 a { color: var(--ink); text-decoration: none }
.scholarship-card h2 a:hover { color: var(--primary); text-decoration: underline }
.scholarship-card .summary { margin: 0; color: var(--muted); max-width: 62ch }
.card-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.15rem; font-size: .9rem }
.card-facts dt { color: var(--muted) }
.card-facts dd { margin: 0; font-weight: 600 }
.card-aside {
  display: flex; flex-direction: column; gap: .75rem; align-items: flex-start;
  border-inline-start: 1px solid var(--rule); padding-inline-start: 1.75rem;
}
.card-aside .deadline { display: flex; flex-direction: column; gap: .15rem; margin: 0; font-size: .78rem; color: var(--muted) }
.card-aside .deadline strong { font-family: var(--serif); font-size: 1.0625rem; color: var(--ink) }
.details-link { font-size: .9375rem; font-weight: 600; text-decoration: none }
.scholarship-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem }
.scholarship-grid .panel { display: flex; flex-direction: column; gap: .65rem; padding: 1.5rem }
.scholarship-grid h2 { font-size: 1.25rem; line-height: 1.3 }

.badge {
  display: inline-block; border-radius: 100px; padding: .3rem .7rem;
  font-size: .78rem; font-weight: 700; background: var(--primary-tint); color: var(--primary);
}
/* Tones: open = can act now, upcoming = not yet, urgent/overdue = act soon, closed/neutral/unknown/optional = no action. */
.badge.closed, .badge.neutral, .badge.unknown, .badge.optional { background: #eeece7; color: var(--muted) }
.badge.urgent, .badge.overdue { background: var(--accent-tint); color: var(--accent-ink) }
.badge.open { background: var(--ok-tint); color: var(--ok-ink) }
.badge.upcoming { background: var(--wait-tint); color: var(--wait-ink) }

/* Scholarship detail ---------------------------------------------------- */

.detail-heading { padding-bottom: 1.6rem; border-bottom: 1px solid #e0dcd2 }
.detail-heading h1 { font-size: clamp(2.2rem, 3.6vw, 2.65rem); margin-bottom: .85rem }
.facts { display: flex; gap: .55rem; flex-wrap: wrap }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2rem; align-items: start }
.detail-body { display: flex; flex-direction: column; gap: 1rem }
.detail-body .panel + .panel { margin-top: 0 }
.detail-body .panel { padding: 1.75rem 1.9rem }
.detail-aside { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1.5rem }
.detail-aside .panel + .panel { margin-top: 0 }
.detail-aside h2 { font-size: 1.25rem }
.detail-aside .button, .detail-aside button { width: 100%; padding-block: .8rem }
.stack-sm { margin-top: .65rem }

.definition-list { margin: 0; display: flex; flex-direction: column }
.definition-list > div { display: flex; flex-direction: column; gap: .2rem; padding: .75rem 0; border-top: 1px solid var(--rule) }
.definition-list dt { font-size: .8rem; color: var(--muted) }
.definition-list dd { margin: 0; font-size: .9375rem; font-weight: 600 }
.detail-body .definition-list { margin-top: .5rem }
.university-contact { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--rule) }
.university-contact:first-of-type { padding-top: 0; margin-top: 0; border-top: 0 }
.university-contact h3 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .35rem }

/* Documents, glossary, pagination -------------------------------------- */

.scan-status { font-weight: 700; font-size: .78rem; border-radius: 100px; padding: .3rem .7rem }
.scan-clean { background: var(--ok-tint); color: var(--ok-ink) }
.scan-pending { background: var(--wait-tint); color: var(--wait-ink) }
.scan-blocked, .scan-failed { background: var(--accent-tint); color: var(--accent-ink) }
.scan-off { background: #eeece7; color: var(--muted) }

.glossary-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; max-width: 54rem }
.glossary-actions { display: flex; gap: .65rem }
.glossary { max-width: 54rem; padding: .5rem 1.9rem 1.5rem }
.glossary dl { margin: 0 }
.term { padding: 1.4rem 0; border-bottom: 1px solid var(--rule) }
.term:last-child { border-bottom: 0 }
.term dt { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; margin-bottom: .5rem }
.term-name { font-family: var(--serif); font-size: 1.3125rem; font-weight: 600 }
:root[lang="ar"] .term-name { font-family: var(--sans); font-weight: 700 }
.term-alt { font-size: 1.0625rem; font-weight: 600; color: var(--muted) }
.term dd { margin: 0 }

time { font-variant-numeric: tabular-nums }

/* Narrow screens -------------------------------------------------------- */

@media (max-width: 960px) {
  .scholarship-card { grid-template-columns: 1fr }
  /* Dates, the apply button and saving come first on a phone, before the long reading. */
  .detail-grid { display: flex; flex-direction: column }
  .detail-aside { position: static; order: -1 }
  .card-aside {
    border-inline-start: 0; padding-inline-start: 0; padding-top: 1rem;
    border-top: 1px solid var(--rule); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem;
  }
  .filter-groups, .scholarship-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 700px) {
  main { padding: 1.75rem 1rem 2.5rem }
  .nav { padding: .85rem 1rem; gap: .8rem; min-height: 0 }
  .nav-links { order: 3; flex-basis: 100%; gap: 1.15rem; padding-top: .35rem; border-top: 1px solid var(--rule) }
  .nav-actions { margin-inline-start: auto }
  .brand img { height: 22px }
  .filter-groups, .filter-head, .scholarship-grid, .glossary-search, .compact-form { grid-template-columns: 1fr }
  .intro { padding: 1.25rem 0 .5rem }
  .results-head { flex-direction: column; align-items: flex-start; gap: .5rem }
  .results-head .muted { text-align: start }
  .actions > .button, .actions > button, .filter-actions > .button, .filter-actions > button { flex: 1 1 auto }
  .panel { padding: 1.35rem }
  .auth { margin: 1rem auto; padding: 1.5rem }
  .glossary { padding: .5rem 1.35rem 1.25rem }
  .term dt { flex-direction: column; gap: .15rem }
}

/* Workspace list pager and one-line checkboxes -------------------------- */

.pager { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem }
.pager-count { color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums }
.pager-off {
  display: inline-block; padding: .7rem 1.25rem; border: 1px solid var(--border); border-radius: 7px;
  background: #f6f4ef; color: #9a968d; font-size: .9375rem; font-weight: 600;
}
.check-inline { display: flex; align-items: center; gap: .55rem; min-height: 2.75rem; cursor: pointer; color: var(--ink-soft) }
.check-inline input { inline-size: 1.1rem; block-size: 1.1rem; margin: 0; accent-color: var(--primary); flex: none }

/* Home ------------------------------------------------------------------
   Sections are separated by hairlines. The tinted and navy bands run to the
   window edges without widening the page: a spread shadow paints the colour
   and clip-path trims it back to the height of the band. */

main:has(> .cta-band:last-child) { padding-bottom: 0 }
main > .home-section { margin-top: 0 }

.home-section { padding: 3.5rem 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 1.5rem }
.home-section h2 { font-size: 1.875rem; margin: 0 }
.home-section .eyebrow { color: var(--accent); margin: 0 }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap }
.section-head > div { display: flex; flex-direction: column; gap: .5rem; max-width: 40rem }
.section-head .muted { margin: 0 }
.section-link { font-size: .9375rem; font-weight: 600; text-decoration: none }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem }
.card-grid .panel + .panel { margin-top: 0 }

.home-hero { padding: 2.5rem 0 3.5rem; gap: 2rem }
.home-hero .intro { padding: 0 }
.home-hero .intro h1 { margin-bottom: 1rem }
.hero-search {
  display: flex; gap: .65rem; max-width: 55rem; padding: .65rem;
  background: var(--surface); border: 1px solid #d7d2c6; border-radius: 10px; box-shadow: 0 1px 0 var(--rule);
}
.hero-search:focus-within { border-color: #526d89 }
.hero-search input { flex: 1; min-width: 0; padding: .85rem 1rem; border: 0; background: transparent; color: var(--ink); font-size: 1.03rem }
.hero-search input:focus-visible { outline: 0 }
.hero-search select { padding: .85rem .75rem; border: 1px solid #e0dcd2; border-radius: 7px; background: #faf9f6; color: var(--ink-soft) }
.hero-search .select-trigger { flex: none; inline-size: auto; min-inline-size: 11.5rem; max-inline-size: 15rem; padding-inline: .5rem .75rem; border-color: #e0dcd2; background: #faf9f6; color: var(--ink-soft) }
.hero-search button { padding-inline: 1.6rem }
.quick-links { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-size: .85rem }
.quick-links > span { color: var(--muted) }
.quick-links a {
  background: var(--surface); border: 1px solid #dcd8cf; border-radius: 100px;
  padding: .45rem .9rem; font-weight: 600; text-decoration: none;
}
.quick-links a:hover { border-color: var(--border-strong); color: var(--primary) }
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; max-width: 55rem; margin: 0;
  background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.stats > div { background: var(--surface); padding: 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .2rem }
.stats dt { order: 2; font-size: .8125rem; color: var(--muted) }
.stats dd { order: 1; margin: 0; white-space: nowrap; font-family: var(--serif); font-size: 1.7rem; font-weight: 600; line-height: 1.2 }
:root[lang="ar"] .stats dd { font-family: var(--sans); font-weight: 700 }

.closing-card, .browse-card, .term-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem }
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem }
.provider, .browse-card h3 { font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted) }
:root[lang="ar"] .provider, :root[lang="ar"] .browse-card h3 { font-size: .8125rem; letter-spacing: 0; text-transform: none }
.closing-card h3, .term-card h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin: 0 }
:root[lang="ar"] .closing-card h3, :root[lang="ar"] .term-card h3 { font-family: var(--sans); font-weight: 700; letter-spacing: 0 }
.closing-card h3 a { color: var(--ink); text-decoration: none }
.closing-card h3 a:hover { color: var(--primary); text-decoration: underline }
.closing-card .meta { margin: 0; font-size: .9rem; color: var(--muted) }
.closing-card .closes { margin: auto 0 0; padding-top: .75rem; border-top: 1px solid var(--rule); font-size: .875rem; color: var(--muted) }
.closing-card .closes strong { color: var(--ink) }

.browse-card h3 { margin: 0 }
.browse-options { display: flex; flex-wrap: wrap; gap: .5rem }
.browse-options a {
  background: #f6f4ef; border: 1px solid var(--border); border-radius: 7px;
  padding: .5rem .8rem; font-size: .9rem; font-weight: 600; text-decoration: none;
}
.browse-options a:hover { border-color: var(--border-strong); color: var(--primary) }
.browse-options span { margin-inline-start: .3rem; color: var(--muted); font-weight: 500 }
.browse-card .section-link { margin-top: auto }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none }
.steps li { display: flex; flex-direction: column; gap: .75rem; padding-top: 1.25rem; border-top: 3px solid var(--primary) }
.step-number { font-family: var(--serif); font-size: .9375rem; font-weight: 700; color: var(--accent) }
.steps h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; margin: 0 }
:root[lang="ar"] .steps h3 { font-family: var(--sans); font-weight: 700; letter-spacing: 0 }
.steps p { margin: 0; font-size: .97rem; line-height: 1.75; color: var(--muted) }

.home-trust {
  display: grid; grid-template-columns: minmax(0, 1fr) 26rem; gap: 3rem; align-items: center;
  background: #f2efe8; box-shadow: 0 0 0 100vmax #f2efe8; clip-path: inset(0 -100vmax);
}
.home-trust > div:first-child { display: flex; flex-direction: column; gap: 1.25rem }
.trust-points { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.75rem; max-width: 40rem }
.trust-points dt { font-size: .97rem; font-weight: 700 }
.trust-points dd { margin: .25rem 0 0; font-size: .9rem; line-height: 1.7; color: var(--muted) }
.page-facts { display: flex; flex-direction: column; gap: .9rem; padding: 1.5rem }
.home-section .page-facts .eyebrow { color: var(--muted) }
.page-facts dl { margin: 0 }
.page-facts dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--rule); font-size: .9rem }
.page-facts dt { color: var(--muted) }
.page-facts dd { margin: 0; font-weight: 600; text-align: end }
.disclaimer { margin: 0; padding: .75rem .9rem; border-radius: 8px; background: #faf9f6; font-size: .85rem; line-height: 1.7; color: var(--muted) }

.workspace-promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center }
.workspace-promo > div:first-child { display: flex; flex-direction: column; gap: .5rem }
.workspace-promo .actions { margin-top: 1rem }
.feature-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .9rem }
.feature-list li { display: flex; gap: .75rem; font-size: .97rem; line-height: 1.7 }
.feature-list li::before { content: "—"; color: var(--accent); font-weight: 700 }

.term-card p { margin: 0; font-size: .94rem; line-height: 1.7; color: var(--muted) }

.home-faq { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: 2.5rem; align-items: start }
.home-faq > div:first-child { display: flex; flex-direction: column; gap: .5rem }
.faq { margin: 0 }
.faq > div { padding: 1.25rem 0; border-top: 1px solid #e0dcd2 }
.faq > div:last-child { border-bottom: 1px solid #e0dcd2 }
.faq dt { font-size: 1.09rem; font-weight: 700 }
.faq dd { margin: .45rem 0 0; max-width: 70ch; font-size: .97rem; line-height: 1.75; color: var(--muted) }

.cta-band {
  flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2.5rem; border-bottom: 0;
  background: var(--primary); box-shadow: 0 0 0 100vmax var(--primary); clip-path: inset(0 -100vmax);
}
.cta-band h2 { color: #fff; font-size: 2rem }
.cta-band p { margin: .6rem 0 0; max-width: 38rem; font-size: 1.03rem; color: #cdd8e4 }
.cta-band .actions { margin-top: 0 }
.cta-band .button { background: #fff; color: var(--primary); border-color: #fff }
.cta-band .button:hover { background: var(--primary-tint); color: var(--primary) }
.cta-band .button.secondary { background: transparent; color: #fff; border-color: #6b83a0 }
.cta-band .button.secondary:hover { background: #17304f; color: #fff }
.cta-band :focus-visible { outline-color: #fff }

@media (max-width: 960px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .home-trust, .home-faq, .workspace-promo { grid-template-columns: 1fr }
}

@media (max-width: 700px) {
  .home-section { padding: 2.5rem 0 }
  .home-section h2 { font-size: 1.5rem }
  .home-hero { padding-top: 1.25rem }
  .hero-search { flex-direction: column }
  .hero-search input { padding-inline: .5rem }
  .hero-search .select-trigger { max-inline-size: none }
  .card-grid, .steps, .trust-points { grid-template-columns: 1fr }
  .cta-band h2 { font-size: 1.6rem }
}

@media (max-width: 700px) {
  .nav-actions .nav-register { display: none }
  .stats dd { font-size: 1.35rem }
}

/* Home additions: glossary card titles. */
.term-card h3 a { color: var(--ink); text-decoration: none }
.term-card h3 a:hover { color: var(--primary); text-decoration: underline }

/* The link under a sign-in or recovery form. */
.auth form + p { margin-top: 1.1rem }

/* Cards laid out in a grid are spaced by the grid gap, not by the stacked-panel margin. */
.scholarship-grid > .panel + .panel { margin-top: 0 }

/* Legal pages ----------------------------------------------------------- */

.legal-heading { display: flex; flex-direction: column; gap: .75rem; max-width: 70ch }
.legal-heading h1 { margin: 0; font-size: clamp(2.2rem, 3.6vw, 2.65rem) }
.legal-heading .muted { margin: 0; font-size: 1.0625rem }
.breadcrumb { margin: 0; font-size: .85rem; color: var(--muted) }
.breadcrumb a { text-decoration: none }
.breadcrumb span[aria-hidden="true"] { color: #b6b1a6; margin-inline: .4rem }
.breadcrumb [aria-current] { color: var(--muted) }
.legal-meta { margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted) }
.legal-meta strong { color: var(--ink) }
.legal-grid { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); gap: 3rem; align-items: start; margin-top: 2rem }
.toc { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: .55rem; padding: 1.25rem }
.toc h2 { margin: 0 0 .25rem; font-family: var(--sans); font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted) }
:root[lang="ar"] .toc h2 { font-size: .8125rem; letter-spacing: 0; text-transform: none }
.toc a { font-size: .875rem; text-decoration: none; color: var(--ink-soft) }
.toc a:hover { color: var(--primary); text-decoration: underline }
.legal-article { display: flex; flex-direction: column; gap: 1.9rem; max-width: 72ch }
.legal-section { display: flex; flex-direction: column; gap: .65rem }
.legal-section h2 { margin: 0; font-size: 1.5625rem; letter-spacing: -.01em }
.legal-section p, .legal-section li { margin: 0; line-height: 1.8; color: var(--ink-soft) }
.callout { background: #f2efe8; border-radius: 10px; padding: 1rem 1.15rem }
.legal-table {
  width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; background: var(--surface); font-size: .97rem;
}
.legal-table th, .legal-table td { padding: .8rem 1.1rem; text-align: start; border-bottom: 1px solid var(--rule) }
.legal-table th { font-size: .8125rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted) }
:root[lang="ar"] .legal-table th { font-size: .875rem; letter-spacing: 0; text-transform: none }
.legal-table td:last-child { width: 15rem; color: var(--muted) }
.legal-table tr:last-child td { border-bottom: 0 }

@media (max-width: 960px) {
  .legal-grid { grid-template-columns: 1fr; gap: 1.5rem }
  .toc { position: static }
}

@media (max-width: 700px) {
  .footer-columns { padding: 2rem 1rem; gap: 1.75rem }
  .footer-bar > div { padding: 1rem }
  .legal-section h2 { font-size: 1.3rem }
  .legal-table td:last-child { width: auto }
}

/* Forms: field-level errors, required marks, hints -------------------------------------- */

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--accent-ink) }
.field-error { display: block; margin-top: .4rem; font-size: .8125rem; font-weight: 600; color: var(--accent-ink) }
.required { color: var(--accent-ink); margin-inline-start: .2rem }
.required-note, .hint { display: block; font-size: .8125rem; color: var(--muted); margin: .25rem 0 0 }
.required-note { margin: 0 0 1rem }
.wrap-anywhere { overflow-wrap: anywhere }

/* Links that leave the site, and the way back ---------------------------------------------- */

a.external::after { content: "\2197"; display: inline-block; margin-inline-start: .2rem; font-size: .8em; text-decoration: none }
.back-link { font-weight: 600 }
.back-link::before { content: "\2190"; display: inline-block; margin-inline-end: .4rem }
:root[dir="rtl"] .back-link::before { content: "\2192" }

/* Inline glossary help: a small button that opens a short explanation. Without JavaScript it is a
   link to the glossary entry, so nothing depends on the script. */

.term-help { position: relative; display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle }
.term-help-trigger {
  display: inline-flex; align-items: center; justify-content: center; inline-size: 1.25rem; block-size: 1.25rem;
  border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--primary);
  font-size: .72rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; flex: none;
}
.term-help-trigger:hover, .term-help-trigger[aria-expanded="true"] { border-color: var(--primary); background: var(--primary-tint) }
.term-help-panel {
  position: absolute; inset-inline-start: 0; top: calc(100% + .45rem); z-index: 5; inline-size: min(20rem, 80vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .9rem 1rem;
  box-shadow: 0 6px 18px rgba(27, 27, 25, .1); font-size: .875rem; font-weight: 400; line-height: 1.65;
  color: var(--ink-soft); text-align: start; white-space: normal; letter-spacing: 0; text-transform: none;
}
.term-help-panel[hidden] { display: none }
.term-help-panel strong { display: block; margin-bottom: .25rem; color: var(--ink) }
.term-help-panel a { display: inline-block; margin-top: .45rem; font-weight: 600 }

/* Small in-page tools ----------------------------------------------------------------------- */

.copy-button { padding: .2rem .6rem; font-size: .78rem; margin-inline-start: .45rem; vertical-align: middle }
html:not(.js) .copy-button { display: none }
.row-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center }
.row-actions form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 0 }
.row-actions button, .row-actions .button { padding: .45rem .85rem; font-size: .875rem }
.row-actions select { padding: .45rem .6rem; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); color: var(--ink) }
.card-meta { margin: 0; font-size: .875rem; color: var(--muted) }
.card-badges { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center }
.cycle-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem }
.cycle-list li { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; justify-content: space-between }
.card-aside .interest-form { margin: 0 }
.card-aside .interest-form button, .card-aside .save-link { padding: .45rem .9rem; font-size: .875rem }

/* Directory filters: one toggle on phones ---------------------------------------------------- */

.filters-body > .filters-toggle { border-top: 1px solid var(--rule) }
.filters-body-inner { display: flex; flex-direction: column; gap: 1.35rem }
@media (min-width: 701px) {
  .filters-body > .filters-toggle { display: none }
}

/* Workspace: application sections, progress, status forms, history ----------------------- */

.section-tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: .75rem 0 0 }
.section-tabs a {
  padding: .6rem .9rem; margin-bottom: -1px; text-decoration: none; font-size: .9375rem; font-weight: 600;
  color: var(--ink-soft); border-bottom: 2px solid transparent;
}
.section-tabs a:hover { color: var(--primary) }
.section-tabs a[aria-current] { color: var(--primary); border-bottom-color: var(--accent) }
.section-tabs .count { color: var(--muted); font-weight: 500; margin-inline-start: .25rem }
.stats.workspace { max-width: none }
.stats dd.text { font-family: var(--sans); font-size: 1rem; font-weight: 600; white-space: normal; line-height: 1.5 }
.status-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem 1rem; align-items: end }
.status-form .field { margin: 0 }
.status-form .wide { grid-column: 1 / -1 }
.history { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column }
.history li { padding: .65rem 0; border-top: 1px solid var(--rule) }
.history li:first-child { border-top: 0; padding-top: 0 }
.history .arrow::before { content: "\2192" }
:root[dir="rtl"] .history .arrow::before { content: "\2190" }
.history .note { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; white-space: pre-line }
.form-group { border: 1px solid var(--border); border-radius: 8px; padding: 0 1.1rem; margin: 0 0 1rem }
.form-group > summary { border-top: 0; padding-block: .9rem }
.form-group[open] > summary { margin-bottom: .5rem }
.deadline-list { list-style: none; margin: 0; padding: 0 }
.deadline-list > li { padding: .8rem 0; border-top: 1px solid var(--rule) }
.deadline-list > li:first-child { border-top: 0; padding-top: 0 }
.deadline-line { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: baseline }

/* Files, notifications, header indicator ---------------------------------------------------- */

.storage { margin: 0 }
.storage-meter { display: block; inline-size: 100%; block-size: .6rem; margin: .35rem 0 0 }
.upload-progress { display: block; inline-size: 100%; block-size: .6rem; margin: .75rem 0 0; accent-color: var(--primary) }
.upload-progress[hidden] { display: none }
[data-upload-status]:empty { display: none }
.version-list { margin: .5rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem }
.version-list li { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: .9rem }
.change-summary > summary { border-top: 0; padding-top: 0 }
.change-list { margin: 0 0 .75rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .6rem }
.change-list li { display: flex; flex-wrap: wrap; gap: .25rem .9rem; padding-inline-start: .7rem; border-inline-start: 2px solid currentColor; overflow-wrap: anywhere }
.change-list strong { flex-basis: 100% }
.change-list del { opacity: .8 }
.notification.unread { border-inline-start: 4px solid var(--primary) }
.notification-meta { margin: 0 0 .35rem; font-size: .84rem; color: var(--muted) }
.nav-bell { display: inline-flex; align-items: center; gap: .35rem }
.nav-bell .badge { padding: .1rem .5rem }

/* Error pages -------------------------------------------------------------------------------- */

.error-page .other-language { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule) }
.error-page .actions, .empty .actions { justify-content: center }

@media (max-width: 700px) {
  .status-form { grid-template-columns: 1fr }
  .section-tabs a { padding: .55rem .6rem }
}

/* Shared patterns (design 6c) ------------------------------------------------------------------ */

.flash { display: flex; align-items: flex-start; gap: .75rem; border-radius: 9px; border-inline-start-width: 4px; padding: .875rem 1rem }
.flash .flash-text { flex: 1; margin: 0; display: flex; flex-direction: column; gap: 2px }
.flash .flash-text strong { font-size: .94rem; color: var(--ink) }
.flash .flash-body { font-size: .875rem; line-height: 1.65; color: var(--muted) }
.flash .flash-text a { margin-inline-start: .2rem; font-weight: 600; white-space: nowrap }
.flash-icon { flex: 0 0 auto; font-size: .94rem; font-weight: 700; line-height: 1.5 }
.flash.success { background: #eef3ef; border-color: #cdd9d0; border-inline-start-color: var(--ok-ink) }
.flash.success .flash-icon { color: var(--ok-ink) }
.flash.warning { background: #f9f2ec; border-color: #e4cfc0; border-inline-start-color: var(--accent) }
.flash.warning .flash-icon { color: var(--accent-ink) }
.flash.error { background: #f9f2ec; border-color: #e4cfc0; border-inline-start-color: var(--accent) }
.flash.error .flash-icon { color: var(--accent-ink) }
.flash-close {
  flex: 0 0 auto; background: none; border: 0; color: var(--muted); padding: .1rem .45rem;
  font-size: 1.25rem; line-height: 1; min-block-size: 0; cursor: pointer;
}
.flash-close:hover { color: var(--ink) }
.flash[hidden] { display: none }
html:not(.js) .flash-close { display: none }

.skeleton-list { display: flex; flex-direction: column; gap: 1rem }
.skeleton-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 9px;
  padding: 1.125rem; display: flex; flex-direction: column; gap: .625rem; min-block-size: 9.5rem;
}
.skeleton-line { display: block; block-size: .75rem; border-radius: 100px; background: var(--rule); inline-size: 60% }
.skeleton-line.short { inline-size: 7.5rem; block-size: .69rem }
.skeleton-line.title { block-size: 1.19rem; inline-size: 82%; background: var(--border) }
.skeleton-chips { display: flex; gap: .5rem; padding-top: .375rem }
.skeleton-chips span { block-size: 1.5rem; inline-size: 5.4rem; border-radius: 100px; background: #f2efe8 }
.skeleton-chips span + span { inline-size: 6.9rem }
@media (prefers-reduced-motion: no-preference) {
  .skeleton-line { animation: skeleton-pulse 1.4s ease-in-out infinite }
}
@keyframes skeleton-pulse { 50% { opacity: .45 } }

a[aria-disabled="true"]:not(.button) { pointer-events: none; color: var(--muted) }

/* Header, menus, drawer and search (design 6a, 6b) --------------------------------------------- */

.site-header { position: relative; z-index: 20 }
.nav { gap: 1.25rem 1.5rem }
.nav-links { gap: 1.35rem }
.nav-item { display: inline-flex; align-items: center; gap: .1rem }
.nav-toggle {
  background: none; border: 0; color: #8b8578; padding: .45rem .3rem; font-size: .7rem; line-height: 1;
  border-radius: 5px; min-block-size: 0;
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: var(--primary-tint); color: var(--primary) }
.nav-toggle[aria-expanded="true"] span[aria-hidden] { display: inline-block; transform: rotate(180deg) }
html:not(.js) .nav-toggle { display: none }
/* IELTS experience: a small disclosure among the header actions with the guide's PDF in each language.
   The search box gives up some width so the links still fit one row; on phones the drawer lists the PDFs. */
@media (min-width: 961px) {
  .nav .nav-search { max-width: 12.5rem }
}
.downloads-menu > .downloads-button {
  display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .75rem; background: var(--surface);
  border: 1px solid #dcd8cf; border-radius: 8px; font-size: .875rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap;
}
.downloads-menu > .downloads-button:hover, .downloads-menu[open] > .downloads-button { border-color: #cdc7ba; background: #f6f4ef; color: var(--primary) }
.downloads-menu .menu-panel { inline-size: 15rem }
.downloads-menu .menu-group { border-bottom: 0 }
.downloads-note { margin: 0; padding: .875rem 1.125rem .25rem; font-size: .8125rem; line-height: 1.5; color: var(--muted) }
@media (max-width: 700px) {
  html.js .downloads-menu { display: none }
}

.nav-mega {
  position: absolute; inset-inline: 0; top: 100%; background: #faf9f6;
  border-bottom: 1px solid var(--border); box-shadow: 0 12px 24px rgba(27, 27, 25, .08);
}
.nav-mega[hidden] { display: none }
.mega-grid {
  max-width: 1160px; margin: auto; padding: 1.6rem 1.5rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 17.5rem; gap: 2rem;
}
.mega-column { display: flex; flex-direction: column; gap: .55rem }
.mega-column h3, .mega-closing-label {
  margin: 0 0 .15rem; font-family: var(--sans); font-size: .75rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
:root[lang="ar"] .mega-column h3, :root[lang="ar"] .mega-closing-label { letter-spacing: 0; text-transform: none; font-size: .8125rem }
.mega-column a { text-decoration: none; color: var(--ink-soft); font-size: .92rem }
.mega-column a:hover { color: var(--primary); text-decoration: underline }
.mega-all { font-weight: 600; text-decoration: none; font-size: .9rem }
.mega-closing {
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 1.1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.mega-closing-label { color: var(--accent) }
.mega-closing-link { text-decoration: none; font-weight: 600; line-height: 1.4 }
.mega-closing-days { display: block; font-size: .82rem; font-weight: 500; color: var(--muted) }
.mega-closing .mega-all { margin-top: auto }

.nav-search {
  position: relative; flex: 1 1 12rem; max-width: 17rem; margin-inline-start: auto;
  display: flex; align-items: center; gap: .5rem; background: #f6f4ef;
  border: 1px solid #e0dcd2; border-radius: 8px; padding: .3rem .6rem;
}
.nav-search:focus-within { border-color: var(--primary); background: var(--surface) }
.nav-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: .92rem; padding: .3rem 0; color: var(--ink) }
.nav-search input:focus { outline: none }
.nav-search-icon { color: #8b8578 }
.nav-search-key { font: inherit; font-size: .72rem; color: #8b8578; border: 1px solid #d7d2c6; border-radius: 4px; padding: 0 .35rem; line-height: 1.5 }
.search-panel {
  position: absolute; top: calc(100% + .4rem); inset-inline-end: 0; inline-size: min(26rem, 90vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 14px 28px rgba(27, 27, 25, .12); padding: .75rem; z-index: 30; max-block-size: 70vh; overflow: auto;
}
.search-panel[hidden] { display: none }
.search-section + .search-section { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--rule) }
.search-section h2, .search-section h3 {
  margin: 0 0 .35rem; font-family: var(--sans); font-size: .75rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
:root[lang="ar"] .search-section h2, :root[lang="ar"] .search-section h3 { letter-spacing: 0; text-transform: none; font-size: .8125rem }
.search-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem }
.search-list a { display: flex; flex-direction: column; text-decoration: none; padding: .45rem .55rem; border-radius: 7px; color: var(--ink) }
.search-list a:hover, .search-list a:focus-visible { background: var(--primary-tint) }
.search-title { font-weight: 600; font-size: .95rem }
.search-meta { font-size: .82rem; color: var(--muted) }
.search-all { display: block; margin-top: .6rem; padding: .45rem .55rem; font-weight: 600; text-decoration: none }
.search-empty { margin: 0; padding: .35rem .55rem; color: var(--muted); font-size: .92rem }
.search-recent-head { display: flex; justify-content: space-between; align-items: center; padding: 0 .55rem .25rem }
.search-recent-head .link-button { padding: 0; font-size: .82rem }
.search-page-form { display: flex; gap: .65rem; flex-wrap: wrap }
.search-page-form input { flex: 1 1 16rem; padding: .7rem .8rem; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface) }
.search-page-results .search-section h2 { font-size: .8125rem }

.nav-actions { gap: .85rem }
.nav-saved { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-soft) }
.nav-count { background: #eeece7; color: var(--ink-soft); border-radius: 100px; padding: .05rem .5rem; font-size: .78rem; font-weight: 700 }
.nav-menu-details { position: relative }
.nav-menu-details > summary, .drawer-links summary {
  list-style: none; cursor: pointer; border-top: 0; padding: 0; margin: 0; color: inherit; font-size: inherit;
}
.nav-menu-details > summary::-webkit-details-marker, .drawer-links summary::-webkit-details-marker { display: none }
.nav-menu-details[open] > summary { margin-bottom: 0 }
.nav-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 2.6rem; min-block-size: 2.6rem; border-radius: 8px; color: var(--ink-soft);
}
.nav-bell:hover { background: var(--primary-tint); color: var(--primary) }
.nav-bell .badge {
  position: absolute; top: .1rem; inset-inline-end: -.15rem; padding: .02rem .4rem;
  font-size: .7rem; line-height: 1.5; background: var(--accent); color: #fff;
}
/* Account menu (Account Menu design): a pill with the initials, the first name and a caret; the panel holds
   the student's name and email, two groups of links and the way out. */
.menu-panel {
  position: absolute; top: calc(100% + .625rem); inset-inline-end: 0; inline-size: 16.75rem;
  background: var(--surface); border: 1px solid #dcd8cf; border-radius: 10px;
  box-shadow: 0 12px 28px rgba(27, 27, 25, .13); padding: 0; z-index: 30; overflow: hidden; text-align: start;
}
.account-button {
  display: inline-flex; align-items: center; gap: .5rem; background: var(--surface);
  border: 1px solid #dcd8cf; border-radius: 100px; padding-block: .25rem; padding-inline: .25rem .69rem;
}
.account-button:hover, .account-menu[open] > .account-button { border-color: #cdc7ba; background: #f6f4ef }
.avatar {
  flex: 0 0 auto; inline-size: 1.875rem; block-size: 1.875rem; border-radius: 50%; background: var(--primary); color: #fff;
  font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.avatar.large { inline-size: 2.375rem; block-size: 2.375rem; font-size: .8125rem }
.account-name { font-weight: 600; font-size: .906rem; color: var(--ink) }
.caret { font-size: .625rem; color: #8b8578; line-height: 1 }
.caret::before { content: "\25BE" }
.account-menu[open] .caret::before { content: "\25B4" }
.account-who {
  display: flex; align-items: center; gap: .69rem; margin: 0; padding: 1rem 1.125rem;
  border-bottom: 1px solid var(--rule);
}
.account-who > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.account-who strong { font-size: .9375rem; color: var(--ink) }
.account-who [dir="ltr"] { font-size: .8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.menu-group { list-style: none; margin: 0; padding: .375rem 0; border-bottom: 1px solid var(--rule) }
.menu-group a {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .625rem 1.125rem;
  text-decoration: none; color: var(--ink-soft); font-size: .906rem;
}
.menu-group a:hover { background: #f6f4ef; color: var(--primary) }
.nav-count.unread { background: var(--accent); color: #fff }
.menu-links { list-style: none; margin: 0; padding: 0 }
.menu-links a {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .625rem 1rem;
  text-decoration: none; color: var(--ink-soft); font-size: .9375rem; min-block-size: 2.75rem;
}
.menu-links a:hover { background: #f6f4ef; color: var(--primary) }
.menu-language {
  display: flex; align-items: center; gap: .5rem; padding: .625rem 1.125rem;
  border-bottom: 1px solid var(--rule); font-size: .906rem; color: var(--ink-soft);
}
.menu-language > span:first-child { flex: 1 }
.menu-language form { margin: 0 }
.segmented-pair { display: inline-flex; border: 1px solid #dcd8cf; border-radius: 6px; overflow: hidden }
.segmented-pair form { margin: 0; display: flex }
.segmented-pair button {
  background: var(--surface); color: var(--muted); border: 0; border-radius: 0; padding: .25rem .56rem;
  font-size: .78rem; font-weight: 700; line-height: 1.4;
}
.segmented-pair button:hover { background: #f6f4ef; color: var(--primary) }
.segmented-pair button.is-current { background: var(--primary); color: #fff }
.menu-signout { margin: 0 }
.menu-signout button {
  display: block; inline-size: 100%; text-align: start; background: var(--surface); border: 0; border-radius: 0;
  padding: .75rem 1.125rem; font-size: .906rem; font-weight: 600; color: var(--accent-ink);
}
.menu-signout button:hover { background: #fcf3ef; color: var(--accent-ink) }
.link-button {
  background: none; border: 0; color: var(--primary); padding: .45rem .5rem; font-weight: 600; font-size: .9rem;
  text-decoration: underline; text-underline-offset: 4px;
}
.link-button:hover { background: none; color: var(--accent) }

/* The bell's panel (6c): rows divided by hairlines, a navy dot for unread, the name in bold. */
.bell-panel { inline-size: 22rem }
.bell-head {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .8125rem 1rem; border-bottom: 1px solid var(--rule); font-size: .9375rem;
}
.bell-head form { margin: 0 }
.bell-head .text-link { font-size: .84rem }
.bell-row { margin: 0 }
.bell-item {
  display: flex; gap: .69rem; align-items: flex-start; inline-size: 100%; text-align: start; background: var(--surface);
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: .875rem 1rem;
  color: var(--ink-soft); font-size: .906rem; font-weight: 400; line-height: 1.6;
}
.bell-item::before { content: ""; flex: 0 0 7px; block-size: 7px; margin-top: .45rem; border-radius: 50%; background: transparent }
.bell-item.unread { background: #f7f9fb }
.bell-item.unread::before { background: var(--primary) }
.bell-item:hover { background: #f6f4ef; color: var(--ink) }
.bell-item strong { color: var(--ink); font-weight: 700 }
.bell-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0 }
.bell-time { color: var(--muted); font-size: .78rem }
.bell-empty { padding: .875rem 1rem; color: var(--muted); font-size: .88rem; margin: 0; border-bottom: 1px solid var(--rule) }
.bell-all {
  display: block; padding: .75rem 1rem; text-align: center; background: #faf9f6;
  font-weight: 600; text-decoration: none; font-size: .875rem;
}

.nav-icon-button {
  background: none; border: 1px solid transparent; color: var(--ink-soft); min-inline-size: 2.75rem;
  min-block-size: 2.75rem; padding: 0; font-size: 1.2rem; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 8px;
}
.nav-icon-button:hover { background: var(--primary-tint); color: var(--primary) }
.nav-menu-button, .nav-search-button { display: none }

dialog.drawer {
  margin: 0; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; block-size: 100%; max-block-size: 100%;
  inline-size: min(22rem, 88vw); max-inline-size: none; border: 0; padding: 1rem 1.1rem 2rem;
  background: var(--surface); color: var(--ink); overflow-y: auto;
}
dialog.drawer::backdrop, dialog.search-sheet::backdrop { background: rgba(27, 27, 25, .4) }
@media (prefers-reduced-motion: no-preference) {
  dialog.drawer[open] { animation: drawer-in .18s ease-out }
  :root[dir="rtl"] dialog.drawer[open] { animation-name: drawer-in-rtl }
}
@keyframes drawer-in { from { transform: translateX(-100%) } }
@keyframes drawer-in-rtl { from { transform: translateX(100%) } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem }
.drawer-title { margin: 0; font-weight: 700 }
.drawer-account {
  display: flex; gap: .75rem; align-items: center; text-decoration: none; padding: .75rem;
  background: #faf9f6; border: 1px solid var(--border); border-radius: 10px; margin-bottom: .75rem;
}
.drawer-account strong { display: block; color: var(--ink) }
.drawer-account .muted { font-size: .85rem }
.drawer-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule) }
.drawer-links > li { border-bottom: 1px solid var(--rule) }
.drawer-links > li > a, .drawer-links summary {
  display: flex; align-items: center; min-block-size: 2.9rem; padding: .3rem .25rem;
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1rem;
}
.drawer-links summary::after { content: "\25BE"; margin-inline-start: auto; font-size: .7rem; color: #8b8578 }
.drawer-links details[open] > summary::after { transform: rotate(180deg) }
.drawer-links details[open] > summary { margin-bottom: 0 }
.drawer-sub-link { display: block; padding: .35rem .25rem .55rem; font-weight: 600 }
.mega-grid.compact { display: flex; flex-direction: column; gap: 1rem; padding: .25rem .25rem 1rem; max-width: none }
.mega-grid.compact .mega-closing { background: #faf9f6 }
.drawer-section { padding-top: 1rem; margin-top: .5rem }
.drawer-guest { display: flex; flex-direction: column; gap: .6rem }
.drawer-language { display: flex; gap: .5rem }
.drawer-language form { flex: 1 }
.drawer-language button { inline-size: 100% }

dialog.search-sheet {
  margin: 0; inset: 0; inline-size: 100%; max-inline-size: none; block-size: 100%; max-block-size: none;
  border: 0; padding: 1rem; background: var(--surface); color: var(--ink);
}
.search-sheet-form { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem }
.search-sheet-form input {
  flex: 1; min-inline-size: 0; border: 1px solid var(--border-strong); border-radius: 8px; padding: .65rem .75rem; font-size: 1rem;
}
.search-sheet .search-panel {
  position: static; flex-basis: 100%; inline-size: auto; box-shadow: none; border: 0;
  border-top: 1px solid var(--border); border-radius: 0; padding: .75rem 0; max-block-size: none; margin-top: .5rem;
}

/* Phone drawer (design 6b): the logo, a flat account row, 44px links in groups, and the language and sign-out at
   its foot. */
.brand-mark { display: none !important }
dialog.drawer[open] { display: flex; flex-direction: column; padding: 0 }
.drawer-head { padding: .75rem .875rem; border-bottom: 1px solid var(--border); margin: 0 }
.drawer-head img { height: 24px; width: auto }
.drawer-head .nav-icon-button, .search-sheet-form .nav-icon-button { border-color: var(--border) }
.drawer-account {
  display: flex; gap: .69rem; align-items: center; padding: .875rem; margin: 0;
  background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
}
.drawer-account .avatar { inline-size: 2.375rem; block-size: 2.375rem; font-size: .8125rem }
.drawer-account > span { display: flex; flex-direction: column }
.drawer-account strong { font-size: .94rem }
.drawer-account a { font-size: .8125rem; text-decoration: none; white-space: nowrap }
.drawer-links { border-top: 0; padding: .375rem 0; border-bottom: 1px solid var(--rule) }
.drawer-links > li { border-bottom: 0 }
.drawer-links > li > a, .drawer-links summary { min-block-size: 44px; padding: .8rem 1rem; font-size: 1rem; font-weight: 600 }
.drawer-links details > :not(summary) { margin-inline: 1rem }
.drawer-section { padding: .375rem 0; margin: 0; border-bottom: 1px solid var(--rule) }
.drawer-section .menu-links a { display: flex; align-items: center; justify-content: space-between; min-block-size: 44px; padding: .75rem 1rem; font-size: .94rem; font-weight: 400; color: var(--ink-soft); border-radius: 0 }
.drawer-section .nav-count { background: #eeece7; color: var(--ink); border-radius: 100px; padding: .125rem .56rem; font-size: .78rem; font-weight: 700 }
.drawer-guest { padding: .875rem 1rem }
.drawer-foot { margin-top: auto; padding: .875rem 1rem 1.25rem; display: flex; flex-direction: column; gap: .625rem }
.drawer-language { display: flex; gap: 0; border: 1px solid #dcd8cf; border-radius: 8px; overflow: hidden }
.drawer-language form { flex: 1; margin: 0 }
.drawer-language button {
  inline-size: 100%; border: 0; border-radius: 0; background: var(--surface); color: var(--muted);
  padding: .69rem; font-size: .906rem; font-weight: 700; min-block-size: 44px;
}
.drawer-language button:hover { background: #f6f4ef; color: var(--primary) }
.drawer-language button.is-current { background: var(--primary); color: #fff }
.drawer-signout { margin: 0 }
.drawer-signout button { background: none; border: 0; padding: .375rem 0; color: var(--accent-ink); font-size: .94rem; font-weight: 600; min-block-size: 44px }
.drawer-signout button:hover { background: none; text-decoration: underline }
.search-sheet-form input { background: #f6f4ef; border-color: var(--primary); padding: .69rem .75rem }
.search-sheet-form .link-button { min-block-size: 44px; font-size: .94rem; font-weight: 600 }

.cookie-notice {
  position: fixed; inset-inline: 1rem; bottom: 1rem; max-width: 60rem; margin-inline: auto;
  background: var(--primary); border: 0; border-radius: 10px;
  box-shadow: 0 14px 28px rgba(27, 27, 25, .18); padding: 1.25rem 1.5rem;
  display: flex; gap: 1rem 1.75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; z-index: 40;
}
.cookie-notice p { margin: 0; flex: 1 1 18rem; font-size: .94rem; line-height: 1.7; color: #cdd8e4; max-width: 72ch }
.cookie-notice a { color: #fff; font-weight: 600; white-space: nowrap }
.cookie-notice :focus-visible { outline-color: #fff }
.cookie-actions { display: flex; gap: .625rem }
.cookie-actions button { padding: .69rem 1.25rem; font-size: .906rem; border-radius: 7px }
.cookie-actions button[data-consent="all"] { background: #fff; color: var(--primary); border: 1px solid #fff }
.cookie-actions button[data-consent="essential"] { background: transparent; color: #fff; border: 1px solid #6b83a0 }
.cookie-actions button[data-consent="essential"]:hover { border-color: #fff }
.cookie-notice[hidden] { display: none }

@media (max-width: 960px) {
  .mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .mega-closing { grid-column: 1 / -1 }
  .nav-search { max-width: 12rem }
}
@media (max-width: 700px) {
  html.js .nav { flex-wrap: nowrap; gap: .35rem; padding: .55rem .75rem; min-height: 3.6rem }
  html.js .nav-menu-button, html.js .nav-search-button { display: inline-flex }
  html.js .nav-links, html.js .nav-search, html.js .nav-saved, html.js .account-menu,
  html.js .nav-actions > form, html.js .nav-signin, html.js .nav-register { display: none }
  html.js .brand { margin-inline: auto }
  html.js .workspace-nav .brand { margin-inline: 0 auto }
  html.js .workspace-nav { padding: .75rem 1rem }
  html.js .brand-full { display: none }
  html.js .brand-mark { display: block !important; height: 22px; width: auto }
  html.js .nav-actions { margin-inline-start: 0; gap: .5rem; flex-wrap: nowrap }
  html.js .nav { padding: .75rem .875rem; justify-content: space-between }
  html.js .nav-icon-button, html.js .nav-bell { inline-size: 44px; block-size: 44px; min-inline-size: 44px; border: 1px solid #dcd8cf; border-radius: 8px; background: var(--surface); font-size: 1rem }
  html.js .nav-bell .badge { top: 5px; inset-inline-end: 5px; inline-size: 8px; block-size: 8px; padding: 0; border-radius: 50%; font-size: 0; line-height: 0 }
  .nav-mega { display: none !important }
  .menu-panel, .bell-panel { position: fixed; inset-inline: .75rem; top: 4rem; inline-size: auto }
}

/* Error pages (design 6d) ---------------------------------------------------------------------- */

.error-page .error-search { max-width: 32rem; margin: 1.25rem auto 0; justify-content: center }
.maintenance-page { max-width: 44rem; display: flex; flex-direction: column; gap: 1.25rem }
.maintenance-logo { display: block; height: 26px; width: auto; margin-inline: auto }
.maintenance-page .error-page h2 { font-size: clamp(2rem, 3.4vw, 2.4rem) }
.expected-back {
  display: inline-flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; padding: .6rem .9rem;
  background: var(--wait-tint); color: var(--wait-ink); border-radius: 8px;
}

/* Report an error (design 6e) ------------------------------------------------------------------ */

.report-heading, .report-form { max-width: 42rem }
.report-actions { display: flex; gap: .75rem 1rem; align-items: center; flex-wrap: wrap; padding-top: .25rem; font-size: .875rem }
.report-page { margin: 0 0 1.15rem; font-size: .9rem; overflow-wrap: anywhere }
.report-page code { background: #f6f4ef; border-radius: 5px; padding: .1rem .4rem }
.field label .muted { font-weight: 500 }
.hp-field { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }

/* Guides (design 5a–5d) ------------------------------------------------------------------------ */

.guides-heading { max-width: 46rem }
.guides-search { display: flex; gap: .6rem; margin-top: 1.25rem; max-width: 30rem }
.guides-search input { flex: 1; min-width: 0; padding: .7rem .8rem; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface) }
.guides-featured, .guides-topics, .guides-newest, .guides-next { display: flex; flex-direction: column; gap: 1rem }
.guides-featured-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem }
.guides-featured-grid .guide-card.normal { grid-column: 2 }
.guides-featured-grid .guide-card.lead { grid-row: span 2 }
.guide-card { display: flex; flex-direction: column; gap: .5rem }
.guide-card-meta { margin: 0; font-size: .82rem; font-weight: 600; color: var(--muted) }
.guide-card-title { margin: 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em }
:root[lang="ar"] .guide-card-title { font-family: var(--sans); font-weight: 700; letter-spacing: 0 }
.guide-card-title a { text-decoration: none; color: var(--ink) }
.guide-card-title a:hover { color: var(--primary); text-decoration: underline }
.guide-card.lead .guide-card-title { font-size: 1.6rem }
.guide-card .card-meta { margin-top: auto; padding-top: .35rem }
.topic-chips { display: flex; flex-wrap: wrap; gap: .5rem }
.topic-chips .chip { text-decoration: none; padding: .45rem .85rem; font-size: .9rem }
.chip-count { color: var(--muted); font-weight: 700; font-size: .82rem }
.guides-list { display: flex; flex-direction: column; gap: .75rem }
.guides-list .guide-card.row { padding: 1.15rem 1.35rem }
.guides-filters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; align-items: end }
.guides-filters .filter-actions { display: flex; gap: .5rem; justify-content: flex-end }
.guides-method { max-width: 46rem }
.card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }

.guide { display: flex; flex-direction: column; gap: 1.5rem }
.guide-head { max-width: 46rem; display: flex; flex-direction: column; gap: .75rem }
.guide-lede { margin: 0; font-size: 1.125rem; color: var(--ink-soft); line-height: 1.7 }
.guide-byline { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; font-size: .875rem; color: var(--muted) }
.guide-author { display: flex; flex-direction: column; line-height: 1.4 }
.guide-author strong { color: var(--ink) }
.guide-facts { display: flex; gap: .4rem; flex-wrap: wrap; align-items: baseline }
.guide-body { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; align-items: start }
.guide-contents { position: sticky; top: 1.5rem; font-size: .9rem }
.guide-contents summary { font-weight: 700; cursor: pointer; padding: .35rem 0 }
.guide-contents ol { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; border-inline-start: 2px solid var(--rule); padding-inline-start: .85rem }
.guide-contents a { text-decoration: none; color: var(--ink-soft) }
.guide-contents a:hover { color: var(--primary); text-decoration: underline }
.guide-article { max-width: 42rem; font-size: 1.0625rem; line-height: 1.8; color: var(--ink-soft) }
.guide-article h2 { margin: 2rem 0 .75rem; font-size: 1.5rem; scroll-margin-top: 1.5rem }
.guide-article h3 { margin: 1.5rem 0 .5rem }
.guide-article ul, .guide-article ol { padding-inline-start: 1.35rem; display: flex; flex-direction: column; gap: .4rem; margin: 0 0 1rem }
.guide-article blockquote {
  margin: 1.25rem 0; padding: .85rem 1.15rem; background: #faf9f6;
  border-inline-start: 3px solid var(--border-strong); color: var(--ink-soft);
}
.guide-article table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: .95rem }
.guide-article th, .guide-article td { text-align: start; padding: .55rem .65rem; border-bottom: 1px solid var(--rule) }
.guide-article code { background: #f6f4ef; border-radius: 5px; padding: .1rem .35rem; font-size: .92em }
.guide-article img { max-width: 100%; height: auto; border-radius: 8px }
.guide-note { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: .9rem }

@media (max-width: 960px) {
  .guides-featured-grid { grid-template-columns: 1fr }
  .guides-featured-grid .guide-card.normal { grid-column: auto }
  .guides-featured-grid .guide-card.lead { grid-row: auto }
  .guide-body { grid-template-columns: 1fr; gap: 1.25rem }
  .guide-contents { position: static; border: 1px solid var(--border); border-radius: 9px; padding: .75rem 1rem; background: var(--surface) }
  .guides-filters { grid-template-columns: 1fr 1fr }
}
@media (max-width: 700px) {
  .guides-filters { grid-template-columns: 1fr }
  .guides-filters .filter-actions { justify-content: stretch }
  .card-grid.two { grid-template-columns: 1fr }
}

/* The weekly email box (design 5a, 3a) --------------------------------------------------------- */

.newsletter-box {
  max-width: 1160px; margin: 2rem auto 0; display: flex; gap: 1.25rem 2rem; align-items: center;
  flex-wrap: wrap; background: #faf9f6;
}
.site-footer .newsletter-box { margin: 2rem 1.5rem 0 }
.newsletter-words { flex: 1 1 20rem }
.newsletter-words h2 { margin: 0 0 .35rem; font-size: 1.15rem }
.newsletter-words p { margin: 0; font-size: .92rem }
.newsletter-form { display: flex; gap: .6rem; flex: 1 1 20rem; flex-wrap: wrap }
.newsletter-form input {
  flex: 1 1 12rem; min-width: 0; padding: .7rem .8rem; border: 1px solid var(--border-strong);
  border-radius: 7px; background: var(--surface);
}
.narrow-page { max-width: 34rem; margin-inline: auto }

/* The weekly email box (design 5a, 3a) --------------------------------------------------------- */

.newsletter-box {
  max-width: 1160px; margin: 2rem auto 0; display: flex; gap: 1.25rem 2rem; align-items: center;
  flex-wrap: wrap; background: #faf9f6;
}
.site-footer .newsletter-box { margin: 2rem 1.5rem 0 }
.newsletter-words { flex: 1 1 20rem }
.newsletter-words h2 { margin: 0 0 .35rem; font-size: 1.15rem }
.newsletter-words p { margin: 0; font-size: .92rem }
.newsletter-form { display: flex; gap: .6rem; flex: 1 1 20rem; flex-wrap: wrap }
.newsletter-form input {
  flex: 1 1 12rem; min-width: 0; padding: .7rem .8rem; border: 1px solid var(--border-strong);
  border-radius: 7px; background: var(--surface);
}
.narrow-page { max-width: 34rem; margin-inline: auto }

/* Similar scholarships and "others also applied to" (design 1c) -------------------------------- */

.similar { display: flex; flex-direction: column; gap: .75rem; margin-top: 2rem }
.similar-card { display: flex; flex-direction: column; gap: .4rem }
.similar-card h3 { margin: 0; font-size: 1.05rem }
.similar-card h3 a { text-decoration: none; color: var(--ink) }
.similar-card h3 a:hover { color: var(--primary); text-decoration: underline }
.similar-differs { margin: 0; font-size: .875rem; color: var(--muted) }
.also-applied { margin-top: 1rem }
.also-applied-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .5rem }
.also-applied-list li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .95rem }

/* Student workspace (Student Workspace design) ------------------------------------------------------
   The signed-in student's own pages: a header with the site's sections and the account menu, tables in
   white cards, text-style row actions, and one short footer line. */

.workspace-nav { flex-wrap: nowrap; gap: 2.25rem; min-height: 0; padding: 1rem 1.5rem }
.workspace-links { display: flex; gap: 1.75rem; flex: 1; font-size: .9375rem; font-weight: 600 }
.workspace-links a, .workspace-tabs a { text-decoration: none; white-space: nowrap; color: var(--ink-soft); padding: .25rem 0 }
.workspace-links a:hover, .workspace-tabs a:hover { color: var(--primary) }
.workspace-links a[aria-current] { color: var(--primary); box-shadow: inset 0 -2px 0 var(--accent) }
.workspace-actions { display: flex; gap: .75rem; align-items: center; margin-inline-start: auto }
.workspace-actions form { margin: 0 }
.language-button {
  background: var(--surface); color: var(--primary); border: 1px solid #cdc7ba; border-radius: 7px;
  padding: .44rem .75rem; font-size: .875rem; font-weight: 600; white-space: nowrap;
}
.language-button:hover { background: #f6f4ef; color: var(--primary) }
.workspace-tabs { display: none }

.workspace-footer {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .5rem 1.25rem;
  padding: 1.375rem 1.5rem; font-size: .84rem; color: var(--muted);
}
.workspace-footer a { color: var(--muted) }
.workspace-footer-brand { display: inline-flex; align-items: center; gap: .44rem; font-weight: 600; color: var(--ink) }
.workspace-footer-brand img { height: 17px; width: auto }

main.workspace-main { padding-top: 2.25rem; padding-bottom: 4rem }
main.workspace-main > * + * { margin-top: 1.75rem }
.workspace-main .badge { border-radius: 5px; padding: .19rem .5rem; font-size: .8125rem; font-weight: 600 }

/* Page head: heading and a summary on the start side, actions on the end side. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap }
.page-head > div:first-child { display: flex; flex-direction: column; gap: .5rem; min-width: 0; flex: 1 1 22rem }
.page-head h1 { margin: 0; font-size: 2.25rem; line-height: 1.15; letter-spacing: -.018em }
.page-head .lede { margin: 0; font-size: .97rem; line-height: 1.7; color: var(--muted); max-width: 76ch }
.page-head-actions { display: flex; gap: .625rem; flex-wrap: wrap }
.page-head-actions .button, .page-head-actions button { padding: .625rem 1rem; font-size: .906rem }
.page-head-actions form { margin: 0 }
.summary-line { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .9375rem; color: var(--ink-soft) }
.summary-line a { color: var(--ink); text-decoration: none; white-space: nowrap }
.summary-line a:hover { color: var(--primary); text-decoration: underline }
.summary-line strong { font-weight: 700 }
.on-phone { display: none }

/* Cards: the white box every section sits in, with a small sans heading. */
.work-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.375rem 1.5rem; display: flex; flex-direction: column; gap: 1rem }
.work-card > h2, .work-card > h1, .work-card-head h2, .table-card-head h2 {
  margin: 0; font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.4; color: var(--ink);
}
.work-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem }
.work-card-head > div { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.card-intro { margin: 0; font-size: .84rem; line-height: 1.6; color: var(--muted) }

/* Tables in a card, with an optional filter bar above and a footer line below. */
.table-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden }
.table-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--border);
}
.table-card-head > div { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0 }
.table-card-head p { margin: 0; font-size: .84rem; color: var(--muted) }
.table-scroll { overflow-x: auto }
.data-table { inline-size: 100%; border-collapse: collapse; table-layout: fixed }
.data-table th {
  text-align: start; padding: .6875rem 1.25rem; font-size: .8125rem; font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface);
}
.data-table td {
  text-align: start; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule); font-size: .906rem;
  vertical-align: middle; color: var(--ink); overflow-wrap: anywhere;
}
.data-table tbody tr:hover { background: #fbfaf7 }
.data-table .end { text-align: end }
.data-table .w-xs { inline-size: 80px }
.data-table .w-sm { inline-size: 110px }
.data-table .w-md { inline-size: 130px }
.data-table .w-lg { inline-size: 190px }
.data-table .w-xl { inline-size: 230px }
.data-table .group-row td, .data-table .group-row th { padding: .625rem 1.25rem; background: #faf9f6; border-bottom: 1px solid var(--rule); font-size: .84rem; font-weight: 700; color: var(--ink); text-align: start }
.data-table .w-date { inline-size: 150px }
.data-table .w-left { inline-size: 80px }
.cell-left { font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap }
.data-table .group-row:hover { background: #faf9f6 }
.cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.cell-title { font-size: .9375rem; font-weight: 600; color: var(--ink) }
.cell-title a { color: inherit; text-decoration: none }
.cell-title a:hover { color: var(--primary); text-decoration: underline }
.cell-sub { font-size: .8125rem; color: var(--muted) }
.cell-plain { font-size: .906rem; color: var(--ink-soft) }
.cell-date { font-size: .906rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink) }
.date-near { color: var(--accent-ink) }
.cell-note { font-size: .78rem; color: var(--muted) }
.cell-quiet { color: #8b8578 }
.cell-clamp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.state-on { font-size: .875rem; font-weight: 600; color: var(--ok-ink) }
.state-off { font-size: .875rem; font-weight: 600; color: var(--muted) }
.table-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1.25rem; font-size: .8125rem; color: var(--muted); background: #faf9f6;
}
.table-foot .pager { margin: 0; flex: 1; justify-content: flex-end }
.table-empty { padding: 2.5rem 1.25rem; text-align: center }
.table-empty h2 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: 0 0 .35rem }
.table-empty p { color: var(--muted) }
.table-note { margin: 0; padding: .75rem 1.25rem; font-size: .8125rem; color: var(--muted); background: #faf9f6 }

.table-filters {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: .75rem;
  align-items: end; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); margin: 0;
}
.table-filters.five { grid-template-columns: repeat(5, minmax(0, 1fr)) auto }
.table-filters label { display: flex; flex-direction: column; gap: .375rem; min-width: 0 }
.table-filters label > span { font-size: .8125rem; font-weight: 600; color: var(--ink-soft) }
.table-filters input, .table-filters select {
  padding: .625rem .75rem; border: 1px solid var(--border-strong); border-radius: 7px; font-size: .906rem;
  background: var(--surface); inline-size: 100%; color: var(--ink);
}
.table-filters-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding-block: .5rem }
.table-filters .advanced { grid-column: 1 / -1; margin: 0 }
.table-filters .advanced > summary { border-top: 0; padding: 0; font-size: .875rem }
.table-filters .advanced[open] > summary { margin-bottom: .75rem }
.table-filters .advanced-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; align-items: end }

/* Text-style actions: navy links for "go", quiet grey buttons for "change", terracotta on hover. */
.text-link, button.text-link { background: none; border: 0; border-radius: 0; padding: 0; font-size: .875rem; font-weight: 600; text-decoration: none; color: var(--primary); white-space: nowrap; cursor: pointer }
.text-link:hover, button.text-link:hover { background: none; color: #16304f; text-decoration: underline; text-underline-offset: 3px }
.text-button { background: none; border: 0; border-radius: 0; padding: 0; font-size: .875rem; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: pointer }
.text-button:hover { background: none; color: var(--accent-ink) }
.text-button.underlined { text-decoration: underline; text-underline-offset: 3px; font-size: .84rem }
.row-links { display: flex; gap: 1rem; justify-content: flex-end; align-items: center; flex-wrap: wrap }
.row-links form { margin: 0; display: inline-flex }
html.js .js-hide { display: none }

.notice.inline { display: flex; align-items: center; gap: 1rem; border: 1px solid #e3cec4; border-radius: 10px; padding: .75rem 1rem .75rem 1.125rem; margin-bottom: 0 }
.notice.inline p { margin: 0; flex: 1; font-size: .906rem }
.notice.inline .muted { font-size: .84rem }
.notice.inline form { margin: 0 }
.notice.inline button { padding: .375rem .69rem; font-size: .84rem; border-radius: 6px; white-space: nowrap }

/* A thin progress bar, and key-value rows. */
.meter { display: block; block-size: 6px; border-radius: 3px; background: var(--rule); overflow: hidden }
.meter > span { display: block; block-size: 100%; background: var(--primary); border-radius: 3px }
.kv-list { margin: 0 }
.kv-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .625rem 0; border-top: 1px solid var(--rule); font-size: .875rem }
.kv-list dt { color: var(--muted) }
.kv-list dd { margin: 0; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums }

/* Segmented filter with counts, and a status select coloured by its value. */
.segmented { display: inline-flex; gap: 4px; padding: 3px; background: #f3f1ec; border-radius: 8px; flex-wrap: wrap }
.segmented a { padding: .44rem .75rem; border-radius: 6px; font-size: .84rem; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap }
.segmented a:hover { color: var(--ink) }
.segmented a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(27, 27, 25, .08) }
.segmented .count { color: #8b8578; font-weight: 500; margin-inline-start: .3rem }
.status-select {
  appearance: none; -webkit-appearance: none; padding: .375rem .75rem; padding-inline-end: 1.875rem; min-inline-size: 8.25rem;
  border-radius: 6px; font-size: .84rem; font-weight: 600; border: 1px solid #cdc7ba; background-color: var(--surface);
  color: var(--ink-soft); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235f5c55' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .65rem center;
}
:root[dir="rtl"] .status-select { background-position: left .65rem center }
.status-select.in_progress { background-color: var(--primary-tint); color: var(--primary); border-color: #c9d5e3 }
.status-select.ready { background-color: var(--ok-tint); color: var(--ok-ink); border-color: #c6d8cc }
.status-select.not_applicable { background-color: #f3f1ec; color: #8b8578; border-color: #e0dcd2 }

/* An on/off switch built on a checkbox, so it submits and reads like one. */
input[type="checkbox"].switch {
  appearance: none; -webkit-appearance: none; inline-size: 38px; block-size: 22px; border-radius: 100px;
  background: #d6d1c6; position: relative; cursor: pointer; flex: none; margin: 0; transition: background .15s;
}
input[type="checkbox"].switch::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px; inline-size: 16px; block-size: 16px;
  border-radius: 50%; background: #fff; transition: inset-inline-start .15s;
}
input[type="checkbox"].switch:checked { background: var(--primary) }
input[type="checkbox"].switch:checked::after { inset-inline-start: 19px }
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .875rem 0; border-top: 1px solid var(--rule) }
.switch-row label { display: flex; flex-direction: column; gap: 2px; cursor: pointer }
.switch-row strong { font-size: .906rem }
.switch-row small { font-size: .8125rem; color: var(--muted) }

/* Compact rows shown instead of a table on a phone. */
.compact-list { display: none; margin: 0; padding: 0; list-style: none }
.compact-list li { display: flex; justify-content: space-between; gap: .75rem; padding: .8125rem 1rem; border-top: 1px solid var(--rule); align-items: flex-start }
.compact-list li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.compact-list strong { font-size: .906rem; font-weight: 600; line-height: 1.45 }
.compact-list span { font-size: .78rem; line-height: 1.5; color: var(--muted) }
.compact-list time { font-size: .84rem; font-weight: 700; white-space: nowrap }

@media (max-width: 960px) {
  .table-filters, .table-filters.five { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .table-filters label:first-child { grid-column: 1 / -1 }
}
@media (max-width: 700px) {
  .workspace-nav { gap: .625rem; padding: .75rem 1rem }
  .workspace-nav .brand img { height: 22px }
  .workspace-links { display: none }
  .workspace-actions { gap: .625rem }
  .language-button { padding: .44rem .625rem; font-size: .8125rem; border-radius: 6px }
  html.js .workspace-header .account-menu { display: block }
  .workspace-header .account-button { padding: 0; border: 2px solid #fff; box-shadow: 0 0 0 1px #cdc7ba }
  .workspace-header .account-button:hover, .workspace-header .account-menu[open] > .account-button { box-shadow: 0 0 0 2px var(--primary); background: var(--surface) }
  .workspace-header .account-button .avatar { inline-size: 2rem; block-size: 2rem; font-size: .8125rem }
  .workspace-header .account-name, .workspace-header .caret { display: none }
  .workspace-tabs {
    display: flex; gap: 1.25rem; padding: 0 1rem; background: var(--surface); border-top: 1px solid var(--border);
    overflow-x: auto; scrollbar-width: none;
  }
  .workspace-tabs a { padding: .75rem 0; font-size: .875rem; font-weight: 600; color: var(--muted) }
  .workspace-tabs a[aria-current] { color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary) }
  main.workspace-main { padding: 1.5rem 1rem 2.25rem }
  main.workspace-main > * + * { margin-top: 1.125rem }
  .page-head h1 { font-size: 1.75rem }
  .page-head-actions { inline-size: 100% }
  .page-head-actions > * { flex: 1 1 auto }
  .on-wide { display: none }
  .on-phone { display: revert }
  .summary-line { gap: 0 .35rem; font-size: .875rem; line-height: 1.7 }
  .summary-line a + a::before { content: "\00B7\00A0"; color: var(--muted) }
  .table-filters, .table-filters.five { grid-template-columns: 1fr }
  .notice.inline { flex-direction: column; align-items: stretch; gap: .625rem; padding: .875rem 1rem }
  .notice.inline button { inline-size: 100%; min-block-size: 44px; font-size: .906rem }
  .has-compact .table-scroll, .has-compact .table-filters { display: none }
  .has-compact .table-foot > span { display: none }
  .has-compact .table-foot:not(:has(.pager)) { display: none }
  .has-compact .compact-list { display: block }
  .table-card-head { padding: .875rem 1rem }
  .work-card { padding: 1.125rem }
}

/* Profile and settings: a sticky section list beside one column of cards. */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; align-items: start }
.section-nav { position: sticky; top: 1.25rem; display: flex; flex-direction: column; gap: 2px }
.section-nav a { padding: .56rem .75rem; border-radius: 7px; font-size: .906rem; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap }
.section-nav a:hover { color: var(--primary); background: var(--surface) }
.section-nav a[aria-current] { color: var(--primary); background: #eaeff5 }
.settings-column, .settings-form, .settings-account { display: flex; flex-direction: column; gap: 1.25rem; max-width: 820px; min-width: 0; margin: 0 }
.settings-column [id] { scroll-margin-top: 1.25rem }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem }
.work-card .field { margin: 0; min-width: 0 }
.work-card .field select[multiple] { min-block-size: 6.5rem }
/* A plain form inside a card stacks its fields in the card's rhythm; its buttons keep their own width. */
.work-card > form:not(.inline-search):not(.status-form) { display: flex; flex-direction: column; gap: 1rem; margin: 0 }
.work-card > form:not(.inline-search):not(.status-form) > button { align-self: flex-start }
.test-rows { display: flex; flex-direction: column; gap: .875rem }
.test-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: .75rem; margin: 0 }
.test-row + .test-row { padding-top: .875rem; border-top: 1px solid var(--rule) }
html.js .test-row.is-collapsed, .test-row[hidden] { display: none }
.add-row { align-self: flex-start }
.switch-list .switch-row:last-child { padding-bottom: 0 }
.save-bar { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; padding: .875rem 1.25rem }
.save-bar .muted { font-size: .84rem }
.save-bar-actions, .card-actions { display: flex; gap: .625rem; flex-wrap: wrap }
.card-actions { justify-content: flex-start }
.danger-card { flex-direction: row; align-items: center; gap: 1.5rem; border-color: #e9d3c9; padding: 1.25rem 1.5rem }
.danger-card > div { flex: 1; display: flex; flex-direction: column; gap: 3px }
.danger-card .button { flex: 0 0 auto; white-space: nowrap }

@media (max-width: 960px) {
  .settings-layout { grid-template-columns: 1fr; gap: 1.25rem }
  .section-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: .25rem }
}
@media (max-width: 700px) {
  .field-grid, .test-row { grid-template-columns: 1fr }
  .save-bar { flex-direction: column; align-items: stretch; position: sticky; bottom: 0; z-index: 5 }
  .save-bar-actions { display: grid; grid-template-columns: 1fr 1fr }
  .save-bar-actions button, .card-actions button { min-block-size: 44px }
  .card-actions button { inline-size: 100% }
  .danger-card { flex-direction: column; align-items: stretch }
  .danger-card .button { justify-content: center; min-block-size: 44px }
}

.table-filters .check-inline { flex-direction: row; align-items: center; min-height: 2.5rem }
.table-filters input[type=checkbox] { inline-size: 1.1rem; padding: 0 }

/* One application's band (design 1e): white across the page under the header, with the section tabs at its foot.
   The border image paints the band and its bottom rule out to both edges without widening the page. */
.app-band {
  display: flex; flex-direction: column; gap: 1.125rem; margin-top: -2.25rem; padding-top: 1.5rem;
  border-image: linear-gradient(to top, var(--border) 1px, var(--surface) 1px) fill 0 / / 0 100vmax;
}
main.workspace-main > .app-band + * { margin-top: 2.25rem }
.app-band .breadcrumb { display: flex; gap: .5rem; font-size: .84rem; white-space: nowrap; overflow: hidden }
.app-band .breadcrumb a { font-weight: 600 }
.app-band .breadcrumb span { margin: 0; color: var(--muted) }
.app-band .breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis }
.app-band-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem 2rem }
.app-band-title { display: flex; flex-direction: column; gap: .625rem; flex: 1; min-width: 0 }
.app-band-kicker { display: flex; gap: .625rem; align-items: center; flex-wrap: wrap; font-size: .84rem; color: var(--muted) }
.app-band h1 { margin: 0; font-size: 2.125rem; line-height: 1.15; letter-spacing: -.018em }
.app-band-facts { margin: 0; display: flex; gap: .35rem 1.125rem; flex-wrap: wrap; font-size: .875rem; color: var(--muted) }
.app-band-facts strong { color: var(--ink); font-variant-numeric: tabular-nums }
.app-band-facts strong.date-near { color: var(--accent-ink) }
.app-band-actions { display: flex; gap: .625rem; flex: 0 0 auto }
.app-band-actions .button { padding: .625rem 1rem; font-size: .906rem }
.app-tabs { display: flex; gap: 1.75rem; overflow-x: auto; scrollbar-width: none }
.app-tabs a { padding: .75rem 0; font-size: .906rem; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap }
.app-tabs a:hover { color: var(--primary) }
.app-tabs a[aria-current] { color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary) }

/* The overview: the scholarship and its updates, with the progress column beside them. */
.app-overview { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start }
.app-overview-main, .app-overview-aside { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0 }
.app-overview > :only-child { grid-column: 1 / -1 }
.app-overview:has(> .table-card + .work-card:last-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
.detail-rows { margin: 0 }
.detail-rows > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.25rem; padding: .875rem 0; border-top: 1px solid var(--rule) }
.detail-rows dt { font-size: .84rem; font-weight: 700; color: var(--ink-soft) }
.detail-rows dd { margin: 0; font-size: .94rem; line-height: 1.75; color: var(--ink-soft) }
.detail-rows dd p { margin: .35rem 0 0 }
.detail-rows dd > p:first-child { margin-top: 0 }
.data-table .w-when { inline-size: 160px }
.cell-when { font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums }
.status-change { display: inline-flex; gap: .5rem; align-items: center; flex-wrap: wrap }
.status-change .arrow::before { content: "\2192"; color: #8b8578 }
:root[dir="rtl"] .status-change .arrow::before { content: "\2190" }
.history-note { margin: .35rem 0 0; white-space: pre-line }
.status-form { display: flex; flex-direction: column; gap: .875rem; margin: 0 }
.status-form button[type=submit] { align-self: stretch }
.note-toggle > summary { font-size: .84rem; border-top: 0; padding: 0 }
.note-toggle[open] > summary { margin-bottom: .625rem }
.meter-block { display: flex; flex-direction: column; gap: .5rem }
.meter-label { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem }
.meter-label a { color: var(--muted); text-decoration: none }
.meter-label a:hover { color: var(--primary); text-decoration: underline }
.kv-list dt a { color: inherit; text-decoration: none }
.kv-list dt a:hover { color: var(--primary); text-decoration: underline }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap }
.section-head > div:first-child { display: flex; flex-direction: column; gap: .35rem; min-width: 0; flex: 1 1 22rem }
.section-head h2 { margin: 0; font-family: var(--sans); font-size: 1.25rem; font-weight: 700; letter-spacing: 0 }
.section-head .lede { margin: 0; font-size: .94rem; line-height: 1.7; color: var(--muted) }
.section-head strong { color: var(--ink) }

@media (max-width: 960px) {
  .app-overview, .app-overview:has(> .table-card + .work-card:last-child) { grid-template-columns: 1fr }
  .app-band-head { flex-direction: column }
}
@media (max-width: 700px) {
  .app-band { margin-top: -1.5rem; padding-top: 1rem; gap: .875rem }
  main.workspace-main > .app-band + * { margin-top: 1.5rem }
  .app-band h1 { font-size: 1.625rem }
  .app-band-actions { inline-size: 100% }
  .app-band-actions .button { flex: 1; justify-content: center; min-block-size: 44px }
  .app-tabs { gap: 1.25rem }
  .detail-rows > div { grid-template-columns: 1fr; gap: .25rem }
}

/* Requirements (design 1r): status tabs on the start side, compact filters on the end side, and a table whose
   preparation changes in place. */
.table-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap;
  padding: .875rem 1.25rem; border-bottom: 1px solid var(--border);
}
.segmented a { display: inline-flex; align-items: center }
.toolbar-filters { display: flex; gap: .625rem; align-items: center; flex-wrap: wrap; margin: 0 }
.toolbar-filters select, .toolbar-filters input[type=search] {
  padding: .56rem .75rem; border: 1px solid var(--border-strong); border-radius: 7px; font-size: .875rem; background: var(--surface); color: var(--ink);
}
.toolbar-filters input[type=search] { inline-size: 15rem }
.data-table.min-wide { min-inline-size: 640px }
.data-table .w-status { inline-size: 170px }
.data-table .w-actions { inline-size: 170px }
.inline-status { display: flex; gap: .5rem; align-items: center; margin: 0 }
.cell-sub a { color: inherit }

/* Forms and confirmations under the band: one card of fields, full-width rows where text runs long. */
.form-card { max-width: 820px }
.field-grid > .full { grid-column: 1 / -1 }
.form-card > form { display: flex; flex-direction: column; gap: 1rem; margin: 0 }
.confirm-card p { margin: 0 }
.confirm-card h3 { margin: 0; font-family: var(--sans); font-size: .94rem; font-weight: 700 }
.confirm-list { margin: 0; padding-inline-start: 1.25rem; display: flex; flex-direction: column; gap: .35rem; font-size: .94rem }
.card-actions .button.danger, .card-actions button.danger { border-color: #e3cec4 }
.linked-list { margin: 0; padding: 0; list-style: none }
.linked-list li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .625rem 0; border-top: 1px solid var(--rule); font-size: .906rem }
.linked-list li > span { display: inline-flex; gap: .5rem; align-items: center; flex: none }
.inline-search { display: flex; gap: .625rem; margin: 0 }
.inline-search input { flex: 1; min-inline-size: 0; padding: .625rem .75rem; border: 1px solid var(--border-strong); border-radius: 7px; font-size: .906rem }

/* Files: an upload card, then each file as a row with its uses, a new version and the older ones. */
.upload-card .card-actions { align-items: center }
.upload-card .card-actions .upload-progress { flex: 1 1 12rem; margin: 0 }
.upload-card .card-actions .hint { margin: 0 }
.table-filters.fluid { grid-template-columns: minmax(12rem, 2fr) repeat(auto-fit, minmax(9rem, 1fr)) }
.file-list { margin: 0; padding: 0; list-style: none }
.file-row { padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: .5rem }
.file-row:last-child { border-bottom: 0 }
.file-row-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem }
.file-head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap }
.file-title { margin: 0; font-family: var(--sans); font-size: .9375rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--ink) }
.file-row .scan-status { padding: .15rem .5rem; border-radius: 5px }
.file-more > summary { border-top: 0; padding: 0; font-size: .84rem }
.file-more[open] > summary { margin-bottom: .625rem }
.file-more form { display: flex; flex-wrap: wrap; gap: .625rem; align-items: flex-end; margin: 0 }
.file-more .field { margin: 0; flex: 1 1 16rem }

@media (max-width: 700px) {
  .table-toolbar { padding: .75rem 1rem }
  .toolbar-filters, .toolbar-filters > :not(.visually-hidden) { inline-size: 100% }
  .toolbar-filters input[type=search] { inline-size: 100% }
  .table-filters.fluid { grid-template-columns: 1fr }
  .file-row { padding: .875rem 1rem }
  .file-row-main { flex-direction: column }
}

/* Notifications: one row each, a dot for unread ones, as in the bell panel. */
.inbox-list { margin: 0; padding: 0; list-style: none }
.inbox-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: .875rem; align-items: start; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule) }
.inbox-row:last-child { border-bottom: 0 }
.inbox-row.unread { background: #fbfaf7 }
.inbox-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; margin-top: .45rem }
.inbox-row.unread .inbox-dot { background: var(--accent) }
.inbox-text { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--ink-soft) }
.inbox-row.unread .inbox-text { color: var(--ink) }
.how-it-works > summary { border-top: 0; padding: 0; font-size: .875rem }
.how-it-works p { margin: .625rem 0 0; font-size: .875rem; line-height: 1.7; color: var(--muted); max-width: 90ch }
.confirm-card > h1 { font-size: 1.25rem }
.confirm-card > h2 { margin: 0; font-family: var(--sans); font-size: .94rem; font-weight: 700; letter-spacing: 0 }
.danger-zone { border-color: #e9d3c9 }

@media (max-width: 700px) {
  .inbox-row { grid-template-columns: 8px minmax(0, 1fr); padding: .875rem 1rem }
  .inbox-row .row-links { grid-column: 2; justify-content: flex-start }
}