/* Copyright Nige Ltd. Author: Nigel Hamilton. */
/* Minimal starter styles. Replace with your brand system. */
:root {
    --ink: #1A2240;
    --muted: #556;
    --accent: #4338CA;
    --bg: #F4F5F7;
    --paper: #FFFFFF;
    --line: #E4E4EE;
    --error: #C0392B;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
}
a { color: var(--accent); }

.nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 22px; background: var(--paper); border-bottom: 1px solid var(--line);
}
.nav__brand { font-weight: 800; text-decoration: none; color: var(--ink); }
.nav__links { display: flex; align-items: center; gap: 14px; }
.nav__link { text-decoration: none; }
.nav__email { color: var(--muted); font-size: 14px; }
.nav__inline { margin: 0; }

.shell { max-width: 760px; margin: 0 auto; padding: 32px 22px; }
.foot { text-align: center; color: var(--muted); font-size: 13px; padding: 32px 0; }

.hero { text-align: center; padding: 48px 0; }
.hero__lead { color: var(--muted); font-size: 18px; }
.hero__cta { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }

.card {
    background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
    padding: 28px;
}
.card--narrow { max-width: 420px; margin: 0 auto; }
.card__alt { color: var(--muted); font-size: 14px; margin-top: 16px; }
.card label { display: block; margin: 14px 0; font-weight: 600; }
.card input {
    display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 8px; font-size: 16px;
}

.btn {
    display: inline-block; background: var(--accent); color: #fff;
    border: 0; border-radius: 999px; padding: 10px 20px; font-weight: 700;
    text-decoration: none; cursor: pointer; font-size: 15px;
}
.btn--ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn--lg { padding: 13px 26px; font-size: 16px; }

.flash {
    background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46;
    border-radius: 10px; padding: 12px 16px; margin-bottom: 20px;
}
.error { color: var(--error); font-weight: 600; }
/* 321-web-ux additions - append to the baseline public/css/app.css. Reuses its
   custom properties (--ink --muted --accent --bg --paper --line --error) so the
   look stays one family. Adds: breadcrumbs, wizard progress, button hierarchy,
   and a couple of flash tones. */

/* Breadcrumbs - the user's map. Quiet, one line, above the h1. */
.crumbs { margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Wizard progress - "Step 2 of 3", one decision per step. */
.wizard__step { font-size: 13px; color: var(--muted); letter-spacing: .04em;
    text-transform: uppercase; margin: 0 0 6px; }
.wizard__bar { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; margin: 0 0 20px; }
.wizard__bar > span { display: block; height: 100%; background: var(--accent); transition: width .2s; }

/* Button hierarchy - exactly one primary per page. .btn (baseline) IS primary. */
.btn--danger { background: var(--error); color: #fff; }
.btn--danger:hover { filter: brightness(.94); }
.btn-row { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
/* Secondary action sits as a quiet link next to the primary, not a rival button. */
.btn-row .cancel { color: var(--muted); text-decoration: none; }
.btn-row .cancel:hover { text-decoration: underline; }

/* Flash tones. Baseline .flash is the neutral/notice tone; these two extend it. */
.flash--success { border-left: 4px solid var(--accent); }
.flash--warn { border-left: 4px solid var(--error); }

/* Field-level error, shown next to the input on re-render (input kept). */
.field-error { display: block; color: var(--error); font-weight: 600; font-size: 14px; margin-top: 6px; }
.card input.is-error { border-color: var(--error); }

/* Registry projects list + draft card preview */
.projects { list-style: none; margin: 0 0 8px; padding: 0; }
.projects__row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.projects__meta { display: block; font-size: 14px; color: var(--muted); }
.cardpreview { border: 1px solid var(--line); border-radius: 8px;
    padding: 18px 20px; margin: 16px 0 24px; background: var(--paper); }
.cardpreview__badge { display: inline-block; font-size: 13px; color: var(--muted);
    letter-spacing: .04em; text-transform: uppercase; margin: 0 0 8px; }
.choices label { display: block; font-weight: 400; margin: 6px 0; }
.choices legend { font-weight: 600; }

/* landing "how it works" list */
.uses { list-style: none; margin: 0 0 12px; padding: 0; }
.uses li { padding: 8px 0 8px 1.4em; position: relative; }
.uses li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 600; }
.projects__changes { color: var(--accent); }