/* Trua Wallet — shared `.w-*` component chrome (XCC-08 D4).
   Canonical source in trua-collect; mirrored to i9-pilot + c5-pilot, the
   same single-source discipline as tokens.css (XCC-02) and holder-credential
   (XCC-01). Consumes the XCC-02 design tokens. Extracted 2026-06-12 from i9's
   wallet layout — the reference ERB+Stimulus wallet (XCC-08 D1). */

      /* Trua wallet — sovereign holder UX. Mobile-first card stack
         centered to phone width, gracefully widening on desktop. Calm
         + clarity register: deep-blue anchor with green warm-accent on
         the page-header stripe, generous whitespace, plain-spoken
         typography. All colors via tokens (v3 palette, 2026-06-06). */

      .w-shell { max-width: 480px; margin: 0 auto; padding: 0 var(--space-4); }
      @media (min-width: 768px) { .w-shell { padding: var(--space-5) var(--space-4); } }

      .w-topbar {
        display: flex; align-items: center; justify-content: space-between;
        padding: var(--space-3) 0; margin-bottom: var(--space-4);
      }
      .w-brand {
        font-weight: var(--weight-bold);
        color: var(--navy-70);
        text-decoration: none;
        font-size: var(--text-lg);
        letter-spacing: -0.01em;
      }
      .w-brand .w-brand-dot { color: var(--color-brand); }

      /* Language toggle pill — sits next to the IAL badge in the
         topbar. Per [[feedback-wallet-jtbd-humanize]] lens #5. */
      .w-locale-switch {
        display: inline-flex;
        background: var(--color-bg-elevated, #fff);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-pill);
        overflow: hidden;
      }
      .w-locale-link {
        font-size: var(--text-2xs);
        font-weight: var(--weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 4px 8px;
        color: var(--color-text-muted);
        text-decoration: none;
        line-height: 1;
      }
      .w-locale-link.active {
        background: var(--color-brand);
        color: #fff;
      }
      .w-locale-link:hover:not(.active) { color: var(--navy-70); background: var(--surface-2, #f8fafc); }

      /* IAL ladder badge — assurance level pill in topbar */
      .w-ial {
        display: inline-flex; align-items: center; gap: var(--space-1);
        padding: 4px 10px; border-radius: var(--radius-pill);
        background: var(--color-bg-elevated);
        border: 1px solid var(--color-border);
        font-size: var(--text-2xs); font-weight: var(--weight-semibold);
        color: var(--dark-30);
        text-transform: uppercase; letter-spacing: 0.05em;
      }
      .w-ial.ial-1 { color: var(--warning-50); border-color: var(--warning-20); background: var(--warning-10); }
      .w-ial.ial-2 { color: var(--success-50); border-color: var(--success-20); background: var(--success-10); }
      .w-ial.ial-3 { color: var(--info-50);    border-color: var(--info-20);    background: var(--info-10); }
      .w-ial i { font-size: var(--text-sm); }

      /* Holder card — primary container for wallet content */
      .w-card {
        background: var(--color-bg-elevated);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-2);
        box-shadow: var(--shadow-2);
        padding: var(--space-5);
        margin-bottom: var(--space-4);
      }
      .w-card-header {
        font-size: var(--text-2xs);
        font-weight: var(--weight-semibold);
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: var(--space-2);
      }
      .w-card h1 {
        font-size: var(--text-2xl);
        font-weight: var(--weight-semibold);
        color: var(--navy-70);
        margin-bottom: var(--space-2);
        line-height: var(--leading-snug);
        letter-spacing: -0.008em;
      }
      .w-card h2 {
        font-size: var(--text-lg);
        font-weight: var(--weight-semibold);
        color: var(--navy-70);
        margin-bottom: var(--space-2);
      }
      .w-card .w-lead { color: var(--dark-50); font-size: var(--text-md); line-height: var(--leading-loose); }
      .w-card .w-meta {
        font-size: var(--text-sm); color: var(--color-text-muted);
        background: var(--light-misty);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-2);
        margin-top: var(--space-3);
      }
      .w-card .w-meta dt {
        font-weight: var(--weight-semibold);
        color: var(--color-text-strong);
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .w-card .w-meta dd { margin-bottom: var(--space-2); color: var(--color-text); font-size: var(--text-md); }
      .w-card .w-meta dd:last-child { margin-bottom: 0; }

      /* Progress steps — phase indicator at top of wallet flows */
      /* Journey banner — persistent across screens. Tells the holder
         where they are in the overall arc + how much is left. Per
         [[feedback-wallet-jtbd-humanize]]. */
      .w-journey {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-3);
        margin-bottom: var(--space-3);
        background: var(--navy-10, #e8eef7);
        border: 1px solid var(--navy-20, #c4d1e5);
        border-left: 3px solid var(--color-brand);
        border-radius: var(--radius-1, 6px);
        font-size: var(--text-sm);
        color: var(--navy-70);
      }
      .w-journey-name { font-weight: var(--weight-semibold); }
      .w-journey-meta { color: var(--color-text-muted); font-size: var(--text-xs); }
      .w-journey i { color: var(--color-brand); font-size: var(--text-base); }

      /* Document sketch — small inline SVG line drawings of the docs
         the holder might bring. Answers Question #1 ("which document
         should I bring?") visually instead of by federal jargon list
         code. Per [[feedback-wallet-jtbd-humanize]]. */
      .w-doc-sketch {
        display: inline-block;
        vertical-align: middle;
        width: 56px;
        height: 36px;
        color: var(--navy-50, #3a5a8a);
        background: var(--color-bg-elevated, #fff);
        border-radius: 4px;
        padding: 2px;
        margin-right: var(--space-2);
      }
      .w-doc-row {
        display: flex; align-items: center; flex-wrap: wrap;
        gap: var(--space-2); margin-top: var(--space-2);
      }
      .w-doc-chip {
        display: inline-flex; align-items: center;
        gap: var(--space-1);
        padding: 3px 8px 3px 3px;
        background: var(--color-bg-elevated, #fff);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-pill);
        font-size: var(--text-xs);
        color: var(--color-text-muted);
      }
      .w-doc-chip svg { width: 28px; height: 18px; color: var(--navy-50, #3a5a8a); }

      /* Capture confirmation — green "✓ Saved" banner that opens a
         screen following a capture action. Answers Question 2
         ("Did I do it right?") per [[feedback-wallet-jtbd-humanize]]. */
      .w-capture-confirm {
        display: flex; align-items: center; gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        background: var(--success-10, #f0f7e1);
        border: 1px solid var(--success-30, #c7dc8e);
        border-left: 4px solid var(--success-50, #6f8c36);
        border-radius: var(--radius-2, 12px);
        margin-bottom: var(--space-3);
      }
      .w-capture-confirm-icon { font-size: 1.75rem; color: var(--success-50, #6f8c36); line-height: 1; flex-shrink: 0; }
      .w-capture-confirm-summary {
        font-size: var(--text-base); font-weight: var(--weight-semibold);
        color: var(--navy-70);
      }
      .w-capture-confirm-detail {
        font-size: var(--text-sm);
        color: var(--color-text-muted);
        margin-top: 2px;
      }

      /* Friendly error — three-line pattern answering "what happened",
         "what to do", "why it's normal." Per
         [[feedback-wallet-jtbd-humanize]] Question #3. */
      .w-friendly-error {
        display: flex; gap: var(--space-3);
        padding: var(--space-4);
        background: var(--warning-10, #fffbeb);
        border: 1px solid var(--warning-30, #fcd34d);
        border-left: 4px solid var(--warning-50, #d97706);
        border-radius: var(--radius-2, 12px);
        margin: var(--space-3) 0;
      }
      .w-friendly-error-icon {
        font-size: 2.5rem; color: var(--warning-50, #d97706); flex-shrink: 0;
        line-height: 1; margin-top: 2px;
      }
      .w-friendly-error-body { flex: 1; }
      .w-friendly-error-what {
        font-size: var(--text-lg); font-weight: var(--weight-semibold);
        color: var(--navy-70);
      }
      .w-friendly-error-do { color: var(--navy-70); }
      .w-friendly-error-why { color: var(--color-text-muted); }

      /* "What happens next" preview — single-sentence forecast rendered
         as the last element before the Continue button on every screen.
         Answers Question #4 from [[feedback-wallet-jtbd-humanize]]. */
      .w-next-preview {
        display: flex; align-items: flex-start; gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        margin-top: var(--space-3);
        background: var(--color-bg-elevated, #fff);
        border: 1px dashed var(--color-border);
        border-radius: var(--radius-1, 6px);
        font-size: var(--text-sm);
        color: var(--color-text-muted);
      }
      .w-next-preview i { color: var(--color-brand); flex-shrink: 0; margin-top: 2px; }
      .w-next-preview strong { color: var(--navy-70); font-weight: var(--weight-semibold); }

      .w-progress { display: flex; gap: 4px; margin: 4px 0 var(--space-4); }
      .w-progress-step {
        flex: 1; height: 4px;
        background: var(--color-border);
        border-radius: var(--radius-1);
      }
      .w-progress-step.active { background: var(--color-brand); }
      .w-progress-step.done   { background: var(--success-40); }

      /* Form refinements specific to the wallet (larger touch targets, gentler radius) */
      .w-form .form-label {
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        color: var(--color-text-strong);
        margin-bottom: 4px;
      }
      .w-form .form-control, .w-form .form-select {
        padding: var(--space-3) 14px;
        font-size: var(--text-md);
        border-radius: var(--radius-2);
        border-color: var(--color-border-strong);
        height: 44px;
      }
      .w-form .form-control:focus, .w-form .form-select:focus {
        border-color: var(--color-border-focus);
        box-shadow: var(--shadow-focus);
      }
      .w-form .form-text { font-size: var(--text-sm); color: var(--color-text-muted); }

      /* Radio cards — single-decision pattern (citizenship picker) */
      .w-radio-card {
        display: block;
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-2);
        cursor: pointer;
        margin-bottom: var(--space-2);
        background: var(--color-bg-elevated);
        transition: border-color var(--tx), background var(--tx), box-shadow var(--tx);
      }
      .w-radio-card:hover { border-color: var(--color-border-strong); }
      .w-radio-card.active {
        border-color: var(--color-brand);
        background: var(--blue-100);
        box-shadow: 0 0 0 2px rgba(21, 38, 76, 0.10);    /* v3: blue-900 @ 10%, was orange-50 */
      }
      .w-radio-card input { margin-right: var(--space-3); vertical-align: top; margin-top: 3px; }
      .w-radio-card .w-radio-label { font-weight: var(--weight-semibold); color: var(--navy-70); font-size: var(--text-md); }
      .w-radio-card .w-radio-help { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 4px; margin-left: 24px; }

      /* Wallet primary CTA — full-width deep blue (v2: orange). Calm-but-confident. */
      .btn-w-primary {
        background: var(--color-brand);
        border-color: var(--color-brand);
        color: var(--light-white);
        padding: var(--space-3) var(--space-5);
        font-weight: var(--weight-semibold);
        border-radius: var(--radius-1);
        width: 100%;
        font-size: var(--text-md);
      }
      .btn-w-primary:hover, .btn-w-primary:focus {
        background: var(--color-brand-hover);
        border-color: var(--color-brand-hover);
        color: var(--light-white);
      }
      .btn-w-primary:disabled { background: var(--light-silver); border-color: var(--light-silver); }

      /* Wallet "submit / sign" CTA — same deep blue, slightly larger */
      .btn-w-success {
        background: var(--color-brand);
        border-color: var(--color-brand);
        color: var(--light-white);
        padding: 14px var(--space-5);
        font-weight: var(--weight-bold);
        border-radius: var(--radius-1);
        width: 100%;
        font-size: var(--text-lg);
        letter-spacing: 0.005em;
      }
      .btn-w-success:hover, .btn-w-success:focus {
        background: var(--color-brand-hover);
        border-color: var(--color-brand-hover);
        color: var(--light-white);
      }

      .btn-w-link { color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); }
      .btn-w-link:hover { color: var(--color-brand); text-decoration: underline; }

      /* Disclosure block — shows what holder is about to share */
      .w-disclosure {
        background: var(--light-misty);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-2);
        padding: var(--space-4);
        margin-bottom: var(--space-3);
      }
      .w-disclosure .w-disclosure-row {
        display: flex; align-items: flex-start;
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--color-border);
      }
      .w-disclosure .w-disclosure-row:last-child { border-bottom: none; }
      .w-disclosure .w-disclosure-row .bi-check-square-fill {
        color: var(--success-40);
        margin-right: var(--space-2);
        margin-top: 2px;
      }
      .w-disclosure .w-disclosure-row .small { color: var(--color-text-muted); }

      .w-footer {
        text-align: center;
        padding: var(--space-5) var(--space-4);
        color: var(--color-text-muted);
        font-size: var(--text-xs);
      }
      .w-footer a { color: var(--color-text-muted); text-decoration: none; }
      .w-footer a:hover { color: var(--color-brand); }

      /* Confirmation success hero — big check after Section 1 / signing.
         Targets both the legacy <i> tag and the post-swap <svg.lucide-icon>. */
      .w-confirm-hero { text-align: center; padding: var(--space-5) 0; }
      .w-confirm-hero .bi-check-circle-fill,
      .w-confirm-hero svg.lucide-icon {
        font-size: 4rem;
        color: var(--success-40);
        stroke: var(--success-40);
        display: block;
        margin: 0 auto var(--space-3);
      }