/* Producer-form design system, layered on guide.css.
 *
 * SHARED BY register.html, rename.html AND delete.html. The file is named
 * after the page it was extracted from, but nothing in it is register-
 * specific: .step / .stub / .chip / .countdown / .trustbar / .disclosure /
 * .codebox / .copy-btn / .btn / .field / .lookup / .status are generic
 * form-system vocabulary. Change a rule here and all three pages move.
 *
 * guide.css is shared with guide.html, so nothing here is pushed upstream —
 * including the contrast fixes below, which the rest of the site has not
 * adopted yet.
 */
:root {
    --green-700: #15803d;   /* white on it = 5.01:1; --green is 3.30:1 */
    --red-700:   #b91c1c;   /* white on it = 6.47:1; --red is 4.83:1     */
    --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;
}
[hidden] { display: none !important; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}
/* --- steps ------------------------------------------------------- */
.step { margin-top: var(--sp-6); }
.step-h {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); flex-wrap: wrap; margin-top: 0;
}
/* The heading's own text, held apart from the trailing .chip / .countdown
   that .step-h pushes to the far edge. A flex row so the number badge
   centres against the title's x-height instead of hanging off its
   baseline. */
.step-h > span:first-child {
    display: inline-flex; align-items: center; gap: var(--sp-2);
}
/* Step numbers are the page's wayfinding device and were its least legible
   text: guide.css draws them as a bare 0.8rem --gray-400 mono digit sitting
   on the h2 baseline — 2.54:1 on white, and shaped like a stray character
   rather than a marker. Here they are a fixed 1.5rem badge, so all three
   are the same size whatever the digit, and the FILL carries the step's
   state: solid once the step is reachable, hollow while it is locked.
   Redundant encoding on purpose — .stub already says why a step is locked
   and .step-body is hidden; the badge only makes it visible at a glance. */
.step-h .num {
    display: inline-grid; place-items: center;
    width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; margin-right: 0;
    border: 1px solid var(--gray-900); border-radius: 50%;
    background: var(--gray-900); color: var(--white);
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
    line-height: 1;
}
/* --gray-500 on white is 4.83:1 — the digit still carries the number at
   AA. The ring is --gray-400 and decorative: nothing is stated by it
   alone. */
.step[data-state="locked"] .num {
    background: transparent; border-color: var(--gray-400); color: var(--gray-500);
}
/* Step bodies gate on a claim existing, but the headings never hide:
   the "there are three things" outline survives at ~40px, and a locked
   step cannot present a second green CTA or an invalid-state click. */
.stub {
    font-size: 0.85rem; color: var(--gray-500); font-style: italic;
    padding: var(--sp-2) 0 var(--sp-4);
}
.chip {
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
    padding: 0.2rem 0.6rem; border-radius: 999px;
    background: var(--gray-100); color: var(--gray-600); white-space: nowrap;
}
.countdown {
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
    font-variant-numeric: tabular-nums; padding: 0.2rem 0.6rem;
    border-radius: 999px; background: var(--gray-100); color: var(--gray-500);
    white-space: nowrap; transition: background 0.2s ease-out, color 0.2s ease-out;
}
.countdown:empty { display: none; }   /* no claim yet — an empty pill is noise */
.countdown[data-level="warn"]    { background: #fef3c7; color: var(--amber); }
.countdown[data-level="expired"] { background: #fef2f2; color: var(--red); }

/* --- page-level lede callouts (deliberately never collapsed) ------ */
/* rename.html's 30-day cooldown warning and delete.html's hard-delete
   danger box. Same exception as the trust bar below: progressive
   disclosure must not hide the irreversible constraint the page exists to
   warn about. guide.css gives these `margin: 1.25rem 0`, which is off the
   7-step scale and adds a top gap under the trust bar. */
main > .warning, main > .danger { margin: 0 0 var(--sp-4); }
noscript .status { margin: 0 0 var(--sp-5); }

/* --- trust bar (deliberately never collapsed) --------------------- */
.trustbar {
    border-left: 3px solid var(--green); background: var(--gray-50);
    padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
    font-size: 0.9rem; color: var(--gray-700);
}
.trustbar strong { color: var(--black); }
.trustbar details { margin-top: var(--sp-2); }
.trustbar summary {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    cursor: pointer; list-style: none; user-select: none;
    font-family: var(--font-mono); font-size: 0.75rem; color: var(--gray-500);
}
.trustbar summary:hover { color: var(--black); }
.trustbar details p {
    margin: var(--sp-2) 0 0; font-size: 0.85rem; color: var(--gray-600);
}

/* --- disclosure --------------------------------------------------- */
/* guide.css hides the <summary> marker and supplies no replacement, so
   the only affordance left was the literal words "click to expand". */
.disclosure { margin: var(--sp-4) 0; }
.disclosure > summary {
    display: flex; align-items: center; gap: var(--sp-2);
    cursor: pointer; list-style: none; user-select: none;
    font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em;
    color: var(--gray-500); padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--gray-200); border-radius: 6px;
    transition: border-color 0.15s ease-out, color 0.15s ease-out;
}
.disclosure > summary:hover { border-color: var(--gray-400); color: var(--black); }
.disclosure[open] > summary {
    color: var(--black); border-color: var(--gray-400);
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.disclosure-body {
    border: 1px solid var(--gray-400); border-top: 0; border-radius: 0 0 6px 6px;
    padding: var(--sp-4) var(--sp-4) var(--sp-2); background: var(--gray-50);
    font-size: 0.9rem; color: var(--gray-600);
}
.disclosure-body p, .disclosure-body ol, .disclosure-body ul { color: inherit; }
.disclosure-body > :first-child { margin-top: 0; }
.disclosure-body > :last-child { margin-bottom: var(--sp-2); }
/* guide.css gives table/pre a 1rem top margin tuned for a reading
   document; inside a disclosure body that is a dead band under the
   summary. */
.disclosure-body table, .disclosure-body pre { margin-top: 0; }
summary::-webkit-details-marker { display: none; }
.disclosure > summary::before,
.trustbar summary::before {
    content: ""; width: 8px; height: 8px; flex: 0 0 8px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg) translate(-1px, -1px);
    transition: transform 0.18s ease-out;
}
.disclosure[open] > summary::before,
.trustbar details[open] summary::before {
    transform: rotate(45deg) translate(-2px, -2px);
}
.disclosure > summary:focus-visible,
.trustbar summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* --- code box + copy affordance ----------------------------------- */
/* The header bar lives inside the same rounded, clipped container as the
   <pre>: one object, not a box with a toolbar bolted on. The button is a
   SIBLING of <pre> — pre carries overflow-x:auto, so an absolutely
   positioned child would scroll out of view horizontally. */
.codebox {
    position: relative; background: var(--gray-900); border-radius: 6px;
    overflow: hidden; margin: var(--sp-4) 0 var(--sp-5);
}
.codebox-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.codebox-tag {
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.04em; color: var(--gray-400);
}
/* The generated command is longer than the column. Wrap it rather than
   clipping or scrolling — a producer may retype it, and a half-visible
   command reads as a broken page. break-all because it is one long
   unbroken token-ish string with few spaces. */
.codebox > pre {
    margin: 0; border-radius: 0; background: transparent;
    white-space: pre-wrap; word-break: break-all;
}
/* A command and the field its output goes into are ONE object: the paste
   target sits directly under the box that prints it, and it is the pair
   that gets separated from whatever follows. Without this the codebox's own
   --sp-5 bottom margin opens a gap wider than the one inside a .field, and
   the two halves read as unrelated items rather than a step to perform.
   register.html only — rename.html and delete.html ask for one pasted
   signature each and have no second command to pair. */
.cmd-pair { margin-bottom: var(--sp-5); }
.cmd-pair > .codebox { margin-bottom: var(--sp-3); }
.cmd-pair > .field:last-child { margin-bottom: 0; }

.copy-btn {
    position: relative; display: grid; place-items: center;
    width: 32px; height: 32px; flex: 0 0 32px; padding: 0;
    background: transparent; border: 0; border-radius: 4px;
    color: var(--gray-500);           /* 3.91:1 on --gray-900, WCAG 1.4.11 */
    cursor: pointer;
    transition: color 0.15s ease-out, background 0.15s ease-out;
}
/* 44x44 effective hit area without 44px of visual chrome (WCAG 2.5.5) */
.copy-btn::after { content: ""; position: absolute; inset: -6px; }
.copy-btn:hover { color: var(--gray-100); background: rgba(255, 255, 255, 0.06); }
.copy-btn:active { transform: scale(0.94); }
.copy-btn:focus-visible {
    outline: 2px solid var(--green); outline-offset: 2px; color: var(--gray-100);
}
.copy-btn .ico { grid-area: 1 / 1; transition: opacity 0.12s ease-out; }
.copy-btn .ico-check { opacity: 0; }
.copy-btn[data-state="copied"] { color: var(--green); background: transparent; }
.copy-btn[data-state="copied"] .ico-copy  { opacity: 0; }
.copy-btn[data-state="copied"] .ico-check { opacity: 1; }
.copy-btn[data-state="copied"]:hover { color: var(--green); }
.copy-btn[data-state="error"] { color: var(--red); }

/* --- buttons ------------------------------------------------------ */
/* Exactly one filled green button is visible at any moment. */
.btn {
    font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500;
    padding: var(--sp-3) var(--sp-4); border-radius: 4px; cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.06em; width: 100%;
    transition: background 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.btn-primary {
    background: var(--green-700); border: 1px solid var(--green-700); color: var(--white);
}
.btn-primary:hover  { background: #166534; border-color: #166534; }
.btn-primary:active { background: #14532d; }
.btn-primary:disabled {
    background: var(--gray-300); border-color: var(--gray-300);
    color: var(--gray-600); cursor: not-allowed;
}
.btn-ghost {
    background: transparent; border: 1px solid var(--gray-300); color: var(--gray-700);
}
.btn-ghost:hover { border-color: var(--gray-500); color: var(--black); background: var(--gray-50); }

/* The destructive submit on delete.html. It occupies the same slot as
   .btn-primary — never both in one viewport — so the colour is the only
   thing saying "this one does not come back".
   Fill is --red-700 #b91c1c, not --red #dc2626: white on --red is 4.83:1,
   which clears AA by 0.33 with a 0.85rem uppercase label and no headroom.
   UX-P1-003 already caught a fill that looked obviously fine and measured
   3.30:1, so this one is measured: white on #b91c1c = 6.47:1.
   #b91c1c is not a new colour — it is already .status.err's text. */
.btn-danger {
    background: var(--red-700); border: 1px solid var(--red-700); color: var(--white);
}
.btn-danger:hover  { background: #991b1b; border-color: #991b1b; }   /* 8.31:1  */
.btn-danger:active { background: #7f1d1d; }                          /* 10.02:1 */
.btn-danger:disabled {
    background: var(--gray-300); border-color: var(--gray-300);
    color: var(--gray-600); cursor: not-allowed;
}
/* Green is the affirmative accent everywhere else; on this control it would
   contradict the action. #b91c1c on white = 6.47:1, well over the 3:1 that
   WCAG 1.4.11 asks of a focus indicator. */
.btn-danger:focus-visible { outline-color: var(--red-700); }

/* --- form controls ------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.field-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
}
.field-label { font-size: 0.9rem; font-weight: 600; color: var(--gray-900); }
/* `.field .from` — the ←A / ←B chips on register.html's two paste fields —
   is gone with the layout that needed it. Each field now sits directly
   under the command that fills it, so a token pointing back across a
   section is a cross-reference to something one line away. */
.counter {
    font-family: var(--font-mono); font-size: 0.75rem;
    font-variant-numeric: tabular-nums; color: var(--gray-400);
}
.counter[data-ok="1"] { color: var(--green); }
.counter[data-ok="0"] { color: var(--red); }
.hint { font-size: 0.8rem; color: var(--gray-500); line-height: 1.6; margin: 0; }
.field input, .field textarea, .field select {
    font-family: var(--font-mono); font-size: 0.85rem; padding: var(--sp-3);
    border: 1px solid var(--gray-500);   /* was --gray-300: 1.47:1, fails 1.4.11 */
    border-radius: 4px; background: var(--white); color: var(--gray-900); width: 100%;
}
.field textarea { min-height: 4.5em; resize: vertical; word-break: break-all; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
    outline: none; border-color: var(--green); box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.35);
}
.consent {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    font-size: 0.8rem; color: var(--gray-600);
    padding: var(--sp-2) 0; margin-bottom: var(--sp-4); cursor: pointer;
}
.consent input { margin-top: 0.25rem; flex: 0 0 auto; }

/* `.consent` styles the #f-ack acknowledgement on all three flow pages
   (register.html, rename.html, delete.html), where the tick acknowledges an
   irreversible act — not consent to processing. register.html's box came back
   in M5 (AUDIT-P3-009): it collects no personal identifier, so there is no
   Art. 6(1)(a) consent to obtain, but a claim that is immediate and permanent
   still needs a deliberate action in front of it, which is exactly what the two
   sibling flows already required. The paired `.consent-optional` / `.opt` rules
   that styled the second, optional mailing box are gone for good. */

/* --- registry lookup strip (rename.html, delete.html) -------------- */
/* Lives inside the pubkey .field, under its hint, so "what you are
   changing FROM" stays visible while you type what you are changing TO.
   A left-accent callout, not a bordered rounded box — with an input's
   chrome it reads as a second, disabled text field. */
.lookup {
    font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.55;
    padding: var(--sp-2) var(--sp-3); margin: var(--sp-1) 0 0;
    background: var(--gray-50); border-left: 3px solid var(--gray-300);
    color: var(--gray-600);
}
.lookup.ok     { background: #f0fdf4; border-left-color: var(--green); color: #15803d; }
/* delete.html only: on that page a hit IS the destructive outcome, so a
   found registration is red, not green. */
.lookup.danger { background: #fef2f2; border-left-color: var(--red);   color: #b91c1c; }
.lookup.warn   { background: #fefce8; border-left-color: var(--amber); color: #a16207; }

/* --- status ------------------------------------------------------- */
.status {
    margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: 4px;
    font-family: var(--font-mono); font-size: 0.8rem; display: none;
}
.status.show { display: block; }
.status:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.status.ok      { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.status.pending { background: #fefce8; border: 1px solid #fde68a; color: #a16207; }
.status.err     { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
code.inline {
    font-family: var(--font-mono); font-size: 0.8rem; background: var(--gray-100);
    padding: 0.1em 0.3em; border-radius: 2px;
}
/* A 64-char pubkey and a 128-char signature get echoed back to the producer
   inside these callouts as <code>, and at 375px an unbroken one pushes the
   whole document sideways. Scoped to the <code> spans and NOT the prose:
   break-all on a sentence breaks ordinary words mid-syllable. */
.lookup code, .note code, .warning code, .danger code, .status code {
    word-break: break-all;
}

@media (max-width: 600px) {
    :root { --sp-6: 1.5rem; --sp-7: 2rem; }
    .codebox-head { padding: var(--sp-2); }
    .codebox-tag { font-size: 0.7rem; }
    .copy-btn { width: 30px; height: 30px; flex: 0 0 30px; }
    .copy-btn::after { inset: -7px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .logo-mark { animation: none; }
    .copy-btn, .copy-btn .ico, .countdown, .btn,
    .disclosure > summary, .disclosure > summary::before,
    .trustbar summary::before { transition-duration: 0s; }
    .copy-btn:active { transform: none; }
}