/* The Key Metrics window (D10qh, D10qi, D10ql): Acme Inc.'s Key Metrics page in Safari, as macOS draws it,
   and the four certificates its rows open in the same window, as /v draws them. One source for / (D10rg): scripts/blocks/key-metrics.html holds the markup, public/specimen.js the script. The rules of a
   certificate stand under .web, so a page's own certificate (public/certificate.css) keeps its rules. */
/* The window (founder-directed 2026-10-29): Acme Inc.'s Key Metrics page in Safari, as macOS draws it, the column's
   width up to 860px, its left edge on the caption's (D10lj). A row opens its certificate in the same window. */
.demo{scroll-margin-top:24px} /* the certificate number brings the reader here (D10je) */
.km{width:min(100%,860px);margin:0 auto} /* centred on its card (D10qk) */

.app{min-width:0;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);
     border:1px solid var(--rule);border-radius:10px}
/* Safari's toolbar (D10it): the window buttons in their system colors, the tools as line icons, and the address
   in the centre. */
.tbar{position:relative;flex:none;display:flex;align-items:center;gap:14px;height:40px;padding:0 12px;font-size:.8125rem;line-height:1;
     color:var(--muted);background:var(--wash);border-bottom:1px solid var(--rule)}
.lights{display:flex;gap:8px}
.lights i{width:12px;height:12px;border-radius:50%;background:#FF5F57}
.lights i+i{background:#FEBC2E}
.lights i+i+i{background:#28C840}
.tico{display:flex;align-items:center;gap:12px}
.tr{margin-left:auto}
.tbar svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.tbar .dim{display:flex;opacity:.4}
.addr{position:absolute;left:30%;right:30%;padding:6px 10px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
     color:var(--ink);background:var(--ground);border-radius:7px}
/* The hero's back arrow returns to the Key Metrics page from a certificate. On the page it is dim, as the forward
   arrow is, and a narrow Safari shows it only on a certificate. On hover and on the keyboard it takes the signal, as
   a bare button does (D10me, D10ol). */
.tbar .back{display:flex;margin:-4px;padding:4px;font:inherit;color:inherit;background:none;border:0;border-radius:var(--r);cursor:pointer;
     transition:background-color .15s,color .15s}
.tbar .back:disabled{opacity:.4;cursor:default}
.tbar .back:not(:disabled):hover,.tbar .back:focus-visible{color:var(--paper);background:var(--signal)}
@media (max-width:760px){.tico{display:none}.addr{left:76px;right:14px} /* a narrow Safari: the address alone */
  .km[data-view=cert] .tico:not(.tr){display:flex}.km .tico>:not(.back){display:none}.km[data-view=cert] .addr{left:106px}} /* and on a certificate, the back arrow */
.app.web{border-color:var(--muted)} /* Safari's edge in the muted gray (D10lh) */
/* The Key Metrics page (D10qh), as the demos set it: on the wash, with no frame, because the frame of the signal
   stays on the certificate (D10tx). The head, at the left: the logo and Key Metrics, "Third-party verified
   on" and the wordmark, the contact, each part after its icon, then the period that every value measures, once
   (D10le). Then the rows under group headings: the name and the value, with no record (D10po, D10pw). */
.certs{padding:18px clamp(12px,2vw,18px);background:var(--wash)}
@media (max-width:360px){.certs{padding-inline:0}} /* below 360px the frame takes the window's width, so the band and the number fit */
.tcpage{--kp:clamp(18px,3vw,32px);padding:20px var(--kp);background:var(--paper)}
.tcby{margin-top:4px;font-size:.8125rem;color:var(--ink)} /* the mark of the page, under its title, all in the type of "Verification Network" (D10qh) */
.tcby .fmark{white-space:nowrap}
.tctitle{display:flex;align-items:flex-start;gap:10px;font-size:clamp(1.125rem,2vw,1.5rem);font-weight:600;letter-spacing:-.022em;line-height:1.15}
.tctitle .vlogo{width:24px;height:24px;margin:calc((1.15em - 24px) / 2) 0 0;flex:none}
.tcfacts{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:8px;font-size:.8125rem;color:var(--muted)}
.tcfacts .nw{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} /* the site and the email each stay whole, each after its icon */
.tci{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} /* the globe and the at sign (D10qh, founder-directed) */
.tcper{margin-top:12px} /* the period, once */
.tcspan{font-size:1rem;font-weight:600;color:var(--ink);white-space:nowrap}
.tcgrp{margin-top:14px}
.tcgh{margin-bottom:6px;font-size:.9375rem;font-weight:600}
.tcrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(84px,auto);align-items:center;gap:16px;width:100%;padding:8px 12px;
     font:inherit;font-size:.875rem;text-align:left;text-decoration:none;color:var(--ink);background:var(--paper);border:0;border-top:1px solid var(--rule);
     cursor:pointer;transition:background-color .15s} /* a link to its /v page, with no underline (D10ij, D10oo, D10qi) */
.tcrow:hover,.tcrow:focus-visible{background:var(--tint)} /* hover is the tint (D10oq) */
.tcval{font-size:1rem;text-align:right;white-space:nowrap}
/* The certificate that a row opens, as /v shows it, on the wash. The window keeps the page's height, so nothing
   jumps (D10os), and the certificate opens at its top and scrolls inside the window (D10le). */
.pages{position:relative}
.certs{position:absolute;inset:0;display:none;overflow-y:auto}
.km[data-view=cert] .kmp{visibility:hidden}
.km[data-view=cert] .certs{display:block}
.certs:not(.end){-webkit-mask-image:linear-gradient(#000 calc(100% - 48px),transparent);mask-image:linear-gradient(#000 calc(100% - 48px),transparent)} /* a fade at the foot says the certificate scrolls, until its end (D10le) */
.certs>.card{background:var(--paper);border-radius:var(--r)}
.certs>.card:not(.on){display:none}
/* The certificate (D10ik): a formal head with the wordmark and the certificate number, then the title, the
   value and its Verified line, with the record beside them on a wide certificate, then the ledger. */
.web .card{padding:18px 24px 22px;container-type:inline-size}
.web .issuer{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 20px;padding-bottom:12px;margin-bottom:16px;
     border-bottom:1px solid var(--rule);font-size:.8125rem;color:var(--muted)}
.web .issuer>:last-child{margin-left:auto}
.web .issuer .fmark{font-size:.9375rem;color:var(--ink);white-space:nowrap;letter-spacing:-.028em}
.web .vtop .tl{display:block;font-size:1.125rem;font-weight:600;letter-spacing:-.015em;line-height:1.3} /* the metric's title (D10ig) */
.web .vval{font-size:clamp(1.6rem,5vw,2.25rem);font-weight:400;line-height:1.3;margin-top:4px}
.web .vstate{margin-top:10px;font-size:.8125rem;color:var(--muted)}
.web .vstate b{font-weight:600}
.web .vstate b.fresh{color:var(--ink)}
.web .spark{display:block;width:100%;height:auto;margin-top:16px;overflow:visible}
.web .sparkx{position:relative;height:20px;margin-top:4px;font-size:.8125rem;color:var(--muted)}
.web .sparkx span{position:absolute;top:0;white-space:nowrap}
.web .rbody{display:grid;grid-template-columns:130px 1fr;gap:8px 16px;padding-top:16px}
.web .rbody dt{font-size:.8125rem;font-weight:600;line-height:1.5;padding-top:2px} /* the ledger's field names, ink 600 (D10dk) */
.web .rbody dd{font-size:.875rem;line-height:1.55;color:var(--muted)}
@container (max-width:440px){.web .card .rbody{grid-template-columns:1fr;gap:2px 0}.web .card .rbody dd{margin-bottom:8px}}
/* The certificate of D10iq, as app/globals.css sets /v: the number alone at the head, one sentence at the
   size of the fields, its names and its day set as field names, and the fields in two columns. No rule
   between the parts. */
/* The head: the certificate's top margin in the signal, edge to edge, with the wordmark at the left, its double rule
   before it, and the number at the right, all in paper (D10iw). */
.web .card{padding-top:0;border:24px solid var(--signal);border-top:0} /* the signal frames the whole certificate, 24px on every side (D10nb) */
.web .issuer{align-items:center;flex-wrap:nowrap;gap:0 12px;height:24px;margin:0 -24px;padding:0;border-bottom:0;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 (D10nb) */
.web .issuer .fmark{display:inline-flex;align-items:center;font-size:inherit;font-weight:400;letter-spacing:normal;color:inherit}
.web .issuer .fmark b{font-weight:700} /* the wordmark's break on Metric (section 2) */
.web .issuer .fmark a{text-decoration:none} /* the wordmark links to the landing with no underline, as in the masthead (D10mr) */
.web .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) */
.web .vsay{margin-top:2px;text-align:center}
/* The signature block (D10mx), centred under the fields, its line empty on a demo; then the name, the wordmark and the day. */
.web .vsign{width:min(100%,240px);margin:16px auto 0;text-align:center;font-size:.8125rem;line-height:1.45}
.web .vsign .sig{position:relative;display:block;height:44px;border-bottom:1px solid var(--ink)}
.web .vsign>b{display:block;margin-top:6px;font-weight:600;color:var(--ink)}
.web .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) */
.web .vsign .mono{display:block;color:var(--muted)}
/* The foot (D10my, D10mz): the scope sentence and the reader notice at the left, the QR code and its line at the right. */
.web .vfoot{display:flex;gap:24px;align-items:flex-start;margin-top:28px}
.web .vscope{flex:1 1 auto;min-width:0}
.web .vscope p{margin:0;font-size:.6875rem;line-height:1.45;text-align:justify;color:var(--muted)} /* the fine print, 11px (D10my) */
.web .vscope p+p{margin-top:8px}
.web .vscope a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.web .vqr{flex:0 0 auto} /* the code is as tall as the three lines of the fine print (D10mz) */
.web .vqr .qr{display:block;width:48px;height:48px;fill:var(--ink)}
@container (max-width:440px){.web .vfoot{gap:16px}.web .issuer{gap:0 8px}.web .issuer .cw{display:none}} /* the band's margin follows the card's padding, in the media rule below, so a narrow card on a wide screen keeps the band edge to edge (D10nt) */
@media (max-width:560px){.web .card{border-width:0 1.5px 24px;padding-left:16px;padding-right:16px}.web .issuer{margin:0 -16px;padding:0 16px}} /* on a phone the sides are a 1.5px line of the signal and the paper's inset is 16px (D10nb); the card is its own container, so its border takes a media query */
.web .vsay{margin-top:10px;font-size:.8125rem;line-height:1.45;color:var(--muted)}
.web .vsay b{font-size:inherit;font-weight:600;color:var(--ink)}
.web .vsay .nw{white-space:nowrap}
.web .vlogo{display:inline-block;width:1.2em;height:1.2em;margin-right:.3em;vertical-align:-.22em}
/* The head, centred: the title and the value on one line, then the period under them. The record stands across
   the fields (founder-directed 2026-10-05, 2026-10-13). */
.web .vtop{margin-top:32px;text-align:center}
.web .vtop .tl{font-size:1.5rem;letter-spacing:-.022em;line-height:1.2}
.web .vline{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:0 14px}
.web .vline .vval{margin-top:0;text-align:center} /* centred in its place, on the title's line or under it (D10pk) */
.web .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 held point moves nothing (D10pi) */
.web .vtop>.vspan{margin-top:2px;font-weight:600;line-height:1.4;color:var(--ink)} /* the period is set as a field name is */
.web .rbody>.vrec .spark{margin-top:6px}
.web .rbody>div{display:contents}
.web .rbody{grid-template-columns:minmax(0,1fr);gap:10px 18px;padding-top:20px}
.web .rbody>div{display:block}
.web .rbody dt{padding-top:0;line-height:1.4}
.web .rbody dd{margin:2px 0 0;font-size:.8125rem;line-height:1.45}
@container (min-width:400px){.web .rbody{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.web .rbody>.wide{grid-column:1/-1}}
/* The variables (D10ot), as public/certificate.css sets them in the app: each variable on the wash with a hairline, in

   ink, in Formula; the formula's operators in mono. Data Sources names the systems alone, one on each line (D10pr). */
.web .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}
.web .vsys{display:block}
@media (max-width:560px){
  .tcrow{grid-template-columns:minmax(0,1fr) auto}
  .tcpage{--kp:16px;padding-block:20px 16px}
  .tcrow{padding:10px 12px} /* a tap target near 44px */
  .tcfacts{column-gap:12px} /* the site and the email on one line (D10qh) */
  .web .issuer>:last-child{margin-left:0}
}