/* ============================================================================
   Agreely - /citoyens (citizen page), ported from agreely-vous.
   PAGE-SCOPED under [data-surface="citizen"], the banner.css pattern.

   CANONICAL IDENTITY: every token, button, nav, footer, hero, section-chrome,
   FAQ and CTA style comes from app.css + landing.css (the single source of
   truth). This file carries ONLY the citizen page's content-specific LAYOUT:
   the problem cards, the four-gift grid + its mock panels (receipt, access
   log, before/after withdrawal pills, verifier result), the phone-frame
   geometry, the "why" benefit cards, the manifesto copy-field + actions and
   the honesty cards. Retired from the vous fork: the duplicated :root token
   block, the amber .mark highlighter (emphasis is the canonical indigo
   .hero-accent), the warm hero scrim, the warm-lilac --band-manifeste, the
   amber wordmark tagpill and every nav/footer/button re-declaration. All warm
   state colors are normalized to the canonical semantic tokens
   (--good / --warn / --bad) and the canonical accent.
   No em-dashes, no en-dashes.
   ========================================================================== */

/* -- 01 Problem: three quiet cards beside the sticky intro ------------------
   (.problem-grid / .problem-intro come from landing.css.) The section sits
   directly under the hero art bleed, so the .lsec hairline is dropped: the
   hero fade is the divider. */
[data-surface="citizen"] .problem-sec { border-top: 0; }
[data-surface="citizen"] .problem-cards { display: flex; flex-direction: column; gap: 1rem; }
[data-surface="citizen"] .pcard {
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-panel);
    padding: 1.6rem 1.75rem; display: grid; grid-template-columns: 3rem 1fr; gap: 0.4rem 1.25rem;
    align-items: center; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
[data-surface="citizen"] .pcard:hover { border-color: var(--border-accent); box-shadow: 0 18px 40px -26px rgba(19, 19, 22, 0.4); transform: translateY(-2px); }
[data-surface="citizen"] .pcard-ico { grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius-card); background: var(--accent-glow); color: var(--accent); border: 1px solid var(--border-accent); flex-shrink: 0; }
[data-surface="citizen"] .pcard-h { font-size: 1.12rem; font-weight: 650; color: var(--ink); margin: 0; letter-spacing: -0.01em; align-self: end; }
[data-surface="citizen"] .pcard-p { font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); margin: 0; align-self: start; }

/* A down-arrow CTA dips instead of sliding sideways (the canonical .btn-arrow
   hover is a translateX for right-arrows). */
[data-surface="citizen"] .btn:hover .btn-arrow-down { transform: translateY(0.15rem); }

/* -- 02 Gifts: calm 2x2 grid, one card per gift ------------------------------
   Every card shares the same anatomy: icon chip + mono index up top, then
   title, body, optional caveat/link, then an inset "panel" motif pinned to the
   card's bottom edge via margin-top:auto so all four bottoms align. Panels
   speak one visual language (elevated inset, mono microtype, hairline rows),
   all in the canonical indigo/muted palette. */
[data-surface="citizen"] .gifts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 3.5rem; }
[data-surface="citizen"] .gift-card {
    display: flex; flex-direction: column;
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-panel);
    padding: 1.9rem 1.9rem 1.7rem;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
[data-surface="citizen"] .gift-card:hover { border-color: var(--border-accent); box-shadow: 0 18px 40px -26px rgba(19, 19, 22, 0.4); transform: translateY(-3px); }
[data-surface="citizen"] .gift-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
[data-surface="citizen"] .gift-ico { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius-card); background: var(--accent-glow); color: var(--accent); border: 1px solid var(--border-accent); flex-shrink: 0; }
[data-surface="citizen"] .gift-num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text-muted); font-feature-settings: "zero" 1; }
[data-surface="citizen"] .gift-body { flex: 1 1 auto; padding-bottom: 1.5rem; }
[data-surface="citizen"] .gift-h { font-size: 1.25rem; font-weight: 650; color: var(--ink); margin: 0 0 0.6rem; letter-spacing: -0.015em; line-height: 1.25; }
[data-surface="citizen"] .gift-p { font-size: 0.97rem; line-height: 1.65; color: var(--text-muted); margin: 0; }
/* Honest prospective caveat: canonical --warn semantic tokens (the vous warm
   amber is retired). */
[data-surface="citizen"] .gift-caveat { display: flex; align-items: flex-start; gap: 0.5rem; margin: 1rem 0 0; padding: 0.7rem 0.9rem; background: var(--warn-bg); border: 1px solid rgba(146, 64, 14, 0.22); border-radius: 0.7rem; font-size: 0.86rem; line-height: 1.5; color: var(--warn); }
[data-surface="citizen"] .gift-caveat svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--warn); }
[data-theme="dark"] [data-surface="citizen"] .gift-caveat { border-color: rgba(251, 191, 36, 0.28); }
[data-surface="citizen"] .gift-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-size: 0.95rem; font-weight: 550; color: var(--accent); border-radius: 0.35rem; }
[data-surface="citizen"] .gift-link svg { transition: transform 0.25s var(--ease); }
[data-surface="citizen"] .gift-link:hover { color: var(--accent-strong); }
[data-surface="citizen"] .gift-link:hover svg { transform: translateX(0.2rem); }
[data-surface="citizen"] .gift-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* gift panels: the four motifs, one shared inset language */
[data-surface="citizen"] .gift-panel { margin-top: auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.05rem 1.2rem; }
[data-theme="dark"] [data-surface="citizen"] .gift-panel { background: rgba(30, 30, 35, 0.55); }
[data-surface="citizen"] .gp-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.55rem; }
[data-surface="citizen"] .gp-title { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-feature-settings: "zero" 1; }
[data-surface="citizen"] .gp-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; border-radius: 9999px; padding: 0.2rem 0.55rem; color: var(--good); background: var(--good-bg); border: 1px solid rgba(21, 128, 61, 0.28); }
/* light-mode only: darken badge text to reach >= 4.5:1 on --good-bg (~4.7:1 at #166b45 on white) */
:not([data-theme="dark"]) [data-surface="citizen"] .gp-badge { color: #166b45; }
[data-surface="citizen"] .gp-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--border); font-size: 0.85rem; }
[data-surface="citizen"] .gp-line span:first-child { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
[data-surface="citizen"] .gp-line span:last-child { color: var(--text-bright); font-weight: 550; text-align: right; }
[data-surface="citizen"] .gp-foot { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); font-size: 0.78rem; line-height: 1.45; color: var(--text-muted); }
[data-surface="citizen"] .gp-foot svg { color: var(--accent); flex-shrink: 0; }
[data-surface="citizen"] .gp-foot-mono { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; font-feature-settings: "zero" 1; }
/* access-log motif */
[data-surface="citizen"] .gp-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
[data-surface="citizen"] .gp-log li { display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--border); }
[data-surface="citizen"] .gp-log-eye { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 0.45rem; background: var(--accent-glow); color: var(--accent); }
[data-surface="citizen"] .gp-log-who { font-size: 0.86rem; color: var(--text-bright); font-weight: 550; }
[data-surface="citizen"] .gp-log-when { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); font-feature-settings: "zero" 1; white-space: nowrap; }
/* withdrawal before/after motif */
[data-surface="citizen"] .gp-state { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem; border-radius: 0.7rem; border: 1px solid var(--border); background: var(--bg-surface); }
[data-surface="citizen"] .gp-state.is-was { opacity: 0.72; }
[data-surface="citizen"] .gp-state.is-now { background: var(--accent-glow); border-color: var(--border-accent); }
[data-surface="citizen"] .gp-state-label { font-size: 0.82rem; color: var(--text-muted); }
[data-surface="citizen"] .gp-state.is-now .gp-state-label { color: var(--ink); font-weight: 550; }
[data-surface="citizen"] .gp-pill { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; border-radius: 9999px; padding: 0.26rem 0.7rem; font-feature-settings: "zero" 1; }
[data-surface="citizen"] .gp-pill-on { color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border); }
[data-surface="citizen"] .gp-pill-off { color: #fff; background: var(--accent); }
[data-theme="dark"] [data-surface="citizen"] .gp-pill-off { background: #F2F2F4; color: #131316; }
[data-surface="citizen"] .gp-state-arrow { display: flex; justify-content: center; color: var(--accent); padding: 0.3rem 0; }
/* verifier-result motif */
[data-surface="citizen"] .gp-verify { display: flex; align-items: center; gap: 0.8rem; padding-top: 0.55rem; border-top: 1px solid var(--border); }
[data-surface="citizen"] .gp-verify-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 0.7rem; background: var(--good-bg); color: var(--good); border: 1px solid rgba(21, 128, 61, 0.28); flex-shrink: 0; }
[data-surface="citizen"] .gp-verify-txt { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
[data-surface="citizen"] .gp-verify-h { font-size: 0.92rem; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
[data-surface="citizen"] .gp-verify-sub { font-size: 0.82rem; color: var(--text-muted); }

@media (max-width: 880px) {
    [data-surface="citizen"] .gifts-grid { grid-template-columns: 1fr; max-width: 34rem; gap: 1.1rem; }
}
@media (max-width: 560px) {
    [data-surface="citizen"] .gift-card { padding: 1.5rem 1.35rem 1.35rem; }
}

/* -- 03 App: copy + bullets beside the phone frame ---------------------------
   (.lsec-soft is the canonical soft plate from landing.css.) The phone bezel
   reuses the canonical citizen-phone bezel tones from the landing teaser. */
[data-surface="citizen"] .app-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items: center; }
[data-surface="citizen"] .app-bullets { list-style: none; margin: 2rem 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
[data-surface="citizen"] .app-bullet { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; align-items: start; }
[data-surface="citizen"] .app-bullet-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.8rem; background: var(--bg-surface); color: var(--accent); border: 1px solid var(--border-accent); flex-shrink: 0; }
[data-surface="citizen"] .app-bullet-h { font-size: 1.02rem; font-weight: 650; color: var(--ink); margin: 0 0 0.25rem; letter-spacing: -0.01em; }
[data-surface="citizen"] .app-bullet-p { font-size: 0.94rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
[data-surface="citizen"] .app-shot { position: relative; display: flex; justify-content: center; }
[data-surface="citizen"] .app-shot-glow { position: absolute; inset: 6% 12% 6% 12%; z-index: -1; background: radial-gradient(ellipse 55% 55% at 50% 40%, rgba(19, 19, 22, 0.22), transparent 70%); filter: blur(8px); pointer-events: none; }
[data-theme="dark"] [data-surface="citizen"] .app-shot-glow { background: radial-gradient(ellipse 55% 55% at 50% 40%, rgba(255, 255, 255, 0.26), transparent 70%); }
[data-surface="citizen"] .app-phone {
    position: relative; width: min(17rem, 74vw); padding: 0.6rem; border-radius: 2.4rem;
    background: linear-gradient(165deg, #2E2E33 0%, #131316 100%);
    box-shadow: 0 40px 80px -36px rgba(19, 19, 22, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
[data-surface="citizen"] .app-phone-notch { position: absolute; top: 0.9rem; left: 50%; transform: translateX(-50%); width: 4.5rem; height: 0.4rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.35); z-index: 2; }
[data-surface="citizen"] .app-phone picture,
[data-surface="citizen"] .app-phone img { display: block; width: 100%; height: auto; border-radius: 1.9rem; }
@media (max-width: 900px) {
    [data-surface="citizen"] .app-grid { grid-template-columns: 1fr; gap: 2.75rem; }
}

/* -- 04 Why: three benefit cards --------------------------------------------- */
[data-surface="citizen"] .why-list { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
[data-surface="citizen"] .why-item { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
[data-surface="citizen"] .why-item:hover { border-color: var(--border-accent); box-shadow: 0 18px 40px -26px rgba(19, 19, 22, 0.4); transform: translateY(-3px); }
[data-surface="citizen"] .why-ico { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius-card); background: var(--accent-glow); color: var(--accent); border: 1px solid var(--border-accent); }
[data-surface="citizen"] .why-p { font-size: 0.98rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
[data-surface="citizen"] .why-p strong { color: var(--ink); font-weight: 650; display: block; margin-bottom: 0.2rem; }
@media (max-width: 820px) {
    [data-surface="citizen"] .why-list { grid-template-columns: 1fr; }
}

/* -- 05 Manifesto: the conversion moment --------------------------------------
   Canonical-token wash only (accent-glow radials over the canonical canvas;
   the vous warm-lilac --band-manifeste is retired). */
[data-surface="citizen"] .lsec-manifeste {
    border-top: 0;
    background:
        radial-gradient(56rem 28rem at 88% 4%, var(--accent-glow), transparent 60%),
        radial-gradient(52rem 26rem at 4% 100%, var(--accent-glow), transparent 62%),
        linear-gradient(180deg, var(--bg-deep) 0%, #EDEDEA 50%, var(--bg-deep) 100%);
}
[data-theme="dark"] [data-surface="citizen"] .lsec-manifeste {
    background:
        radial-gradient(56rem 28rem at 88% 4%, var(--accent-glow), transparent 60%),
        radial-gradient(52rem 26rem at 4% 100%, var(--accent-glow), transparent 62%),
        var(--bg-deep);
}
[data-surface="citizen"] .manifeste-wrap { max-width: 52rem; margin: 0 auto; }
[data-surface="citizen"] .manifeste-intro { text-align: center; margin: 0 auto 2.5rem; max-width: 40rem; }
[data-surface="citizen"] .manifeste-intro .section-heading,
[data-surface="citizen"] .manifeste-intro .section-lede { margin-left: auto; margin-right: auto; }
[data-surface="citizen"] .manifeste-card {
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 1.4rem;
    padding: 1.75rem; box-shadow: 0 40px 80px -44px rgba(19, 19, 22, 0.4);
}
@media (min-width: 640px) {
    [data-surface="citizen"] .manifeste-card { padding: 2rem 2.25rem; }
}

/* the editable, copyable message field */
[data-surface="citizen"] .copy-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
[data-surface="citizen"] .copy-field-label { font-size: 0.8rem; font-weight: 650; color: var(--ink); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
[data-surface="citizen"] .copy-field-hint { font-size: 0.8rem; color: var(--text-muted); }
[data-surface="citizen"] .copy-field-area {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 12rem;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: 1rem 1.15rem; font-family: var(--font-body); font-size: 0.96rem; line-height: 1.65;
    color: var(--text); transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
[data-surface="citizen"] .copy-field-area:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

[data-surface="citizen"] .manifeste-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.25rem; }
[data-surface="citizen"] .manifeste-actions .btn { padding: 0.75rem 1.3rem; font-size: 0.9rem; }
[data-surface="citizen"] .manifeste-status { min-height: 1.25rem; margin: 0.9rem 0 0; font-size: 0.88rem; font-weight: 550; color: var(--good); }

/* copied-state affordance (ghost buttons only; filled buttons keep their
   white label and just swap icon + text) */
[data-surface="citizen"] .cta-btn-ghost.js-copy.is-copied { color: var(--good); border-color: var(--good); }

/* -- 06 Honesty: three plain cards, canonical indigo chips -------------------- */
[data-surface="citizen"] .honesty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; }
[data-surface="citizen"] .honesty-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 1.75rem; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
[data-surface="citizen"] .honesty-card:hover { border-color: var(--border-accent); box-shadow: 0 18px 40px -26px rgba(19, 19, 22, 0.4); transform: translateY(-3px); }
[data-surface="citizen"] .honesty-ico { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius-card); background: var(--accent-glow); color: var(--accent); border: 1px solid var(--border-accent); margin-bottom: 1rem; }
[data-surface="citizen"] .honesty-h { font-size: 1.08rem; font-weight: 650; color: var(--ink); margin: 0 0 0.5rem; letter-spacing: -0.01em; line-height: 1.3; }
[data-surface="citizen"] .honesty-p { font-size: 0.94rem; line-height: 1.65; color: var(--text-muted); margin: 0; }
@media (max-width: 900px) {
    [data-surface="citizen"] .honesty-grid { grid-template-columns: 1fr; max-width: 34rem; }
}

/* -- Closing CTA: canonical cta-card; only the aria-live status line and the
   emphasis pin are page-specific (the card is always light, so the accent is
   pinned to the canonical light indigo in both themes, like the card's own
   type). */
[data-surface="citizen"] .cta-status { min-height: 1.25rem; margin: 1.1rem 0 0; font-size: 0.88rem; font-weight: 550; color: #15803D; }
[data-surface="citizen"] .cta-card .hero-accent { color: #131316; }