/* rpgp.app
 *
 * The tokens below are transcribed from the app's own design system, in
 * crates/rpgp-gui/ui/theme.slint. Site and app are meant to read as one
 * product, so when a value changes there it should change here.
 */

/* ---------------------------------------------------------------- fonts */

/* Geo — the wordmark only. Same file the app embeds, converted back to the
   WOFF2 it started life as. SIL Open Font License 1.1; see fonts/OFL.txt. */
@font-face {
    font-family: "Geo";
    src: url("fonts/geo.woff2") format("woff2");
    /* Geo ships one weight. Asking for 700 makes the browser smear a fake
       bold over a display face, so the wordmark is set at 400 and
       font-synthesis is off wherever these two faces are used. */
    font-weight: 400;
    font-display: swap;
}

/* Source Code Pro — fingerprints, key IDs and other machine values, in a face
   chosen for telling 0 from O and 1 from l. */
@font-face {
    font-family: "Source Code Pro";
    src: url("fonts/source-code-pro.woff2") format("woff2");
    /* Likewise one weight. */
    font-weight: 400;
    font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

/* Dark is the default for everyone, whatever the system asks for. The theme
   control opts out into `.light`, and that choice is remembered — so this is
   a starting point, not something imposed on a visitor who says otherwise. */
:root {
    --bg: #131519;
    --surface: #1a1d23;
    --surface-sunken: #16181d;
    --hover: #ffffff0d;
    --pressed: #ffffff1a;
    --selected: #6f8dff24;
    --border: #272b33;
    --border-strong: #363c47;
    --scrim: #000000b8;

    --text: #e8eaef;
    --text-dim: #99a1b0;
    --text-faint: #6b7385;

    --accent: #6f8dff;
    --accent-hover: #86a0ff;
    /* theme.slint has accent-ink: #ffffff in both themes. On the web that is
       3.03:1 against the dark accent, which fails AA on the primary buttons,
       so the dark theme inks them with the page background instead: 6.03:1,
       and 7.39:1 on hover. The one place this file knowingly parts company
       with the app. The light theme below keeps #ffffff, which passes. */
    --accent-ink: #131519;
    --accent-soft: #6f8dff26;

    --ok: #4ed6a1;
    --ok-soft: #4ed6a11f;
    --warn: #f0b264;
    --warn-soft: #f0b2641f;
    --danger: #ff8098;
    --danger-soft: #ff80981f;

    --mono-0: #6f8dff;
    --mono-1: #4ed6a1;
    --mono-2: #f0b264;
    --mono-3: #ff8098;
    --mono-4: #b088f9;
    --mono-5: #56c2d6;

    /* Spacing scale. Everything in the app is a multiple of 4. */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;

    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;

    /* Type scale. The app's, extended upward for the page's own headings —
       the app has no need of anything above 25px but a web page does. */
    --t-xs: 11px;
    --t-sm: 12px;
    --t-md: 13px;
    --t-lg: 15px;
    --t-xl: 19px;
    --t-2xl: 25px;
    --t-wordmark: 38px;

    --w-regular: 400;
    --w-medium: 550;
    --w-bold: 700;

    --fast: 120ms;

    /* The app uses the platform UI font; so does the page. */
    --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;
    --mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo,
        Consolas, monospace;
}

/* Chosen from the theme control only. */
:root.light {
    /* Surfaces, back to front. */
    --bg: #f5f6f9;
    --surface: #ffffff;
    --surface-sunken: #eef0f4;
    --hover: #0000000a;
    --pressed: #00000014;
    --selected: #3457dc14;
    --border: #e4e7ee;
    --border-strong: #ccd2de;
    --scrim: #1b1f2799;

    /* Ink. */
    --text: #161a21;
    --text-dim: #5c6470;
    --text-faint: #8b93a0;

    /* Accent. */
    --accent: #3457dc;
    --accent-hover: #2a48c0;
    --accent-ink: #ffffff;
    --accent-soft: #3457dc14;

    /* Status. Each has a soft companion for pill backgrounds. */
    --ok: #0f7a58;
    --ok-soft: #0f7a5814;
    --warn: #9a5c08;
    --warn-soft: #9a5c0814;
    --danger: #c22a46;
    --danger-soft: #c22a4614;

    /* Monogram tints, indexed by a hash of the fingerprint so a certificate
       keeps the same colour between sessions. */
    --mono-0: #3457dc;
    --mono-1: #0f7a58;
    --mono-2: #9a5c08;
    --mono-3: #c22a46;
    --mono-4: #7c4dd0;
    --mono-5: #0d6d80;
}



/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

/* Components below set `display`, which would otherwise win over the
   attribute and leave `hidden` elements on screen. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* The header is sticky and 58px tall; without this an in-page jump
       lands with the heading underneath it. */
    scroll-padding-top: 76px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--ui);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

code, kbd, samp, pre { font-family: var(--mono); font-synthesis: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
    width: 16px; height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ico-32 { width: 32px; height: 32px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------- the app window
 *
 * Rebuilt from the app's own geometry: a 208px rail, a 58px toolbar, 62px
 * list rows, a 336px details pane, a 3px accent spine on the selected row.
 */

.win {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--text) 6%, transparent),
        0 12px 32px -8px color-mix(in srgb, var(--text) 14%, transparent),
        0 32px 64px -16px color-mix(in srgb, var(--text) 12%, transparent);
    font-size: var(--t-md);
    line-height: 1.4;
}

/* The only platform character the app keeps is the window frame, so the page
   draws a neutral one rather than imitating either desktop. */
.win-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 var(--s3);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
}
.win-bar .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--border-strong);
}
.win-title {
    margin-left: auto; margin-right: auto;
    padding-right: 42px;
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    color: var(--text-faint);
}

.win-body {
    display: flex;
    /* app-window.slint: preferred-height: 760px. Fixed, so the window is the
       same size whichever certificate is selected — the rail's spacer and the
       two scroll panes absorb the difference, exactly as they do in the app. */
    height: 760px;
}

/* rail */
.rail {
    width: 208px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding: var(--s3);
    background: var(--surface-sunken);
    border-right: 1px solid var(--border);
}

.rail-brand {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) 0 var(--s3) var(--s2);
    color: var(--accent);
}
.wordmark {
    font-family: "Geo", var(--ui);
    font-size: var(--t-wordmark);
    font-weight: 400;
    font-synthesis: none;
    line-height: 1;
    color: var(--text);
}

.rail-item {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    height: 34px;
    padding: 0 var(--s2);
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--t-md);
    text-align: left;
    transition: background var(--fast), color var(--fast);
}
.rail-item .ico { color: var(--text-dim); }
.rail-item.is-active {
    background: var(--selected);
    color: var(--accent);
    font-weight: var(--w-medium);
}
.rail-item.is-active .ico { color: var(--accent); }
.rail-item .count { margin-left: auto; font-weight: var(--w-regular); color: var(--text-faint); }
.rail-item.is-active .count { color: var(--accent); }

.rail-spacer { flex: 1 1 auto; min-height: var(--s4); }
.divider { height: 1px; background: var(--border); }

.section-label {
    padding: var(--s2) var(--s2) var(--s1);
    color: var(--text-dim);
    font-size: var(--t-xs);
    font-weight: var(--w-bold);
    letter-spacing: 0.6px;
}

.win .section-label { color: var(--text-faint); }

.rail-op {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 var(--s3);
    border-radius: var(--r-sm);
    color: var(--text);
    font-size: var(--t-md);
    font-weight: var(--w-medium);
}

/* toolbar */
.content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.toolbar {
    display: flex;
    align-items: center;
    gap: var(--s2);
    height: 58px;
    flex: none;
    padding: 0 var(--s4);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.tb-spacer { flex: 1 1 auto; }

.field {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 300px;
    min-width: 0;
    height: 34px;
    padding: 0 var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-sunken);
    color: var(--text-faint);
    font-size: var(--t-md);
}
.field .placeholder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.select {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 150px;
    height: 34px;
    padding: 0 var(--s2) 0 var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-sunken);
    color: var(--text);
    font-size: var(--t-md);
}
.select .ico { margin-left: auto; color: var(--text-faint); }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 var(--s3);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text);
    font-size: var(--t-md);
    font-weight: var(--w-medium);
    white-space: nowrap;
}
.btn-primary {
    background: var(--accent);
    border-color: transparent;
    color: var(--accent-ink);
}
.btn-ghost { border-color: transparent; }
.btn-icon { padding: 0; width: 32px; justify-content: center; }
.btn.is-disabled { opacity: 0.4; }

/* list + details */
.panes { display: flex; flex: 1 1 auto; min-height: 0; }
.cert-list, .details { min-height: 0; }

.cert-list {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    background: var(--bg);
}

.cert-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s3);
    width: 100%;
    height: 62px;
    padding: 0 var(--s4);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--fast);
}
.cert-row:hover { background: var(--hover); }
/* Drawn inside the row: the list is a scroll container and would clip an
   outset ring. */
.cert-row:focus-visible { outline-offset: -2px; }
.cert-row[aria-selected="true"] { background: var(--selected); }
.cert-row[aria-selected="true"]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--accent);
}

.monogram {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    flex: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tint) 15%, transparent);
    color: var(--tint);
    font-size: 13.7px;
    font-weight: var(--w-bold);
    line-height: 1;
}
.monogram-lg { width: 48px; height: 48px; font-size: 17.3px; }

.cert-id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* The app's VerticalLayout { alignment: center; spacing: 2px; } */
    gap: 2px;
    line-height: 1.25;
}
.cert-name {
    font-size: var(--t-lg);
    font-weight: var(--w-medium);
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cert-mail {
    font-size: var(--t-sm);
    color: var(--text-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cert-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); }
.pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cert-caps { font-size: var(--t-xs); color: var(--text-faint); }

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    height: 20px;
    padding: 0 var(--s2);
    border-radius: 10px;
    background: var(--hover);
    color: var(--text-dim);
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    white-space: nowrap;
}
.pill .ico { width: 12px; height: 12px; }
.pill:has(.ico) { padding-left: 6px; }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-danger { background: var(--danger-soft); color: var(--danger); }
.pill-accent { background: var(--accent-soft); color: var(--accent); }

/* The app's status bar: main.rs builds this string as
   "{total} certificate(s), {mine} with a secret key". */
.status-bar {
    flex: none;
    padding: 0 var(--s4);
    height: 28px;
    display: flex;
    align-items: center;
    background: var(--surface-sunken);
    border-top: 1px solid var(--border);
    font-size: var(--t-sm);
    color: var(--text-dim);
}

.details {
    width: 336px;
    flex: none;
    padding: var(--s5);
    background: var(--surface);
    border-left: 1px solid var(--border);
    overflow-y: auto;
}
.details-head { display: flex; align-items: center; gap: var(--s3); }
.details-id {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    line-height: 1.25;
}
.details-name { font-size: var(--t-lg); font-weight: var(--w-bold); }
.details-mail { font-size: var(--t-sm); color: var(--text-dim); word-break: break-all; }
.details .pills { justify-content: flex-start; margin-top: var(--s4); }
.details .divider { margin: var(--s4) 0; }

.details dl { display: flex; flex-direction: column; gap: var(--s3); }
.field-row { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t-sm); }
.field-row dt { flex: none; width: 92px; color: var(--text-faint); }
.field-row dd { margin: 0; flex: 1 1 auto; min-width: 0; color: var(--text); }
.field-row dd.mono {
    font-family: var(--mono);
    font-size: var(--t-sm);
    line-height: 1.5;
    word-spacing: 1px;
    word-break: break-word;
}

.trust-line {
    margin-top: var(--s3);
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--text-dim);
}
.trust-note {
    margin-top: var(--s2);
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--text-faint);
}

/* The app's Check: a 17px box at 5px radius, filled with the accent when on. */
.check {
    display: flex;
    align-items: center;
    gap: var(--s2);
    height: 24px;
    margin-top: var(--s3);
    font-size: var(--t-md);
    color: var(--text);
}
.check .box {
    display: grid;
    place-items: center;
    width: 17px; height: 17px;
    flex: none;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    background: var(--surface-sunken);
    color: transparent;
}
.check .box .ico { width: 12px; height: 12px; }
.check.is-checked .box {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}
.check.is-disabled { opacity: 0.45; }

/* The window is a fixed-geometry thing — it is a desktop app. Rather than
   invent a phone layout it never has, drop the panes that need the width:
   the details pane first, then the rail, exactly the order in which they
   stop being legible. */
@media (max-width: 1080px) {
    .details { display: none; }
    .win-body { height: auto; }
}
@media (max-width: 760px) {
    .rail { display: none; }
    .toolbar { padding: 0 var(--s3); }
    .field { width: auto; flex: 1 1 auto; }
    .select, .toolbar .btn:not(.btn-primary) { display: none; }
}
@media (max-width: 420px) {
    .cert-row { padding: 0 var(--s3); gap: var(--s2); }
    .cert-meta .cert-caps { display: none; }
}

/* ----------------------------------------------------------- the page */

.skip {
    position: absolute;
    left: var(--s4); top: -100px;
    z-index: 20;
    padding: var(--s2) var(--s3);
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--r-sm);
    font-size: var(--t-md);
    font-weight: var(--w-medium);
    text-decoration: none;
    transition: top var(--fast);
}
.skip:focus { top: var(--s4); color: var(--accent-ink); }

.wrap {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--s5);
}
/* 1180px + gutters: the window's own preferred-width from app-window.slint. */
.wrap-wide { width: 100%; max-width: 1228px; margin: 0 auto; padding: 0 var(--s5); }
.wrap-narrow { max-width: 720px; }
.center { text-align: center; }

/* header */
.site-head {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 58px;
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--fast), background var(--fast);
}
.site-head.is-stuck { border-bottom-color: var(--border); }

.head-inner {
    display: flex;
    align-items: center;
    gap: var(--s5);
    height: 58px;
    /* Same as .wrap-wide, so the wordmark lines up with the window below. */
    max-width: 1228px;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--s2);
    color: var(--accent);
    text-decoration: none;
    flex: none;
}
.ico-24 { width: 24px; height: 24px; }
.brand-word {
    font-family: "Geo", var(--ui);
    font-size: var(--t-2xl);
    font-weight: 400;
    font-synthesis: none;
    line-height: 1;
    color: var(--text);
}

.head-nav { display: flex; gap: var(--s5); margin-left: auto; }
.head-nav a {
    color: var(--text-dim);
    font-size: var(--t-md);
    text-decoration: none;
    transition: color var(--fast);
}
.head-nav a:hover { color: var(--text); }

.head-actions { display: flex; align-items: center; gap: var(--s2); flex: none; }
.head-actions .btn { text-decoration: none; }

#theme-toggle { cursor: pointer; }
.ico-moon { display: none; }
:root.light .ico-sun { display: none; }
:root.light .ico-moon { display: block; }

/* hero */
.hero { padding: 88px 0 var(--s6); }

.eyebrow {
    font-family: var(--mono);
    font-size: var(--t-xs);
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.hero-h1 {
    margin-top: var(--s4);
    font-size: clamp(38px, 6.4vw, 62px);
    font-weight: var(--w-bold);
    line-height: 1.06;
    letter-spacing: -0.025em;
}

.hero-deck {
    margin-top: var(--s5);
    max-width: 60ch;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.6;
    color: var(--text-dim);
}

.hero-stack {
    margin-top: var(--s5);
    font-family: var(--mono);
    font-synthesis: none;
    font-size: var(--t-md);
    line-height: 2;
    color: var(--text-dim);
}
.negations { display: inline-flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }
.negations span {
    padding: 2px var(--s2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-dim);
    font-size: var(--t-sm);
}
.negations code { font-size: inherit; }


.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s3);
    margin-top: var(--s6);
}
.center-actions { justify-content: center; }

.btn-lg { height: 40px; padding: 0 var(--s4); font-size: var(--t-lg); text-decoration: none; }
a.btn { text-decoration: none; }
a.btn:hover { background: var(--hover); }
a.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }

/* copyable command, borrowing the app's FieldRow affordance */
.cmd {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    height: 40px;
    padding: 0 var(--s2) 0 var(--s4);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    max-width: 100%;
}
.cmd code {
    font-size: var(--t-md);
    color: var(--text);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}
.cmd code::-webkit-scrollbar { display: none; }
.cmd .copy {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--fast), background var(--fast), color var(--fast);
}
.cmd:hover .copy, .cmd .copy:focus-visible { opacity: 1; }
@media (hover: none) {
    .cmd .copy { opacity: 1; }
}
.cmd .copy:hover { background: var(--hover); color: var(--text); }
.cmd.is-copied .copy { opacity: 1; color: var(--ok); }

.cmd-block { display: flex; width: 100%; height: auto; min-height: 44px; padding: var(--s2) var(--s2) var(--s2) var(--s4); margin-top: var(--s4); }
.cmd-block code { flex: 1 1 auto; min-width: 0; }
.cmd-hero { margin-top: var(--s5); }
.cmd-hero code { font-size: var(--t-lg); }
.cmd-dim code { font-size: var(--t-sm); color: var(--text-dim); }

/* the window on its stage */
.window-section { padding: var(--s5) 0 96px; }
.stage { margin: 0; }
.stage figcaption {
    max-width: 68ch;
    margin: var(--s5) auto 0;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--text-dim);
    text-align: center;
}
.stage figcaption code { font-size: var(--t-xs); }

/* bands */
.band { padding: 96px 0; border-top: 1px solid var(--border); }
.band-sunken { background: var(--surface-sunken); }

.band h2 {
    margin-top: var(--s3);
    font-size: clamp(25px, 3.4vw, 38px);
    font-weight: var(--w-bold);
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.h2-ish { margin-top: var(--s3); font-size: var(--t-xl); font-weight: var(--w-bold); line-height: 1.3; }
.band .section-label { padding: 0; }

.deck {
    margin-top: var(--s4);
    max-width: 62ch;
    font-size: var(--t-lg);
    line-height: 1.65;
    color: var(--text-dim);
}
.center .deck { margin-left: auto; margin-right: auto; }

.note em { font-style: italic; color: var(--text); }

.note {
    margin-top: var(--s5);
    max-width: 68ch;
    font-size: var(--t-md);
    line-height: 1.7;
    color: var(--text-dim);
}
.center .note { margin-left: auto; margin-right: auto; }
.dim { color: var(--text-dim); }

.two-up > * { min-width: 0; }

.two-up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
    margin-top: var(--s6);
}
.two-up-uneven { gap: 64px; align-items: start; }

.card {
    padding: var(--s5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.band-sunken .card { background: var(--bg); }
.card h3 { margin-top: var(--s3); font-size: var(--t-xl); font-weight: var(--w-bold); }
.card p, .two-up p { margin-top: var(--s3); font-size: var(--t-md); line-height: 1.7; color: var(--text-dim); }
.two-up .section-label { padding: 0; }

.pullquote {
    margin-top: var(--s6);
    padding-left: var(--s5);
    border-left: 3px solid var(--accent);
    font-size: clamp(19px, 2.2vw, 25px);
    font-weight: var(--w-medium);
    line-height: 1.45;
    letter-spacing: -0.01em;
}

/* the smartcard flow */
.flow { margin-top: var(--s6); }
.flow-nodes { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); }
.node {
    padding: var(--s2) var(--s4);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    font-family: var(--mono);
    font-size: var(--t-md);
    color: var(--text);
    white-space: nowrap;
}
.band-sunken .node { background: var(--surface); }
.node-out { border-style: dashed; color: var(--text-dim); }
.arrow { width: 24px; height: 1px; background: var(--border-strong); flex: none; position: relative; }
.arrow::after {
    content: "";
    position: absolute; right: 0; top: -3px;
    border-left: 5px solid var(--border-strong);
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
}

/* The bracket starts after rPGP and its arrow, so the span it covers is
   visibly the agent onwards. That gap is the whole argument. */
.flow-bracket { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); padding-left: 108px; }
.bracket-span {
    flex: 1 1 auto;
    height: 10px;
    border: 1px solid var(--accent);
    border-top: 0;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    max-width: 420px;
}
.bracket-label { font-size: var(--t-sm); color: var(--accent); font-weight: var(--w-medium); }

/* paths and code */
.path {
    margin-top: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--t-md);
    color: var(--text);
    overflow-x: auto;
}
.band-sunken .path { background: var(--surface); }

code {
    padding: 1px 4px;
    background: var(--hover);
    border-radius: 4px;
    font-size: 0.92em;
}
.path code, .cmd code, pre code { padding: 0; background: none; }



/* colophon */
.colophon { padding: 64px 0; background: var(--surface-sunken); border-top: 1px solid var(--border); }
.colophon-inner { display: flex; align-items: center; }
.colophon p { margin-top: var(--s2); font-size: var(--t-sm); line-height: 1.7; color: var(--text-dim); }
.colophon .section-label { padding: 0; }
.colophon-brand { color: var(--accent); }
.colophon-brand .wordmark { font-size: var(--t-2xl); vertical-align: middle; margin-left: var(--s2); }
.colophon-brand .ico-32 { vertical-align: middle; }

/* ------------------------------------------------------------ narrow */

@media (max-width: 900px) {
    .head-inner { gap: var(--s4); }
    .head-nav { gap: var(--s4); }
    .hero { padding-top: 56px; }
    .band { padding: 64px 0; }
    .window-section { padding-bottom: 64px; }
    .two-up { grid-template-columns: 1fr; gap: var(--s4); }
    .two-up-uneven { gap: var(--s6); }
    .colophon-inner { gap: var(--s4); }
    .flow-bracket { display: none; }
}

@media (max-width: 560px) {
    /* Below this there is no room for it beside the wordmark and the two
       controls; the sections are still reachable by scrolling. */
    .head-nav { display: none; }
    .wrap, .wrap-wide { padding: 0 var(--s4); }
    .hero-actions { gap: var(--s2); }
    .hero-actions .btn-lg, .hero-actions .cmd { width: 100%; justify-content: center; }
    .flow-nodes { flex-direction: column; align-items: flex-start; gap: var(--s2); }
    .flow-nodes .arrow { width: 1px; height: 24px; transform: none; margin-left: var(--s5); }
    .flow-nodes .arrow::after {
        right: auto; top: auto; left: -3px; bottom: 0;
        border-left: 3.5px solid transparent;
        border-right: 3.5px solid transparent;
        border-top: 5px solid var(--border-strong);
        border-bottom: 0;
    }
}

/* ---------------------------------------------- the demo trust graph
 *
 * The same seven certificates as the window, in the same monogram tints,
 * because they are the same certificates. Solid edge = a full certification,
 * dashed = partial, double ring = a trust root (its secret key is in the
 * store), dashed outline = nobody has vouched for them.
 */
/* Scaling the whole SVG down to phone width would take the 11px edge labels
   to about 6px. Below its natural size the diagram scrolls sideways instead,
   inside its own container, so the page itself never scrolls horizontally. */
.graph-figure {
    margin: var(--s6) 0 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.graph {
    display: block;
    width: 100%;
    min-width: 560px;
    max-width: 680px;
    height: auto;
    margin: 0 auto;
    overflow: visible;
}

.graph .edges path {
    fill: none;
    stroke: var(--border-strong);
    stroke-width: 1.5;
}
.graph .edge-partial { stroke-dasharray: 5 4; }

.graph .edge-labels text {
    fill: var(--text-dim);
    font-family: var(--ui);
    font-size: 11px;
    text-anchor: middle;
}

.graph .gnode circle {
    fill: color-mix(in srgb, var(--tint) 15%, var(--bg));
    stroke: var(--tint);
    stroke-width: 1.5;
}
.graph .gnode .ring {
    fill: none;
    stroke: var(--tint);
    stroke-width: 1;
    opacity: 0.45;
}
.graph .is-orphan circle { stroke-dasharray: 4 3; opacity: 0.75; }

.graph .initials {
    fill: var(--tint);
    font-family: var(--ui);
    font-size: 13px;
    font-weight: var(--w-bold);
    text-anchor: middle;
}
.graph .label {
    fill: var(--text);
    font-family: var(--ui);
    font-size: 12px;
    text-anchor: middle;
}

.graph-figure figcaption {
    max-width: 68ch;
    margin: var(--s5) auto 0;
    font-size: var(--t-sm);
    line-height: 2;
    color: var(--text-dim);
    text-align: center;
}

/* ------------------------------------------------------------- print */

@media print {
    /* Printing is monochrome and paginated: force the light palette, drop the
       chrome, and let the window and the graph fall where they may. */
    :root, :root.light {
        --bg: #ffffff;
        --surface: #ffffff;
        --surface-sunken: #ffffff;
        --text: #000000;
        --text-dim: #333333;
        --text-faint: #555555;
        --border: #bbbbbb;
        --border-strong: #888888;
        --accent: #00008b;
        --accent-ink: #ffffff;
        --hover: transparent;
    }

    .site-head, .skip, #theme-toggle { display: none; }
    .win { box-shadow: none; }
    .band { padding: 24px 0; border-top: 1px solid var(--border); }
    .hero { padding-top: 0; }
    .graph-figure { overflow: visible; }

    /* Break pages between sections rather than through them. */
    section { break-inside: avoid-page; }
    h1, h2, h3 { break-after: avoid-page; }

    /* A printed link that only says "GitHub" is useless. */
    main a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: var(--text-dim);
        word-break: break-all;
    }
}