/* ==========================================================================
   RABBANI — student views
   ========================================================================== */

.page-header { margin-block-end: var(--s-8); }
.page-header h1 { margin-block-end: var(--s-2); }

/* ---- Home: the "what next" hero ----------------------------------------
   One feature surface per screen. It answers the only question the home page
   exists to answer, and everything below it is supporting detail. */
.home-hero {
  padding: clamp(var(--s-6), 4vw, var(--s-10));
  border-radius: var(--r-xl);
  /* Warm parchment, not a saturated panel: the green is spent on the action. */
  background: linear-gradient(160deg, var(--gold-50), var(--surface-raised) 60%);
  border: 1px solid var(--line-hair);
  position: relative; overflow: hidden;
}
.home-greeting { font-size: var(--fs-body); color: var(--ink-400); margin-block-end: var(--s-2); }
.home-hero h1 {
  font-family: var(--font-display); font-size: var(--fs-h1); color: var(--green-900);
  margin-block-end: var(--s-6); max-inline-size: 22ch;
}
.home-standing { display: flex; align-items: baseline; gap: var(--s-3); margin-block-end: var(--s-3); }
.home-level {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: var(--fw-bold);
  color: var(--green-800);
}
.home-rank { font-size: var(--fs-sm); color: var(--ink-400); }
.home-hero .progress-row { margin-block-end: var(--s-7); max-inline-size: 420px; }

/* ---- Next action cards --------------------------------------------------- */
.next-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.action-card { display: flex; flex-direction: column; gap: var(--s-3); }
.action-card .eyebrow { margin-block-end: 0; }
.action-card h3 { font-family: var(--font-display); font-size: var(--fs-h3); }
.action-card .action-meta { display: flex; align-items: center; gap: var(--s-3); color: var(--ink-400); font-size: var(--fs-caption); }
.action-card .btn { margin-block-start: auto; align-self: flex-start; }

/* ---- Discipline progress ------------------------------------------------- */
.discipline-list { display: flex; flex-direction: column; gap: var(--s-1); }
.discipline-row {
  display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr auto;
  align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: background var(--t-fast);
}
.discipline-row:hover { background: var(--surface-sunken); }
.discipline-name { font-weight: var(--fw-medium); color: var(--ink-900); }
.discipline-count { font-size: var(--fs-caption); color: var(--ink-400); white-space: nowrap; }

@media (max-width: 600px) {
  .discipline-row { grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-3); }
  .discipline-row .progress { grid-column: 1 / -1; }
}

/* ---- Learning path ------------------------------------------------------
   A vertical scholarly progression. Deliberately not a game map: no avatars,
   no bouncing nodes, no cartoon trail. */
.path { position: relative; padding-inline-start: var(--s-8); }
/* The spine runs behind the markers, inline-start in RTL = the right edge. */
.path::before {
  content: ''; position: absolute; inset-block: 12px 12px;
  inset-inline-start: 11px; inline-size: 2px;
  background: linear-gradient(var(--green-100), var(--line-hair));
}
.path-node { position: relative; padding-block-end: var(--s-5); }
.path-marker {
  position: absolute; inset-inline-start: calc(-1 * var(--s-8) + 2px); inset-block-start: 18px;
  inline-size: 20px; block-size: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--line); color: var(--surface);
}
.path-node.is-done .path-marker { background: var(--green-600); border-color: var(--green-600); color: var(--ink-on-dark); }
.path-node.is-current .path-marker { background: var(--gold-500); border-color: var(--gold-500); box-shadow: 0 0 0 4px var(--gold-100); }
.path-node.is-locked .path-marker { background: var(--surface-sunken); border-color: var(--line); }

.path-card { display: block; text-decoration: none; color: inherit; }
.path-node.is-current .path-card { border-color: var(--gold-300); box-shadow: var(--e-2); }
.path-node.is-locked .path-card { background: var(--surface-sunken); border-color: transparent; }
.path-title { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.path-title h3 { font-family: var(--font-display); }
.path-sub { color: var(--ink-400); font-size: var(--fs-caption); margin-block-start: var(--s-1); }

/* ---- Review queue -------------------------------------------------------- */
.review-list { display: flex; flex-direction: column; gap: var(--s-3); }
.review-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); }
.review-mark {
  inline-size: 38px; block-size: 38px; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--green-50); color: var(--green-700);
}
.review-body { min-inline-size: 0; }
.review-title { font-weight: var(--fw-medium); color: var(--ink-900); }
.review-meta { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-block-start: var(--s-1); }

@media (max-width: 560px) {
  .review-card { grid-template-columns: auto 1fr; }
  .review-card .btn { grid-column: 1 / -1; inline-size: 100%; }
}

/* ---- Library ------------------------------------------------------------- */
.book-grid {
  display: grid; gap: var(--s-5);
  /* 170px minimum yields a single full-bleed column at 390px, which turned each
     spine into a half-screen slab. 132px keeps two columns on the narrowest
     phone and still reads as a shelf on desktop. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
}
.book-card { display: flex; flex-direction: column; gap: var(--s-3); text-decoration: none; color: inherit; }
/* No fabricated cover art: a typographic spine, generated from the title. */
.book-cover {
  aspect-ratio: 3 / 4; max-block-size: 260px; border-radius: var(--r-md);
  display: grid; place-items: center; padding: var(--s-4);
  background: linear-gradient(150deg, var(--brand-fill), var(--brand-fill-hover));
  color: var(--ink-on-dark); text-align: center;
  font-family: var(--font-display); font-size: 1.05rem; line-height: 1.5;
  border: 1px solid var(--green-900);
  position: relative; overflow: hidden;
}
.book-title { line-height: 1.6; }
.book-cover::after {
  content: ''; position: absolute; inset: 7px; border: 1px solid var(--gold-300); opacity: 0.35;
  border-radius: var(--r-sm); pointer-events: none;
}
.book-title { font-weight: var(--fw-medium); color: var(--ink-900); font-size: var(--fs-sm); }
.book-meta { font-size: var(--fs-micro); color: var(--ink-400); }

/* ---- Lesson reader ------------------------------------------------------
   Reading is the priority; chrome recedes. */
.lesson-head { margin-block-end: var(--s-6); }
.lesson-head h1 { font-family: var(--font-display); margin-block: var(--s-2) var(--s-3); }
.lesson-body { font-size: var(--fs-body-lg); line-height: var(--lh-reading); color: var(--ink-700); }
.lesson-body h2, .lesson-body h3 { margin-block: var(--s-8) var(--s-3); }
.lesson-nav {
  display: flex; justify-content: space-between; gap: var(--s-4);
  margin-block-start: var(--s-10); padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--line-hair);
}
.lesson-progress { margin-block-start: var(--s-8); }

/* ---- Auth ---------------------------------------------------------------- */
.auth-screen {
  min-block-size: 100vh; display: grid; place-items: center;
  padding: var(--s-6); background: var(--ivory);
}
.auth-card { inline-size: min(26rem, 100%); text-align: center; }
.auth-brand { font-family: var(--font-display); font-size: 2.4rem; color: var(--green-800); line-height: 1; }
.auth-latin { font-size: var(--fs-micro); letter-spacing: 0.24em; color: var(--ink-400); margin-block: var(--s-2) var(--s-6); }
.auth-motto { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink-500); margin-block-end: var(--s-8); }
.auth-card form { text-align: start; }
.auth-alt { margin-block-start: var(--s-5); font-size: var(--fs-sm); color: var(--ink-400); }

/* ---- Profile ------------------------------------------------------------- */
.profile-identity { display: flex; align-items: center; gap: var(--s-5); }
.avatar-lg {
  inline-size: 64px; block-size: 64px; font-size: 1.6rem;
  font-family: var(--font-display); flex-shrink: 0;
}
.profile-identity-body { display: flex; flex-direction: column; gap: var(--s-2); min-inline-size: 0; }
.profile-identity-body h2 { font-family: var(--font-display); font-size: var(--fs-h3); }
.profile-stats { text-align: center; }

.profile-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  inline-size: 100%; padding: var(--s-4) var(--s-2); min-block-size: 48px;
  font-family: inherit; font-size: var(--fs-body); text-align: start;
  color: var(--ink-700); text-decoration: none;
  background: none; border: 0; border-block-end: 1px solid var(--line-hair);
  cursor: pointer;
}
.profile-row:last-child { border-block-end: 0; }
.profile-row:hover { color: var(--green-800); }
.profile-row.danger { color: var(--danger); }
/* A chevron that points the way the text runs. */
.profile-row::after {
  content: '‹'; color: var(--line-strong); font-size: 1.2rem; line-height: 1;
}
.profile-row.danger::after { content: ''; }

@media (max-width: 520px) {
  .profile-identity { flex-direction: column; text-align: center; }
}

/* ---- Appearance control ---------------------------------------------------
   A segmented radio group. One control, three mutually exclusive states, so it
   reads as a single instrument rather than three competing buttons. */
.appearance-group {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  padding: 3px;
  gap: 2px;
  max-inline-size: 100%;
}
.appearance-option {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-500);
  font: inherit;
  font-size: var(--fs-sm);
  padding-block: var(--s-2);
  padding-inline: var(--s-5);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.appearance-option:hover { color: var(--ink-900); }
.appearance-option.is-active {
  background: var(--surface-raised);
  color: var(--green-800);
  font-weight: var(--fw-bold);
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}
.appearance-option:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (max-width: 400px) {
  .appearance-group { display: flex; }
  .appearance-option { flex: 1 1 0; padding-inline: var(--s-2); text-align: center; }
}

/* ---- Credentials ----------------------------------------------------------
   A certificate and an ijazah are different documents with different issuers,
   so they are allowed to look different — but they stay one family. The ijazah
   carries the gold seal-line because a person put their name to it; a platform
   certificate does not, and must never borrow that signal. */
.credential-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--s-4);
}
.credential-card { display: flex; flex-direction: column; gap: var(--s-2); position: relative; }
.credential-card h3 { margin: 0; font-size: var(--fs-h3); }
.credential-issuer { font-weight: var(--fw-bold); color: var(--ink-500); }
.credential-foot { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.credential-code { color: var(--ink-400); letter-spacing: 0.04em; }

/* The seal-line: restrained gold, and only on a scholar's ijazah. */
.credential-card.is-ijazah::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(to left, var(--gold-500), var(--gold-300));
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
}

/* ---- Verification page ----------------------------------------------------
   Shown to a stranger checking a document, so the verdict comes first and the
   facts follow. Status is never colour alone. */
.verify-card { text-align: center; }
.verify-status {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  margin-block-end: var(--s-5);
}
.verify-card.is-valid .verify-status { color: var(--ok); }
.verify-card.is-invalid .verify-status { color: var(--danger); }
.verify-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-5);
  text-align: start;
  margin: 0 0 var(--s-5);
}
.verify-facts dt { color: var(--ink-400); font-size: var(--fs-caption); }
.verify-facts dd { margin: 0; color: var(--ink-900); font-weight: var(--fw-bold); }

@media (max-width: 420px) {
  .verify-facts { grid-template-columns: 1fr; gap: 0; }
  .verify-facts dd { margin-block-end: var(--s-3); }
}

/* ---- The ijazah journey ---------------------------------------------------
   A track, not a progress bar: these are distinct scholarly stages, and the
   last two belong to a person rather than to the platform. Restrained — no
   badges, no celebration. */
.ijazah-track {
  list-style: none; margin: var(--s-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
}
.ijazah-step { display: flex; align-items: center; gap: var(--s-2); }
.ijazah-dot {
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--line-strong); flex: 0 0 auto;
}
.ijazah-label { font-size: var(--fs-micro); color: var(--ink-400); white-space: nowrap; }
.ijazah-step.is-done .ijazah-dot { background: var(--green-600); }
.ijazah-step.is-done .ijazah-label { color: var(--ink-500); }
.ijazah-step.is-current .ijazah-dot {
  background: var(--brand-fill); box-shadow: 0 0 0 3px var(--green-50);
}
.ijazah-step.is-current .ijazah-label {
  color: var(--green-800); font-weight: var(--fw-bold);
}