/*
 * The certificate (cert.js, cert-view.js). Colors are the site's tokens
 * (site.css), so on screen the sheet follows the theme: a dark sheet on
 * the dark site, a pale one on the light site. On paper, and in the
 * picture, it is black ink on white with the four beam colors as thin
 * lines only (the light theme's deeper accents, which read on white).
 */
.ln_cert{
  --c-bg:var(--card);
  --c-ink:var(--ink-strong);
  --c-dim:var(--secondary-lighter);
  --c-faint:var(--secondary-light-alt);
  --c-line:var(--secondary-light-alt);
  --c-green:var(--accent-sea-green);
  --c-blue:var(--accent-blue);
  --c-gold:var(--accent-gold);
  --c-red:var(--accent-maroon);
  --c-kick:var(--accent-gold);
}
.ln_cert.is-paper{
  --c-bg:#fff; --c-ink:#111; --c-dim:#3d3d3d; --c-faint:#9a9a9a; --c-line:#8f8f8f;
  --c-green:#2E9557; --c-blue:#3E55BA; --c-gold:#b08f0e; --c-red:#C22552; --c-kick:#7a5a00;
}
.ln_cert .c-bg{fill:var(--c-bg)}
.ln_cert .c-frame{fill:none;stroke:var(--c-line);stroke-width:1.5}
.ln_cert .c-frame-in{fill:none;stroke:var(--c-line);stroke-width:.75;stroke-opacity:.6}
.ln_cert .c-beam{fill:url(#c-beam)}
.ln_cert stop.c-green{stop-color:var(--c-green)}
.ln_cert stop.c-blue{stop-color:var(--c-blue)}
.ln_cert stop.c-gold{stop-color:var(--c-gold)}
.ln_cert stop.c-red{stop-color:var(--c-red)}
.ln_cert stop.c-stop-none{stop-color:var(--c-bg);stop-opacity:0}
.ln_cert .c-mark-body{fill:var(--c-green)}
.ln_cert .c-mark-beam{fill:var(--c-green);fill-opacity:.22}
.ln_cert .c-mark-lens-o{fill:var(--c-bg)}
.ln_cert text{font-family:roboto-regular,sans-serif}
.ln_cert .c-brand{font-family:roboto-regular,sans-serif;font-size:19px;letter-spacing:.42em;fill:var(--c-ink)}
.ln_cert .c-brand-learn{font-family:roboto-medium,sans-serif;fill:var(--c-green)}
.ln_cert .c-kicker{font-family:roboto-medium,sans-serif;font-size:15px;letter-spacing:.38em;fill:var(--c-kick)}
.ln_cert .c-small{font-family:roboto-regular,sans-serif;font-size:19px;fill:var(--c-dim)}
.ln_cert .c-name{font-family:roboto-medium,sans-serif;font-size:56px;fill:var(--c-ink)}
.ln_cert .c-name.is-empty{fill:var(--c-faint)}
.ln_cert .c-rule{stroke:var(--c-line);stroke-width:1}
.ln_cert .c-title{font-family:roboto-bold,sans-serif;font-size:42px;fill:var(--c-ink)}
.ln_cert .c-units{font-family:roboto-regular,sans-serif;font-size:14px;letter-spacing:.03em;fill:var(--c-dim)}
.ln_cert .c-results{font-family:roboto-medium,sans-serif;fill:var(--c-ink)}
.ln_cert .c-field{font-family:roboto-medium,sans-serif;font-size:20px;fill:var(--c-ink)}
.ln_cert .c-label{font-family:roboto-medium,sans-serif;font-size:11px;letter-spacing:.3em;fill:var(--c-dim)}
.ln_cert .c-code{font-family:'Atkinson Hyperlegible Mono',ui-monospace,monospace;font-weight:700;font-size:24px;letter-spacing:.1em;fill:var(--c-ink)}
.ln_cert .c-foot{font-family:roboto-regular,sans-serif;font-size:12.5px;fill:var(--c-dim)}
.ln_cert .c-seal-fill{fill:var(--c-bg)}
.ln_cert .c-ring{fill:none;stroke-width:5;stroke-linecap:round}
.ln_cert .c-ring.c-green{stroke:var(--c-green)}
.ln_cert .c-ring.c-blue{stroke:var(--c-blue)}
.ln_cert .c-ring.c-gold{stroke:var(--c-gold)}
.ln_cert .c-ring.c-red{stroke:var(--c-red)}
.ln_cert .c-seal-in{fill:none;stroke:var(--c-line);stroke-width:1}

/* The sheet on the page: a piece of paper lying on the course. */
.ln_cert_sheet{margin:6px 0 20px;
  /* The whole sheet in view at once on a 1366x768 laptop: as wide as the height left allows (1.32 = its shape). */
  max-width:max(560px,calc((100dvh - 262px) * 1.32))}
.ln_cert_sheet svg{display:block;width:100%;height:auto;border-radius:6px;
  box-shadow:0 1px 0 var(--secondary-dark),0 14px 44px rgba(0,0,0,.42)}
:root[data-theme="light"] .ln_cert_sheet svg{box-shadow:0 1px 0 var(--secondary-dark),0 12px 36px rgba(13,20,17,.16)}
/* Before it is earned: the same sheet, faded, with no name, date or code on it. */
.ln_cert_sheet.is-locked{position:relative;max-width:520px;margin-left:0}
.ln_cert_sheet.is-locked svg{opacity:.42;filter:saturate(.35)}
.ln_cert_name{flex:1 1 260px;max-width:380px;font-size:17px}

/* The card everywhere else: locked from the start, so the reward is in sight. */
.ln_cert_card{display:flex;align-items:center;gap:16px;margin:12px 0 16px;padding:14px 18px;
  border:1px solid var(--ln-line);border-radius:12px;background:var(--ln-panel);color:var(--ln-dim);text-decoration:none}
a.ln_cert_card:hover{text-decoration:none;border-color:var(--ln-gold);box-shadow:0 0 0 1px var(--ln-gold),0 0 22px color-mix(in srgb,var(--ln-gold) 26%,transparent)}
.ln_cert_card.is-earned{border-color:var(--ln-gold);box-shadow:0 0 0 1px var(--ln-gold),0 0 26px color-mix(in srgb,var(--ln-gold) 30%,transparent)}
.ln_cert_icon{flex:0 0 auto;width:46px;height:46px;color:var(--ln-gold)}
.ln_cert_icon svg{display:block;width:100%;height:100%}
.ln_cert_card_text{display:flex;flex-direction:column;min-width:0}
.ln_cert_card_k{color:var(--ln-gold);font:700 calc(var(--ln-fs) * 0.66)/1.3 roboto-medium,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.ln_cert_card_t{color:var(--ink-strong);font:700 calc(var(--ln-fs) * 1.1)/1.3 roboto-bold,roboto-medium,sans-serif}
.ln_cert_card_s{color:var(--ln-ink);font:400 calc(var(--ln-fs) * 0.88)/1.45 roboto-regular,sans-serif}

/* The locked page's meters. */
.ln_cert_progress{display:grid;gap:12px;max-width:560px;margin:0 0 18px;color:var(--ln-ink);font:400 var(--ln-fs)/1.4 roboto-regular,sans-serif}
.ln_cert_progress b{color:var(--ink-strong);font-family:roboto-medium,sans-serif}
.ln_cert_meter{display:block;height:6px;margin-top:6px;border-radius:3px;background:var(--secondary-dark);overflow:hidden}
.ln_cert_meter_fill{display:block;height:100%;border-radius:3px;background:var(--ln-green)}

/* The teacher's check: a colored edge, never dark words on a color. */
.ln_cert_result{margin:0 0 16px;color:var(--ln-ink);font:400 var(--ln-fs)/1.5 roboto-regular,sans-serif}
.ln_cert_result.is-ok,.ln_cert_result.is-bad{padding:12px 16px;border:1px solid var(--ln-line);border-left:4px solid var(--ln-green);border-radius:6px;background:var(--ln-panel)}
.ln_cert_result.is-bad{border-left-color:var(--ln-red)}
.ln_cert_result.is-ok b{color:var(--ln-green)}
.ln_cert_result.is-bad b{color:var(--ln-red)}
.ln_cert_result .ln_ul{margin:8px 0 0}
.ln_cert_ok{margin:0 0 10px;color:var(--ln-ink);font:400 var(--ln-fs)/1.5 roboto-regular,sans-serif}
.ln_cert_ok b{color:var(--ln-green);font-family:roboto-medium,sans-serif}

/* The record under the certificate: every lesson, the exam, and the progress code that proves it. */
.ln_cert_record{margin:28px 0 8px;padding-top:8px;border-top:1px solid var(--ln-line)}
.ln_cert_progress_code{margin:8px 0 0;font:400 12px/1.5 'Atkinson Hyperlegible Mono',ui-monospace,monospace;color:var(--ln-ink);overflow-wrap:anywhere;word-break:break-all}
.ln_cert_progress_code:empty{display:none}

/* On paper: one landscape sheet (cert-view.js sets @page landscape while this page is open).
   9.9 x 7.5 inches fits inside both US Letter and A4 with the .35in margins. */
@media print{
  .ln_cert{--c-bg:#fff; --c-ink:#111; --c-dim:#3d3d3d; --c-faint:#9a9a9a; --c-line:#8f8f8f;
    --c-green:#2E9557; --c-blue:#3E55BA; --c-gold:#b08f0e; --c-red:#C22552; --c-kick:#7a5a00}
  .ln_cert_page{padding:0;margin:0}
  .ln_cert_page>:not(.ln_cert_sheet){display:none !important}
  .ln_cert_sheet{margin:0;max-width:none;display:flex;justify-content:center;break-inside:avoid}
  .ln_cert_sheet svg{width:9.9in;height:7.5in;box-shadow:none;border-radius:0;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* "Print my record": the record alone, the certificate left out. */
  html.ln-print-record .ln_cert_page>.ln_cert_sheet{display:none !important}
  html.ln-print-record .ln_cert_page>.ln_cert_record{display:block !important;margin:0;border:0}
}