/* Enrolment levels + profile identity — ENROLMENT_LEVELS_PROFILE_2026-07-27
   §4.1 / §4.1b. The "Current status" block: Level · Type · Discipline ·
   Specials.

   The whole point of this file is COHERENCE: the four rows are one visual
   system — same chip frame, same sizing rhythm, same empty-state treatment — so
   a day-one learner and a Grand Master both look intentional and the difference
   is only how much is filled in. The Level medallion is the anchor at 2× the
   guide's size (the owner's explicit ask); everything else scales down from it.

   Self-contained: theme tokens come from base.html's :root[data-theme=…]
   palette and brand/tokens-modern.css (the --metal-* ramp), so light and dark
   both work. Layout only — no animation loops, no state encoded in colour
   alone (every chip names its state in words). CSP-safe by construction: all
   styling lives here, and the only interactive affordance is a native
   <details>, so there is nothing to add to portal.js. */

/* ── the four-row grid ─────────────────────────────────────────────────── */
.el-status {
  margin-top: 1rem;
}
.el-rows {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr;
  gap: 0.85rem 1.1rem;
  align-items: center;
  margin: 0.75rem 0 0;
}
.el-row-label {
  font-family: var(--font-display, inherit);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
}
.el-row-label::after {
  content: ":";
}
.el-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  min-height: 2.25rem; /* an empty row still holds the rhythm — never collapses */
}

/* Narrow screens: label above its row rather than a squeezed two-column grid. */
@media (max-width: 34rem) {
  .el-rows {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  .el-row {
    margin-bottom: 0.6rem;
  }
}

/* ── the shared chip frame (every row uses it) ─────────────────────────── */
.el-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel, transparent);
  line-height: 1.2;
}
.el-chip-text {
  display: inline-flex;
  flex-direction: column;
  gap: 0.05rem;
  font-size: 0.92rem;
}

/* ── Level: the anchor, 2× the guide's medallion size ──────────────────── */
.el-chip-level {
  padding: 0.4rem 1rem 0.4rem 0.5rem;
  border-width: 2px;
  border-color: var(--accent, var(--border));
}
.el-level-emblem {
  /* The guide renders these medallions at 88px; §4.1 asks for 2×. */
  width: 176px;
  height: 176px;
  object-fit: contain;
  flex: none;
}
.el-level-word {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}
.el-level-name {
  font-size: 1rem;
  color: var(--muted);
}
@media (max-width: 34rem) {
  .el-level-emblem {
    width: 112px;
    height: 112px;
  }
  .el-level-word {
    font-size: 1.2rem;
  }
}

/* ── the S marker: deliberately NOT a level medallion ──────────────────────
   §1.1 — the S grant is orthogonal to the spine and admin-granted, so it must
   never be mistakable for the EARNED L10 "Special". Square, outlined, no
   emblem, its own colour: nothing about it echoes a level badge. */
.el-special-marker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border: 2px dashed var(--m-violet, var(--accent));
  border-radius: 6px;
  color: var(--m-violet, var(--accent));
  background: transparent;
}
.el-special-glyph {
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border: 0;
}
.el-special-word {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Type + Discipline + Specials art ──────────────────────────────────── */
.el-herald {
  width: 88px;
  height: 88px;
  object-fit: contain;
  flex: none;
}
.el-badge {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex: none;
}

/* Grand Master out-ranks every single-ladder credential (heraldry precedence,
   reused not re-invented) — it is the only Specials chip that is emphasised. */
.el-chip-grandmaster {
  border-width: 2px;
  border-color: var(--metal-gold, var(--accent));
}
.el-chip-signals {
  border-style: dashed;
}
/* Honours chips carry their metal on the frame, never as the only signal —
   the band and metal are always spelled out in the label text too. */
.el-chip-honours.is-bronze {
  border-color: var(--metal-bronze, var(--border));
}
.el-chip-honours.is-silver {
  border-color: var(--metal-silver, var(--border));
}
.el-chip-honours.is-gold {
  border-color: var(--metal-gold, var(--border));
}
.el-chip-honours.is-ruby {
  border-color: var(--metal-ruby, var(--border));
}
.el-chip-honours.is-diamond {
  border-color: var(--metal-diamond, var(--border));
}
.el-chip-streak {
  font-variant-numeric: tabular-nums;
}

/* ── empty states: the same treatment in every row ─────────────────────── */
.el-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-style: italic;
}
.el-hint {
  display: block;
  font-style: normal;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* ── overflow disclosure (a Grand Master's many distinctions) ──────────── */
.el-overflow {
  display: inline-block;
}
.el-overflow-summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border: 1px dashed var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.9rem;
}
.el-overflow-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.el-overflow-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

/* ── admin: the S-grant panel on /admin/students/{id} ──────────────────── */
.el-grant-panel .el-grant-state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--muted);
}
.el-grant-panel .el-grant-state.is-granted {
  color: var(--m-violet, var(--accent));
  border-color: var(--m-violet, var(--accent));
}
.el-grant-panel .el-grant-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.el-grant-panel .el-grant-reason {
  flex: 1 1 18rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}
.el-grant-panel .el-grant-reason input {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
}