/* Copyright Nige Ltd. Author: Nigel Hamilton. */
/* iz4.you design system, in the direction of the IZ4 mark: the diamond on
   its alignment frame, ink #1c1a17 on warm paper #f5f1e8, and one green
   accent, the colour of the QR-shaped diamond inside the mark. Fonts: Inter
   Tight (display), Inter (body), JetBrains Mono (file text and commands
   only). */
:root {
    --ink: #1c1a17;           /* the identity's near-black */
    --heading: #1c1a17;
    --muted: #6b665c;         /* ink, faded into the paper */
    --accent: #1f9156;        /* the one accent: the identity's green, for links, buttons and the i's dot */
    --accent-ink: #156f41;    /* the same green, deep enough for text on paper */
    --accent-fill: #156f41;   /* green behind white text: 6.2 to 1, readable at any size */
    --accent-hover: #11603a;  /* deeper still on hover: 7.6 to 1 */
    --on-accent: #ffffff;     /* text on a green fill is white, for readability */
    --accent-soft: #e3f0e6;   /* green faded into the paper */
    --dark-accent: #7fe0a3;   /* mint: the green on ink */
    --bg: #f5f1e8;            /* the identity's warm paper */
    --paper: #f5f1e8;
    --line: rgba(28, 26, 23, .18);
    --error: #b3402f;

    --dark: #1c1a17;          /* the inverted panels are ink */
    --dark-rule: rgba(245, 241, 232, .22);
    --dark-text: #f5f1e8;
    --dark-muted: rgba(245, 241, 232, .68);

    --display: "Inter Tight", "Inter", system-ui, sans-serif;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
    --r: 0px;                 /* the mark has no rounded corner; nor does the site */
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main.shell { flex: 1 0 auto; width: 100%; }
h1, h2, h3 { font-family: var(--display); color: var(--heading); letter-spacing: -0.018em; text-wrap: balance; }
h1 { font-weight: 600; }
h2, h3 { font-weight: 600; }
code, pre, .mono { font-family: var(--mono); }
a { color: var(--accent-ink); }

.nav {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px 18px; padding: 16px 22px; background: var(--dark); color: var(--dark-text);
}
.nav__brand { display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--dark-text); }
.nav__tag { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-decoration: none;
    text-transform: lowercase; color: var(--dark-muted); }
.nav__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.nav__link { white-space: nowrap; }
.nav__link { text-decoration: none; color: var(--dark-text); }
.nav__link:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: .2em; }
.nav .btn--ghost { color: var(--accent-ink); border-color: var(--accent); }
.nav__email { color: var(--dark-muted); font-size: 14px; }
.nav__inline { margin: 0; }

.shell { max-width: 1020px; margin: 0 auto; padding: 32px 22px; }
/* the ported site pages keep their original 72rem measure */
.shell--wide { max-width: 72rem; padding-inline: 1.25rem; }
.measure { max-width: 760px; margin-left: auto; margin-right: auto; }

/* full-width dark bands inside the constrained shell (iz4.you .bleed) */
.bleed { position: relative; z-index: 0; isolation: isolate; }
.bleed::before { content: ""; position: absolute; top: 0; bottom: 0;
    left: 50%; width: 100vw; transform: translateX(-50%);
    background: var(--dark); z-index: -1; }
.foot { background: var(--dark); color: var(--dark-muted); font-size: 13px;
    padding: 34px 22px 30px; margin-top: 56px; text-align: center; }
.foot a { color: var(--dark-text); }
.foot__line { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
    text-transform: lowercase; margin: 8px 0 14px; }

.hero { text-align: left; padding: 64px 0 56px; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1.08; max-width: 20ch; margin: 0 0 18px; }
.hero__lead { color: var(--muted); font-size: 19px; line-height: 1.55; max-width: 36rem; margin: 0 0 12px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin-top: 26px; }
.hero--dark { color: var(--dark-text); margin-top: -32px; padding: 72px 0 64px; }
.hero--dark h1 { color: var(--dark-text); }
.hero--dark .hero__lead { color: var(--dark-muted); }
.hero--dark .btn--ghost { color: var(--dark-text); border-color: var(--dark-rule); }
/* the eyebrow is a plain, friendly line above a heading: no mono, no caps */
.eyebrow { font-family: var(--sans); font-size: 1rem; font-weight: 500; letter-spacing: 0;
    text-transform: none; color: var(--dark-accent); margin: 0 0 14px; }
.hero--dark em, .hero em { font-style: italic; }

/* landing composition: text + the device art */
.hero__art { margin: 34px auto 0; width: min(240px, 60vw); }
.hero__art img { width: 100%; display: block; background: var(--bg);
    border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.hero__art figcaption { font-size: .85rem; color: var(--dark-muted); margin-top: 12px; }

/* three-up feature grid */
.grid3 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin: 26px 0; }
.grid3 .card h3 { margin-top: 0; font-size: 1.08rem; margin-bottom: 8px; }
.grid3 .card p { color: var(--muted); font-size: .97rem; margin: 0; }

.card {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
    padding: 26px 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-fill); color: var(--on-accent);
    border: 0; border-radius: var(--r); padding: 10px 20px; font-weight: 600;
    text-decoration: none; cursor: pointer; font-size: 15px;
    font-family: var(--sans);
}
/* Hover never hides the label: solid buttons darken, ghost buttons tint.
   A ghost button must not take the solid hover background, or its accent
   text sits on an accent background and disappears. */
.btn:not(.btn--ghost):not(.btn--danger):hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; color: var(--accent-ink); border: 1px solid var(--accent); }
.btn--ghost:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-ink); }
.hero--dark .btn--ghost:hover { background: transparent; color: var(--dark-text); border-color: var(--dark-accent); }
.btn--lg { padding: 13px 26px; font-size: 16px; }

.flash {
    background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent-ink);
    border-radius: var(--r); 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: var(--on-accent); }
.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-top: 3px solid var(--accent);
    border-radius: 10px; padding: 22px 24px; margin: 16px 0 24px;
    background: var(--paper); box-shadow: 0 8px 26px rgba(11, 18, 32, .06); }
.cardpreview__badge { display: inline-block; font-size: 14px; color: var(--muted); 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); }

/* pricing tiers */
.pricing { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    align-items: start; margin: 8px 0 26px; }
.price { display: flex; flex-direction: column; }
.price h2 { margin-top: 0; font-size: 1.15rem; }
.price__amount { font-family: var(--display); font-size: 1.55rem; font-weight: 600; color: var(--heading); margin: 0 0 4px; }
.price .btn-row { margin-top: auto; padding-top: 10px; }
.price--featured { border-color: var(--accent); box-shadow: 0 10px 30px rgba(28, 26, 23, .12); position: relative; }
.price__flag { position: absolute; top: -12px; left: 22px; background: var(--accent-fill);
    color: var(--on-accent); font-size: .8rem; font-weight: 600; padding: 3px 12px; border-radius: 999px; }
.price__per { font-size: .85rem; color: var(--muted); font-weight: 400; }

/* invariant zero statement */
.zero { text-align: center; border-top: 3px solid var(--heading); }
.zero__label { font-size: .9rem; color: var(--muted); margin: 0 0 6px; }
.zero h2 { font-size: 1.6rem; margin: 0 0 10px; }

/* benefits: card sections with a call to action */
.benefits { margin-top: 8px; }
.section-title { text-align: left; font-size: 1.55rem; margin: 48px 0 8px; }
.section-lead { text-align: left; color: var(--muted); max-width: 40em; font-size: 1.05rem;
    margin: 0 0 8px; }
.benefits .grid3 { margin-top: 18px; }
.cta-band { text-align: left; border-top: 1px solid var(--line);
    margin-top: 44px; padding-top: 8px; }

/* ------------------------------------------------------------- the layout
   A plain top bar and footer on the paper, ruled off from the page. The
   header carries the lockup; the footer the master mark with its clear
   space. Inverted panels (heroes, the card ring) are ink. */
:root { --window-max: 1320px; }
html { background: var(--bg); }
/* a short page keeps its footer at the base of the viewport: the body is a
   column, the window grows to fill it, and the footer follows */
body { background: var(--bg); display: flex; flex-direction: column; min-height: 100vh; }
.window { display: block; width: 100%; max-width: var(--window-max); margin: 0 auto; background: var(--bg); flex: 1 0 auto; }
.foot { margin-top: auto; }
.nav {
    position: static; padding: 14px 22px; background: var(--bg); color: var(--ink);
    gap: 10px 18px; flex-wrap: wrap; border-bottom: 1px solid var(--line);
}
.nav__brand { display: block; line-height: 0; color: var(--ink); }
/* the lockup: declared mark and green-dot wordmark, width by clamp, never under 96 px */
.nav__lockup { display: block; width: clamp(120px, 14vw, 170px); height: auto; }
.nav__links { gap: 6px 14px; }
.nav__link { font-size: 15px; color: var(--ink); }
.nav__email { color: var(--muted); }
.nav .btn { padding: 8px 14px; font-size: 14px; }
@media (max-width: 720px) {
    .nav { padding: 12px 14px; }
    .nav__email, .nav__link--secondary { display: none; }
    .nav__link { font-size: 13px; }
    .nav .btn { padding: 6px 10px; font-size: 13px; }
}
/* the footer is reversed: paper on ink; the declared mark drawn in paper, its green centre unchanged */
.foot {
    position: static; margin: 56px 0 0; padding: 40px 22px 30px; background: var(--dark);
    font-size: 14px; color: var(--dark-muted); text-align: left; border-top: 0;
}
.foot__cols { display: grid; gap: 28px 32px; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    max-width: var(--window-max); margin: 0 auto; }
.foot__brand { margin: 0; display: flex; align-items: center; color: var(--dark-text); }
.foot__brand a { color: inherit; }
/* the mono mark at 96 px, clear space one corner loop (9 % of its size) */
.foot__mark { display: block; width: 96px; height: 96px; opacity: 1; padding: calc(96px * .09); box-sizing: content-box; }
.foot__tag { margin: 6px 0 0; max-width: 24rem; line-height: 1.5; }
.foot__h { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--dark-text); margin: 8px 0 10px; }
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot__legal { max-width: var(--window-max); margin: 28px auto 0; padding-top: 16px; border-top: 1px solid var(--dark-rule);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 12.5px; }
.foot__legal p, .foot__legal address { margin: 0; font-style: normal; }
.foot a { color: var(--dark-text); text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: var(--dark-accent); text-decoration: underline; }
@media (max-width: 860px) { .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot__col--brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot { padding: 28px 16px 22px; } .foot__cols { grid-template-columns: 1fr 1fr; } }
main [id] { scroll-margin-top: 16px; }
/* the essay: one column of prose */
.essay h2 { margin-top: 1.8em; }
.essay h2:first-child { margin-top: 0; }
.essay p, .essay li { font-size: 17px; line-height: 1.65; }
.essay__list { margin: 0 0 12px; padding-left: 1.2em; }
.essay__list li { padding: 6px 0; }
.essay__sig { margin-top: 28px; }
/* the heroes meet the top bar: cancel the shell's top padding */
.shell { padding-top: 28px; }
.hero--dark { margin-top: -28px; }
.site { margin-top: -28px; }
@media (max-width: 720px) {
    .shell { padding-inline: 14px; }
    .hero { padding: 40px 0 36px; }
    .hero--dark { padding: 44px 0 40px; }
    .hero h1 { font-size: 1.75rem; }
    .hero__lead { font-size: 16px; }
    .price__amount { font-size: 1.35rem; }
}

/* the pricing cards sit clear of the hero, with room for the "most teams" flag */
.pricing { margin-top: 44px; }
@media (max-width: 720px) { .pricing { margin-top: 32px; } }

/* ---------------------------------------------------------- the action panel
   Easy actuation: on a page whose job is a form, the form owns the page. A
   dark band carries the step (as the device's band carries IZ4), the
   heading names the task, fields are tall with a strong focus ring, and the
   one primary button is full width and says what it does. */
.action {
    max-width: 560px; margin: clamp(8px, 5vh, 56px) auto 24px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 20px 48px rgba(0, 0, 0, .10);
}
.action [hidden] { display: none !important; }
.action__band {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: var(--dark); color: var(--dark-muted); padding: 13px 32px;
    font-size: 14px;
}
.action__band strong { color: var(--dark-accent); font-weight: 500; }
.action__body { padding: 36px 32px 32px; }
.action h1 {
    font-family: var(--display); font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1.05;
    letter-spacing: -.025em; margin: 0 0 10px; text-wrap: balance;
}
.action__lead { font-size: 17px; color: var(--muted); margin: 0 0 26px; }
.action__lead strong { color: var(--heading); }
.action form { display: grid; gap: 20px; margin: 0; }
.action label { display: grid; gap: 8px; margin: 0; font-weight: 600; font-size: 15px; color: var(--heading); }
.action input[type="email"], .action input[type="text"] {
    width: 100%; height: 58px; padding: 0 16px; margin: 0;
    font: 400 18px var(--sans); color: var(--heading); background: var(--bg);
    border: 2px solid rgba(28, 26, 23, .35); border-radius: 12px; transition: border-color .15s, box-shadow .15s;
}
.action input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.action input::placeholder { color: var(--muted); }
.field-prefix {
    display: flex; align-items: center; background: var(--bg);
    border: 2px solid rgba(28, 26, 23, .35); border-radius: 12px; transition: border-color .15s, box-shadow .15s;
}
.field-prefix:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field-prefix > span { padding-left: 16px; font: 500 17px var(--mono); color: var(--muted); white-space: nowrap; }
.action .field-prefix input { border: 0; box-shadow: none; height: 54px; padding-left: 1px; font-family: var(--mono); font-size: 17px; }
.action__hint { font-weight: 400; font-size: 14px; color: var(--muted); }
.action .btn--go {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 58px; margin-top: 4px; padding: 0 20px;
    font-size: 17px; font-weight: 600; border-radius: 12px;
}
.action .btn--go::after { content: "\2192"; transition: transform .15s; }
.action .btn--go:hover::after { transform: translateX(3px); }
.action .btn--wide {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 52px; font-size: 16px; font-weight: 600; border-radius: 12px;
}
.action__or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 14px; }
.action__or::before, .action__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.action__skip { margin: 14px 0 0; }
.action__alt { margin: 22px 0 0; font-size: 15px; color: var(--muted); }
.action__alt a { font-weight: 600; }
.action .error { background: #fdecea; color: var(--error); border-radius: 10px; padding: 12px 14px; margin: 0 0 18px; font-weight: 600; }
.action input.code {
    height: 74px; text-align: center; font: 500 34px var(--mono); letter-spacing: .45em; padding-left: .45em;
}
@media (max-width: 720px) {
    .action { margin-top: 4px; border-radius: 14px; }
    .action__band { padding: 12px 20px; }
    .action__body { padding: 28px 20px 24px; }
}
/* the band never wraps: its second half goes before it would */
@media (max-width: 600px) { .action__band span:last-child { display: none; } }
/* a secondary route as one quiet line: a button that reads as a link */
.linkbtn {
    appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--accent-ink); text-decoration: underline;
    text-underline-offset: 2px;
}
.linkbtn:hover { color: var(--accent); }
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.action__alt + .action__alt { margin-top: 8px; }

/* ---------------------------------------------------------- the dashboard
   Signed in, home is your projects: one card per project with its state at a
   glance, then an Add a project card. The whole card is the link. */
.dash__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin: 0 0 20px; }
.dash__head h1 { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.3rem); letter-spacing: -.02em; margin: 0; }
.dash__lead { margin: 0; color: var(--muted); max-width: 46rem; }
.pcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pcards > li { display: flex; }
.pcard {
    flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 172px; padding: 20px 22px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink);
    box-shadow: 0 1px 2px rgba(11, 18, 32, .04); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pcard:hover { border-color: var(--accent); box-shadow: 0 10px 28px rgba(11, 18, 32, .10); transform: translateY(-1px); }
.pcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pcard, .pcard:hover { transition: none; transform: none; } }
.pcard__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pcard__ws { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pcard__name { font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.015em; color: var(--heading); }
.pcard__state { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.pcard__state::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #a39d92; flex: none; }
.pcard__state--current::before { background: var(--accent); }
.pcard__state--stale::before { background: #d4880f; }
.pcard__next { margin-top: auto; font-size: 14px; color: var(--muted); }
.pill { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #efece5; color: var(--muted); }
.pill--live { background: var(--accent-soft); color: var(--accent-ink); }
.pill--badge { background: var(--dark); color: var(--dark-text); }
.pcard--add { justify-content: center; border: 2px dashed var(--line); background: transparent; box-shadow: none; }
.pcard--add:hover { background: var(--paper); }
.pcard--add .pcard__next { margin-top: 0; }
.pcard__plus { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-fill); color: var(--on-accent); font: 600 26px/1 var(--display); }

/* action panels for every form: wider variant, all field types, choice tiles */
.action--wide { max-width: 760px; }
.action input[type="url"], .action select {
    width: 100%; height: 58px; padding: 0 16px; margin: 0;
    font: 400 18px var(--sans); color: var(--heading); background: var(--bg);
    border: 2px solid rgba(28, 26, 23, .35); border-radius: 12px; transition: border-color .15s, box-shadow .15s;
}
.action select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 22px) 26px, calc(100% - 16px) 26px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.action select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.action input.mono-input { font-family: var(--mono); }
.action__opt { font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 6px; }
.action fieldset.tiles { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.action .tiles legend { font-weight: 600; font-size: 15px; color: var(--heading); margin: 0 0 8px; padding: 0; }
.action .tile {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer;
    background: var(--bg); border: 2px solid rgba(28, 26, 23, .35); border-radius: 12px; font-weight: 400;
    transition: border-color .15s, background-color .15s;
}
.action .tile:hover { border-color: var(--accent); }
.action .tile:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.action .tile input { margin: 2px 0 0; width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.action .tile input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile__body { display: grid; gap: 2px; }
.tile__body strong { color: var(--heading); font-size: 16px; }
.tile__body span { color: var(--muted); font-size: 14px; }
.action__token { border: 2px solid var(--accent); border-radius: 12px; padding: 16px 18px; background: var(--accent-soft); margin: 0 0 26px; }
.action__token .token { display: block; font: 500 16px var(--mono); word-break: break-all; background: var(--bg); border-radius: 8px; padding: 12px 14px; margin: 10px 0 12px; user-select: all; }
.action .snippet { overflow-x: auto; }
.action .cardpreview { margin: 0 0 24px; }
.action__sub { font-family: var(--display); font-size: 1.15rem; margin: 30px 0 10px; }
.action__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.action__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.action__item { display: grid; gap: 2px; }
.action__list form { margin: 0; }
.btn--small { padding: 6px 12px; font-size: 14px; }
.action__danger { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); display: block; }
.action__danger p { color: var(--muted); font-size: 15px; margin: 0 0 12px; }
.action__preview { display: flex; justify-content: center; margin: 4px 0 20px; }
.action__preview img { display: block; }
.dash__head--stack { flex-direction: column; align-items: flex-start; }

/* the band stays one line on a phone: its left half truncates, never wraps */
@media (max-width: 600px) {
    .action__band span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .action__band { flex-wrap: nowrap; }
}

/* Connect CI: the one command, in a box with its own bar and a Copy button */
.action__cmd { border: 2px solid var(--accent); border-radius: 12px; overflow: hidden; margin: 0 0 6px; }
.action__cmdbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 12px 8px 16px; background: var(--dark); color: var(--dark-muted); font-size: 14px; }
.action__cmdbar .btn { padding: 5px 14px; font-size: 13px; }
.action__cmd .snippet { margin: 0; border: 0; border-radius: 0; padding: 14px 16px; max-height: 380px; overflow: auto; font-size: 13px; line-height: 1.55; }
.action__more { margin-top: 22px; }
.action__more summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); }
.action form.action__inline { display: block; }

/* numbered steps above a command: the order, stated */
.action__steps { list-style: none; counter-reset: step; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.action__steps li { counter-increment: step; position: relative; padding-left: 38px; font-size: 16px; line-height: 26px; }
.action__steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; background: var(--accent-fill); color: var(--on-accent); font: 600 14px/1 var(--display); }

/* Connect CI: one command per system, as tabs that work without JS */
.cmdtabs { position: relative; }
.cmdtabs__r { position: absolute; opacity: 0; pointer-events: none; }
.cmdtabs__bar { display: flex; gap: 6px; margin: 0 0 -2px; position: relative; z-index: 1; }
.cmdtabs__bar label { padding: 8px 14px; border: 2px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0;
    background: #efece5; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; }
#os-unix:checked ~ .cmdtabs__bar label[for="os-unix"],
#os-win:checked ~ .cmdtabs__bar label[for="os-win"] { background: var(--dark); border-color: var(--accent); color: var(--dark-text); }
#os-unix:focus-visible ~ .cmdtabs__bar label[for="os-unix"],
#os-win:focus-visible ~ .cmdtabs__bar label[for="os-win"] { outline: 3px solid var(--accent); outline-offset: 2px; }
.cmdtabs__panel { display: none; border-top-left-radius: 0; }
#os-unix:checked ~ .cmdtabs__panel--unix, #os-win:checked ~ .cmdtabs__panel--win { display: block; }

#os-cli:checked ~ .cmdtabs__bar label[for="os-cli"] { background: var(--dark); border-color: var(--accent); color: var(--dark-text); }
#os-cli:focus-visible ~ .cmdtabs__bar label[for="os-cli"] { outline: 3px solid var(--accent); outline-offset: 2px; }
#os-cli:checked ~ .cmdtabs__panel--cli { display: block; }
.cmdtabs__bar { flex-wrap: wrap; }
.cmdtabs__note { margin: 0; padding: 12px 16px 14px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); background: var(--paper); }
.cmdtabs__note code { word-break: break-all; }

/* ------------------------------------------------------------- project card
   The card sits in its own O: a navy ring with the outlined IZ4 wordmark in
   the bottom band, cornered like the mark (17/11 of the band). This is a
   LAYOUT adaptation at card scale - actual marks and QR badges keep exact
   geometry - so the ring stays a readable rectangle on a phone instead of
   eating the screen. The band is reserved space: content never runs into it.
*/
.s2c { --cband: 22px; --cr: calc(var(--cband) * 1.545);
    background: var(--dark); border-radius: var(--cr);
    padding: var(--cband) var(--cband) calc(var(--cband) * 2.1);
    position: relative; margin: 0 0 24px; }
@media (max-width: 720px) { .s2c { --cband: 14px; } }
.s2c__inner { background: var(--paper);
    border-radius: calc(var(--cr) - var(--cband));
    padding: clamp(20px, 4vw, 38px); }
.s2c__band { position: absolute; left: 0; right: 0; bottom: 0;
    height: calc(var(--cband) * 2.1);
    display: flex; align-items: center; justify-content: center; }
.s2c__band { color: var(--dark-text); }
.s2c__band svg { height: calc(var(--cband) * 1.06); width: auto; display: block; }

.s2c__eyebrow { font-size: .9rem; color: var(--muted); margin: 0 0 10px; }
.s2c__name { font-size: clamp(1.5rem, 4.5vw, 2.1rem); line-height: 1.15;
    margin: 0 0 6px; overflow-wrap: anywhere; }
.s2c__by { color: var(--muted); margin: 0 0 14px; }
.s2c__purpose { font-size: 1.06rem; max-width: 62ch; margin: 0 0 16px; }
.s2c__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 18px; padding: 0; list-style: none; }
.s2c__sec { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; }
.s2c__sec h2 { font-size: 1.05rem; margin: 0 0 8px; }
.s2c__sec h3 { font-size: .95rem; margin: 14px 0 4px; }

/* status chip: a word plus a shape, never colour alone */
.st { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
    font-size: .74rem; letter-spacing: .04em; border-radius: 999px;
    padding: 4px 11px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.st::before { content: "\25CF"; font-size: .7em; }
.st--ok { background: var(--accent-soft); border-color: var(--line); color: var(--accent-ink); }
.st--warn, .st--unchecked { background: #fbf1df; border-color: #ecd6a6; color: #7f4d00; }
.st--bad { background: #fbe9e5; border-color: #efbfb5; color: #8f2a1c; }
.st--none { background: var(--bg); color: var(--muted); }

/* evidence facts: label/value pairs that stay readable when narrow */
.facts { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: 8px 18px; margin: 10px 0 0; }
.facts dt { color: var(--muted); font-size: .9rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; gap: 2px 0; }
    .facts dd { margin-bottom: 8px; } }

.deps { list-style: none; margin: 10px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; }
.deps li { display: flex; justify-content: space-between; gap: 10px;
    border-bottom: 1px dotted var(--line); padding: 5px 0; font-size: .93rem; }
.deps .mono { overflow-wrap: anywhere; }

.timeline2 { list-style: none; margin: 10px 0 0; padding: 0; }
.timeline2 li { border-left: 2px solid var(--line); padding: 0 0 14px 14px; }
.timeline2 li:last-child { padding-bottom: 0; }
.timeline2 time { font-family: var(--mono); font-size: .78rem; color: var(--muted); }
.timeline2 ul { margin: 4px 0 0 18px; padding: 0; }

.s2c details, .share details { margin-top: 10px; }
.s2c summary, .share summary { cursor: pointer; color: var(--accent-ink); font-size: .95rem; }
.s2c summary:focus-visible, .share summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* sharing lives OUTSIDE the frame: a QR badge is never set in another frame */
.share { margin: 0 0 26px; }
.share h2 { font-size: 1.05rem; margin: 0 0 6px; }
.share__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.share pre { background: var(--dark); color: var(--dark-text); border-radius: 10px;
    padding: 10px 12px; overflow-x: auto; font-size: .82rem; margin: 6px 0; }
.share__devices { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
/* a live badge is never shown below 600 CSS px wide */
.share__devices img { width: min(100%, 600px); height: auto; background: var(--bg); }

@media print {
    .nav, .foot, .share, .crumbs, .flash { display: none !important; }
    html, body { background: #fff; color: #000; }
    .s2c { background: #fff; border: 2px solid #000; border-radius: 14px; padding: 0; }
    .s2c__inner { padding: 0; }
    .s2c__band { position: static; height: auto; justify-content: flex-start; padding: 8px 0 0; }
    .s2c__band { color: #000; }
    .s2c details, .share details { display: block; }
    .s2c details > summary { display: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}

/* invariants the maintainer chose to publish on the card (Invariant 34) */
.disclosed { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--paper); }
.disclosed > p { margin: 0 0 8px; font-size: .92rem; color: var(--muted); }
.disclosed > p strong { color: var(--heading); }
.disclosed__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.disclosed__list li { display: grid; gap: 2px; }
.disclosed__n { font-size: .78rem; color: var(--muted); }
.disclosed__text { color: var(--heading); font-weight: 500; }
.disclosed__because { font-size: .92rem; color: var(--muted); }

/* the inherited Invariants 0 to 4, on every card */
.foundation { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 10px; }
.foundation li { display: grid; gap: 2px; padding: 10px 12px; border-left: 3px solid var(--heading); background: var(--bg); border-radius: 0 8px 8px 0; }
.foundation__n { font-size: .78rem; color: var(--muted); }
.foundation__text { color: var(--heading); }
.foundation__because { font-size: .9rem; color: var(--muted); }
.disclosed--trusted { border-left-color: var(--heading); background: var(--bg); }

/* the start page: the master in the hero (inline, so it takes the paper
   colour on ink), and the live badge at 600 CSS px, never smaller */
.hero__art--logo { margin: 30px 0 0; display: grid; justify-items: start; gap: 10px; width: auto; color: var(--dark-text); --mark-accent: var(--dark-accent); }
.hero__art--logo svg { display: block; width: 160px; height: 160px; }
.hero__art--device { margin: 18px 0 0; justify-items: start; width: min(100%, 600px); }
.hero__art--device a { display: block; line-height: 0; }
.hero__art--device img { width: 100%; height: auto; background: var(--bg); border-radius: 0; box-shadow: none; }
.hero__art--device figcaption { color: var(--muted); }

/* the public registry: a search that owns the hero, then one row per card */
.reg-search { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; max-width: 40rem; }
.reg-search input { flex: 1 1 16rem; min-width: 0; font: 400 17px var(--sans); padding: 12px 14px;
    color: var(--heading); background: var(--bg); border: 2px solid rgba(28, 26, 23, .35); border-radius: var(--r); }
.reg-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.registry .section-title { margin-top: 36px; }
.reg { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.reg__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.reg__name { margin: 0; font-size: 1.25rem; }
.reg__name a { color: var(--heading); text-decoration: none; }
.reg__name a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: .15em; }
.reg__by { margin: 2px 0 0; font-size: .9rem; color: var(--muted); }
.reg__purpose { margin: 8px 0 0; max-width: 62ch; }
.reg__side { display: grid; gap: 8px; justify-items: end; align-content: start; text-align: right; font-size: .9rem; }
.reg__links { margin: 0; color: var(--muted); }
.reg__pages { display: flex; gap: 12px; margin-top: 22px; }
.reg__foot { margin-top: 28px; font-size: .9rem; }
@media (max-width: 720px) { .reg__row { grid-template-columns: 1fr; } .reg__side { justify-items: start; text-align: left; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the scan test page: four codes, each at 600 px, stacked */
.scan { margin: 28px 0 0; width: min(100%, 600px); }
.scan a { display: block; line-height: 0; }
.scan img { width: 100%; height: auto; background: var(--bg); }
.scan figcaption { margin-top: 8px; font-size: .9rem; color: var(--muted); }
/* the card band is ink, so the wordmark's i-dot takes the mint */
.s2c__band { --mark-accent: var(--dark-accent); }

/* the first steps, as a row of numbered links under the start hero */
.firststeps { list-style: none; counter-reset: fs; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.firststeps li { counter-increment: fs; display: flex; align-items: center; gap: 8px; }
.firststeps li::before { content: counter(fs); width: 26px; height: 26px; display: grid; place-items: center; background: var(--dark-accent); color: var(--dark); font: 600 13px/1 var(--display); }
.firststeps a { color: var(--dark-text); text-decoration: none; }
.firststeps a:hover { color: var(--dark-accent); text-decoration: underline; }

/* a one-line command selects whole on a click, so it copies with or without JavaScript */
.snippet--cmd { user-select: all; -webkit-user-select: all; cursor: text; }
/* the trademark layer: legal pages rendered from their sources, the registration promise */
.legal__nav { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.legal__nav a[aria-current="page"] { font-weight: 600; color: var(--ink); text-decoration: none; }
.legal__draft { background: #fbf1df; border: 1px solid #ecd6a6; border-radius: var(--r); padding: 12px 16px; color: #5c3a00; }
.legal__body h1 { display: none; }
.legal__body h2 { margin-top: 1.6em; }
.legal__body blockquote { margin: 14px 0; padding: 10px 16px; border-left: 3px solid #b8860b; background: #fbf6ea; color: #4a3b1f; font-size: 15px; }
.legal__body blockquote p { margin: 4px 0; }
.legal__body code { font-family: var(--mono); font-size: .9em; }
.layers { margin: 10px 0 14px; padding-left: 1.4em; display: grid; gap: 8px; }
.faq dt { font-weight: 600; color: var(--heading); margin-top: 16px; }
.faq dd { margin: 4px 0 0; }
.register { border: 1px solid var(--accent); border-radius: var(--r); padding: 18px 22px; margin: 18px 0; background: var(--paper); }
.register h2 { margin-top: 0; }
.registration { font-size: 15px; }