/* ============================================================
   Sabr — design scheme v2.1 for Scholarships for Ghazza
   Paper, ink, and the flag re-roled: madder = action,
   zaytoun = confirmation, jaffa = doubt (never time),
   khalili = information. Hairlines instead of shadows.
   Georgia for display, system-ui for interface — nothing
   downloaded. Time is ink; how sure is jaffa or zaytoun.
   ============================================================ */

/* ============ tokens ============ */
:root {
  /* grounds */
  --paper: #FAF7F3;
  --card-bg: #FFFDFA;
  --sunk: #F4F1EB;
  /* lines */
  --line: #E3DFD8;
  --line-strong: #D4CEC6;
  /* ink ramp — Ink 300 never touches readable text */
  --ink-300: #AAA39D;
  --ink-500: #6B635C;
  --ink-700: #534A43;
  --ink-900: #261F1A;
  /* accents */
  --madder: #A34737;
  --madder-deep: #782B1E;
  --madder-tint: #FDE5E0;
  --zaytoun: #55723D;
  --zaytoun-deep: #385023;
  --zaytoun-tint: #E5EFDE;
  --jaffa: #EC9A4C;
  --jaffa-ink: #844B07;
  --jaffa-tint: #FFEAD7;
  --khalili: #296D9F;
  --khalili-deep: #114B75;
  --khalili-tint: #DEEDFB;
  /* legacy variable names kept so shared (admin) rules re-skin
     themselves automatically */
  --bg: var(--paper);
  --card: var(--card-bg);
  --ink: var(--ink-900);
  --muted: var(--ink-500);
  --accent: var(--madder);
  --accent-dark: var(--madder-deep);
  --brand-red: var(--madder);
  --border: var(--line);
  --danger: var(--madder-deep);
  --warn: var(--jaffa-ink);
  --ok: var(--zaytoun-deep);
  --radius: 12px;
  --shadow: none;
  /* motifs — inline, zero requests */
  --weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23261F1A' opacity='.07'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23261F1A' opacity='.07'/%3E%3C/svg%3E");
  --stitch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16'%3E%3Crect x='0' y='8' width='4' height='4' fill='%23A34737'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23A34737'/%3E%3Crect x='8' y='0' width='4' height='4' fill='%23A34737'/%3E%3Crect x='12' y='4' width='4' height='4' fill='%23A34737'/%3E%3Crect x='16' y='8' width='4' height='4' fill='%23A34737'/%3E%3Crect x='20' y='4' width='4' height='4' fill='%23A34737'/%3E%3Crect x='24' y='0' width='4' height='4' fill='%23A34737'/%3E%3Crect x='28' y='4' width='4' height='4' fill='%23A34737'/%3E%3C/svg%3E");
  --khatim-field-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect x='14' y='14' width='20' height='20' fill='none' stroke='%23FAF7F3' stroke-width='1.2' opacity='.10'/%3E%3Crect x='14' y='14' width='20' height='20' fill='none' stroke='%23FAF7F3' stroke-width='1.2' opacity='.10' transform='rotate(45 24 24)'/%3E%3C/svg%3E");
  --mashrabiya: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='0' cy='0' r='14' fill='none' stroke='%23534A43' stroke-width='1.2' opacity='.09'/%3E%3Ccircle cx='40' cy='0' r='14' fill='none' stroke='%23534A43' stroke-width='1.2' opacity='.09'/%3E%3Ccircle cx='0' cy='40' r='14' fill='none' stroke='%23534A43' stroke-width='1.2' opacity='.09'/%3E%3Ccircle cx='40' cy='40' r='14' fill='none' stroke='%23534A43' stroke-width='1.2' opacity='.09'/%3E%3Ccircle cx='20' cy='20' r='14' fill='none' stroke='%23534A43' stroke-width='1.2' opacity='.09'/%3E%3C/svg%3E");
  /* The khatim as a single shape, for places that only have a pseudo-element
     to work with. It is the exact union of a square and the same square at
     45° — the eight-point seal — so it matches .khatim (two rotated divs)
     point for point. Outer points at r=.5, inner vertices at r=.3827. */
  --khatim-clip: polygon(
    50% 0%, 64.6% 14.6%, 85.4% 14.6%, 85.4% 35.4%,
    100% 50%, 85.4% 64.6%, 85.4% 85.4%, 64.6% 85.4%,
    50% 100%, 35.4% 85.4%, 14.6% 85.4%, 14.6% 64.6%,
    0% 50%, 14.6% 35.4%, 14.6% 14.6%, 35.4% 14.6%
  );
  /* Leaving Gaza: a doorway and an arrow out through it. Drawn as a mask so
     it takes the colour of whatever carries it; it is information, not
     ornament, so data saver keeps it. */
  --exit-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2.5H3.5v11H7'/%3E%3Cpath d='M6.5 8h7M10.5 5l3 3-3 3'/%3E%3C/svg%3E");
  /* type */
  --display: Georgia, "Times New Roman", serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, Tahoma, Arial, sans-serif;
  --arabic: "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", sans-serif;
}
/* Data saver: the heritage layer is the first thing to go, automatically. */
@media (prefers-reduced-data: reduce) {
  :root { --weave: none; --khatim-field-light: none; --mashrabiya: none; }
}

* { box-sizing: border-box; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  font-family: var(--ui);
  background-color: var(--paper);
  background-image: var(--weave);
  color: var(--ink-900);
  line-height: 1.55;
  text-align: start;
  overflow-x: hidden;
}
html[lang="ar"] body { font-family: var(--arabic); line-height: 1.8; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.hidden { display: none !important; }
a { color: var(--khalili); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--khalili-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--khalili);
  outline-offset: 2px;
}
h1, h2 { font-weight: 400; }

/* ============ header / footer ============ */
.site-header {
  background: var(--card-bg);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: 12px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px; flex: 0 1 auto;
  min-width: 0; direction: ltr; text-decoration: none; color: var(--ink-900);
}
.brand-mark { display: block; flex: 0 0 auto; width: 42px; height: auto; }
.brand-copy { display: grid; min-width: 0; line-height: 1.12; gap: 2px; }
.brand-name {
  color: var(--madder); font-family: var(--display);
  font-size: 1.06rem; font-weight: 400; white-space: nowrap;
  letter-spacing: -.01em;
}
.brand-initiative {
  color: var(--zaytoun); font-size: .6rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.brand-tagline { color: var(--ink-500); font-size: .68rem; font-weight: 500; }
.site-nav { display: flex; align-items: center; gap: 18px; }
.site-nav a {
  text-decoration: none; color: var(--ink-700); font-weight: 500;
  display: inline-flex; align-items: center; min-height: 44px; font-size: .93rem;
}
.site-nav a:hover { color: var(--ink-900); }
.nav-form { display: inline-flex; margin: 0; }
.nav-link-button {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--ink-700); font-weight: 500; font-size: .93rem;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav-link-button:hover { color: var(--ink-900); }
/* The language toggle and the low-data link are both .pill — see the quiet
   pill in the buttons section. */

.site-footer {
  margin-top: 64px; padding: 0;
  background: var(--ink-900);
  background-image: var(--khatim-field-light);
  color: var(--paper); font-size: .88rem;
}
.footer-stitch {
  height: 16px; background-image: var(--stitch);
  background-repeat: repeat-x; background-size: 32px 16px;
  background-color: var(--paper);
}
.footer-inner {
  display: flex; align-items: flex-start; gap: 28px;
  padding-top: 36px; padding-bottom: 40px;
}
.footer-brand { display: inline-flex; flex: 0 0 auto; border-radius: 10px; }
.footer-brand img {
  display: block; width: 108px; height: auto; border-radius: 10px;
  background: var(--card-bg);
}
.footer-content { display: grid; gap: 12px; }
.footer-note {
  margin: 0; max-width: 560px; font-family: var(--display);
  font-size: 1.06rem; line-height: 1.5; color: var(--paper);
  letter-spacing: -.005em; text-wrap: pretty;
}
html[lang="ar"] .footer-note { font-family: var(--arabic); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-links a { color: var(--line-strong); white-space: nowrap; }
.footer-links a:hover { color: var(--paper); }
/* The dedication — see the note in base.html. It sits at the far end and on
   the baseline of the footer, quieter than everything around it.
   Ink 300 is legal here: the ban is on paper, where it reads 2.33, and on
   the ink-900 footer it clears 6.5 — 4.9 even on the lightest pixel of the
   khatim field behind it. It is the same weight the design book gives its own
   asides on a dark panel. Georgia because this is the one line on the site
   that is not information.
   The <bdi> in the markup keeps the initials in order when the page mirrors
   for Arabic, while leaving the element's own direction alone so the logical
   margin still finds the correct far end. */
/* The 8px lifts the line off the khatim field behind it. The tile is 48px
   and the seal spans roughly y=10 to y=38 of it, leaving two clear bands of
   about 10px; this drops the text into the lower one instead of across a
   stroke. If it ever drifts back — the flex line grows if the note above
   wraps to another line — tune this number rather than moving the line, or
   take the field's opacity down from .10 in --khatim-field-light. */
.footer-dedication {
  margin: 0; margin-inline-start: auto; margin-bottom: 8px;
  align-self: flex-end; flex: none;
  color: var(--ink-300); font-family: var(--display);
  font-size: .8rem; line-height: 1.4; white-space: nowrap;
}

/* ============ hero ============ */
.hero { padding: 40px 0 8px; }
.hero h1 {
  margin: 0 0 10px; font-family: var(--display); font-weight: 400;
  font-size: 2.5rem; line-height: 1.12; letter-spacing: -.022em;
  max-width: 21em; text-wrap: balance;
}
html[lang="ar"] .hero h1 { font-family: var(--arabic); line-height: 1.5; }
.hero p { margin: 0; color: var(--ink-700); max-width: 40em; font-size: 1.02rem; text-wrap: pretty; }
.hero-channels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* The not-found and error page: the address's language first, the other
   language below it (templates/error.html). */
.error-other { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.error-other h2 {
  margin: 0 0 8px; font-family: var(--display); font-weight: 400;
  font-size: 1.4rem; line-height: 1.25;
}
.error-page[lang="ar"] h1, .error-page[lang="ar"] h2 { font-family: var(--arabic); line-height: 1.5; }

/* ============ filters ============ */
.filters {
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 18px 16px; margin: 20px 0 16px;
}
.search {
  width: 100%; min-height: 52px; padding: 10px 22px; font-size: 1rem;
  font-family: inherit; color: var(--ink-900);
  border: 1px solid var(--line-strong); border-radius: 26px;
  background: var(--card-bg); margin: 0;
}
.search::placeholder { color: var(--ink-500); opacity: 1; }
.search:focus-visible {
  outline: none; border-color: var(--khalili);
  box-shadow: 0 0 0 3px rgba(41, 109, 159, .16);
}
.search-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px; align-items: center; margin-bottom: 14px;
}
.filter-controls { margin-top: 14px; }
.btn.filter-toggle {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px;
}
.filter-controls.collapsed { display: none; }
/* the drawer that replaced the profile idea — a screen, not a wall */
#advancedFilters {
  background-color: var(--card-bg);
  background-image: var(--mashrabiya);
  border: 1px solid var(--line); border-radius: 14px; padding: 16px;
}
.eligibility-filters {
  margin: 0 0 16px; padding: 14px 14px 12px; border: 0; border-radius: 12px;
  background: var(--card-bg); border: 1px solid var(--line);
  border-top: 2px solid var(--madder); min-inline-size: 0;
}
.eligibility-filters legend {
  padding-inline: 6px; color: var(--madder);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
/* the privacy promise is a green panel, not fine print */
.filter-privacy {
  margin: 0 0 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--zaytoun-tint); color: var(--zaytoun-deep);
  font-size: .86rem; line-height: 1.5;
}
.catalogue-filter {
  margin: 0 0 14px; padding: 0; border: 0; min-inline-size: 0;
}
.catalogue-filter legend {
  padding: 0 0 4px; color: var(--ink-900); font-size: .95rem; font-weight: 600;
}
.catalogue-filter .filter-privacy {
  margin: 3px 0 10px; padding: 0; background: transparent;
  color: var(--ink-500); font-size: .82rem;
}
/* segmented control — same radios, a quarter of the vertical space */
.catalogue-options {
  display: flex; flex-wrap: wrap; align-items: stretch;
  width: fit-content; max-width: 100%;
  border: 1px solid var(--line-strong); border-radius: 13px;
  background: var(--card-bg); overflow: hidden;
}
.catalogue-option {
  display: flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 8px 18px; margin: 0;
  border: 0; border-inline-start: 1px solid var(--line);
  background: var(--card-bg); cursor: pointer;
}
.catalogue-option:first-child { border-inline-start: 0; }
.catalogue-option:hover { background: var(--sunk); }
.catalogue-option:focus-within { outline: 3px solid var(--khalili); outline-offset: -3px; }
.catalogue-option:has(input:checked) { background: var(--ink-900); }
.catalogue-option:has(input:checked) strong { color: var(--paper); }
.catalogue-option input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0, 0, 0, 0); overflow: hidden;
}
.catalogue-option span { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.catalogue-option strong { color: var(--ink-700); font-size: .9rem; font-weight: 500; white-space: nowrap; }
.catalogue-option:has(input:checked) strong { font-weight: 600; }
.catalogue-option small { display: none; }
.catalogue-option b {
  min-width: 0; padding: 0; border-radius: 0; background: transparent;
  color: var(--ink-500); font-size: .8rem; font-weight: 500;
  font-variant-numeric: tabular-nums; text-align: start;
}
.catalogue-option:has(input:checked) b { color: var(--ink-300); }
.catalogue-option.tier-ready b { color: var(--zaytoun-deep); }
.catalogue-option.tier-research b { color: var(--jaffa-ink); }
/* "Opening soon" is a fact about time, so it counts in ink — a shade darker
   than "Closed for now" because it is the nearer of the two. */
.catalogue-option.tier-scheduled b { color: var(--ink-700); }
.catalogue-option.tier-watch b { color: var(--ink-500); }
.catalogue-option:has(input:checked).tier-ready b,
.catalogue-option:has(input:checked).tier-research b,
.catalogue-option:has(input:checked).tier-scheduled b,
.catalogue-option:has(input:checked).tier-watch b { color: var(--ink-300); }

/* zero is a sentence, not a tab */
.ready-zero {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 12px;
  color: var(--ink-700); font-size: .9rem; line-height: 1.5; max-width: 46em;
}
.ready-zero .khatim { margin-top: 5px; }

/* the tier's sentence is said once, above the list — never on 400 cards */
.tier-notice {
  margin: 0 0 14px; padding: 13px 17px; border-radius: 12px;
  font-size: .9rem; line-height: 1.55; max-width: 100%;
  background: var(--sunk); color: var(--ink-700);
}
.tier-notice.notice-research { background: var(--jaffa-tint); color: var(--jaffa-ink); }
.tier-notice.notice-ready { background: var(--zaytoun-tint); color: var(--zaytoun-deep); }
.tier-notice.notice-scheduled { background: var(--sunk); color: var(--ink-900); }
.tier-notice.notice-watch { background: var(--sunk); color: var(--ink-700); }

.filter-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.filter-row label {
  display: flex; flex-direction: column; gap: 5px; font-size: .82rem;
  color: var(--ink-700); font-weight: 500; flex: 1 1 150px; min-width: 140px;
}
.filter-row select, .filter-row input[type="text"] {
  min-height: 46px; padding: 8px 12px; border: 1px solid var(--line-strong);
  border-radius: 12px; background: var(--card-bg); font-size: .92rem;
  font-family: inherit; color: var(--ink-900); width: 100%;
}
.filter-row select:focus-visible, .filter-row input[type="text"]:focus-visible,
textarea:focus-visible {
  outline: none; border-color: var(--khalili);
  box-shadow: 0 0 0 3px rgba(41, 109, 159, .16);
}
.filter-row.secondary { margin-top: 12px; align-items: center; justify-content: flex-start; }
.chk {
  flex-direction: row !important; align-items: center; gap: 7px !important;
  font-size: .88rem !important; color: var(--ink-900) !important;
  flex: 0 0 auto !important; min-width: 0 !important; font-weight: 400 !important;
}
.chk input { accent-color: var(--madder); width: 17px; height: 17px; }
.count {
  display: block; color: var(--ink-500); font-size: .86rem;
  font-variant-numeric: tabular-nums;
  margin-top: 12px; min-height: 1.4em;
}
.active-filters {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.active-filters-label { color: var(--ink-500); font-size: .78rem; font-weight: 600; }
.active-filter {
  max-width: 100%; min-height: 36px; padding: 5px 13px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--card-bg); color: var(--ink-700);
  font: inherit; font-size: .82rem; cursor: pointer; overflow-wrap: anywhere;
  text-align: start;
}
.active-filter:hover { border-color: var(--ink-500); color: var(--ink-900); }
.residence-filter-summary {
  flex: 1 1 100%; color: var(--ink-500); font-size: .78rem; line-height: 1.5;
}

.results-state {
  min-height: 130px; padding: 28px 20px; background: var(--card-bg);
  border: 1px solid var(--line); border-radius: 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--ink-500); text-align: center;
}
.results-error { flex-direction: column; color: var(--ink-900); }
.loading-dot {
  width: 12px; height: 12px; background: var(--madder);
  animation: loading-pulse 1s ease-in-out infinite alternate;
}
@keyframes loading-pulse { to { opacity: .25; transform: rotate(45deg) scale(.8); } }
@media (prefers-reduced-motion: reduce) { .loading-dot { animation: none; } }
.data-notice { background: var(--jaffa-tint); border: 1px solid var(--jaffa-tint); color: var(--jaffa-ink); }

/* ============ buttons / chips / badges ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 12px;
  min-height: 44px; padding: 8px 20px; font-size: .92rem; font-weight: 600;
  cursor: pointer; text-decoration: none; font-family: inherit;
  transition: background .12s, border-color .12s, color .12s;
}
.btn.primary { background: var(--madder); color: var(--card-bg); }
.btn.primary:hover { background: var(--madder-deep); }
.btn.ghost { background: var(--card-bg); border-color: var(--line-strong); color: var(--ink-900); }
.btn.ghost:hover { border-color: var(--ink-500); }
.btn.info { background: var(--khalili-tint); border-color: var(--khalili-tint); color: var(--khalili-deep); }
.btn.info:hover { border-color: var(--khalili); }
.btn.danger { background: var(--card-bg); border-color: var(--madder-tint); color: var(--madder-deep); }
.btn.warn { background: var(--card-bg); border-color: var(--jaffa-tint); color: var(--jaffa-ink); }
.btn.tiny { min-height: 38px; padding: 4px 14px; font-size: .82rem; }
.btn:disabled { cursor: not-allowed; background: var(--sunk); border-color: var(--line); color: var(--ink-300); }
.btn.caution { background: var(--jaffa-tint); border-color: var(--jaffa-tint); color: var(--jaffa-ink); }
.btn.caution:hover { border-color: var(--jaffa); }

/* ---- the zaytoun dot ----
   One rule, every use. The dot means "we know where this link goes" — it is
   the only mark an outbound destination gets, because the service's brand
   belongs on its own app, not in our hero. Anything that merely changes the
   current page (the language toggle) does not earn one. */
.pill-dot::before,
.btn.wa::before,
.btn.official-programme-cta::before {
  content: ""; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--zaytoun);
}

/* ---- the quiet pill ----
   Outside services, the low-data route and the language toggle all wear the
   same shape: hairline border, ink text, no fill. Previously this was four
   near-identical rules that had drifted to three font sizes and two touch
   heights; it is now one, at the book's 44px minimum. */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; margin: 0;
  min-height: 44px; padding: 7px 16px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--card-bg); color: var(--ink-700);
  font-family: inherit; font-size: .88rem; font-weight: 500; line-height: 1.4;
  text-decoration: none; cursor: pointer;
}
/* .site-nav a is more specific than .pill, so the two that live in the
   header restate what they need. */
.site-nav a.pill { color: var(--ink-700); font-size: .88rem; }
.pill:hover, .site-nav a.pill:hover { border-color: var(--ink-500); color: var(--ink-900); }
.pill.pill-sm { font-size: .84rem; }
/* Short furniture stays on one line. A long label — "Get new scholarships on
   WhatsApp" at 320px — has to be allowed to wrap instead of pushing the page
   sideways, so nowrap is opt-in, not the default. */
.site-nav a.pill, .pill.pill-sm { white-space: nowrap; }

/* Two buttons borrow the dot without becoming pills: they sit in a stack of
   .btn siblings, so they keep the 12px radius and the button metrics. */
.btn.wa, .btn.official-programme-cta {
  background: var(--card-bg); border-color: var(--line-strong); gap: 9px;
}
.btn.wa { color: var(--ink-700); }
.btn.wa:hover, .btn.official-programme-cta:hover {
  border-color: var(--ink-500); color: var(--ink-900);
}

.chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 2px 11px;
  border-radius: 8px; font-size: .78rem; font-weight: 600;
  background: var(--sunk); color: var(--ink-700); white-space: nowrap;
}
.chip.f-fully-funded { background: var(--khalili-tint); color: var(--khalili-deep); }
/* Leaving Gaza. Khalili, because it is information about a government —
   never a promise about the listing, and never zaytoun, which is reserved
   for what we confirmed. A past evacuation with nothing yet for this intake
   steps down to ink. Always the first fact on the card: for a student in
   Gaza it decides whether the rest of the card matters. */
.chip.exit-route { gap: 6px; background: var(--khalili-tint); color: var(--khalili-deep); }
.chip.exit-route.exit-past { background: var(--sunk); color: var(--ink-700); }
.chip.f-tuition-only, .chip.f-fee-waiver { background: var(--sunk); color: var(--ink-700); }
.chip.f-partial-funding, .chip.f-stipend-only, .chip.f-travel-grant { background: var(--sunk); color: var(--ink-700); }
.chip.s-queued { background: var(--khalili-tint); color: var(--khalili-deep); }
.chip.s-processing { background: var(--jaffa-tint); color: var(--jaffa-ink); }
.chip.s-done { background: var(--zaytoun-tint); color: var(--zaytoun-deep); }
.chip.s-error { background: var(--madder-tint); color: var(--madder-deep); }
.chip.s-skipped { background: var(--sunk); color: var(--ink-500); }

/* time is ink — a deadline is a fact, not a mood */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 28px; padding: 2px 11px; border-radius: 8px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--sunk); color: var(--ink-900);
}
/* There is deliberately no urgent/soon/ok variant here. v2 tinted those in
   Jaffa and v2.1 removed the distinction outright: a deadline is a fact, so
   every countdown takes the base .badge treatment, near or far. */
.b-rolling { background: var(--sunk); color: var(--ink-700); }
.b-muted, .b-expired { background: var(--sunk); color: var(--ink-500); }
.b-expired { text-decoration: line-through; }
/* doubt — and only doubt — is jaffa */
.b-unconfirmed {
  border: 0; background: var(--jaffa-tint); color: var(--jaffa-ink);
  text-decoration: none;
}
.badge.b-expired.b-unconfirmed { text-decoration: line-through; }

/* khatim — two squares at 45°: bullet, status dot, seal */
.khatim { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; }
.khatim i { position: absolute; inset: 0; display: block; background: var(--zaytoun); }
.khatim i + i { transform: rotate(45deg); }

/* ============ table (admin listings keep it) ============ */
.table-wrap {
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: var(--radius); overflow-x: auto;
}
.sch-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sch-table th {
  text-align: start; padding: 10px 12px; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-500); border-bottom: 2px solid var(--line);
  white-space: nowrap; position: sticky; top: 0; background: var(--card-bg);
}
.sch-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sch-table tbody tr { background: var(--card-bg); }
.sch-table tbody tr:hover { background: var(--sunk); }
.c-name { min-width: 220px; }
.n-title { font-weight: 600; color: var(--ink-900); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.n-title:hover { color: var(--khalili-deep); }
.n-sub { color: var(--ink-500); font-size: .8rem; }
.empty { padding: 32px; text-align: center; color: var(--ink-500); }

/* ============ scholarship cards ============ */
.results-wrap { min-width: 0; }
.results-list {
  display: grid; grid-template-columns: 1fr;
  gap: 14px; min-width: 0;
}
.result-card {
  min-width: 0; padding: 0; background: var(--card-bg);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
/* the 5px cap reads the whole list's trustworthiness in one glance */
.tier-cap { height: 5px; background: var(--line-strong); }
.result-card.cap-ready .tier-cap { background: var(--zaytoun); }
.result-card.cap-research .tier-cap { background: var(--jaffa); }
.result-card.cap-legacy .tier-cap { background: var(--line-strong); }
.result-card.cap-scheduled .tier-cap { background: var(--ink-700); }
.result-card.cap-watch .tier-cap { background: var(--ink-300); }
.result-card-inner {
  padding: 20px 24px 22px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 28px;
}
.result-main { flex: 1; min-width: 0; }
.result-card-heading { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.result-title-block { min-width: 0; flex: 1; }
.result-kicker {
  margin: 0 0 7px; color: var(--ink-500); font-size: .76rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere;
}
.result-title-block h2 {
  margin: 0 0 8px; font-family: var(--display); font-weight: 400;
  font-size: 1.34rem; line-height: 1.24; letter-spacing: -.012em;
  overflow-wrap: anywhere;
}
html[lang="ar"] .result-title-block h2 { font-family: var(--arabic); line-height: 1.55; }
.result-title-block h2 a { color: var(--ink-900); text-decoration: none; }
.result-title-block h2 a:hover { color: var(--madder); }
.result-signals {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 12px;
}
.result-signals .record-tier { margin: 0; }
/* Eligibility and residence read as one ink line below the facts, not as two
   more tinted badges above the title. Plate 09's card carries one badge. */
.result-eligibility {
  margin: 10px 0 0; color: var(--ink-500);
  font-size: .82rem; line-height: 1.5;
}
.result-eligibility-why {
  display: block; margin-top: 2px; color: var(--ink-500);
  font-size: .8rem; text-wrap: pretty;
}
/* The other listings folded into this card because they share its link. */
.result-same-link {
  margin: 8px 0 0; color: var(--ink-500);
  font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere;
}
.result-same-link a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* "and 4 more" opens the rest of the names in place. */
.same-link-more { display: inline; }
.same-link-more > summary {
  display: inline; cursor: pointer; list-style: none;
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.same-link-more > summary::-webkit-details-marker { display: none; }
.same-link-more[open] > summary { text-decoration: none; }
.same-link-more ul { margin: 6px 0 0; padding-inline-start: 18px; }
.same-link-more li + li { margin-top: 3px; }
.result-facts {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; border: 0;
}
/* Free-text facts (eligibility especially) can run to a sentence. A nowrap
   chip that long forces the whole card wider than the phone and gets clipped
   by the card's overflow, so inside the facts row chips wrap. */
.result-facts .chip {
  white-space: normal; overflow-wrap: anywhere; text-align: start;
  line-height: 1.35; padding-top: 4px; padding-bottom: 4px;
}
.result-fact { min-width: 0; display: contents; }
.result-fact dt { display: none; }
.result-fact dd {
  margin: 0; display: inline-flex; align-items: center; min-height: 28px;
  padding: 2px 11px; border-radius: 8px; background: var(--sunk);
  color: var(--ink-700); font-size: .78rem; font-weight: 600;
  line-height: 1.35; overflow-wrap: anywhere;
}
.result-fact.fact-funding dd { background: var(--khalili-tint); color: var(--khalili-deep); }
.result-fact dd .badge { min-height: 0; padding: 0; background: transparent; font-size: inherit; }
.result-fact.fact-deadline dd { display: none; }
/* the right rail is fixed: deadline, then action — always that order */
.result-rail {
  width: 216px; flex: none; border-inline-start: 1px solid var(--line);
  padding-inline-start: 24px; display: flex; flex-direction: column;
}
.rail-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-500);
}
.rail-value { margin-top: 6px; font-size: .95rem; font-weight: 500; }
.rail-value.rail-unconfirmed { color: var(--jaffa-ink); }
.rail-days {
  margin-top: 4px; color: var(--ink-700); font-size: .82rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.rail-note { margin-top: 4px; color: var(--ink-500); font-size: .78rem; }
.rail-actions { margin-top: 16px; display: flex; gap: 9px; align-items: center; }
.result-card-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
/* Every card's button is the same maroon, whatever its tier: the tier label
   on the card and the notice above the list already say which listings
   still need checking. */
.result-card-actions .quick-view, .rail-actions .quick-view {
  display: inline-flex; align-items: center; min-height: 40px; margin: 0;
  padding: 7px 16px; border: 1px solid var(--madder); border-radius: 10px;
  background: var(--madder); color: var(--card-bg);
  text-decoration: none; font-size: .86rem; font-weight: 600;
}
.result-card-actions .quick-view:hover, .rail-actions .quick-view:hover {
  background: var(--madder-deep); border-color: var(--madder-deep); color: var(--card-bg);
}
.load-more-wrap { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 18px 0 0; }
.load-more-wrap .btn { min-height: 46px; min-width: 180px; }

/* No .match-badge here. Eligibility confidence is not a fifth status colour
   competing with the tier badge — it is .result-eligibility, in ink. */
.record-tier {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 7px 0 10px;
}
.record-tier.compact { margin: 6px 0 0; }
.tier-badge {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 28px; padding: 2px 12px;
  border-radius: 8px; font-size: .78rem; font-weight: 600; line-height: 1.25;
  white-space: nowrap;
}
.tier-badge.tier-ready { background: var(--zaytoun-tint); color: var(--zaytoun-deep); }
.tier-badge.tier-ready::before {
  content: ""; width: 9px; height: 9px; flex: none;
  background: var(--zaytoun);
  clip-path: var(--khatim-clip);
}
.tier-badge.tier-research { background: var(--jaffa-tint); color: var(--jaffa-ink); }
.tier-badge.tier-research.tier-legacy { background: var(--sunk); color: var(--jaffa-ink); }
/* Khalili is information and links only. An opening date is time, and time
   is ink — so this tier never borrows the information colour. */
.tier-badge.tier-scheduled { background: var(--sunk); color: var(--ink-900); }
.tier-badge.tier-watch { background: var(--sunk); color: var(--ink-700); }
.tier-explanation { color: var(--ink-500); font-size: .78rem; line-height: 1.45; flex: 1 1 180px; }
.official-page-badge {
  display: inline-flex; align-items: center; min-height: 28px; padding: 2px 11px;
  border-radius: 8px; background: var(--khalili-tint); color: var(--khalili-deep);
  font-size: .74rem; font-weight: 600; line-height: 1.25; white-space: nowrap;
}
.exit-route-badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
  padding: 1px 10px; border: 1px solid transparent; border-radius: 8px;
  background: var(--khalili-tint); color: var(--khalili-deep);
  font-size: .74rem; font-weight: 600; line-height: 1.25; text-decoration: none;
}
.exit-route-badge:hover { border-color: var(--khalili); color: var(--khalili-deep); }
.exit-route-badge.exit-past { background: var(--sunk); color: var(--ink-700); }
.exit-route-badge.exit-past:hover { border-color: var(--ink-500); color: var(--ink-900); }
@supports (mask-image: none) or (-webkit-mask-image: none) {
  .chip.exit-route::before, .exit-route-badge::before {
    content: ""; flex: none; width: 13px; height: 13px; background: currentColor;
    -webkit-mask: var(--exit-glyph) center / contain no-repeat;
    mask: var(--exit-glyph) center / contain no-repeat;
  }
  /* the arrow leaves in the direction of reading */
  html[dir="rtl"] .chip.exit-route::before,
  html[dir="rtl"] .exit-route-badge::before { transform: scaleX(-1); }
}
.trust-actions { margin: -2px 0 12px; }
/* shape and dot come from the quiet-pill block; this one sits at full ink
   because it is the page's primary outbound action */
.btn.official-programme-cta { color: var(--ink-900); }
.quick-view {
  border: 0; background: transparent; color: var(--khalili); cursor: pointer;
  padding: 5px 0; margin-top: 2px; font: inherit; font-size: .8rem;
  text-decoration: underline; text-underline-offset: 2px;
}
.quick-view:hover { color: var(--khalili-deep); }

@media (max-width: 900px) { .hide-md { display: none; } }
@media (max-width: 720px) {
  /* Stacked: children must stretch to the card, otherwise a flex-start column
     sizes .result-main to its widest line and the card clips it. */
  .result-card-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .result-main { width: 100%; max-width: 100%; }
  .result-rail {
    width: 100%; border-inline-start: 0; padding-inline-start: 0;
    border-top: 1px solid var(--line); padding-top: 14px;
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 14px;
  }
  .result-rail .rail-label { display: none; }
  .rail-value { margin-top: 0; }
  .rail-days { margin-top: 0; }
  .rail-actions { margin-top: 0; margin-inline-start: auto; }
}
@media (max-width: 640px) {
  .wrap { padding-inline: 12px; }
  /* On a phone the wrapped header is ~18% of the screen; pinning it costs
     that on every scroll, so it scrolls away with the page. */
  .site-header { position: static; }
  .header-inner { justify-content: center; gap: 4px 8px; }
  .brand { justify-content: center; }
  .brand-mark { width: 36px; }
  .brand-name { font-size: .95rem; }
  .brand-tagline { display: none; }
  /* Two centred rows. The pills are nowrap and cannot shrink, so a single row
     overflowed every 381–437px phone (390/393/412/430 — most current phones):
     the language toggle ran off-screen and the browser zoomed the page out. */
  .site-nav { width: 100%; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
  .site-nav a { font-size: .84rem; }
  /* wrap so the dedication drops to its own line rather than crushing the
     logo and the links between them */
  .footer-inner { align-items: flex-start; gap: 16px; flex-wrap: wrap; }
  .footer-brand img { width: 84px; }
  .hide-sm { display: none; }
  /* Smaller on a phone, so the search and the first results come sooner. */
  .hero { padding-top: 18px; }
  .hero h1 { font-size: 1.45rem; margin-bottom: 6px; }
  .hero p { font-size: .92rem; }
  .tier-notice { padding: 10px 13px; font-size: .82rem; line-height: 1.5; }
  .filters { padding: 14px 12px; }
  .search-row { grid-template-columns: 1fr; }
  .search-row .pill { justify-self: stretch; }
  .filter-row label { flex-basis: 100%; min-width: 0; }
  .filter-row select, .filter-row input[type="text"], .search { min-height: 48px; }
  .filter-row.secondary { align-items: flex-start; }
  .catalogue-filter .filter-privacy { display: none; }
  .catalogue-options { width: 100%; border-radius: 13px; }
  .catalogue-option { flex: 1 1 auto; justify-content: center; padding: 8px 10px; min-height: 48px; }
  .catalogue-option strong { font-size: .82rem; white-space: normal; }
  .chk { width: 100%; min-height: 44px; }
  /* quick-filter chips: see the block after the base .chips-row rule */

  .table-wrap { border: 0; background: transparent; overflow: visible; }
  .sch-table, .sch-table tbody { display: block; width: 100%; }
  .sch-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .sch-table tbody { display: grid; gap: 12px; }
  .sch-table tbody tr {
    display: block; border: 1px solid var(--line); border-radius: 14px;
    padding: 14px; background: var(--card-bg);
  }
  .sch-table tbody tr:hover { background: var(--card-bg); }
  .sch-table td, .sch-table td.hide-sm, .sch-table td.hide-md {
    display: grid; grid-template-columns: minmax(88px, 34%) 1fr; gap: 10px;
    align-items: baseline; padding: 7px 0; border: 0;
  }
  .sch-table td::before {
    content: attr(data-label); color: var(--ink-500); font-size: .72rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  }
  .sch-table td.c-name {
    display: block; min-width: 0; padding: 0 0 10px;
    border-bottom: 1px solid var(--line); margin-bottom: 4px;
  }
  .sch-table td.c-name::before { content: none; }
  .n-title { font-size: 1rem; }
  .n-sub { margin-inline-start: 48px; font-size: .84rem; }
  .quick-view {
    display: inline-flex; align-items: center; min-height: 44px;
    margin-inline-start: 48px; padding-inline: 0;
  }
  .empty { background: var(--card-bg); border: 1px solid var(--line); border-radius: 14px; }
  .results-list { grid-template-columns: 1fr; }
  .result-card-inner { padding: 16px 16px 18px; }
  .active-filters { align-items: stretch; }
  .active-filter { min-height: 44px; }
}

@media (max-width: 420px) {
  .footer-inner { display: grid; justify-items: center; text-align: center; }
  .footer-links { justify-content: center; }
  .footer-note { text-align: center; }
  /* the auto margin would still win over justify-items in grid, so drop it
     and let the dedication centre with everything else */
  .footer-dedication { margin-inline-start: 0; align-self: auto; }
}

.news-note {
  margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; font-size: .85rem;
  background: var(--jaffa-tint); color: var(--jaffa-ink);
}
.replace-note {
  margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; font-size: .85rem;
  background: var(--khalili-tint); color: var(--khalili-deep);
}

/* ============ submit page ============ */
.submit-card {
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; margin: 16px 0;
  display: flex; flex-direction: column; gap: 12px; max-width: 720px;
}
.submit-card textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong);
  border-radius: 12px; background: var(--card-bg);
  font-family: inherit; font-size: .95rem; resize: vertical;
}
.submit-card .btn { align-self: flex-start; }
.submit-msg { margin: 0; font-size: .92rem; }
.submit-msg.ok { color: var(--zaytoun-deep); }
.submit-msg.err { color: var(--madder-deep); }
.hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; opacity: 0; }

/* ============ login ============ */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px; width: 320px; display: flex; flex-direction: column; gap: 12px;
  text-align: center;
}
.login-card h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.3rem; }
.login-brand-logo {
  display: block; width: 144px; height: auto; margin: 0 auto 2px;
  border-radius: 10px; background: var(--card-bg);
}
.login-card input {
  padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--card-bg); font-size: 1rem; font-family: inherit;
}
.back-link { font-size: .85rem; color: var(--ink-500); text-decoration: none; }

/* ============ admin (inherits the palette; layout unchanged) ============ */
.admin-main { padding-top: 18px; }
.badge-admin {
  background: var(--ink-900); color: var(--paper); font-size: .65rem; padding: 2px 8px;
  border-radius: 999px; vertical-align: middle; text-transform: uppercase; letter-spacing: .05em;
}
.banner { border-radius: 10px; padding: 11px 15px; margin-bottom: 14px; font-size: .9rem; }
.banner.warn { background: var(--jaffa-tint); border: 1px solid var(--jaffa-tint); color: var(--jaffa-ink); }
.banner.offline { background: var(--jaffa-tint); border: 1px solid var(--jaffa-tint); color: var(--jaffa-ink); margin-top: 14px; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.stat-num { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--ink-500); font-size: .8rem; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: -1px; }
.tabs button {
  border: 1px solid var(--line); border-bottom: 0; background: var(--sunk); color: var(--ink-500);
  padding: 9px 16px; border-radius: 10px 10px 0 0; cursor: pointer; font-size: .9rem;
  font-family: inherit;
}
.tabs button.active { background: var(--card-bg); color: var(--ink-900); font-weight: 600; }
.tab-badge {
  background: var(--madder); color: var(--card-bg); border-radius: 999px; font-size: .7rem;
  padding: 1px 7px; margin-inline-start: 4px;
}
.tab-panel .card {
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) var(--radius); padding: 18px 20px;
}
.card h2 { margin: 0 0 6px; font-size: 1.1rem; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hint { color: var(--ink-500); font-size: .87rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 14px; margin: 12px 0; }
.form-grid label { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: var(--ink-500); text-transform: capitalize; }
.form-grid input, .form-grid textarea, .form-grid select, .add-urls input,
#pubSearch, #urlFilter, #importStatus {
  padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 10px;
  font-size: .9rem; font-family: inherit; color: var(--ink-900); background: var(--card-bg);
  width: 100%;
}
.form-grid input:disabled, .form-grid select:disabled {
  background: var(--sunk); color: var(--ink-300); cursor: not-allowed;
}
.progress { background: var(--line); border-radius: 999px; height: 10px; overflow: hidden; }
.progress-bar { background: var(--madder); height: 100%; width: 0; transition: width .4s; }
.progress-bar.done { background: var(--zaytoun); }
.progress-bar.failed { background: var(--madder-deep); }
.progress-bar.quiet { background: var(--ink-500); }
/* The batch panel. A hairline card on the sunk ground, like the run panel
   below it: madder fills what is finished, its tint the links being read
   now; the state chip carries the tone (khalili while it runs, zaytoun when
   it finished, ink when someone stopped it, madder when it failed). */
.batch-size { grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); margin-bottom: 4px; }
.queued-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0; }
.queued-line .btn.tiny { min-height: 32px; }
.batch-estimate { color: var(--ink-700); margin: 4px 0; }
.batch-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.job-box {
  margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--sunk);
}
.job-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.job-head h3 { margin: 0; font-size: 1rem; }
.job-head .btn { margin-inline-start: auto; }
.job-state.job-live { background: var(--khalili-tint); color: var(--khalili-deep); }
.job-state.job-ok { background: var(--zaytoun-tint); color: var(--zaytoun-deep); }
.job-state.job-quiet { background: var(--card-bg); color: var(--ink-700); border: 1px solid var(--line-strong); }
.job-state.job-problem { background: var(--madder-tint); color: var(--madder-deep); }
.job-progress { display: flex; height: 12px; background: var(--card-bg); border: 1px solid var(--line); }
.job-progress .progress-bar, .progress-live { flex: none; height: 100%; }
.progress-live { width: 0; background: var(--madder-tint); transition: width .4s; }
.job-count { margin: 8px 0 2px; font-weight: 650; font-variant-numeric: tabular-nums; }
.job-now { margin: 0 0 8px; color: var(--ink-700); font-size: .9rem; }
.job-facts { display: grid; gap: 4px; margin: 8px 0 0; font-size: .87rem; }
.job-facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; }
.job-facts dt { color: var(--ink-500); }
.job-facts dd { margin: 0; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.job-alert {
  margin: 10px 0 0; padding: 8px 10px; border: 1px solid var(--jaffa-tint);
  border-radius: 8px; background: var(--jaffa-tint); color: var(--jaffa-ink); font-size: .87rem;
}
.job-message {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  color: var(--ink-700); font-size: .87rem;
}
@media (max-width: 640px) {
  .job-facts div { grid-template-columns: 1fr; gap: 0; }
  .job-head .btn { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar, .progress-live { transition: none; }
}
.prepared-run-note { display: inline-block; margin-inline-start: 8px; }
.shadow-safety {
  margin: 10px 0; padding: 9px 12px; border: 1px solid var(--khalili-tint);
  border-radius: 10px; background: var(--khalili-tint); color: var(--khalili-deep); font-size: .87rem;
}
.pipeline-run-panel {
  margin-top: 14px; padding: 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--sunk);
}
.pipeline-run-panel h3, .machine-audit-summary h3 { margin: 0; font-size: .95rem; }
.pipeline-run-heading { margin: 2px 0 9px; font-weight: 650; }
.run-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.run-metric {
  min-width: 118px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card-bg);
}
.run-metric strong, .run-metric span { display: block; }
.run-metric strong { font-size: 1.05rem; }
.run-metric span { color: var(--ink-500); font-size: .72rem; }
.run-dispositions, .audit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0; }
.run-disposition { background: var(--sunk); color: var(--ink-700); }
.disposition-candidate, .disposition-reproduced, .disposition-replacement,
.disposition-unchanged { background: var(--zaytoun-tint); color: var(--zaytoun-deep); }
.disposition-not-reproduced, .disposition-error, .disposition-errors,
.disposition-skipped-no-url { background: var(--jaffa-tint); color: var(--jaffa-ink); }
.run-attention, .evidence-gate-errors {
  margin: 8px 0; padding: 8px 10px; border: 1px solid var(--jaffa-tint);
  border-radius: 8px; background: var(--jaffa-tint); color: var(--jaffa-ink); font-size: .84rem;
}
.run-unresolved { margin: 8px 0; font-size: .84rem; }
.run-unresolved summary, .audit-json summary { cursor: pointer; font-weight: 600; }
.run-unresolved ul, .evidence-gate-errors ul, .verifier-issues {
  margin: 6px 0; padding-inline-start: 22px;
}
.shadow-reassurance { margin-bottom: 0; }
.add-urls { display: flex; gap: 8px; margin: 10px 0; }
.add-urls input { flex: 1; }

.admin-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.admin-table th { text-align: start; padding: 8px; color: var(--ink-500); font-size: .72rem; text-transform: uppercase; border-bottom: 2px solid var(--line); }
.admin-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.admin-table .note { color: var(--ink-500); font-size: .8rem; }
.row-actions { white-space: nowrap; }
.row-actions .btn { margin-inline-start: 4px; }

.dropzone {
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  padding: 28px 16px; text-align: center; color: var(--ink-500); font-size: .92rem;
  cursor: pointer; background: var(--sunk); margin: 10px 0 12px;
  transition: border-color .15s, background .15s, color .15s;
}
.dropzone:hover, .dropzone:focus { border-color: var(--khalili); color: var(--khalili-deep); outline: none; }
.dropzone.dragging { border-color: var(--khalili); background: var(--khalili-tint); color: var(--khalili-deep); }
.dropzone.has-file { border-style: solid; border-color: var(--zaytoun); background: var(--zaytoun-tint); color: var(--zaytoun-deep); }
.hidden-file { display: none; }
.import-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.review-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.review-card { border: 1px solid var(--line); border-radius: 10px; background: var(--card-bg); }
.review-card summary {
  cursor: pointer; padding: 10px 14px; display: flex; gap: 12px; align-items: baseline;
  flex-wrap: wrap; list-style-position: inside;
}
.rc-title { font-weight: 600; }
.rc-meta { color: var(--ink-500); font-size: .82rem; }
.rc-body { padding: 4px 14px 14px; border-top: 1px solid var(--line); }
.rc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.machine-audit-summary {
  margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--sunk);
}
.audit-chip { background: var(--sunk); color: var(--ink-700); }
.evidence-actions { margin: 8px 0; }
.evidence-inspector {
  margin: 8px 0 14px; padding: 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card-bg); max-height: 680px; overflow: auto;
}
.evidence-inspector h4 { margin: 12px 0 7px; font-size: .92rem; }
.evidence-item {
  margin: 7px 0; padding: 9px 10px; border-inline-start: 3px solid var(--khalili-tint);
  background: var(--sunk);
}
.evidence-item h5 { margin: 0 0 5px; font-size: .84rem; }
.evidence-item blockquote {
  margin: 5px 0; padding-inline-start: 10px; border-inline-start: 2px solid var(--line);
  color: var(--ink-900); white-space: pre-wrap; overflow-wrap: anywhere;
}
.audit-json { margin: 8px 0; }
.audit-json pre {
  margin: 6px 0; padding: 9px; max-height: 320px; overflow: auto;
  border-radius: 8px; background: var(--ink-900); color: var(--paper);
  font-size: .75rem; white-space: pre-wrap; overflow-wrap: anywhere;
}
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

@media (max-width: 640px) {
  .prepared-run-note { display: block; margin: 8px 0 0; }
  .pipeline-run-panel .card-head { align-items: flex-start; }
  .run-metric { flex: 1 1 120px; }
  .evidence-inspector { padding: 9px; max-height: none; }
}

/* ============ admin help tab ============ */
.help-content { max-width: 860px; }
.help-content h3 { margin: 24px 0 6px; font-size: 1.05rem; }
.help-content ol, .help-content ul { padding-inline-start: 22px; margin: 6px 0 12px; }
.help-content li { margin: 4px 0; }
.help-content dl { margin: 6px 0 12px; }
.help-content dt { font-weight: 600; margin-top: 10px; }
.help-content dd { margin: 2px 0 0 0; color: var(--ink-500); }
.help-flow {
  background: var(--sunk); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; font-size: .9rem; margin: 8px 0 10px;
}
.help-note {
  background: var(--khalili-tint); border: 1px solid var(--khalili-tint); color: var(--khalili-deep);
  border-radius: 10px; padding: 8px 12px; font-size: .87rem; margin: 10px 0;
}

/* ============ saved stars / digest / bulk ============ */
.n-row { display: flex; align-items: center; gap: 4px; }
.star {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--card-bg); cursor: pointer; padding: 0;
  font-size: 1.1rem; line-height: 1; color: var(--ink-700);
}
.star.on { color: var(--madder); border-color: var(--madder); }
.star:hover { border-color: var(--ink-500); }
.fee-warning {
  margin: 14px 0 0; padding: 12px 16px; border-radius: 10px;
  font-size: .84rem; line-height: 1.55;
  background: var(--jaffa-tint); color: var(--jaffa-ink);
}
.bulk-bar { margin: 4px 0 2px; align-items: center; }
.rc-check { margin-inline-end: 2px; }
#digestText {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--card-bg);
  font-family: inherit; font-size: .88rem; resize: vertical;
}
#pubFilter, #digestDays, #digestLang {
  padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 10px;
  font-size: .9rem; font-family: inherit; color: var(--ink-900); background: var(--card-bg);
}

/* quick filter chips (public) */
.chips-row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.chip-toggle {
  border: 1px solid var(--line-strong); background: var(--card-bg); color: var(--ink-700);
  border-radius: 999px; padding: 6px 15px; min-height: 38px; font-size: .85rem; line-height: 1.4;
  cursor: pointer; font-family: inherit; font-weight: 500;
  transition: background .12s, border-color .12s;
}
.chip-toggle:hover { border-color: var(--ink-500); color: var(--ink-900); }
.chip-toggle:focus-visible { outline: 3px solid var(--khalili); outline-offset: 1px; }
.chip-toggle.on {
  background: var(--ink-900); border-color: var(--ink-900); color: var(--paper);
}
.chip-toggle.on:hover { background: var(--ink-700); color: var(--paper); }
.chip-toggle { display: inline-flex; align-items: center; gap: 8px; }
.chip-count {
  font-weight: 500; font-size: .78rem; color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.chip-toggle.on .chip-count { color: var(--ink-300); }
.chip-count:empty { display: none; }
.residence-payback {
  margin-top: 7px; font-size: .8rem; font-weight: 400; line-height: 1.5;
  color: var(--zaytoun-deep);
}
/* Two per row, and a chip left on its own stretches across. A two-column grid
   with a full-width :last-child could not see that zero-count chips are
   hidden, so "Fully funded" sat alone at half width above "Online / remote". */
@media (max-width: 640px) {
  .chips-row { flex-wrap: wrap; padding: 2px 1px 6px; }
  .chip-toggle {
    flex: 1 1 calc(50% - 5px); min-width: 0; min-height: 44px;
    white-space: normal;
  }
}

/* application-link trust warnings — doubt is jaffa, calm and warm */
.link-warning {
  margin: 10px 0 0; padding: 10px 14px; font-size: .85rem;
  background: var(--jaffa-tint); border-radius: 10px;
  color: var(--jaffa-ink);
}
.provenance-note, .legacy-note {
  margin: 10px 0 0; padding: 10px 14px; font-size: .85rem;
  background: var(--sunk); border-radius: 10px;
  color: var(--ink-700);
}
.provenance-note.watch-note { background: var(--sunk); color: var(--ink-700); }
.legacy-note { background: var(--sunk); color: var(--jaffa-ink); }
.link-bad { color: var(--madder-deep); font-weight: 600; }
.warning-text { color: var(--jaffa-ink); font-weight: 600; margin-top: 3px; }

/* server-rendered /s/<id> detail page */
.detail-card {
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; padding: 0; max-width: 860px; margin: 24px auto 0;
}
.detail-inner { padding: 28px 30px 30px; }
.detail-card h1 {
  margin: 10px 0 6px; font-family: var(--display); font-weight: 400;
  font-size: 1.9rem; line-height: 1.16; letter-spacing: -.018em; text-wrap: balance;
}
html[lang="ar"] .detail-card h1 { font-family: var(--arabic); line-height: 1.5; }
.detail-card .m-provider {
  margin: 0 0 14px; color: var(--ink-500); font-weight: 500;
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
}
.m-provider { margin: 0 0 10px; color: var(--ink-500); font-weight: 500; }
.m-desc { margin: 0 0 16px; color: var(--ink-700); max-width: 44em; text-wrap: pretty; }
.m-grid { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 8px 16px; margin: 0 0 18px; font-size: .9rem; }
.m-grid dt { color: var(--ink-500); }
.m-grid dd { margin: 0; overflow-wrap: anywhere; }
.m-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.apply-domain { margin: 8px 0 0; color: var(--ink-500); font-size: .8rem; overflow-wrap: anywhere; }
.verification-note {
  margin: 8px 0; color: var(--ink-500); font-size: .82rem;
  padding-top: 8px; border-top: 1px solid var(--line);
}
/* our checks — the most trust-building lines on the site */
.verification-summary {
  margin: 18px 0 0; padding: 16px 18px; background: var(--sunk);
  border-radius: 12px; font-size: .86rem;
}
.verification-summary p { margin: 4px 0; }
.detail-stitch {
  height: 16px; background-image: var(--stitch);
  background-repeat: repeat-x; background-size: 32px 16px;
}
/* stitch counter: discrete, countable, finishable — never animated */
.stitch-counter { display: flex; gap: 3px; margin-top: 10px; }
.stitch-counter i { flex: 1; height: 8px; background: var(--line); }
.stitch-counter i.on { background: var(--madder); }

.back-row { margin: 0 0 18px; font-size: .9rem; }
.back-row a { text-decoration: none; color: var(--ink-700); }
.back-row a:hover { color: var(--ink-900); }
.tier-sentence {
  margin: 0 0 18px; max-width: 44em; font-family: var(--display);
  font-size: 1.02rem; line-height: 1.5; color: var(--ink-900); text-wrap: pretty;
}
html[lang="ar"] .tier-sentence { font-family: var(--arabic); }
.detail-columns {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px; align-items: start; margin-top: 8px;
}
.detail-main { min-width: 0; }
.detail-rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.rail-card {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card-bg); padding: 18px;
}
.rail-card .rail-value { font-size: 1.05rem; }
.rail-card .m-actions { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 16px; }
.rail-card .m-actions .btn { min-height: 46px; }
.detail-rail .verification-summary { margin: 0; }
.detail-rail .rail-label { display: block; margin-bottom: 8px; }
/* Leaving Gaza, country by country. One hairline row per host country; its
   status takes the tone of what it means for this listing: khalili when the
   country is getting students like this one out, ink when it has before or
   the listing is not the kind it helped, jaffa when students are stuck. */
.exit-panel {
  border: 1px solid var(--line); border-radius: 14px; background: var(--card-bg);
  padding: 18px; font-size: .86rem;
}
/* both #leaving-gaza targets land below the sticky header, not under it */
#leaving-gaza { scroll-margin-top: 88px; }
.exit-panel h2.rail-label { margin: 0 0 10px; line-height: 1.4; }
/* the host country was worked out, not recorded: say so before the rows */
.exit-basis { margin: 0 0 12px; color: var(--ink-500); font-size: .8rem; line-height: 1.5; }
.exit-row { padding: 12px 0; border-top: 1px solid var(--line); }
.exit-row:first-of-type { padding-top: 0; border-top: 0; }
.exit-row p { margin: 0 0 6px; color: var(--ink-700); line-height: 1.5; text-wrap: pretty; }
.exit-row .exit-row-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 6px;
}
.exit-country { color: var(--ink-900); font-weight: 600; }
.exit-status {
  display: inline-flex; align-items: center; min-height: 22px; padding: 1px 8px;
  border-radius: 6px; background: var(--sunk); color: var(--ink-700);
  font-size: .72rem; font-weight: 600; line-height: 1.3;
}
.exit-status.tone-route { background: var(--khalili-tint); color: var(--khalili-deep); }
.exit-status.tone-blocked { background: var(--jaffa-tint); color: var(--jaffa-ink); }
.exit-row .exit-condition {
  padding-inline-start: 10px; border-inline-start: 2px solid var(--line-strong);
}
.exit-row .exit-condition.met { border-inline-start-color: var(--khalili); }
.exit-row .exit-meta { margin: 0; color: var(--ink-500); font-size: .76rem; }
.exit-meta a { color: var(--khalili); }
.exit-note { margin: 10px 0 0; color: var(--ink-700); line-height: 1.5; }
.exit-row + .exit-note { padding-top: 10px; border-top: 1px solid var(--line); }
.exit-how { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.exit-how summary { cursor: pointer; color: var(--ink-900); font-weight: 600; }
.exit-how p { margin: 8px 0 0; color: var(--ink-700); line-height: 1.5; }
@media (max-width: 860px) {
  .detail-columns { grid-template-columns: minmax(0, 1fr); }
  /* One column: the deadline and the apply action are what a student scans
     for, so the rail card moves above the four steps; "Our checks" stays
     last. display: contents lets the two rail blocks join the parent grid. */
  .detail-rail { display: contents; }
  .detail-rail .rail-card { order: -1; }
  /* after the four steps, before "Our checks" */
  .detail-rail .exit-panel { order: 0; }
  .detail-rail .verification-summary { order: 1; }
}

@media (max-width: 480px) {
  .m-grid { grid-template-columns: 1fr; gap: 2px; }
  .m-grid dt { margin-top: 8px; font-size: .78rem; }
  .m-actions { display: grid; grid-template-columns: 1fr; }
  .m-actions .btn { min-height: 48px; text-align: center; }
  .detail-inner { padding: 18px 16px 22px; }
}

/* ============ plate 10 — the four steps ============
   One open at a time, and a closed step still previews its single most useful
   fact. The exclusivity is native: a shared name= on <details> makes the
   accordion, so this costs no JavaScript and works on the first paint. */
/* minmax(0, 1fr), not the implicit auto column: a closed step's peek is one
   nowrap line, and an auto track grows to fit the longest one (a 196-character
   fee note made every step ~1,490px wide). The steps then ran under the
   deadline rail and were clipped by the card, hiding eligibility text. A
   zero minimum keeps the steps inside their column; the peek ellipsises. */
.steps { margin: 18px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.steps-escape { margin: 0; }
.steps-escape-btn {
  border: 0; background: transparent; padding: 6px 0; margin: 0;
  min-height: 40px; display: inline-flex; align-items: center;
  color: var(--khalili); font: inherit; font-size: .88rem; font-weight: 600;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.steps-escape-btn:hover { color: var(--khalili-deep); }
.step {
  min-width: 0;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card-bg);
}
/* "Previous cycles" sits outside the .steps grid, so it needs the grid's gap */
.step-aside { margin-top: 10px; }
.step > summary {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; min-height: 56px;
  cursor: pointer; list-style: none;
}
.step > summary::-webkit-details-marker { display: none; }
.step > summary::marker { content: ""; }
.step > summary:focus-visible { outline: 3px solid var(--khalili); outline-offset: -3px; border-radius: 13px; }
.step-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 13px;
  border: 1px solid var(--line-strong); background: var(--card-bg);
  color: var(--ink-500); font-size: .8rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* the open step is where the student is, so it takes the brand mark */
.step[open] > summary .step-num {
  background: var(--madder); border-color: var(--madder); color: var(--card-bg);
}
.step-name {
  flex: none; color: var(--ink-900);
  font-size: 1.02rem; font-weight: 600; line-height: 1.3;
}
.step-peek {
  flex: 1 1 auto; min-width: 0; color: var(--ink-500);
  font-size: .86rem; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The peek carries dir="auto" so an English fee or test note on an Arabic
   page is truncated at its end, not its beginning; keep it beside the name. */
html[dir="rtl"] .step-peek { text-align: right; }
.step[open] > summary .step-peek { display: none; }
.step-sign { flex: none; color: var(--ink-500); font-size: 1.05rem; line-height: 1; }
.step[open] > summary .step-sign { visibility: hidden; }
.step-body { padding: 16px 20px 20px; border-top: 1px solid var(--line); }
/* The panels inside a step are no longer cards of their own — the step is the
   card. Nesting one hairline box inside another was the thing plate 08 warns
   about: depth from one line and a lot of air, not from stacked frames. */
.step-body .action-panel {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
}
.step-body .m-grid { margin: 0; }
/* One rhythm, whatever a step happens to hold. Specificity is deliberate:
   these must beat the standalone margins on .m-grid, .unknown-note and the
   rest, which are still correct wherever those elements appear alone. */
.step-body > *:first-child { margin-top: 0; }
.step-body > *:not(:first-child) { margin-top: 20px; }
.step-body > *:last-child { margin-bottom: 0; }
.step-body > ul { padding-inline-start: 21px; }
.step-body > ul li { margin: 6px 0; font-size: .86rem; }
.step-aside > summary { min-height: 48px; }
.step-aside .step-name { font-size: .95rem; font-weight: 600; }
@media (max-width: 480px) {
  /* Number, name and ＋ share the first row; the peek takes its own row under
     the name, at most two lines. Before, the ＋ wrapped onto a third line of
     its own and a long fee note ran to five lines in a closed step. */
  .step > summary { flex-wrap: wrap; row-gap: 4px; padding: 12px 16px; }
  .step-peek {
    order: 1; flex-basis: 100%; white-space: normal;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }
  .step-num ~ .step-peek { padding-inline-start: 40px; }
  html[dir="rtl"] .step-num ~ .step-peek { padding-left: 0; padding-right: 40px; }
  .step-sign { margin-inline-start: auto; }
  .step-aside .step-peek { order: 0; flex-basis: auto; }
  .step-body { padding: 14px 16px 18px; }
}

/* student-facing eligibility and application plan */
.action-panel {
  margin: 16px 0 0; padding: 16px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--card-bg);
}
.action-panel h2, .action-panel h3 {
  margin: 0 0 8px; color: var(--ink-900); font-size: 1.05rem; font-weight: 600;
}
.action-panel h4 { margin: 0 0 5px; font-size: .9rem; }
.action-panel-note {
  margin: 0 0 10px; padding: 9px 12px; border-radius: 8px;
  color: var(--ink-500); font-size: .82rem;
}
.action-panel-note.verified { background: var(--zaytoun-tint); color: var(--zaytoun-deep); }
.action-panel-note.info { background: var(--sunk); color: var(--ink-700); }
.action-panel-note.caution { background: var(--sunk); color: var(--ink-700); }
/* "Do I qualify" — one short line per requirement, skimmed not read */
.qualify-routes-note {
  margin: 0 0 10px; padding-inline-start: 14px;
  border-inline-start: 2px solid var(--jaffa);
  color: var(--ink-700); font-size: .86rem; line-height: 1.55; max-width: 60ch;
}
.qualify-list { margin: 4px 0 0; padding: 0; list-style: none; }
.qualify-group-label {
  margin: 4px 0 0; color: var(--ink-500); font-size: .78rem; font-weight: 600;
  letter-spacing: .02em;
}
.qualify-list + .qualify-routes-note { margin-top: 14px; }
.qualify-route .qualify-item::before { background: var(--line-strong); }
/* A listing students in Gaza probably cannot use (app.py _access_warning). */
.access-warning {
  margin: 0 0 16px; padding: 10px 14px; max-width: 60ch;
  background: var(--jaffa-tint); color: var(--jaffa-ink);
  border-radius: 10px; font-size: .9rem; line-height: 1.5;
}
.access-warning strong { font-weight: 600; }
.result-eligibility.access-warning {
  margin: 10px 0 0; padding: 6px 10px; font-size: .82rem; max-width: none;
}
.result-eligibility.access-warning .result-eligibility-why { color: var(--jaffa-ink); }
.exit-checked { color: var(--ink-500); font-size: .8em; }
/* Logical padding, because each item carries dir="auto": on an Arabic page
   an English rule resolves to ltr, and its bullet (inset-inline-start) moves
   to the left. The old [dir="rtl"] override kept the padding on the right, so
   the bullet sat on the first letter ("■ationality"). */
.qualify-item {
  position: relative; margin: 0; padding: 9px 0; padding-inline-start: 22px;
  border-bottom: 1px solid var(--line);
  font-size: .9rem; line-height: 1.5; color: var(--ink-900);
}
.qualify-item:last-child { border-bottom: 0; }
.qualify-item::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: 16px;
  width: 9px; height: 9px; background: var(--zaytoun);
  clip-path: var(--khatim-clip);
}
.qualify-item.qualify-exclude::before { background: var(--jaffa); clip-path: none; height: 2px; top: 19px; }
.qualify-item.qualify-exclude { color: var(--jaffa-ink); }
.qualify-not { font-weight: 600; }
.qualify-label {
  color: var(--ink-500); font-size: .78rem; font-weight: 600;
  text-transform: capitalize; margin-inline-end: 2px;
}
.qualify-label::after { content: " ·"; font-weight: 400; }
.qualify-soft .qualify-item { color: var(--ink-700); }
.qualify-soft .qualify-item::before { background: var(--line-strong); }
.qualify-extra { margin-top: 10px; font-size: .88rem; }
.qualify-extra > summary {
  cursor: pointer; min-height: 40px; display: flex; align-items: center;
  color: var(--khalili); font-weight: 500;
}
.qualify-extra > summary:hover { color: var(--khalili-deep); }
.qualify-prose { margin: 6px 0 0; font-size: .92rem; line-height: 1.6; color: var(--ink-700); max-width: 60ch; }
.qualify-exclusions {
  margin: 14px 0 0; padding: 10px 14px; border-radius: 10px;
  background: var(--jaffa-tint); color: var(--jaffa-ink);
  font-size: .86rem; line-height: 1.55;
}
.prose-more { display: inline; }
.prose-more > summary {
  display: inline-flex; cursor: pointer; color: var(--khalili);
  font-weight: 500; min-height: 32px; align-items: center;
}
.prose-more > summary:hover { color: var(--khalili-deep); }
.prose-more[open] > summary { display: none; }
.prose-more > p { margin: 6px 0 0; white-space: pre-line; }

.eligibility-route {
  margin-top: 9px; padding: 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card-bg);
}
.eligibility-route h4, .eligibility-route h3 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.eligibility-route ul, .checks-panel ul, .previous-cycles ul {
  margin: 5px 0 0; padding-inline-start: 21px;
}
.eligibility-route li, .checks-panel li, .previous-cycles li {
  margin: 6px 0; font-size: .86rem;
}
.eligibility-route li small, .rule-ambiguity {
  display: block; margin-top: 2px; color: var(--jaffa-ink); font-size: .76rem;
}
.eligibility-route li small.official-rule { color: var(--zaytoun-deep); }
.route-status, .step-requirement {
  display: inline-flex; width: fit-content; padding: 2px 8px; border-radius: 8px;
  background: var(--sunk); color: var(--ink-500); font-size: .7rem; font-weight: 600;
}
.route-pass .route-status, .rule-pass::marker { color: var(--zaytoun-deep); }
.route-fail .route-status, .rule-fail::marker { color: var(--madder-deep); }
.application-steps { margin: 8px 0 0; padding-inline-start: 25px; }
.application-steps li { margin: 0 0 12px; padding-inline-start: 3px; }
.application-steps .step-action { display: block; font-weight: 600; }
.application-steps .step-requirement { margin: 5px 7px 2px 0; }
[dir="rtl"] .application-steps .step-requirement { margin: 5px 0 2px 7px; }
.application-steps a { display: inline-block; margin-top: 5px; font-size: .84rem; }
.unknown-note { margin: 7px 0 0; color: var(--ink-500); font-size: .85rem; }
.freshness, .verification-fact { font-size: .84rem; }
.freshness-current, .verification-fact.verified { color: var(--zaytoun-deep); }
.freshness-due { color: var(--jaffa-ink); }
.freshness-stale, .verification-fact.caution { color: var(--jaffa-ink); }
.verification-fact.info { color: var(--ink-700); }
.translation-note { margin: 0 0 10px; color: var(--ink-500); font-size: .82rem; }

/* wipe & rebuild danger zone (admin) */
.danger-zone { border-color: var(--madder-tint); }
.danger-zone h2 { color: var(--madder-deep); }

/* report a problem (public /s/ page) */
.report-box { margin-top: 14px; font-size: .88rem; }
.report-box summary { cursor: pointer; color: var(--ink-500); min-height: 44px; display: flex; align-items: center; }
.report-box summary:hover { color: var(--khalili-deep); }
.report-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.report-form select {
  min-height: 44px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 10px;
  font-family: inherit; font-size: .88rem; color: var(--ink-900); background: var(--card-bg);
}
.report-form textarea {
  flex: 1 1 100%; padding: 9px 11px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--card-bg);
  font-family: inherit; font-size: .88rem; resize: vertical;
}

/* applicant guide (/guide) */
.guide { background: var(--card-bg); border: 1px solid var(--line); border-radius: 16px;
         padding: 28px; max-width: 760px; margin: 24px auto 0; }
.guide h1 {
  font-family: var(--display); font-weight: 400; font-size: 1.8rem;
  letter-spacing: -.018em; margin: 0 0 8px;
}
.guide h2 {
  font-family: var(--display); font-weight: 400; font-size: 1.25rem;
  letter-spacing: -.01em; margin: 24px 0 6px;
}
html[lang="ar"] .guide h1, html[lang="ar"] .guide h2,
.guide .only-ar h1, .guide .only-ar h2 { font-family: var(--arabic); }
.guide p, .guide li { font-size: .95rem; color: var(--ink-700); }
.guide ul { padding-inline-start: 22px; margin: 6px 0 10px; }
.guide h3 { margin: 18px 0 4px; font-size: 1rem; font-weight: 600; color: var(--ink-900); }
.guide .exit-list { margin: 4px 0 12px; }
.guide .exit-list dt { margin-top: 10px; color: var(--ink-900); font-weight: 600; }
.guide .exit-list dd { margin: 2px 0 0; color: var(--ink-700); font-size: .95rem; }
.guide .exit-more { margin: 14px 0; padding-top: 10px; border-top: 1px solid var(--line); }
.guide .exit-more summary { cursor: pointer; color: var(--ink-900); font-weight: 600; }
html[lang="ar"] .only-en { display: none; }
html[lang="en"] .only-ar { display: none; }

/* per-entry usage/link-check line (admin cards) */
.rc-stats { color: var(--ink-500); font-size: .84rem; margin: 2px 0 6px; }
.rc-stats .bad { color: var(--madder-deep); font-weight: 600; }