/* ---------- design tokens ---------- */
:root {
    --ink:        #0e0d0c;
    --ink-2:      #181513;
    --ink-3:      #211d1a;
    --line:       #2d2723;
    --line-2:     #3a322c;
    --cream:      #f4ede4;
    --cream-dim:  #c2b8ab;
    --cream-mute: #897e72;
    --amber:      #e89c3a;
    --amber-deep: #c47b1d;
    --mint:       #9ed8a8;
    --coral:      #e26d5c;

    --serif:      'Fraunces', 'Iowan Old Style', 'Palatino', serif;
    --sans:       'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono:       'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

    --radius:     6px;
    --radius-lg:  12px;
    --shadow:     0 1px 0 rgba(255,255,255,0.03) inset, 0 18px 40px -20px rgba(0,0,0,0.5);
    --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--ink);
    color: var(--cream);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    background-image:
        radial-gradient(ellipse 600px 400px at 80% -10%, rgba(232,156,58,0.08), transparent 60%),
        radial-gradient(ellipse 800px 500px at -10% 110%, rgba(158,216,168,0.04), transparent 60%);
    background-attachment: fixed;
}
code, pre { font-family: var(--mono); font-size: 0.92em; }

/* ---------- masthead ---------- */
.masthead {
    border-bottom: 1px solid var(--line);
    padding: 1.4rem 2rem;
}
.masthead-inner {
    max-width: 880px; margin: 0 auto;
    display: flex; align-items: baseline; justify-content: space-between;
}
.brand { display: flex; align-items: baseline; gap: 0.55rem; }
.mark { color: var(--amber); font-size: 1.3rem; transform: translateY(2px); display: inline-block; }
.brand-name { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.01em; }
.brand-name em { font-style: normal; color: var(--amber); margin: 0 0.1em; }
.masthead-meta {
    font-family: var(--mono); font-size: 0.72rem; color: var(--cream-mute);
    text-transform: uppercase; letter-spacing: 0.14em;
}

/* ---------- wizard layout ---------- */
.wizard { max-width: 720px; margin: 0 auto; padding: 3.5rem 1.5rem 4rem; }

/* ---------- progress rail ---------- */
.rail {
    list-style: none; padding: 0; margin: 0 0 3rem 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    position: relative; counter-reset: rail;
}
.rail:has(.rail-step[hidden]) { grid-template-columns: repeat(2, 1fr); }
.rail-step[hidden] { display: none; }
.rail::before {
    content: ''; position: absolute;
    left: 14%; right: 14%; top: 14px;
    height: 1px; background: var(--line);
    z-index: 0;
}
.rail-step {
    display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
    position: relative; z-index: 1;
    color: var(--cream-mute);
    transition: color var(--transition);
}
.rail-step span {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--ink-2);
    border: 1px solid var(--line);
    display: grid; place-items: center;
    font-family: var(--mono); font-size: 0.7rem;
    transition: all var(--transition);
}
.rail-step em {
    font-style: normal;
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
    text-transform: uppercase;
}
.rail-step.is-active { color: var(--cream); }
.rail-step.is-active span {
    background: var(--amber); color: var(--ink); border-color: var(--amber); font-weight: 500;
    box-shadow: 0 0 0 4px rgba(232,156,58,0.15);
}
.rail-step.is-done { color: var(--cream-dim); }
.rail-step.is-done span {
    background: var(--ink-2); border-color: var(--amber-deep); color: var(--amber);
}

/* ---------- step ---------- */
.step { display: none; animation: fadeIn 360ms cubic-bezier(0.2,0.7,0.3,1); }
.step.is-active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.eyebrow {
    font-family: var(--mono); font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--amber); margin: 0 0 0.6rem 0;
}
h1 {
    font-family: var(--serif);
    font-size: clamp(2rem, 4.6vw, 2.7rem);
    font-weight: 400; line-height: 1.1; letter-spacing: -0.02em;
    margin: 0 0 0.9rem 0;
}
.lede {
    color: var(--cream-dim); font-size: 1.02rem; line-height: 1.6;
    margin: 0 0 2.2rem 0; max-width: 56ch;
}
.lede code, .lede strong { color: var(--cream); }
.lede code { font-size: 0.92em; }

/* ---------- form ---------- */
.form { display: flex; flex-direction: column; gap: 1.4rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-label {
    font-family: var(--mono); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--cream-dim);
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.counter { font-size: 0.68rem; color: var(--cream-mute); letter-spacing: 0.1em; }
.counter.is-warn { color: var(--amber); }
.counter.is-over { color: var(--coral); }

.field input[type="text"],
.field input[type="url"],
.field textarea {
    width: 100%;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    color: var(--cream);
    font-family: var(--sans); font-size: 1rem;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--amber);
    background: var(--ink-3);
    box-shadow: 0 0 0 3px rgba(232,156,58,0.15);
}
.field input::placeholder, .field textarea::placeholder {
    color: var(--cream-mute); opacity: 0.55;
}
.field textarea { resize: vertical; min-height: 80px; font-family: var(--sans); }
#pool_id { font-family: var(--mono); font-size: 0.92rem; }

.field-hint {
    font-size: 0.82rem; color: var(--cream-mute);
}
.field-hint.detect-bech { color: var(--mint); }
.field-hint.detect-hex  { color: var(--amber); }
.field-hint.detect-bad  { color: var(--coral); }

/* ---------- buttons ---------- */
.actions { display: flex; gap: 0.8rem; align-items: center; margin-top: 0.5rem; }
.btn {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.78rem 1.3rem;
    border-radius: var(--radius);
    font-family: var(--sans); font-size: 0.95rem; font-weight: 500;
    border: 1px solid transparent; cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}
.btn-primary {
    background: var(--amber); color: var(--ink); border-color: var(--amber);
}
.btn-primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost {
    background: transparent; color: var(--cream-dim); border-color: var(--line-2);
}
.btn-ghost:hover { color: var(--cream); border-color: var(--cream-mute); }

.form-error, .form-warning {
    margin: 0; padding: 0.7rem 0.95rem;
    border-radius: var(--radius); font-size: 0.9rem;
    border: 1px solid;
}
.form-error   { color: var(--coral); border-color: rgba(226,109,92,0.4); background: rgba(226,109,92,0.07); }
.form-warning { color: var(--amber); border-color: rgba(232,156,58,0.4); background: rgba(232,156,58,0.07); }

/* ---------- onchain card ---------- */
.onchain-card, .result-card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.2rem 1.3rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow);
}
.onchain-row, .result-row {
    display: grid; grid-template-columns: 130px 1fr;
    gap: 1rem; padding: 0.55rem 0;
    border-bottom: 1px dashed var(--line);
    align-items: center;
}
.onchain-row:last-child, .result-row:last-child { border-bottom: 0; }
.onchain-key, .result-key {
    font-family: var(--mono); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--cream-mute);
}
.onchain-val, .result-val {
    color: var(--cream);
    font-family: var(--mono); font-size: 0.86rem;
    word-break: break-all; line-height: 1.4;
}
.mono-tight { letter-spacing: -0.01em; }
.pill {
    display: inline-block; padding: 0.18rem 0.55rem;
    background: var(--ink-3); border: 1px solid var(--line-2);
    border-radius: 100px; font-family: var(--mono);
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--cream-dim);
}

.result-val-wrap { display: flex; gap: 0.6rem; align-items: flex-start; }
.result-val-wrap .result-val { flex: 1; }
.copy {
    background: transparent; border: 1px solid var(--line-2); color: var(--cream-mute);
    padding: 0.25rem 0.55rem; border-radius: 4px; cursor: pointer;
    font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all var(--transition); flex-shrink: 0;
}
.copy:hover { color: var(--amber); border-color: var(--amber-deep); }
.copy.is-copied { color: var(--mint); border-color: var(--mint); }

/* ---------- cli block ---------- */
.cli-block {
    margin: 1.5rem 0 2rem 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ink-2);
}
.cli-block summary {
    cursor: pointer;
    padding: 0.7rem 1rem;
    font-family: var(--mono); font-size: 0.78rem;
    color: var(--cream-dim);
    text-transform: uppercase; letter-spacing: 0.12em;
    list-style: none;
}
.cli-block summary::-webkit-details-marker { display: none; }
.cli-block summary::before { content: '+ '; color: var(--amber); }
.cli-block[open] summary::before { content: '− '; }
.cli {
    margin: 0; padding: 1rem 1.2rem;
    background: var(--ink); color: var(--cream);
    border-top: 1px solid var(--line);
    overflow-x: auto; font-size: 0.82rem; line-height: 1.6;
}

/* ---------- footnote ---------- */
.footnote {
    max-width: 720px; margin: 0 auto; padding: 0 1.5rem 3rem;
    color: var(--cream-mute); font-size: 0.82rem; line-height: 1.6;
    border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 2rem;
}
.footnote p { margin: 0; max-width: 60ch; }
.footnote code, .footnote strong { color: var(--cream-dim); }

/* ---------- mobile ---------- */
@media (max-width: 540px) {
    .masthead { padding: 1rem 1.2rem; }
    .wizard { padding: 2rem 1.2rem 3rem; }
    .onchain-row, .result-row { grid-template-columns: 1fr; gap: 0.3rem; }
    .actions { flex-wrap: wrap; }
    .rail-step em { display: none; }
}

/* =====================================================================
   Path-selection cards (Step 0)
   ===================================================================== */
.path-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    margin: 1rem 0 2.4rem;
}
.path-card {
    appearance: none;
    -webkit-appearance: none;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.4rem 1.3rem;
    color: var(--cream);
    text-align: left;
    cursor: pointer;
    display: flex; flex-direction: column;
    gap: 0.85rem;
    box-shadow: var(--shadow);
    transition: transform var(--transition), border-color var(--transition),
                background var(--transition), box-shadow var(--transition);
    font: inherit;
    position: relative;
    overflow: hidden;
}
.path-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 220px 160px at 90% -20%, var(--accent-glow, transparent), transparent 70%);
    opacity: 0.7; pointer-events: none;
    transition: opacity var(--transition);
}
.path-card--create { --accent: var(--amber);     --accent-glow: rgba(232,156,58,0.18); }
.path-card--edit   { --accent: var(--mint);      --accent-glow: rgba(158,216,168,0.16); }

.path-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    background: var(--ink-3);
}
.path-card:hover::before { opacity: 1; }
.path-card:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent), var(--shadow);
}

.path-icon {
    color: var(--accent);
    display: inline-flex;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 10%, var(--ink));
    align-items: center; justify-content: center;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
}
.path-title {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0;
    letter-spacing: -0.01em;
}
.path-bullets {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.35rem;
    color: var(--cream-dim); font-size: 0.94rem; line-height: 1.5;
    flex: 1;
}
.path-bullets li {
    position: relative; padding-left: 1.1rem;
}
.path-bullets li::before {
    content: ''; position: absolute;
    left: 0; top: 0.55em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent);
}
.path-cta {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--mono); font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--accent);
    margin-top: 0.4rem;
}
.path-card:hover .path-cta svg { transform: translateX(3px); }
.path-cta svg { transition: transform var(--transition); }

.path-footnote {
    margin: 0;
    color: var(--cream-mute);
    font-size: 0.86rem;
    line-height: 1.55;
    padding: 0.85rem 1.05rem;
    border: 1px dashed var(--line-2);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.012);
    display: flex; align-items: center; gap: 0.7rem;
}
.path-footnote strong { color: var(--mint); font-weight: 500; }
.path-pip {
    color: var(--amber); font-size: 1rem; flex-shrink: 0;
}

@media (max-width: 620px) {
    .path-grid { grid-template-columns: 1fr; gap: 0.9rem; }
}

/* =====================================================================
   Field groups + sub-groups
   ===================================================================== */
.field-group {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.2rem 1.3rem 1.4rem;
    margin: 0;
    display: flex; flex-direction: column; gap: 1.2rem;
    background: rgba(255, 255, 255, 0.01);
}
.field-group-legend {
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--amber);
    padding: 0 0.5rem;
    margin-left: -0.5rem;
}
.field-group-hint {
    margin: -0.6rem 0 0; padding: 0;
    color: var(--cream-mute); font-size: 0.84rem; line-height: 1.55;
    max-width: 60ch;
}
.field-group-hint code {
    background: var(--ink-3);
    padding: 0.05rem 0.32rem;
    border-radius: 3px;
    font-size: 0.85em;
    color: var(--cream-dim);
}

.field-group--sub {
    border-color: var(--line-2);
    border-style: solid;
    background: rgba(0, 0, 0, 0.18);
    padding: 1rem 1.1rem 1.2rem;
}
.field-group--sub .field-group-legend { color: var(--mint); }

/* Two-up field rows */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}
@media (max-width: 540px) {
    .field-row { grid-template-columns: 1fr; }
}

/* Smaller field variant (used inside field-row, and for selects) */
.field--small input, .field--small select {
    padding: 0.7rem 0.85rem;
    font-size: 0.95rem;
}

/* select element styling — match input styling */
.field select {
    width: 100%;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    color: var(--cream);
    font-family: var(--sans); font-size: 1rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23897e72' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    padding-right: 2.4rem;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}
.field select:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(232,156,58,0.15);
}
.field input[type="email"] {
    width: 100%;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    color: var(--cream);
    font-family: var(--sans); font-size: 1rem;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.field input[type="email"]:focus {
    outline: none;
    border-color: var(--amber);
    background: var(--ink-3);
    box-shadow: 0 0 0 3px rgba(232,156,58,0.15);
}
.field input[type="email"]::placeholder { color: var(--cream-mute); opacity: 0.55; }

.field-label code {
    color: var(--mint);
    font-family: var(--mono);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.78rem;
}

/* =====================================================================
   Disclosure (Add extended metadata)
   ===================================================================== */
.disclosure {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg,
        rgba(158, 216, 168, 0.045) 0%,
        rgba(158, 216, 168, 0.015) 100%);
    overflow: hidden;
    transition: border-color var(--transition), background var(--transition);
}
.disclosure.is-open {
    border-color: color-mix(in srgb, var(--mint) 35%, var(--line));
}

.disclosure-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    border: 0; padding: 1rem 1.2rem;
    display: flex; align-items: flex-start; gap: 0.85rem;
    color: var(--cream);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background var(--transition);
}
.disclosure-toggle:hover { background: rgba(158, 216, 168, 0.04); }
.disclosure-toggle:focus-visible {
    outline: none; background: rgba(158, 216, 168, 0.06);
    box-shadow: inset 0 0 0 1px var(--mint);
}

.disclosure-chev {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 22px; height: 22px;
    margin-top: 1px;
    color: var(--mint);
    transition: transform var(--transition);
    flex-shrink: 0;
}
.disclosure.is-open .disclosure-chev { transform: rotate(90deg); }

.disclosure-text {
    display: flex; flex-direction: column; gap: 0.15rem; flex: 1;
}
.disclosure-title {
    font-family: var(--serif); font-size: 1.05rem; font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--cream);
}
.disclosure-sub {
    font-size: 0.86rem; color: var(--cream-mute); line-height: 1.5;
}

.advanced {
    padding: 0 1.2rem 1.4rem;
    display: flex; flex-direction: column; gap: 1.2rem;
    border-top: 1px solid var(--line);
    margin-top: 0.2rem;
    padding-top: 1.2rem;
    animation: discFadeIn 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes discFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.advanced-intro {
    margin: 0; padding: 0;
    font-size: 0.88rem; line-height: 1.55;
    color: var(--cream-dim);
    max-width: 60ch;
}
.advanced-intro a {
    color: var(--mint);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--mint) 40%, transparent);
    text-underline-offset: 2px;
}
.advanced-intro a:hover { text-decoration-color: var(--mint); }
.advanced-intro code {
    background: var(--ink-3);
    padding: 0.05rem 0.32rem;
    border-radius: 3px;
    color: var(--cream);
}

/* =====================================================================
   Result cards — kind tag + extended variant
   ===================================================================== */
.result-card { margin-bottom: 1.2rem; }
.result-card:last-of-type { margin-bottom: 2rem; }

.result-card-header {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 0.7rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
}
.result-card-kind {
    font-family: var(--mono); font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--amber);
}
#result-extended .result-card-kind { color: var(--mint); }
.result-card-tag {
    font-family: var(--mono); font-size: 0.72rem;
    color: var(--cream-mute); letter-spacing: 0.05em;
}

.result-foot {
    margin: 0.8rem 0 0; padding: 0.6rem 0.85rem;
    background: rgba(158, 216, 168, 0.06);
    border: 1px dashed color-mix(in srgb, var(--mint) 30%, var(--line));
    border-radius: var(--radius);
    color: var(--cream-dim); font-size: 0.84rem; line-height: 1.5;
}
.result-foot code {
    color: var(--mint);
    background: transparent;
}

.quota-line {
    margin: 1.2rem 0;
    font-family: var(--mono); font-size: 0.78rem;
    color: var(--cream-mute); letter-spacing: 0.04em;
    padding: 0.55rem 0.85rem;
    border-left: 2px solid var(--line-2);
}