/* way2flow Signer. The Deck's language in its most serious form (spec section 17.9): graphite always,
   no brand accent, no animation except the lock. */

@font-face { font-family: "Unbounded"; src: url("/fonts/unbounded-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("/fonts/martian-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
    --bg: #111213; --surface: #18191B; --raised: #202225;
    --ink: #EDEBE6; --ink-2: #9A988F; --ink-3: #77756E; --hairline: #2E3033;
    --alarm: #E5213A;
    --font-display: "Unbounded", "Arial Black", sans-serif;
    --font-text: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Martian Mono", "SFMono-Regular", Consolas, monospace;
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: var(--font-text); font-size: 15px; line-height: 1.5; min-height: 100vh; display: grid; place-items: start center; padding: var(--s8) var(--s4); }
h1, h2, p, ul, pre { margin: 0; }

.signer { width: min(720px, 100%); display: grid; gap: var(--s4); border: 1px solid var(--hairline); padding: var(--s6); }
.signer-origin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); border-bottom: 1px solid var(--hairline); padding-bottom: var(--s3); }
.signer-origin .lock { width: 14px; height: 14px; }
.signer-origin .origin { color: var(--ink); }
#page { display: grid; gap: var(--s4); }

h1 { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
h2 { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.muted { color: var(--ink-2); }
/* Small text is ink or ink-2; ink-3 only marks lines. */
.faint { color: var(--ink-2); }
.sentences { display: grid; gap: var(--s2); padding-left: 1.1em; }
.meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); word-break: break-all; }

.anchor-words { font-family: var(--font-display); font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; word-break: break-word; }
.anchor-words span { display: inline-block; margin-right: 0.35em; }

.diff, .bytes { background: var(--surface); border: 1px solid var(--hairline); padding: var(--s3); font-family: var(--font-mono); font-size: 11px; white-space: pre-wrap; word-break: break-all; max-height: 280px; overflow: auto; }
.diff .add { color: var(--ink); }
.diff .add::before { content: "+ "; }
.diff .del { color: var(--ink-2); text-decoration: line-through; }
.diff .del::before { content: "- "; }
.diff .same::before { content: "  "; }
.diff .same { color: var(--ink-2); }
details summary { cursor: pointer; }

.key-button {
    justify-self: start; height: 56px; padding: 0 var(--s6) 0 var(--s8); cursor: pointer;
    background: var(--ink); color: var(--bg); border: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: 0.02em;
    clip-path: polygon(28px 0, 100% 0, 100% 100%, 28px 100%, 0 50%);
}
.key-button[disabled] { opacity: 0.4; cursor: wait; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn { justify-self: start; height: 32px; padding: 0 var(--s3); background: transparent; color: var(--ink); border: 1px solid var(--hairline); font-family: var(--font-text); font-size: 13px; cursor: pointer; }
.row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

.field { display: grid; gap: var(--s1); }
.field input, .field textarea { background: var(--surface); color: var(--ink); border: 1px solid #727479; padding: var(--s2) var(--s3); font-family: var(--font-mono); font-size: 12px; }
.field textarea { min-height: 72px; resize: vertical; }

.fingerprint { display: grid; gap: var(--s1); }
.fingerprint .print { font-family: var(--font-mono); font-size: 15px; color: var(--ink); }
.check { display: flex; gap: var(--s2); align-items: flex-start; font-size: 14px; }
.check input { margin-top: 4px; }
.alarm { border: 1px solid var(--alarm); color: var(--ink); padding: var(--s3); display: grid; gap: var(--s1); }
.alarm strong { color: #FF6B7A; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }

.command { display: flex; gap: var(--s2); align-items: stretch; }
.command code { flex: 1; font-family: var(--font-mono); font-size: 11px; background: var(--surface); border: 1px solid var(--hairline); padding: var(--s3); word-break: break-all; }

.kit { border: 1px solid var(--hairline); padding: var(--s4); display: grid; gap: var(--s3); }
.kit .secret { font-family: var(--font-mono); font-size: 12px; word-break: break-all; background: var(--surface); padding: var(--s3); border: 1px solid var(--hairline); }

/* The one motion on this page: the lock closes. */
.sealed-lock { display: flex; gap: var(--s3); align-items: center; font-family: var(--font-mono); font-size: 12px; }
.sealed-lock svg { width: 36px; height: 36px; flex: none; }
.sealed-lock .shackle { transform: translateY(-5px); transition: transform 260ms cubic-bezier(.5, 0, .2, 1.4); }
.sealed-lock.closed .shackle { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .sealed-lock .shackle { transition-duration: 1ms; } }

@media (max-width: 560px) {
    body { padding: var(--s4) var(--s2); }
    .signer { padding: var(--s4); }
    .anchor-words { font-size: 30px; }
}

@media print {
    html, body { background: #fff; color: #000; }
    .signer { border: 0; padding: 0; }
    .signer > *:not(#page), #page > *:not(.kit) { display: none; }
    .kit { border: 1px solid #000; }
    .kit .secret { background: #fff; border-color: #000; }
    .kit .no-print { display: none; }
}