/* certapi project page. Design notes: DESIGN.md. Colours are the RFS Nightshift and Dayshift values. */

@font-face { font-family: "Source Serif 4"; src: url(fonts/source-serif-4-latin.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-latin.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Source Code Pro"; src: url(fonts/source-code-pro-latin.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Source Code Pro"; src: url(fonts/source-code-pro-symbols.woff2) format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+2039-203A, U+2192, U+2713; }

:root {
  /* Type: 16px @360px -> 18px @1440px, ratio 1.2 -> 1.333 (scale.mjs) */
  --step-5: clamp(2.4883rem, 1.7395rem + 3.3281vw, 4.7348rem);
  --step-4: clamp(2.0736rem, 1.5808rem + 2.1902vw, 3.552rem);
  --step-3: clamp(1.728rem, 1.4158rem + 1.3877vw, 2.6647rem);
  --step-2: clamp(1.44rem, 1.2537rem + 0.8281vw, 1.999rem);
  --step-1: clamp(1.2rem, 1.1001rem + 0.4439vw, 1.4996rem);
  --step-0: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --step--1: clamp(0.8333rem, 0.8298rem + 0.0157vw, 0.844rem);

  --space-3xs: clamp(0.25rem, 0.2396rem + 0.0463vw, 0.2813rem);
  --space-2xs: clamp(0.5rem, 0.4792rem + 0.0926vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7188rem + 0.1389vw, 0.8438rem);
  --space-s: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4375rem + 0.2778vw, 1.6875rem);
  --space-l: clamp(2rem, 1.9167rem + 0.3704vw, 2.25rem);
  --space-xl: clamp(3rem, 2.875rem + 0.5556vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8333rem + 0.7407vw, 4.5rem);
  --space-s-l: clamp(1rem, 0.5833rem + 1.8519vw, 2.25rem);
  --space-m-xl: clamp(1.5rem, 0.875rem + 2.7778vw, 3.375rem);
  --space-l-2xl: clamp(2rem, 1.1667rem + 3.7037vw, 4.5rem);
  --space-xl-3xl: clamp(3rem, 1.75rem + 5.5556vw, 6.75rem);

  --serif: "Source Serif 4", ui-serif, Georgia, serif;
  --sans: "Source Sans 3", system-ui, "Segoe UI", sans-serif;
  --mono: "Source Code Pro", ui-monospace, Consolas, monospace;

  --radius: 10px;
  --wrap: 76rem;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Dayshift */
  color-scheme: light;
  --bg: #F6F5F2; --surface: #FFFFFF; --raised: #ECEAE4; --line: #D6D3CB; --line-strong: #89867F;
  --ink: #1A1B1E; --mute: #666A73; --code: #FFFFFF;
  --ember: #C03B0A; --ember-hover: #AC370C; --ember-press: #98330F; --on-ember: #FFFFFF;
  --amber: #925F00; --mint: #15794D; --rasp: #B0306A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dayshift"]) {
    color-scheme: dark;
    --bg: #0C0D10; --surface: #13151A; --raised: #1A1D24; --line: #262A33; --line-strong: #636872;
    --ink: #E8E6E1; --mute: #8A8F99; --code: #070809;
    --ember: #FF6A3D; --ember-hover: #FC7951; --ember-press: #F98864; --on-ember: #0C0D10;
    --amber: #FFC247; --mint: #3DDC97; --rasp: #F06292;
  }
}
:root[data-theme="nightshift"] {
  color-scheme: dark;
  --bg: #0C0D10; --surface: #13151A; --raised: #1A1D24; --line: #262A33; --line-strong: #636872;
  --ink: #E8E6E1; --mute: #8A8F99; --code: #070809;
  --ember: #FF6A3D; --ember-hover: #FC7951; --ember-press: #F98864; --on-ember: #0C0D10;
  --amber: #FFC247; --mint: #3DDC97; --rasp: #F06292;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-0)/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
::selection { background: color-mix(in srgb, var(--ember) 30%, transparent); }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color .15s; }
@media (hover: hover) { a:hover { text-decoration-color: var(--ember); } }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; text-wrap: balance; }
h2 { font-size: var(--step-3); line-height: 1.12; letter-spacing: -.012em; margin-bottom: var(--space-s); }
section h2 code { font-size: .86em; font-weight: 500; background: none; padding: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
code, kbd, pre { font-family: var(--mono); }
code { font-size: max(.88em, 12.5px); }
pre code { font-size: inherit; }
:not(pre) > code { background: var(--raised); border-radius: 4px; padding: .08em .32em; }
.wrap { width: min(100% - 2 * var(--space-s-l), var(--wrap)); margin-inline: auto; }
.wrap-any { overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--space-s); top: -4rem; z-index: 20; background: var(--ember); color: var(--on-ember); padding: .5em .9em; border-radius: 6px; font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--space-s); }
.ok { color: var(--mint); font-weight: inherit; }
.refused { color: var(--rasp); font-weight: 600; }
.cert { color: var(--amber); }

/* ---------- header ---------- */
.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: var(--space-m); min-height: 4rem; flex-wrap: wrap; padding-block: var(--space-2xs); }
.name { font: 600 1.5rem/1 var(--serif); letter-spacing: -.01em; text-decoration: none; }
.top nav { display: flex; gap: var(--space-m); margin-left: auto; font-size: var(--step--1); }
@media (max-width: 52rem) {
  .top .wrap { gap: 0 var(--space-s); }
  .theme { margin-left: auto; }
  .top nav { order: 3; width: 100%; margin: 0 calc(-1 * var(--space-s-l)); padding: 0 var(--space-s-l) var(--space-2xs); width: calc(100% + 2 * var(--space-s-l)); overflow-x: auto; white-space: nowrap; scrollbar-width: none; gap: var(--space-s); }
}
.top nav a { color: var(--mute); text-decoration: none; padding-block: .35em; }
@media (hover: hover) { .top nav a:hover { color: var(--ink); } }
.theme { font: 600 .78rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); background: none;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: .6em 1em; min-height: 2.25rem; cursor: pointer; transition: color .15s, border-color .15s; }
@media (hover: hover) { .theme:hover { color: var(--ink); border-color: var(--ink); } }
.theme .t-day { display: none; }
:root[data-theme="dayshift"] .theme .t-night { display: none; }
:root[data-theme="dayshift"] .theme .t-day { display: inline; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme .t-night { display: none; }
  :root:not([data-theme]) .theme .t-day { display: inline; }
}

/* ---------- hero ---------- */
.hero { padding-block: var(--space-m-xl) var(--space-xl-3xl); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
h1 { font-size: clamp(2.3rem, 1.45rem + 3.6vw, 4.4rem); line-height: 1.04; letter-spacing: -.02em; font-variation-settings: "opsz" 60; }
.sub { font-size: clamp(1.06rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--mute); margin: var(--space-m) 0 0; max-width: 34em; }
.sub code { color: var(--ink); }

.seal { margin: 0; }
.seal-stage { position: relative; max-width: 40rem; margin-inline: auto; }
.seal figcaption { max-width: 40rem; margin: var(--space-s) auto 0; font-size: var(--step--1); color: var(--mute); line-height: 1.55; }
.seal .cap { display: block; }
.runs { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; margin-bottom: var(--space-xs); }
.runs[hidden] { display: none; }
.runs button { font: 600 var(--step--1)/1 var(--sans); color: var(--mute); background: none; border: 0; border-radius: 999px; padding: .62em 1.05em; min-height: 2.3rem; cursor: pointer; transition: color .15s, background-color .15s; }
.runs button[aria-pressed="true"] { background: var(--raised); color: var(--ink); }
.runs button[aria-pressed="true"]::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .5em; background: var(--amber); vertical-align: .05em; }
.runs button[data-run="without"][aria-pressed="true"]::before { background: var(--rasp); }
@media (hover: hover) { .runs button:hover { color: var(--ink); } }

/* the seal itself (drawn by docs/art/make-seal.py) */
.seal-art { display: block; width: 100%; height: auto; }
.seal-art .rim { fill: none; stroke: var(--line); stroke-width: 2; }
.seal-art .rim-in { stroke-width: 1.4; }
.seal-art .micro { font: 500 10px var(--mono); fill: var(--mute); }
.seal-art .ghost { fill: none; stroke: var(--line); stroke-width: 1.1; }
.seal-art .cut { fill: none; stroke: var(--ember); stroke-width: 1.1; stroke-dasharray: 100 100; }
.seal-art .cut > use { transform-origin: 400px 400px; transform: rotate(calc(var(--turn, 0deg) * var(--dir, 1))); transition: transform .7s var(--ease); }
.seal-art .cut-proxy, .seal-art .cut-tcp, .seal-art .cut-http { --dir: -1; }
.seal-art .cut-tls { stroke: var(--amber); }
.seal[data-run="without"] .seal-art .cut-tls { stroke: var(--line-strong); }
.seal-art .lg { font: 600 17px var(--sans); letter-spacing: .14em; fill: var(--mute); text-anchor: middle; }
.seal-art .lg-tls { fill: var(--amber); }
.seal[data-run="without"] .seal-art .lg-tls { fill: var(--mute); }
.seal-art .stamp text { text-anchor: middle; }
.seal-art .code { font: 600 80px var(--serif); font-variation-settings: "opsz" 60; }
.seal-art .reason { font: 600 17px var(--sans); letter-spacing: .14em; }
.seal-art .stamp-ok { fill: var(--mint); }
.seal-art .stamp-refused { fill: var(--rasp); }
.seal:not([data-run="without"]) .v-without, .seal[data-run="without"] .v-with { display: none; }

.seal-art .cut-url, .seal-art .lg-url { --at: .2s; }
.seal-art .cut-proxy, .seal-art .lg-proxy { --at: .5s; }
.seal-art .cut-dns, .seal-art .lg-dns { --at: .8s; }
.seal-art .cut-tcp, .seal-art .lg-tcp { --at: 1.1s; }
.seal-art .cut-tls, .seal-art .lg-tls { --at: 1.4s; }
.seal-art .cut-http, .seal-art .lg-http { --at: 2.15s; }
@media (prefers-reduced-motion: no-preference) {
  .seal.play .cut { animation: engrave .55s cubic-bezier(.5, .05, .3, 1) var(--at) both; }
  .seal.play .cut-tls { animation-duration: .8s; }
  .seal.play .lg { animation: ink .3s ease-out var(--at) both; }
  .seal.play .stamp { animation: stamp .5s var(--ease) 2.6s both; transform-box: fill-box; transform-origin: center; }
}
@keyframes engrave { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes ink { from { opacity: 0; } }
@keyframes stamp { from { opacity: 0; transform: scale(1.16); } }

/* install */
.install { max-width: 40rem; }
.install-label { font-weight: 600; margin-bottom: var(--space-2xs); }
.cmd { position: relative; background: var(--code); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.cmd pre { margin: 0; padding: calc(var(--space-s) + 2.6rem) var(--space-s) var(--space-s); font-size: .78rem; line-height: 1.65; }
.cmd pre .ln { display: block; padding-left: 2ch; text-indent: -2ch; overflow-wrap: anywhere; white-space: pre-wrap; }
.cmd pre .ln + .ln { margin-top: .35em; }
.cmd-label { position: absolute; top: 1.05rem; left: var(--space-s); font: 600 .78rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.copy { position: absolute; top: .6rem; right: .6rem; font: 600 var(--step--1)/1 var(--sans); color: var(--on-ember); background: var(--ember); border: 0; border-radius: 6px; padding: .7em 1.1em; min-height: 2.5rem; cursor: pointer; transition: background-color .15s; }
@media (hover: hover) { .copy:hover { background: var(--ember-hover); } }
.copy:active { background: var(--ember-press); }
.install-note { font-size: var(--step--1); color: var(--mute); margin: var(--space-xs) 0 0; line-height: 1.6; }

@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); grid-template-areas: "text seal" "install seal"; column-gap: var(--space-xl); row-gap: var(--space-l); align-items: start; }
  .hero-text { grid-area: text; padding-top: var(--space-s); }
  .seal { grid-area: seal; }
  .install { grid-area: install; }
}

/* ---------- sections ---------- */
section { position: relative; padding-block: var(--space-xl-3xl); }
/* the rule between sections: three interlaced waves, a guilloche border in one line */
section::before { content: ""; position: absolute; top: 0; left: 50%; width: min(100% - 2 * var(--space-s-l), var(--wrap)); height: 12px; translate: -50% -50%;
  background: var(--line-strong); opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M-48 6C-40 .6-32 .6-24 6S-8 11.4 0 6 16 .6 24 6 40 11.4 48 6 64 .6 72 6 88 11.4 96 6'/%3E%3Cpath transform='translate(16)' d='M-48 6C-40 .6-32 .6-24 6S-8 11.4 0 6 16 .6 24 6 40 11.4 48 6 64 .6 72 6 88 11.4 96 6'/%3E%3Cpath transform='translate(32)' d='M-48 6C-40 .6-32 .6-24 6S-8 11.4 0 6 16 .6 24 6 40 11.4 48 6 64 .6 72 6 88 11.4 96 6'/%3E%3C/g%3E%3C/svg%3E") repeat-x left center / 48px 12px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M-48 6C-40 .6-32 .6-24 6S-8 11.4 0 6 16 .6 24 6 40 11.4 48 6 64 .6 72 6 88 11.4 96 6'/%3E%3Cpath transform='translate(16)' d='M-48 6C-40 .6-32 .6-24 6S-8 11.4 0 6 16 .6 24 6 40 11.4 48 6 64 .6 72 6 88 11.4 96 6'/%3E%3Cpath transform='translate(32)' d='M-48 6C-40 .6-32 .6-24 6S-8 11.4 0 6 16 .6 24 6 40 11.4 48 6 64 .6 72 6 88 11.4 96 6'/%3E%3C/g%3E%3C/svg%3E") repeat-x left center / 48px 12px; }
.lede { color: var(--mute); max-width: 66ch; }
.lede code { color: var(--ink); }
.note, .after, .more { font-size: var(--step--1); color: var(--mute); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
@media (min-width: 62rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-xl); } }

pre.out, pre.sheet { margin: 0; background: var(--code); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-s) var(--space-m); overflow-x: auto; font-size: .8rem; line-height: 1.7; color: var(--ink); tab-size: 4; }
pre .cmdline { color: var(--ink); font-weight: 500; }
pre .c { color: var(--mute); }
pre b { font-weight: 600; }

/* why */
.why .big { font: 400 var(--step-2)/1.42 var(--serif); font-variation-settings: "opsz" 30; max-width: 30em; letter-spacing: -.005em; }
.why .aside { color: var(--mute); max-width: 40em; margin: 0; }
@media (min-width: 62rem) {
  .why .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--space-xl); }
  .why h2 { grid-row: span 2; }
}

/* doctor */
.transcript pre.out { color: var(--mute); font-size: .78rem; }
.transcript .hl, .transcript .cmdline { color: var(--ink); }
.transcript .cert { color: var(--amber); }
.transcript sup { color: var(--ember); font: 600 13px/0 var(--serif); margin-left: .35em; vertical-align: .55em; }
.notes { list-style: none; counter-reset: n; padding: 0; margin: var(--space-m) 0 0; display: grid; gap: var(--space-s) var(--space-l); }
@media (min-width: 48rem) { .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.notes li { counter-increment: n; position: relative; padding-left: 1.7em; font-size: var(--step--1); color: var(--mute); }
.notes li::before { content: counter(n); position: absolute; left: 0; top: -.12em; font: 600 1.4em/1 var(--serif); color: var(--ember); }
.after { margin: var(--space-m) 0 0; }

/* command line */
.headless .split > div > pre { margin-bottom: var(--space-xs); }
.headless .lede { margin-bottom: var(--space-s); }

/* gateway */
.gateway pre.out { align-self: center; }

/* what's in it: set like the fields on a certificate */
.fields { display: grid; gap: 0 var(--space-xl); margin: var(--space-m) 0 0; }
@media (min-width: 48rem) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fields > div { border-top: 1px solid var(--line); padding: var(--space-s) 0 var(--space-m); }
.fields dt { font: 600 .8rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ember); margin-bottom: var(--space-2xs); }
.fields dd { margin: 0; color: var(--ink); font-size: var(--step--1); line-height: 1.65; text-wrap: pretty; }

/* desktop app */
.shot { margin: var(--space-m) 0 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line-strong); }
.shot figcaption { font-size: var(--step--1); color: var(--mute); margin-top: var(--space-xs); max-width: 48em; }

/* tested, known issues */
.tested h2 { font-size: var(--step-2); }
.plain { margin: 0; padding-left: 1.1em; }
.plain li { margin: 0 0 .55em; font-size: var(--step--1); line-height: 1.6; }
.plain li::marker { color: var(--line-strong); }
.more { margin-top: var(--space-s); }

/* shortcuts */
.keys h2 { font-size: var(--step-2); }
.keys table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
.keys td { padding: .7em 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.keys td:first-child { white-space: nowrap; padding-right: var(--space-m); width: 1%; }
kbd { font: 500 .82rem/1 var(--mono); background: var(--surface); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; padding: .28em .45em; }

/* footer */
footer { border-top: 1px solid var(--line); padding-block: var(--space-l) var(--space-xl); color: var(--mute); font-size: var(--step--1); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs) var(--space-l); }
footer p { margin: 0; }
footer a { padding-block: .3em; display: inline-block; }

/* theme switch sweep */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

@media print {
  .top nav, .theme, .runs, .copy { display: none; }
  section::before { display: none; }
}