/* The graduate record.
   Layered on css/verify.css so the Register, the verification portal and
   this page read as one institution. A graduate sends this link to an
   employer; it is the College's letterhead as much as the graduate's CV,
   and it should look like a document rather than a dashboard. */

.grad-eyebrow {
  margin: 0 0 .4rem;
  font: 700 .74rem/1 var(--font-body, Inter, sans-serif);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-bright, #E7C97A);
}
.grad-head h1 {
  margin: 0;
  font: 600 clamp(2rem, 1.2rem + 3.4vw, 3.2rem)/1.06 var(--font-display, "Playfair Display", Georgia, serif);
  letter-spacing: -.015em;
}

/* ---- Sections -------------------------------------------------------- */
.grad-section {
  margin: clamp(2rem, 1.2rem + 3vw, 3.4rem) 0;
}
.grad-section h2 {
  margin: 0 0 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(20, 38, 74, .12);
  font: 600 clamp(1.15rem, 1rem + .8vw, 1.5rem)/1.2 var(--font-display, "Playfair Display", Georgia, serif);
}
/* The rule under each heading carries a short gold lead-in — the one
   piece of ornament on the page, and it earns its place by making the
   document scannable rather than by decorating it. */
.grad-section h2::after {
  content: ""; display: block;
  width: 3rem; height: 2px; margin-top: .6rem; margin-bottom: -.7rem;
  background: var(--gold, #C7A24A);
}

.grad-note { margin: 0 0 1.1rem; color: var(--ink-soft, #4B5768); line-height: 1.7; font-size: .9rem; }
.grad-bio { margin: 0; line-height: 1.8; max-width: 62ch; }

/* ---- State ----------------------------------------------------------- */
.grad-state:empty { display: none; }
.grad-state {
  margin: 2.4rem 0;
  padding: 2.2rem 1.4rem;
  text-align: center;
  border: 1px dashed rgba(20, 38, 74, .22);
  border-radius: 12px;
  color: var(--ink-soft, #4B5768);
  line-height: 1.7;
}
.grad-state strong { display: block; color: var(--ink, #16202E); margin-bottom: .35rem; font-size: 1.05rem; }

/* ---- Awards ---------------------------------------------------------- */
.grad-awards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.grad-award {
  background: #fff;
  border: 1px solid rgba(20, 38, 74, .12);
  border-left: 3px solid var(--gold, #C7A24A);
  border-radius: 12px;
  padding: 1.15rem 1.35rem;
  box-shadow: 0 18px 44px -40px rgba(16, 31, 60, .7);
}
/* A withdrawn award is never hidden — it is marked. Colour is not doing
   the work: the standing is written in the badge. */
.grad-award.is-revoked { border-left-color: var(--red, #A32638); background: rgba(163, 38, 56, .03); }
.grad-award.is-replaced { border-left-color: #A8823A; background: rgba(199, 162, 74, .05); }

.grad-award__title {
  margin: 0;
  font: 600 1.06rem/1.4 var(--font-body, Inter, sans-serif);
  color: var(--royal, #14264A);
}
.grad-award__post {
  margin: .15rem 0 .5rem;
  font: 700 .86rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .06em; color: var(--gold-deep, #9A7A38);
}
.grad-award__meta { margin: 0; font-size: .84rem; color: var(--ink-soft, #4B5768); line-height: 1.6; }
.grad-award__meta a { font-weight: 600; }
.grad-badge {
  display: inline-block; padding: .12rem .55rem; border-radius: 999px;
  font: 700 .7rem/1.6 var(--font-body, Inter, sans-serif);
  letter-spacing: .05em; margin-right: .4rem;
}
.grad-badge--honour { background: rgba(199, 162, 74, .18); color: #8A6B2E; }
.grad-badge--revoked { background: rgba(163, 38, 56, .12); color: #8C1F2F; }
.grad-badge--replaced { background: rgba(154, 122, 56, .15); color: #7A5A1E; }

/* ---- Transcript ------------------------------------------------------ */
.grad-totals {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin: 0 0 1.4rem;
}
.grad-total {
  background: #fff; border: 1px solid rgba(20, 38, 74, .1);
  border-radius: 10px; padding: .9rem 1rem;
}
.grad-total dt {
  font: 700 .66rem/1.3 var(--font-body, Inter, sans-serif);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft, #4B5768); margin-bottom: .25rem;
}
.grad-total dd {
  margin: 0;
  font: 600 1.5rem/1.1 var(--font-display, "Playfair Display", Georgia, serif);
}

/* A table is a table. It is the correct element for a transcript, it is
   what a screen reader announces usefully, and it is what a registrar
   expects to see. It scrolls inside its own box rather than pushing the
   page sideways on a phone. */
.grad-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grad-table {
  width: 100%; border-collapse: collapse; min-width: 34rem;
  font-size: .9rem;
}
.grad-table th, .grad-table td {
  text-align: left; padding: .7rem .8rem;
  border-bottom: 1px solid rgba(20, 38, 74, .1);
  vertical-align: top;
}
.grad-table thead th {
  font: 700 .68rem/1.3 var(--font-body, Inter, sans-serif);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft, #4B5768);
  border-bottom-width: 2px;
}
.grad-table tbody tr:last-child td { border-bottom: 0; }
.grad-table__level { font-weight: 600; }
.grad-table__sub { display: block; font-weight: 400; font-size: .82rem; color: var(--ink-soft, #4B5768); }

/* ---- Competencies ---------------------------------------------------- */
.grad-competencies { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.grad-competency {
  display: grid; gap: .15rem .9rem;
  background: #fff; border: 1px solid rgba(20, 38, 74, .1);
  border-radius: 10px; padding: .9rem 1.1rem;
}
@media (min-width: 40rem) { .grad-competency { grid-template-columns: 1fr auto; align-items: center; } }
.grad-competency__name { margin: 0; font-weight: 600; }
.grad-competency__what { margin: .15rem 0 0; font-size: .85rem; color: var(--ink-soft, #4B5768); line-height: 1.55; }
/* "Not yet assessed" is set in words, not as an empty bar or a zero. A
   zero would be read as a mark. */
.grad-competency__mark {
  font: 600 .84rem/1 var(--font-body, Inter, sans-serif);
  color: var(--ink-soft, #4B5768);
  white-space: nowrap;
}
.grad-competency__mark.is-marked {
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: 1.3rem; color: var(--royal, #14264A);
}

/* ---- CPD ------------------------------------------------------------- */
.grad-cpd { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.grad-cpd li {
  background: #fff; border: 1px solid rgba(20, 38, 74, .1);
  border-radius: 10px; padding: .85rem 1.1rem;
}
.grad-cpd__title { margin: 0; font-weight: 600; }
.grad-cpd__meta { margin: .2rem 0 0; font-size: .83rem; color: var(--ink-soft, #4B5768); }
.grad-badge--verified { background: rgba(20, 38, 74, .1); color: var(--royal, #14264A); }
.grad-badge--declared { background: rgba(75, 87, 104, .12); color: var(--ink-soft, #4B5768); }

.grad-hours { margin: 0; font: 600 1.6rem/1.2 var(--font-display, "Playfair Display", Georgia, serif); }
.grad-hours small { display: block; font: 400 .85rem/1.6 var(--font-body, Inter, sans-serif); color: var(--ink-soft, #4B5768); margin-top: .3rem; }

/* ---- Withheld -------------------------------------------------------- */
/* Named rather than omitted. An employer who cannot see a section must
   know it exists and was not shared, or they will conclude the graduate
   has none. */
.grad-withheld {
  margin: clamp(2rem, 1.2rem + 3vw, 3.4rem) 0;
  padding: 1.1rem 1.3rem;
  border-radius: 12px;
  background: rgba(20, 38, 74, .04);
  border: 1px solid rgba(20, 38, 74, .1);
}
.grad-withheld h2 {
  margin: 0 0 .4rem; border: 0; padding: 0;
  font: 700 .72rem/1 var(--font-body, Inter, sans-serif);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft, #4B5768);
}
.grad-withheld h2::after { display: none; }
.grad-withheld p { margin: 0; font-size: .88rem; line-height: 1.7; color: var(--ink-soft, #4B5768); }

/* ---- Motion ---------------------------------------------------------- */
/* Restraint by design: one short, small rise as each section arrives, and
   nothing that moves after the reader starts reading. Anything more on a
   document like this reads as a marketing page, which is precisely the
   impression an academic record must not give. */
@media (prefers-reduced-motion: no-preference) {
  .grad-section, .grad-withheld {
    animation: grad-rise var(--dur-med, .34s) var(--ease-premium, cubic-bezier(.16,.84,.44,1)) both;
  }
  @keyframes grad-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}

@media print {
  .vfy-head, .vfy-foot { display: none !important; }
  .grad-section { break-inside: avoid; }
  .grad-award, .grad-competency, .grad-cpd li { box-shadow: none; }
}

/* ==== The Digital Academic Identity ==================================
   Added for the flagship graduate profile: the verification panel, the
   language-skill profile, and distinctions.

   Design mandate v4 — an authenticated or credentialed surface must
   feel more premium than a public marketing page. The verification
   panel is where that is earned: it is the part a graduate shows an
   employer, and it should read as a document rather than as a widget. */

/* ---- Verification --------------------------------------------------- */
.grad-verify {
  margin: 2.4rem 0;
  padding: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  border-radius: 14px;
  background: linear-gradient(158deg, #101F3C 0%, var(--royal, #14264A) 58%, #1B3054 100%);
  color: #fff;
  box-shadow: var(--shadow-lg, 0 18px 40px rgba(16, 31, 60, .18));
}
.grad-verify h2 {
  margin: 0 0 1.2rem;
  font: 600 clamp(1.25rem, 1rem + 1vw, 1.6rem)/1.2 var(--font-display, "Playfair Display", Georgia, serif);
  color: #fff;
}
.grad-verify__grid { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 46rem) {
  .grad-verify__grid { grid-template-columns: 1fr auto; }
}
.grad-verify__facts { min-width: 0; }

.grad-facts { margin: 0; display: grid; gap: .1rem .9rem; }
@media (min-width: 30rem) {
  .grad-facts { grid-template-columns: auto 1fr; }
}
.grad-facts dt {
  font: 700 .68rem/1.9 var(--font-body, Inter, sans-serif);
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  align-self: center;
}
.grad-facts dd {
  margin: 0 0 .5rem; font-weight: 600; line-height: 1.5;
  /* A long award title must wrap rather than push the panel wide. */
  min-width: 0; overflow-wrap: anywhere;
}
/* The register number is the thing a reader copies. Set as data, in a
   monospace face, so a 0 and an O cannot be confused when it is
   transcribed by hand. */
.grad-facts__code {
  font: 700 1.02rem/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .06em;
  color: var(--gold-bright, #E7C97A);
}
.grad-verify__link {
  color: var(--gold-bright, #E7C97A);
  font: 400 .86rem/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
  /* A comfortable target without breaking the definition-list rhythm. */
  display: inline-flex; align-items: center; min-height: 44px;
}
.grad-verify__link:focus-visible { outline: 2px solid var(--gold-bright, #E7C97A); outline-offset: 3px; }
.grad-verify .grad-note { color: rgba(255, 255, 255, .72); margin: 1rem 0 0; max-width: 54ch; }

.grad-qr {
  margin: 0; padding: .9rem; border-radius: 12px; background: #fff;
  text-align: center; justify-self: center;
}
.grad-qr svg { display: block; width: 176px; height: 176px; }
.grad-qr figcaption {
  margin-top: .5rem;
  font: 700 .68rem/1.6 var(--font-body, Inter, sans-serif);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft, #4B5768);
}

@media print {
  /* A graduate profile is printed and attached to an application. The
     panel is the part worth printing, and it must not arrive as a black
     rectangle that costs a cartridge. */
  .grad-verify { background: #fff !important; color: #000; box-shadow: none; border: 1px solid #999; }
  .grad-verify h2, .grad-facts dd { color: #000; }
  .grad-facts dt { color: #444; }
  .grad-facts__code, .grad-verify__link { color: #000; }
  .grad-verify .grad-note { color: #333; }
}

/* ---- Language skills ------------------------------------------------- */
.grad-skills { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.grad-skill {
  display: grid; gap: .5rem 1.2rem; align-items: center;
  background: #fff; border: 1px solid rgba(20, 38, 74, .12);
  border-radius: 12px; padding: 1rem 1.2rem;
}
@media (min-width: 42rem) {
  .grad-skill { grid-template-columns: 1fr 12rem; }
}
.grad-skill__name { margin: 0; font-weight: 700; }
.grad-skill__what { margin: .15rem 0 0; font-size: .86rem; color: var(--ink-soft, #4B5768); line-height: 1.55; max-width: 52ch; }
.grad-skill__mode {
  margin: .3rem 0 0;
  font: 700 .64rem/1.6 var(--font-body, Inter, sans-serif);
  letter-spacing: .12em; text-transform: uppercase; color: rgba(75, 87, 104, .75);
}
.grad-skill__value { display: grid; gap: .35rem; }
.grad-skill__mark {
  font: 600 .84rem/1.4 var(--font-body, Inter, sans-serif);
  color: var(--ink-soft, #4B5768);
}
.grad-skill__mark.is-marked {
  font: 700 1.15rem/1.2 var(--font-body, Inter, sans-serif);
  color: var(--royal, #14264A);
}
.grad-skill__scale { height: 6px; border-radius: 999px; background: rgba(20, 38, 74, .1); overflow: hidden; }
.grad-skill__bar { height: 100%; border-radius: 999px; background: var(--royal, #14264A); }

/* ---- Distinctions ---------------------------------------------------- */
.grad-dgroup {
  margin: 1.4rem 0 .6rem;
  font: 700 .72rem/1.6 var(--font-body, Inter, sans-serif);
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft, #4B5768);
}
.grad-dgroup:first-child { margin-top: 0; }
.grad-distinctions { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.grad-distinction {
  background: #fff; border: 1px solid rgba(20, 38, 74, .12);
  border-radius: 12px; padding: .95rem 1.2rem;
}
.grad-distinction.is-withdrawn { opacity: .74; background: rgba(20, 38, 74, .02); }
.grad-distinction__title { margin: 0; font-weight: 600; }
.grad-distinction__meta { margin: .25rem 0 0; font-size: .84rem; color: var(--ink-soft, #4B5768); }
.grad-distinction__what { margin: .5rem 0 0; font-size: .9rem; line-height: 1.6; max-width: 62ch; }
.grad-distinction__why {
  margin: .5rem 0 0; font-size: .84rem; line-height: 1.6;
  color: #8C1F2F; max-width: 62ch;
}
.grad-badge--withdrawn { background: rgba(163, 38, 56, .12); color: #8C1F2F; }

/* The descriptor's own words, under its name. A band called
   "Proficient" means nothing to a reader who has not been told what the
   College means by it, and a legend elsewhere on the page is a legend
   nobody reads. */
.grad-skill__band {
  display: block; margin-top: .2rem;
  font: 400 .78rem/1.5 var(--font-body, Inter, sans-serif);
  color: var(--ink-soft, #4B5768);
}