/* ==========================================================================
   learning.css — my-courses.html · certificates.html · certificate.html

   The learner-owned surfaces: the course library, the certificate shelf and
   the printable certificate document.

   Page-scoped only. Every value is a token from css/tokens.css; no component
   from css/components.css is restyled globally — the few shared classes
   touched below are always reached through a page-owned ancestor.
   ========================================================================== */

/* ==========================================================================
   1. Shared — the figure strip under the page head
   ========================================================================== */

.lib-summary {
  display: grid;
  /* min() keeps the track from outgrowing a 360px screen once the reader turns
     the text-size setting up to 1.2 — a bare 11rem track measures 211px there
     and would be clipped by the overflow-x guard in base.css. */
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-3) var(--space-5);
  margin: 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.lib-summary-item {
  display: flex;
  flex-direction: column-reverse;   /* value first visually, label under it */
  gap: var(--space-1);
}

.lib-summary-item dt {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.lib-summary-item dd {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   2. my-courses.html — toolbar
   ========================================================================== */

.lib-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4) var(--space-6);
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.lib-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lib-view .field-label { margin: 0; }

.lib-view-icon {
  display: inline-flex;
  width: 1.05em;
  height: 1.05em;
}
.lib-view-icon > svg { width: 100%; height: 100%; }

@media (max-width: 60rem) {
  .lib-toolbar { grid-template-columns: minmax(0, 1fr); }
}

/* Tabs row -------------------------------------------------------------- */

.lib-tabs-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

/* The shared .tabs strip scrolls horizontally with its scrollbar hidden. With
   four filters that lands badly on a 360px screen: "Not started" is chopped
   mid-word and "All" is invisible, with nothing to say the strip scrolls. Here
   the strip wraps instead, so every filter is reachable at every width and at
   every text-size setting. Wrapping only kicks in when the row genuinely runs
   out of room, so nothing changes from 768px up. */
.lib-tabs-row .tabs {
  flex: 1 1 22rem;
  flex-wrap: wrap;
  overflow-x: visible;
  row-gap: 0;
}

.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  margin-left: var(--space-2);
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.tab[aria-selected="true"] .tab-count {
  background: var(--primary-soft);
  color: var(--primary-soft-text);
}

.lib-result-count {
  margin: 0;
  padding-bottom: var(--space-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.lib-results:focus-visible {
  outline: var(--ring-w) solid var(--focus-ring-color);
  outline-offset: var(--space-2);
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   3. my-courses.html — the course entry
   ========================================================================== */

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: var(--tile-gap);
}

.lib-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Artwork band — the course tile.

   The course gradient comes from js/data.js and is a fixed brand colour, so
   it does not follow the theme. Several of the six are light at one end
   (OS starts at #fbbf24, Systems design at #4ade80), where white measures
   1.67:1. --art-scrim is laid over the gradient so --text-on-brand and the
   progress ring clear AA on the lightest stop in the set, without the course
   losing its hue. Theme-independent, like the gradient beneath it. */
.lib-card-art {
  --art-scrim: color-mix(in srgb, var(--slate-1000) 46%, transparent);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  min-height: 6.5rem;
  color: var(--text-on-brand);
  background-image:
    linear-gradient(0deg, var(--art-scrim), var(--art-scrim)),
    linear-gradient(135deg, var(--course-from, var(--a-500)) 0%, var(--course-to, var(--a-700)) 100%);
  isolation: isolate;
}

.lib-card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(120% 140% at 88% 0%, color-mix(in srgb, var(--text-on-brand) 22%, transparent), transparent 62%);
  pointer-events: none;
}

.lib-card-glyph {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--text-on-brand) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-on-brand) 34%, transparent);
}
.lib-card-glyph > svg { width: 1.6rem; height: 1.6rem; }

.lib-card-art-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.lib-card-eyebrow {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-on-brand) 88%, transparent);
}

.lib-card-level {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-on-brand);
}

.lib-card-ring {
  position: relative;
  z-index: 1;
  margin-left: auto;
  color: var(--text-on-brand);
}

/* The progress ring sits on the scrimmed course gradient, so it is painted in
   --text-on-brand here rather than in the theme's surface/primary pair. */
.lib-card-ring .ring-track { stroke: color-mix(in srgb, var(--text-on-brand) 32%, transparent); }
.lib-card-ring .ring-fill { stroke: var(--text-on-brand); }
.lib-card-ring .ring-text { color: var(--text-on-brand); font-size: var(--fs-md); }
.lib-card-ring .ring-text small { color: color-mix(in srgb, var(--text-on-brand) 82%, transparent); }

/* Body */
.lib-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--card-pad);
  flex: 1 1 auto;
}

.lib-card-topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lib-card-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.lib-card-title a { color: inherit; text-decoration: none; }
.lib-card-title a:hover { color: var(--primary); }
.lib-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.lib-card-title a:focus-visible { outline: none; }
.lib-card:has(.lib-card-title a:focus-visible) {
  outline: var(--ring-w) solid var(--focus-ring-color);
  outline-offset: 2px;
}

.lib-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.lib-card-facts > li { display: inline-flex; align-items: center; gap: var(--space-2); }
.lib-card-facts > li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
}

.lib-card-progress { display: flex; flex-direction: column; gap: var(--space-2); }

.lib-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.lib-card-next {
  margin: 0;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.lib-card-next strong { color: var(--text); font-weight: var(--fw-semibold); }

.lib-card-foot .btn { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   List view — same markup, different shape
   -------------------------------------------------------------------------- */

.lib-results.is-list .lib-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .lib-results.is-list .lib-card { flex-direction: row; }

  .lib-results.is-list .lib-card-art {
    flex: 0 0 14rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
  }

  .lib-results.is-list .lib-card-ring { margin-left: 0; }

  .lib-results.is-list .lib-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(12rem, 1fr);
    align-items: center;
    gap: var(--space-4) var(--space-6);
  }

  .lib-results.is-list .lib-card-topline,
  .lib-results.is-list .lib-card-facts { grid-column: 1; }

  .lib-results.is-list .lib-card-progress {
    grid-column: 1;
    grid-row: 3;
  }

  .lib-results.is-list .lib-card-foot {
    grid-column: 2;
    grid-row: 1 / span 3;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    margin-top: 0;
    padding-top: 0;
    padding-left: var(--space-6);
    border-top: 0;
    border-left: 1px solid var(--border-subtle);
  }

  .lib-results.is-list .lib-card-next { text-align: right; }
}

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */

.lib-empty .empty-state-art { color: var(--primary); }
.lib-empty .empty-state-art svg { width: 100%; height: auto; max-width: 15rem; }

/* ==========================================================================
   4. certificates.html
   ========================================================================== */

.cert-card-grid {
  display: grid;
  /* A bare 20rem track measures 384px once the reader sets text size to 1.2,
     which is wider than a 360px screen — the card was being clipped and the
     "Revise" link with it. min() lets the single track fall back to the
     container width instead. */
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: var(--tile-gap);
}

.cert-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The miniature certificate that sits at the top of an earned card. */
.cert-preview {
  position: relative;
  aspect-ratio: 297 / 210;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background:
    radial-gradient(120% 130% at 50% -10%, var(--primary-soft), transparent 68%),
    var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.cert-preview-sheet {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.cert-preview-sheet::before {
  content: "";
  position: absolute;
  inset: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  pointer-events: none;
}

.cert-preview-mark {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--primary);
}
.cert-preview-mark > svg { width: 100%; height: 100%; }

.cert-preview-kicker {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.cert-preview-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--text);
}

.cert-preview-course {
  margin: 0;
  max-width: 26ch;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.cert-preview-rule {
  width: 3.5rem;
  height: 2px;
  border-radius: var(--radius-full);
  background-image: var(--grad-brand);
}

/* Locked preview */
.cert-preview.is-locked {
  background: var(--surface-2);
}
.cert-preview.is-locked .cert-preview-sheet {
  border-style: dashed;
  border-color: var(--border-strong);
  box-shadow: none;
  background: var(--surface-inset);
}
.cert-preview.is-locked .cert-preview-mark { color: var(--text-subtle); }
.cert-preview-lockline {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-none);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cert-preview-lockmeta {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.cert-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--card-pad);
  flex: 1 1 auto;
}

.cert-card-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text);
}
.cert-card-title a { color: inherit; text-decoration: none; }
.cert-card-title a:hover { color: var(--primary); }
.cert-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cert-card-title a:focus-visible { outline: none; }
.cert-card:has(.cert-card-title a:focus-visible) {
  outline: var(--ring-w) solid var(--focus-ring-color);
  outline-offset: 2px;
}

.cert-card-serial {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.cert-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.cert-card-foot .btn { position: relative; z-index: 2; }

/* ==========================================================================
   5. certificate.html — the document
   ========================================================================== */

.cert-head-note {
  margin: 0;
  max-width: 52ch;
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.cert-section { padding-top: var(--section-y-tight); }

.cert-stage {
  container-type: inline-size;
  max-width: var(--container-max);
  margin-inline: auto;
}

.cert-skeleton { min-block-size: 24rem; border-radius: var(--radius-2xl); }

.cert-doc {
  position: relative;
  overflow: hidden;
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 120% at 12% -10%, var(--primary-soft), transparent 55%),
    radial-gradient(80% 120% at 92% 108%, var(--accent-soft), transparent 58%),
    var(--surface);
  box-shadow: var(--shadow-xl);
  color: var(--text);
}

/* The double rule: the outer border is on .cert-doc, this is the inner one. */
.cert-doc-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  min-block-size: 0;
  padding: var(--space-10) var(--space-8);
  border: 2px solid var(--primary-border);
  border-radius: var(--radius-md);
  text-align: center;
}

@container (min-width: 46rem) {
  .cert-doc { min-block-size: calc(100cqi / 1.414); }
  .cert-doc-inner {
    justify-content: space-between;
    min-block-size: calc((100cqi / 1.414) - (var(--space-3) * 2));
    padding: var(--space-12) var(--space-14);
  }
}

/* Corner flourishes */
.cert-corner {
  position: absolute;
  width: 5.5rem;
  height: 5.5rem;
  color: var(--primary);
  opacity: 0.55;
  pointer-events: none;
}
.cert-corner > svg { width: 100%; height: 100%; }
.cert-corner-tl { top: var(--space-3); left: var(--space-3); }
.cert-corner-tr { top: var(--space-3); right: var(--space-3); transform: scaleX(-1); }
.cert-corner-br { bottom: var(--space-3); right: var(--space-3); transform: scale(-1); }
.cert-corner-bl { bottom: var(--space-3); left: var(--space-3); transform: scaleY(-1); }

/* Watermark */
.cert-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22rem;
  height: 22rem;
  transform: translate(-50%, -50%);
  color: var(--primary);
  opacity: 0.05;
  pointer-events: none;
}
.cert-watermark > svg { width: 100%; height: 100%; }

/* Letterhead */
.cert-doc-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.cert-mark { width: 3rem; height: 3rem; }
.cert-mark > svg { width: 100%; height: 100%; }

.cert-org {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text);
}

.cert-org-sub {
  margin: 0;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
}

/* Body */
.cert-doc-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 60ch;
}

.cert-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  background-image: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cert-flourish {
  display: block;
  width: min(16rem, 70%);
  color: var(--primary);
  opacity: 0.7;
}
.cert-flourish > svg { width: 100%; height: auto; }

.cert-lead {
  margin: 0;
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.cert-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  border-bottom: 2px solid var(--accent-border);
  padding-bottom: var(--space-2);
}

.cert-course {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text);
}

.cert-course-meta {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.cert-note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Footer: signature · seal · signature */
.cert-doc-foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-6);
  width: 100%;
}

.cert-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.cert-sign-scribble {
  display: block;
  width: min(9rem, 100%);
  height: 2.25rem;
  color: var(--text-muted);
  opacity: 0.75;
}
.cert-sign-scribble > svg { width: 100%; height: 100%; }

.cert-sign-rule {
  display: block;
  width: 100%;
  max-width: 13rem;
  height: 1px;
  margin-bottom: var(--space-2);
  background: var(--border-strong);
}

.cert-sign-name {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text);
}

.cert-sign-role {
  margin: 0;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.cert-sign-kind {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.cert-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.cert-seal-art {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  color: var(--primary);
  opacity: 0.8;
}
.cert-seal-art > svg { width: 100%; height: 100%; }

.cert-stamp {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  text-align: center;
}
.cert-stamp dt {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.cert-stamp dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.cert-fineprint {
  margin: 0;
  max-width: 70ch;
  font-size: var(--fs-2xs);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

@media (max-width: 44rem) {
  .cert-doc-foot { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .cert-seal { order: -1; }
  .cert-title { font-size: var(--fs-2xl); }
  .cert-name { font-size: var(--fs-xl); }
  .cert-corner { width: 3.25rem; height: 3.25rem; }
  .cert-doc-inner { padding: var(--space-8) var(--space-5); }
}

/* --------------------------------------------------------------------------
   Verification card
   -------------------------------------------------------------------------- */

.cert-verify { margin-top: var(--space-8); }

.cert-verify-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-10);
  align-items: start;
}

.cert-verify-title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text);
}

.cert-verify-side { min-width: 0; }

@media (max-width: 56rem) {
  .cert-verify-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Locked state
   -------------------------------------------------------------------------- */

.cert-locked-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-8) var(--space-10);
  align-items: center;
}

.cert-locked-title {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.cert-locked-lead {
  margin: 0;
  max-width: 54ch;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

.cert-locked-art { color: var(--primary); }
.cert-locked-art > svg { width: 100%; height: auto; }

@media (max-width: 56rem) {
  .cert-locked-grid { grid-template-columns: minmax(0, 1fr); }
  .cert-locked-art { display: none; }
}

.cert-section .empty-state h1 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text);
}

/* The shared default squeezes any empty-state drawing into an 80x80 box, which
   turns this 200x140 artwork into a faint, hairline-thin thumbnail. Every other
   learner surface (.lib-empty, below) draws its empty state large and in the
   brand colour; this matches it so the three pages read as one product. */
.cert-section .empty-state-art { color: var(--primary); }
.cert-section .empty-state-art > svg {
  width: 100%;
  height: auto;
  max-width: 15rem;
}

/* ==========================================================================
   6. Print — certificate.html is a document first and a web page second
   ========================================================================== */

@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  .cert-section { padding: 0 !important; }
  .cert-section .container { max-width: none; padding: 0; }

  .cert-stage {
    container-type: normal;
    max-width: none;
  }

  .cert-verify,
  .cert-locked,
  .lib-toolbar,
  .lib-tabs-row { display: none !important; }

  .cert-doc {
    min-block-size: 0;
    padding: 3mm;
    border: 1.5pt solid var(--slate-700);
    border-radius: 0;
    box-shadow: none;
    background: var(--slate-0);
    color: var(--slate-900);
    break-inside: avoid;
  }

  .cert-doc-inner {
    min-block-size: 0;
    padding: 10mm 12mm;
    border: 1pt solid var(--violet-600);
    border-radius: 0;
    gap: 8mm;
  }

  .cert-title {
    background-image: none;
    -webkit-text-fill-color: var(--violet-700);
    color: var(--violet-700);
  }

  .cert-org,
  .cert-name,
  .cert-course,
  .cert-sign-name,
  .cert-stamp dd { color: var(--slate-900); }

  .cert-lead,
  .cert-course-meta,
  .cert-sign-role { color: var(--slate-700); }

  .cert-org-sub,
  .cert-note,
  .cert-sign-kind,
  .cert-stamp dt,
  .cert-fineprint { color: var(--slate-500); }

  .cert-name { border-bottom-color: var(--amber-500); }
  .cert-sign-rule { background: var(--slate-500); }
  .cert-corner,
  .cert-flourish,
  .cert-seal-art { color: var(--violet-600); opacity: 0.8; }
  .cert-watermark { color: var(--violet-600); opacity: 0.06; }
  .cert-sign-scribble { color: var(--slate-700); opacity: 1; }

  .cert-doc-head,
  .cert-doc-body,
  .cert-doc-foot { break-inside: avoid; }
}

/* ==========================================================================
   CONTRAST BRIDGE — shared components that still carry --text-subtle

   --text-subtle resolves to #7c8598 in the light theme: 3.71:1 on --surface
   and 3.27:1 on --surface-2, both under the 4.5:1 AA bar for body text (it
   also lands at 4.43:1 on --surface-2 in dark). Every rule THIS file owns
   already uses --text-muted; what remains are shared components from
   css/components.css, which this page may not edit. These overrides are
   scoped to #main so they can never reach the site header or footer that
   css/layout.css owns. Delete this block once --text-subtle is retuned to
   clear AA in css/tokens.css — nothing here changes the design intent, only
   the tier of grey that carries it.
   ========================================================================== */
#main .field-hint,
#main .field-optional,
#main .checkbox-hint,
#main .radio-hint,
#main .switch-hint,
#main .stat-hint,
#main .accordion-meta,
#main .range-scale,
#main .range-scale > * {
  color: var(--text-muted);
}

/* A placeholder still has to read as a prompt rather than a value: --text-muted
   sits well clear of --text, so the two never look alike. */
#main .input::placeholder,
#main .textarea::placeholder,
#main textarea::placeholder,
#main input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

#main .detail-grid dt,
#main .section-nav-title {
  color: var(--text-muted);
}

/* ==========================================================================
   HEADING SCALE — signed-in surfaces

   base.css gives .section-title the same --fs-4xl as .page-title, which reads
   correctly on the marketing pages (where a section IS the page's subject)
   but flattens the hierarchy here: on certificates.html "Earned" was rendering
   at exactly the same 38px as the "Certificates" <h1>. Inside the learner
   surfaces a section heading is subordinate to the page title, so it steps
   down to --fs-2xl — the size .dash-head-title already uses on the dashboard
   and .split-section-title uses on settings. Scoped to #main; this file only
   loads on my-courses, certificates and certificate.
   ========================================================================== */
#main .section-title {
  font-size: var(--fs-2xl);
  letter-spacing: var(--tracking-tight);
}
#main .section-sub { font-size: var(--fs-md); }