/* Copyright Nige Ltd. Author: Nigel Hamilton. */
/* Minimal starter styles. Replace with your brand system. */
/* iz4.you design system (ported from web.iz4.you site.css): cool
   near-white body, navy-black dark bookends, one terminal-green accent, white cards.
   Fonts: Inter Tight (display), Inter (body), JetBrains Mono (code). */
:root {
    --ink: #1c2433;
    --heading: #0b1220;
    --muted: #5b6577;
    --accent: #17a05b;        /* terminal green, user ruling 2026-09-10 */
    --accent-ink: #12804a;
    --accent-soft: #dcf5e6;
    --dark-accent: #5cf58f;   /* phosphor green on the navy bookends */
    --bg: #f6f8fb;
    --paper: #ffffff;
    --line: #e2e8f0;
    --error: #C0392B;

    --dark: #0b1220;
    --dark-rule: #233150;
    --dark-text: #e8edf7;
    --dark-muted: #95a1b8;

    --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;
}
* { 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.015em; }
code, pre, .mono { font-family: var(--mono); }
a { color: var(--accent); }

.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__brand img { height: 22px; display: block; }
.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: #fff; }
.nav .btn--ghost { color: var(--dark-text); border-color: var(--dark-rule); }
.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__brand img { height: 18px; opacity: .85; }
.foot__line { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
    text-transform: lowercase; margin: 8px 0 14px; }

.hero { text-align: center; padding: 64px 0 56px; }
.hero h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin: 0 0 16px; }
.hero__lead { color: var(--muted); font-size: 18px; max-width: 44rem; margin: 0 auto 12px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.hero--dark { color: var(--dark-text); margin-top: -32px; padding: 72px 0 64px; }
.hero--dark h1 { color: #fff; }
.hero--dark .hero__lead { color: var(--dark-muted); }
.hero--dark .btn--ghost { color: var(--dark-text); border-color: var(--dark-rule); }
.eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--dark-muted); margin: 0 0 18px; }
.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: #fff;
    border-radius: 12px; box-shadow: 0 18px 50px rgba(4, 10, 26, .45); }
.hero__art figcaption { font-family: var(--mono); font-size: .7rem;
    letter-spacing: .12em; text-transform: uppercase; 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.05rem; }
.grid3 .card p { color: var(--muted); font-size: .95rem; margin: 0; }

.card {
    background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
    padding: 28px;
    box-shadow: 0 1px 2px rgba(11, 18, 32, .04);
}
.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: 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-ink); }
.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); }
.nav .btn--ghost:hover, .hero--dark .btn--ghost:hover { background: transparent; color: #fff; border-color: var(--dark-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-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: 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); }

/* 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(23, 160, 91, .14); position: relative; }
.price__flag { position: absolute; top: -11px; left: 22px; background: var(--accent);
    color: #fff; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
    text-transform: uppercase; padding: 3px 10px; 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-family: var(--mono); font-size: .68rem; letter-spacing: .2em;
    text-transform: uppercase; 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: center; font-size: 1.4rem; margin: 44px 0 6px; }
.section-lead { text-align: center; color: var(--muted); max-width: 44em;
    margin: 0 auto 8px; }
.benefits .grid3 { margin-top: 18px; }
.cta-band { text-align: center; border-top: 3px solid var(--heading);
    margin-top: 40px; padding-top: 8px; }

/* ---------------------------------------------------------------- the window
   The site is the device: a fixed O (band 11, corners 17, in the same
   proportions as the mark) around the viewport, a white quiet ring inside it,
   and the page as the square. The nav lives in the top band, IZ4 in the
   bottom band. Everything else scrolls inside. */
:root {
    --band: 56px;                                   /* the O's band */
    --quiet: 12px;                                  /* the quiet ring inside it */
    --r-out: calc(var(--band) * 1.545);             /* corners: 17 / 11 of the band */
    --r-win: calc(var(--r-out) - var(--band) - var(--quiet));
}
@media (max-width: 720px) { :root { --band: 46px; --quiet: 8px; } }
html { background: var(--dark); }
body { background: var(--dark); }
.frame {
    position: fixed; inset: 0; z-index: 50; pointer-events: none;
    border: var(--band) solid var(--dark); border-radius: var(--r-out);
    /* inset: the white quiet ring. Outer: paint everything beyond the O dark,
       so the page scrolling underneath never shows through the O's rounded
       outer corners. */
    box-shadow: inset 0 0 0 var(--quiet) #fff, 0 0 0 100vmax var(--dark);
}
/* anchored sections land below the top band, not under it */
main [id] { scroll-margin-top: calc(var(--band) + var(--quiet) + 8px); }
body { display: block; }   /* the old sticky-footer flex column would shrink the window to its content */
.window {
    display: block; width: auto;
    margin: calc(var(--band) + var(--quiet));
    background: var(--bg); border-radius: var(--r-win);
    /* clip, but stay out of the scroll chain: overflow:hidden would make the
       window a scroll container and anchors would scroll inside it */
    clip-path: inset(0 round var(--r-win));
    min-height: calc(100vh - 2 * var(--band) - 2 * var(--quiet));
}
.nav {
    position: fixed; top: 0; left: 0; right: 0; height: var(--band); z-index: 60;
    padding: 0 22px; background: transparent; gap: 8px 16px; flex-wrap: nowrap;
}
.nav__brand { gap: 9px; }
.nav__brand img { height: 22px; width: auto; display: block; }
.nav__links { gap: 6px 12px; }
.nav__link { font-size: 15px; }
.nav .btn { padding: 7px 14px; font-size: 14px; }
@media (max-width: 720px) {
    .nav { padding: 0 12px; }
    .nav__email, .nav__link--secondary { display: none; }
    .nav { flex-wrap: nowrap; overflow: hidden; }
    .nav__links { flex-wrap: nowrap; }
    .nav__brand img { height: 18px; }
    .nav__link { font-size: 13px; }
    .nav .btn { padding: 6px 10px; font-size: 13px; }
}
.foot {
    position: fixed; bottom: 0; left: 0; right: 0; height: var(--band); z-index: 60;
    margin: 0; padding: 0 22px; background: transparent;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-size: 12px; color: var(--dark-muted); text-align: left;
}
.foot__brand { margin: 0; display: flex; align-items: center; }
.foot__brand img { display: block; height: 20px; }
.foot__side { margin: 0; white-space: nowrap; flex: 1; }
.foot__side--r { text-align: right; }
.foot a { color: var(--dark-text); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
@media (max-width: 720px) {
    .foot { padding: 0 12px; font-size: 11px; }
    .foot__side--l { display: none; }
    .foot__brand img { height: 16px; }
}
/* the heroes meet the top of the window: cancel the shell's top padding */
.shell { padding-top: 28px; }
.hero--dark { margin-top: -28px; }
.site { margin-top: -28px; }

/* on a wide screen the O keeps a sensible measure: the window, its band and
   the two band contents share one centred column */
:root { --window-max: 1320px; }
.frame, .nav, .foot {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(100vw, var(--window-max));
}
.window {
    /* exactly the frame's interior: the column width minus band and quiet ring on each side */
    width: calc(min(100vw, var(--window-max)) - 2 * (var(--band) + var(--quiet)));
    max-width: none; margin-inline: auto;
}

/* the device shown in a hero */
.hero__art--device { margin: 28px auto 0; display: grid; justify-items: center; gap: 10px; width: auto; }
.hero__art--device img { width: 240px; height: 240px; display: block; border-radius: 8px; }

/* phones: a thinner band and tighter heroes, so the window keeps a readable measure */
@media (max-width: 720px) {
    :root { --band: 40px; --quiet: 6px; }
    .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; }
    .nav { height: var(--band); }
    .nav .btn { padding: 5px 10px; font-size: 13px; }
    .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: 18px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(11, 18, 32, .06), 0 28px 64px rgba(11, 18, 32, .12);
}
.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: 14px 32px;
    font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.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: #fff;
    border: 2px solid #c5cedb; 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: #9aa4b5; }
.field-prefix {
    display: flex; align-items: center; background: #fff;
    border: 2px solid #c5cedb; 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: 14px; 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: #9aa4b5; 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-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: #eef1f5; color: var(--muted); }
.pill--live { background: var(--accent-soft); color: var(--accent-ink); }
.pill--badge { background: var(--dark); color: #fff; }
.pcard--add { justify-content: center; border: 2px dashed #c5cedb; 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); color: #fff; 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: #fff;
    border: 2px solid #c5cedb; 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: #fff; border: 2px solid #c5cedb; 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: #fff; 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-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.action__cmdbar .btn { padding: 5px 14px; font-size: 13px; letter-spacing: 0; text-transform: none; }
.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); color: #fff; 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: #eef1f5; 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: #fff; }
#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: #fff; }
#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 img { height: calc(var(--cband) * .8); width: auto; }

.s2c__eyebrow { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
    text-transform: uppercase; 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: #a7e2c1; color: var(--accent-ink); }
.st--warn { background: #fdf3e3; border-color: #f3d9a8; color: #8a5300; }
.st--bad { background: #fdecea; border-color: #f3bdb6; color: #96271b; }
.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; }
.share__devices img { width: 160px; height: auto; background: #fff; border-radius: 8px; }

@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 img { filter: invert(1); }
    .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; }
}