/* The certificate: one look on /v, the board, /s and the landing (D10jm). The landing's
   look of D10ir and D10iw: a band of the signal at the top with the wordmark at the left and
   the number at the right, one sentence, the title and the value centred on one line with the
   span under them (D10le), the record across the full width above the fields, and the fields in two
   columns. components/certificate.tsx writes the markup for the app. */
/* The signal frames the whole certificate (D10nb): the band of D10iw is the top margin, 24px tall and one line at
   every width, and the same fill, 24px wide, is the margin at the sides and the foot. */
.certificate{container-type:inline-size;overflow:hidden;padding:0 24px 22px;border:24px solid var(--signal);border-top:0;
  border-radius:var(--r);background:var(--paper)}
.certificate .issuer{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0 12px;height:24px;
  margin:0 -24px;padding:0;font-size:.8125rem;font-weight:600;line-height:1;white-space:nowrap;color:var(--paper);background:var(--signal)} /* the wordmark and the number stand at the paper's edges, with the signal above and below them, so the band reads as a margin (D10nb) */
.certificate .issuer>:not(.fmark){margin-left:auto} /* the number; a share link's certificate has the wordmark alone */
.certificate .issuer .fmark{display:inline-flex;align-items:center;font-weight:400;white-space:nowrap;color:inherit}
.certificate .issuer .fmark b{font-weight:700} /* the wordmark's break on Metric (section 2) */
.certificate .issuer a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.certificate .issuer a:hover{text-decoration-color:currentColor} /* on the signal the underline keeps its paper */
.certificate .issuer .fmark a{text-decoration:none} /* the wordmark links to the landing with no underline, as in the masthead (D10mt) */
.certificate .vtitle{margin:20px 0 0;text-align:center;font-size:.9375rem;font-weight:600;line-height:1.45;color:var(--ink)} /* the title, 15px, a notch over the sentence (D10mw) */
.certificate .vsay{margin-top:2px;font-size:.8125rem;line-height:1.45;text-align:center;color:var(--muted)}
.certificate .vsay b{font-size:inherit;font-weight:600;color:var(--ink)}
.certificate .vsay .nw{white-space:nowrap}
.certificate .vlogo{display:inline-block;width:1.2em;height:1.2em;margin-right:.3em;vertical-align:-.22em}
.certificate .vtop{margin-top:32px;text-align:center}
.certificate .vtop>.tl,.certificate .vline>.tl{display:block;font-size:1.5rem;font-weight:600;letter-spacing:-.022em;line-height:1.2;color:var(--ink)}
.certificate .vline{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:0 14px}
.certificate .vval{font-size:clamp(1.6rem,5vw,2.25rem);font-weight:400;line-height:1.3;text-align:center} /* centred in its place, on the title's line or under it (D10pk) */
.certificate .vval::after{content:attr(data-w);display:block;height:0;overflow:hidden;visibility:hidden} /* the widest value of the record holds the width, so a hovered point moves nothing (D10pi) */
.certificate .vtop>.vstate{margin-top:2px;font-size:.8125rem;font-weight:600;line-height:1.4;color:var(--ink)} /* the span is set as a field name is */
.certificate .vtop>.vstate.mono{font-weight:400;color:var(--muted)} /* a state line or a scrubbed date */
.certificate .spark{display:block;width:100%;max-width:none;height:auto;margin-top:6px;overflow:visible}
.certificate .sparkx{position:relative;max-width:none;height:20px;margin-top:4px;font-size:.8125rem;color:var(--muted)}
.certificate .sparkx span{position:absolute;top:0;white-space:nowrap}
.certificate .rbody{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 18px;max-width:none;padding-top:20px}
.certificate .rbody>div{display:block}
.certificate .rbody dt{font-size:.8125rem;font-weight:600;line-height:1.4;color:var(--ink);padding-top:0}
.certificate .rbody dd{margin:2px 0 0;font-size:.8125rem;line-height:1.45;color:var(--muted)}
/* The variables (D10ot): each one on the wash with a hairline, in ink, in Formula. The box keeps its edges when the
   variable wraps. Not a chip: the house radius, no fill of color. In the formula, the operators and the constants are
   mono. */
.certificate .fv{padding:0 3px;border:1px solid var(--rule);border-radius:var(--r);color:var(--ink);background:var(--wash);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.certificate .fo{white-space:nowrap} /* an operator keeps its constant: ") × 100" never breaks */
/* Data Sources names the systems alone, one on each line (D10pr). */
.vsys{display:block}
@container (min-width:400px){
  .certificate .rbody{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .certificate .rbody>.wide{grid-column:1/-1}
}
/* The signature block (D10mx), centred under the fields: the examiner's drawn signature on the line of an issued
   certificate, the line empty on a specimen, then the name, the wordmark and the day, in the field's type. */
.certificate .vsign{width:min(100%,240px);margin:16px auto 0;text-align:center;font-size:.8125rem;line-height:1.45}
.certificate .vsign .sig{position:relative;display:block;height:44px;border-bottom:1px solid var(--ink)}
.certificate .vsign .sig img{position:absolute;left:50%;bottom:-10px;width:auto;height:56px;transform:translateX(-50%)}
.certificate .vsign>b{display:block;margin-top:6px;font-weight:600;color:var(--ink)}
.certificate .vsign .vmark{display:block;white-space:nowrap;color:var(--ink)} /* the full name in regular text under the name, above the day, with no mark (D10nr) */
.certificate .vsign .mono{display:block;color:var(--muted)}
/* The foot (D10my, D10mz): the scope sentence and the reader notice at the left, justified, the QR code alone at
   the right, in the field's type. No rule before it: the type and the space set it apart. */
.certificate .vfoot{display:flex;gap:24px;align-items:flex-start;margin-top:28px}
.certificate .vscope{flex:1 1 auto;min-width:0}
.certificate .vscope p{margin:0;font-size:.6875rem;line-height:1.45;text-align:justify;color:var(--muted)} /* the fine print, 11px (D10my, founder-directed) */
.certificate .vscope p+p{margin-top:8px}
.certificate .vscope a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.certificate .vqr{flex:0 0 auto} /* the code is as tall as the three lines of the fine print (D10mz) */
.certificate .vqr .qr{display:block;width:48px;height:48px;fill:var(--ink)}
@media (max-width:560px){
  /* On a phone (D10nb) the band at the top and the fill at the foot stay 24px, the sides are a 1.5px line of the
     signal, and the paper's inset is 16px. The certificate keeps the page's gutter, so the thin sides show. */
  .certificate{border-width:0 1.5px 24px;padding:0 16px 16px}
  .certificate .issuer{margin:0 -16px;padding:0 16px;gap:0 8px} /* on a phone the wordmark and the number keep the paper's 16px inset */
  .certificate .issuer .cw{display:none} /* the number alone fits beside the wordmark; the title under the band names the document */
  .certificate .vsay{text-align:center}
  .certificate .vfoot{gap:16px} /* the code stays beside the fine print (D10mz) */
}
/* The print sheet (D10mz): Save as PDF gives the certificate alone on one page, with its band, its QR code and
   its number. The shell's header and footer and the page's controls stay on the screen. */
@media print{
  @page{margin:14mm}
  .sheet.folder>header,.sheet.folder footer,.sbtn,.xclose,.statenote{display:none}
  .sheet.folder{max-width:none}
  .sheet.folder main{padding:0;border:0} /* the guide lines stay on the screen (D10rm) */
  .vwrap{max-width:none;margin:0}
  .certificate{border-radius:0;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .certificate .issuer{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .certificate a{text-decoration:none}
}