/* The certificate (L155). One stylesheet for every surface that draws it: the application, /verify
 * and the /media specimen. tools/sync-certificate.mjs copies it byte for byte to
 * site/assets/certificate.css, and verify-public-claims.mjs refuses a deploy if the copies differ.
 *
 * Self-contained on purpose. Every value it reads is declared under .tcs-cert-host below, so it
 * renders the same inside the application's globals, the marketing sheets, or verify.html's few
 * tokens. It holds no url(): each host declares its own @font-face, because the application serves
 * fonts at /fonts/ and the site at /assets/fonts/.
 *
 * The --l-* values are the roster's domain tokens. brand/build/sync_roster.py rewrites them here
 * with the other token files, so a roster colour change reaches the certificate too.
 *
 * Layout answers to the host's own width through container queries, so the dashboard card, a
 * 320px phone, the wide certificate page and a sheet of paper use one set of rules. */

.tcs-cert-host{
  --c-paper:#FBF6E9; --c-paper-2:#F5EFDD; --c-ink:#16150F; --c-ink-2:#4A4840; --c-ink-3:#6B685F;
  --c-line:#DED8C9; --c-line-2:#C7BFAB; --c-yellow:#F0C544;
  --l-strategy: #D8E6D2; --l-planning: #EED595; --l-creative: #F0C0AB; --l-performance: #C9D2E1; --l-operations: #DED2C7;
  --c-stage:#E6D0D3; --c-floor:#D3B4B9;
  --cert-sans:'Instrument Sans','Instrument Sans Fallback A','Instrument Sans Fallback H',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cert-serif:'Instrument Serif','Instrument Serif Fallback G','Instrument Serif Fallback T',Georgia,'Times New Roman',serif;
  --cert-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  container-type:inline-size;
  display:block;
  width:100%;
}

.tcs-cert{
  --seal:clamp(132px, 32cqi, 216px);
  position:relative;
  box-sizing:border-box;
  background:var(--c-paper);
  color:var(--c-ink);
  font-family:var(--cert-sans);
  font-size:16px;
  line-height:1.45;
  font-weight:400;
  font-style:normal;
  letter-spacing:normal;
  word-spacing:normal;
  text-transform:none;
  text-align:left;
  border:1.5px solid var(--c-ink);
  border-radius:14px;
  padding:clamp(18px, 4.4cqi, 40px) clamp(18px, 5cqi, 48px) clamp(16px, 3.6cqi, 32px);
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.tcs-cert *,.tcs-cert *::before,.tcs-cert *::after{box-sizing:border-box}
.tcs-cert p,.tcs-cert ol{margin:0;padding:0}
/* The inner hairline: the classic double rule of a certificate edge, drawn on the radius ladder. */
.tcs-cert::before{content:"";position:absolute;inset:6px;border:.5px solid var(--c-ink-3);border-radius:8px;pointer-events:none}
.tcs-cert[data-state="preview"]{border:2px dashed var(--c-line-2);background:var(--c-paper-2)}
.tcs-cert[data-state="preview"]::before{display:none}

/* ---- header: the issuer on the left, the number where a passport number sits ---- */
.tcs-cert__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 18px;flex-wrap:wrap}
.tcs-cert__house{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.82rem;letter-spacing:.01em}
.tcs-cert__mark{width:22px;height:22px;flex:none;display:block}
.tcs-cert__no{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:2px}
.tcs-cert__label{font-family:var(--cert-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-3)}
.tcs-cert__code{font-family:var(--cert-mono);font-size:.84rem;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--c-ink)}
.tcs-cert[data-state="preview"] .tcs-cert__code{color:var(--c-ink-3);font-size:.74rem}

/* ---- body: the words, then the seal ---- */
.tcs-cert__body{display:grid;grid-template-columns:1fr;gap:18px;margin-top:clamp(14px, 3cqi, 26px)}
.tcs-cert__text{min-width:0}
.tcs-cert__kind{font-family:var(--cert-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-ink-2)}
.tcs-cert__lead{margin-top:14px !important;font-size:.95rem;color:var(--c-ink-2)}
.tcs-cert__name{font-family:var(--cert-serif);font-weight:400;color:var(--c-ink);line-height:1.04;letter-spacing:-.005em;
  margin-top:6px !important;overflow-wrap:anywhere;word-break:normal;text-wrap:balance;
  font-size:min(3.6rem, 10cqi)}
.tcs-cert__name[data-fit="b"]{font-size:min(3rem, 8.6cqi)}
.tcs-cert__name[data-fit="c"]{font-size:min(2.3rem, 7cqi)}
.tcs-cert__name[data-fit="d"]{font-size:min(1.8rem, 6cqi)}

/* The full stop: a hairline under the name that ends in the brand's yellow dot. The name is the
   call and the stop closes it. Hollow on a preview: this stop's yellow is earned on issue. (The
   issuer's mark in the header keeps its own dot in every state; it is the logo, never altered.) */
.tcs-cert__stop{display:flex;align-items:center;max-width:26rem;margin-top:10px !important;height:10px}
.tcs-cert__stop::before{content:"";flex:1;height:1px;background:var(--c-ink-3)}
.tcs-cert__stop span{flex:none;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--c-line-2);background:transparent}
.tcs-cert__stop.is-filled span{border:0;background:var(--c-yellow)}

.tcs-cert__statement{margin-top:14px !important;font-size:.95rem;color:var(--c-ink-2)}
.tcs-cert__edition{font-family:var(--cert-serif);font-size:1.65rem;line-height:1.1;margin-top:2px !important}

/* ---- the edition spine: five stages sized by their cases ---- */
.tcs-cert__spine{list-style:none;display:grid;grid-template-columns:7fr 7fr 7fr 10fr 7fr;gap:3px;margin-top:18px !important;max-width:30rem}
.tcs-cert__seg{min-width:0}
.tcs-cert__bar{display:block;height:6px;border-radius:2px;background:var(--seg, var(--c-ink))}
.tcs-cert__seglabel{display:block;margin-top:5px;font-family:var(--cert-mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-2);white-space:nowrap;overflow:hidden;text-overflow:clip}
.tcs-cert[data-spine="tint"] .tcs-cert__seg--brief{--seg:var(--l-strategy)}
.tcs-cert[data-spine="tint"] .tcs-cert__seg--plan{--seg:var(--l-planning)}
.tcs-cert[data-spine="tint"] .tcs-cert__seg--build{--seg:var(--l-creative)}
.tcs-cert[data-spine="tint"] .tcs-cert__seg--run{--seg:var(--l-performance)}
.tcs-cert[data-spine="tint"] .tcs-cert__seg--prove{--seg:var(--l-operations)}
/* A tint alone is too pale to read as a filled bar on paper, so each carries a hairline of ink. */
.tcs-cert[data-spine="tint"] .tcs-cert__bar{box-shadow:inset 0 0 0 .5px rgba(22,21,15,.35)}
/* A stage not yet closed: an outline, never a fill. Unreadable progress: dotted, no counts. */
.tcs-cert__seg:not(.is-closed) .tcs-cert__bar{background:transparent;box-shadow:none;border:1px dashed var(--c-line-2)}
.tcs-cert__seg.is-unknown .tcs-cert__bar{border-style:dotted}
.tcs-cert__seg:not(.is-closed) .tcs-cert__seglabel{color:var(--c-ink-3)}
@container (max-width: 459.98px){.tcs-cert__seg:not(.is-closed) .tcs-cert__segcount{display:none}}

/* ---- the seal: The Louli on its own stage, inside rings drawn from the number ---- */
.tcs-cert__seal{position:relative;width:var(--seal);height:var(--seal);justify-self:center;flex:none}
.tcs-cert__disc{position:absolute;left:23%;top:23%;width:54%;height:54%;border-radius:50%;z-index:0;
  background:
    radial-gradient(120% 80% at 22% 8%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(to bottom, var(--c-stage) 0 80%, var(--c-floor) 80% 100%)}
.tcs-cert__shadow{position:absolute;left:39%;width:22%;top:64.6%;height:4%;border-radius:50%;z-index:1;
  background:radial-gradient(closest-side, rgba(22,21,15,.30), rgba(22,21,15,.12) 55%, transparent)}
/* Whole, upright, unfiltered: never clipped, recoloured, outlined or shadowed beyond its contact
   shadow (THE-LOULI.md). It stands on the floor line. */
.tcs-cert__louli{position:absolute;z-index:2;left:50%;bottom:32.6%;height:42%;width:auto;max-width:none;
  transform:translateX(-50%);display:block;margin:0;border:0;border-radius:0;box-shadow:none}
.tcs-seal__svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.tcs-seal__rule{fill:none;stroke:var(--c-ink);stroke-width:.45}
.tcs-seal__micro{font-family:var(--cert-mono);fill:var(--c-ink-2)}
.tcs-seal__band path,.tcs-seal__band use{fill:none;stroke:var(--c-ink);stroke-width:.42}
.tcs-seal__wait{fill:none;stroke:var(--c-line-2);stroke-width:1;stroke-dasharray:3 3}
.tcs-seal__tick{stroke:var(--c-line-2);stroke-width:1.1;stroke-linecap:round}
.tcs-seal__tick.is-on{stroke:var(--c-ink)}
.tcs-seal__tick.is-unknown{stroke:var(--c-line);stroke-dasharray:1 1.2}
.tcs-cert[data-state="preview"] .tcs-seal__rule{stroke:var(--c-line-2)}
.tcs-cert[data-state="preview"] .tcs-seal__micro{fill:var(--c-ink-3)}

/* ---- footer ---- */
.tcs-cert__foot{margin-top:clamp(16px, 3cqi, 24px);padding-top:12px;border-top:1px solid var(--c-line);display:flex;flex-wrap:wrap;gap:4px 22px;align-items:baseline}
.tcs-cert__detail{font-family:var(--cert-mono);font-size:.76rem;letter-spacing:.02em;color:var(--c-ink-2)}
.tcs-cert__check{font-size:.82rem;color:var(--c-ink-2)}
.tcs-cert__fine{flex-basis:100%;margin-top:6px !important;font-size:.7rem;line-height:1.45;color:var(--c-ink-3);max-width:46rem}

/* ---- wide: the words left, the seal right ---- */
@container (min-width: 560px){
  .tcs-cert__body{grid-template-columns:1fr auto;align-items:center;gap:28px}
  .tcs-cert__seal{justify-self:end}
}
/* ---- narrow: one column, the seal first ---- */
@container (max-width: 559.98px){
  .tcs-cert__seal{order:-1}
  .tcs-cert__no{align-items:flex-start;text-align:left}
}

/* ---- compact: the dashboard card ---- */
.tcs-cert[data-size="compact"]{--seal:clamp(96px, 30cqi, 120px);padding:18px 18px 14px}
.tcs-cert[data-size="compact"] .tcs-cert__name{font-size:min(2rem, 9cqi)}
.tcs-cert[data-size="compact"] .tcs-cert__name[data-fit="c"],
.tcs-cert[data-size="compact"] .tcs-cert__name[data-fit="d"]{font-size:min(1.4rem, 6.4cqi)}
.tcs-cert[data-size="compact"] .tcs-cert__edition{font-size:1.15rem}
.tcs-cert[data-size="compact"] .tcs-cert__body{margin-top:12px;gap:12px}
.tcs-cert[data-size="compact"] .tcs-cert__segcount{display:none}
@container (min-width: 380px){
  .tcs-cert[data-size="compact"] .tcs-cert__body{grid-template-columns:1fr auto;align-items:center}
  .tcs-cert[data-size="compact"] .tcs-cert__seal{order:0;justify-self:end}
}

/* ---- The Louli's one reaction, when a stage closed in the last 7 days (THE-LOULI.md: its one animated
   privilege). Translate only, inside the 250ms ceiling. Reduced motion warms the stage instead;
   the cutout itself is never filtered. ---- */
@keyframes tcs-louli-lift{0%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}100%{transform:translateX(-50%) translateY(0)}}
.tcs-cert[data-react] .tcs-cert__louli{animation:tcs-louli-lift 240ms cubic-bezier(.22,.61,.36,1) 400ms 1 both}
@media (prefers-reduced-motion: reduce){
  .tcs-cert[data-react] .tcs-cert__louli{animation:none}
  .tcs-cert[data-react] .tcs-cert__disc{background:
    radial-gradient(120% 80% at 22% 8%, rgba(255,255,255,.7), transparent 62%),
    linear-gradient(to bottom, var(--c-stage) 0 80%, var(--c-floor) 80% 100%)}
}

/* ---- colour, stated at a weight no host page outranks. The pages that carry a certificate style
   bare paragraphs (media.css sets .m p to ink-2, a (0,1,1) rule that beat every single-class rule
   here and greyed the specimen's name). These carry the host and the sheet in the selector, so the
   certificate reads the same on every page that draws it. ---- */
.tcs-cert-host .tcs-cert p{color:var(--c-ink)}
.tcs-cert-host .tcs-cert p.tcs-cert__kind,
.tcs-cert-host .tcs-cert p.tcs-cert__lead,
.tcs-cert-host .tcs-cert p.tcs-cert__statement,
.tcs-cert-host .tcs-cert p.tcs-cert__detail,
.tcs-cert-host .tcs-cert p.tcs-cert__check{color:var(--c-ink-2)}
.tcs-cert-host .tcs-cert p.tcs-cert__fine{color:var(--c-ink-3)}

/* ---- paper: the wide layout, square corners, inside a box that fits A4 and Letter landscape.
   The page's own @page rule sets the 10mm margin. ---- */
@media print{
  .tcs-cert-host{max-width:255mm;margin:0 auto}
  .tcs-cert{border-radius:0;break-inside:avoid;min-height:150mm;display:flex;flex-direction:column;justify-content:space-between}
  .tcs-cert::before{border-radius:0}
}