/* California Career Passport — shared styles.
 * Restrained, government-service-appropriate. Sans-serif body, serif for
 * headings on the narrative surfaces. Plain-language first, animation last. */

:root {
  --ccp-blue:   #0B5394;   /* CA gov-services blue */
  --ccp-blue-d: #063056;
  --ccp-gold:   #FDB515;   /* CA gold */
  --ccp-green:  #0F766E;
  --ccp-red:    #B91C1C;
  --ccp-text:   #0F172A;
  --ccp-muted:  #475569;
  --ccp-surface:#FFFFFF;
  --ccp-bg:     #F7F8FA;
  --ccp-border: #E2E8F0;
  --ccp-accent-bg: #EFF6FF;
  --ccp-radius: 12px;
  --ccp-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ccp-bg);
  color: var(--ccp-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

a { color: var(--ccp-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header ───────────────────────────────────────────────────── */
.ccp-header, .ccp-wallet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  background: var(--ccp-surface);
  border-bottom: 1px solid var(--ccp-border);
}
.ccp-logo, .ccp-wallet-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ccp-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ccp-blue); color: var(--ccp-gold);
  font-weight: 800; font-size: 14px; letter-spacing: 0.04em;
  border: 2px solid var(--ccp-gold);
}
.ccp-seal-employer { background: #1E293B; color: #FDE68A; border-color: #FDE68A; }
.ccp-seal-wallet   { background: var(--ccp-gold); color: var(--ccp-blue); border-color: var(--ccp-blue); font-size: 20px; }
.ccp-logo-text {
  display: flex; flex-direction: column;
  font-weight: 700; font-size: 16px; color: var(--ccp-text);
}
.ccp-logo-text small { font-weight: 500; font-size: 12px; color: var(--ccp-muted); }

.ccp-role-pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  padding: 4px 10px; border-radius: 12px;
}
.ccp-role-issuer   { background: #EFF6FF; color: var(--ccp-blue-d); border: 1px solid #BFDBFE; }
.ccp-role-verifier { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.ccp-role-holder   { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }

/* ── Main content ─────────────────────────────────────────────── */
.ccp-main, .ccp-wallet-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}
.ccp-wallet-main {
  max-width: 640px; /* wallet is intentionally narrow for mobile-first */
}

.ccp-section { margin-bottom: 40px; }
.ccp-section h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px; font-weight: 700; margin: 0 0 12px;
  line-height: 1.25;
}
.ccp-section h2 {
  font-size: 20px; font-weight: 700; margin: 32px 0 12px;
}
.ccp-section h3 {
  font-size: 16px; font-weight: 700; margin: 24px 0 8px;
}
.ccp-lede {
  font-size: 17px; line-height: 1.6; color: var(--ccp-muted);
  margin: 0 0 18px; max-width: 62ch;
}
.ccp-muted { color: var(--ccp-muted); font-size: 14px; }
.ccp-err   { color: var(--ccp-red); font-size: 14px; }
.ccp-note  { font-size: 13px; color: var(--ccp-muted); font-style: italic; }

.ccp-notice {
  background: var(--ccp-accent-bg);
  border-left: 3px solid var(--ccp-blue);
  padding: 14px 16px;
  border-radius: 0 var(--ccp-radius) var(--ccp-radius) 0;
  font-size: 14px;
  color: var(--ccp-blue-d);
  margin-bottom: 24px;
}

.ccp-section-divider {
  height: 1px; background: var(--ccp-border); margin: 36px 0;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.ccp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none !important;
}
.ccp-btn-primary {
  background: var(--ccp-blue);
  color: #fff;
}
.ccp-btn-primary:hover { background: var(--ccp-blue-d); }
.ccp-btn-primary:disabled {
  opacity: 0.55; cursor: not-allowed; background: var(--ccp-blue);
}
.ccp-btn-secondary {
  background: #fff;
  border-color: var(--ccp-blue);
  color: var(--ccp-blue);
}
.ccp-btn-secondary:hover { background: var(--ccp-accent-bg); }
.ccp-btn-ghost {
  background: transparent;
  color: var(--ccp-muted);
  border-color: var(--ccp-border);
}
.ccp-btn-ghost:hover { background: var(--ccp-bg); color: var(--ccp-text); }
.ccp-btn-sm { padding: 6px 10px; font-size: 12px; border-radius: 6px; }
.ccp-btn-lg { padding: 14px 22px; font-size: 16px; }

/* ── Issuer: student list ─────────────────────────────────────── */
.ccp-student-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}
.ccp-student-card {
  background: var(--ccp-surface);
  border: 1px solid var(--ccp-border);
  border-radius: var(--ccp-radius);
  padding: 20px;
  box-shadow: var(--ccp-shadow);
}
.ccp-student-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.ccp-student-name    { font-weight: 700; font-size: 17px; }
.ccp-student-college { font-size: 12px; color: var(--ccp-muted); }
.ccp-student-program { font-size: 14px; color: var(--ccp-text); margin-bottom: 10px; }
.ccp-student-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ccp-muted);
  margin-bottom: 14px;
}
.ccp-student-meta span {
  padding: 2px 8px;
  background: var(--ccp-bg);
  border-radius: 10px;
}
.ccp-issue-result { margin-top: 12px; }

.ccp-result-ok {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  color: #065F46;
}
.ccp-result-title { font-weight: 700; margin-bottom: 4px; }
.ccp-result-detail { font-size: 12px; color: #047857; margin-bottom: 8px; }
.ccp-result-err {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: var(--ccp-red);
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
}

/* ── Verifier: job cards ──────────────────────────────────────── */
.ccp-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.ccp-job-card {
  background: var(--ccp-surface);
  border: 1px solid var(--ccp-border);
  border-radius: var(--ccp-radius);
  padding: 20px;
  box-shadow: var(--ccp-shadow);
}
.ccp-job-title { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.ccp-job-subtitle { font-size: 13px; color: var(--ccp-muted); margin-bottom: 12px; }
.ccp-job-asks {
  font-size: 12px;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
  color: #78350F;
}
.ccp-job-asks code {
  background: rgba(255, 255, 255, 0.7);
  padding: 1px 4px;
  border-radius: 3px;
  margin: 0 2px;
}

/* Waiting / result panels */
.ccp-waiting-box {
  text-align: center;
  padding: 40px 20px;
  background: var(--ccp-surface);
  border-radius: var(--ccp-radius);
  border: 1px dashed var(--ccp-border);
}
.ccp-spinner {
  width: 24px; height: 24px;
  margin: 0 auto 10px;
  border: 3px solid var(--ccp-border);
  border-top-color: var(--ccp-blue);
  border-radius: 50%;
  animation: ccp-spin 1s linear infinite;
}
@keyframes ccp-spin { to { transform: rotate(360deg); } }
.ccp-waiting-text { font-weight: 600; margin-bottom: 4px; }
.ccp-waiting-detail { font-size: 12px; color: var(--ccp-muted); font-family: ui-monospace, monospace; }

.ccp-result-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 20px;
  font-size: 13px;
  padding: 12px 0;
  margin: 10px 0;
  border-top: 1px solid #BBF7D0;
  border-bottom: 1px solid #BBF7D0;
}
.ccp-meta-key {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #047857;
  margin-right: 6px;
}
.ccp-disclosed-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #047857; margin-top: 10px; margin-bottom: 6px;
}
.ccp-disclosed-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ccp-disclosed-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  background: rgba(255, 255, 255, 0.7);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
}
.ccp-disclosed-key { font-weight: 700; color: #065F46; }
.ccp-disclosed-val { color: var(--ccp-text); }

/* ── Protocol explainer block ─────────────────────────────────── */
.ccp-protocol {
  background: #FFF;
  border: 1px solid var(--ccp-border);
  border-radius: var(--ccp-radius);
  padding: 24px;
}
.ccp-protocol h2 { margin-top: 0; font-size: 15px; color: var(--ccp-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.ccp-protocol ol { padding-left: 20px; line-height: 1.7; }
.ccp-protocol code {
  background: var(--ccp-bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.88em;
}
.ccp-inspect {
  margin-top: 12px;
  font-size: 13px;
}
.ccp-inspect pre {
  background: var(--ccp-bg);
  padding: 12px;
  border-radius: 8px;
  font-size: 11px;
  overflow: auto;
  max-height: 320px;
}

/* ═══ Wallet ═══════════════════════════════════════════════════ */

.ccp-onboarding {
  background: var(--ccp-surface);
  border-radius: var(--ccp-radius);
  padding: 32px;
  box-shadow: var(--ccp-shadow);
  border: 1px solid var(--ccp-border);
}
.ccp-onboarding-points {
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ccp-point {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.55;
}
.ccp-point-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ccp-gold);
  color: var(--ccp-blue);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}

.ccp-wallet-me {
  background: var(--ccp-surface);
  border-radius: var(--ccp-radius);
  padding: 14px 18px;
  box-shadow: var(--ccp-shadow);
  border: 1px solid var(--ccp-border);
  margin-bottom: 24px;
}
.ccp-wallet-did-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ccp-muted);
  margin-bottom: 4px;
}
.ccp-wallet-did {
  display: block;
  font-size: 11px;
  color: var(--ccp-text);
  background: var(--ccp-bg);
  padding: 6px 8px;
  border-radius: 6px;
  word-break: break-all;
}
.ccp-wallet-me-actions { margin-top: 10px; text-align: right; }

.ccp-credential-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ccp-empty {
  background: var(--ccp-surface);
  border-radius: var(--ccp-radius);
  padding: 28px;
  text-align: center;
  font-size: 14px;
  color: var(--ccp-muted);
  border: 1px dashed var(--ccp-border);
  line-height: 1.6;
}

.ccp-cred-card {
  background: var(--ccp-surface);
  border-radius: var(--ccp-radius);
  padding: 18px;
  box-shadow: var(--ccp-shadow);
  border: 1px solid var(--ccp-border);
}
.ccp-cred-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ccp-border);
  margin-bottom: 12px;
}
.ccp-cred-type { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.ccp-cred-issuer { font-size: 12px; color: var(--ccp-muted); }
.ccp-cred-issuer-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }
.ccp-cred-issuer strong { color: var(--ccp-blue-d); font-weight: 600; }

.ccp-cred-claims {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ccp-cred-claim {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
}
.ccp-cred-claim-key { color: var(--ccp-muted); }
.ccp-cred-claim-val { color: var(--ccp-text); font-weight: 500; }

.ccp-cred-subclaim-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ccp-cred-subclaim {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.4;
}
.ccp-cred-subclaim-key {
  color: var(--ccp-muted);
  font-weight: 500;
  min-width: 96px;
}
.ccp-cred-subclaim-val {
  color: var(--ccp-text);
  font-weight: 500;
  word-break: break-word;
}
.ccp-cred-subclaim-meta {
  color: var(--ccp-muted);
  font-size: 12px;
  font-style: italic;
  margin-top: 4px;
}

.ccp-aff-note {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--ccp-surface, #f7f8fb);
  border-left: 3px solid var(--ccp-blue, #2c5fb6);
  border-radius: 4px;
  color: var(--ccp-muted);
  font-size: 13px;
  line-height: 1.5;
}

.ccp-cred-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ccp-border);
  font-size: 11px;
  color: var(--ccp-muted);
  gap: 8px;
  flex-wrap: wrap;
}

.ccp-inline-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.ccp-inline-form input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--ccp-border);
  border-radius: 8px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.ccp-inline-form input:focus { outline: 2px solid var(--ccp-blue); outline-offset: -2px; }

/* ═══ Modals (offer / presentation) ════════════════════════════ */

.ccp-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 50;
}
.ccp-modal {
  background: var(--ccp-surface);
  border-radius: var(--ccp-radius);
  padding: 24px;
  max-width: 540px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}
.ccp-modal h2 { font-size: 20px; margin: 0 0 6px; }
.ccp-modal-issuer, .ccp-modal-verifier {
  font-size: 13px; color: var(--ccp-blue-d);
  background: var(--ccp-accent-bg);
  padding: 8px 12px;
  border-radius: 6px;
  margin: 8px 0;
  font-weight: 600;
}
.ccp-modal-vct {
  font-size: 14px; font-weight: 600; color: var(--ccp-text);
}
.ccp-modal-body {
  font-size: 14px; line-height: 1.55; margin: 12px 0;
}
.ccp-form-label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--ccp-text);
  margin-bottom: 4px;
}
.ccp-form-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--ccp-border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--ccp-surface, #fff);
  color: var(--ccp-text);
}
.ccp-form-input:focus { outline: 2px solid var(--ccp-blue); outline-offset: -2px; }
.ccp-form-hint {
  font-size: 12px; color: var(--ccp-muted, #64748b);
  margin-top: 6px; min-height: 16px;
}
.ccp-form-hint.is-error { color: #b91c1c; }
.ccp-recovery-list {
  display: flex; flex-direction: column; gap: 12px;
}
.ccp-recovery-card {
  border: 1px solid var(--ccp-border);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--ccp-surface, #fff);
}
.ccp-recovery-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.ccp-recovery-card-title {
  font-size: 15px; font-weight: 600; color: var(--ccp-text);
}
.ccp-recovery-used-pill {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ccp-blue-d, #1e40af);
  background: var(--ccp-accent-bg, #dbeafe);
  padding: 3px 8px; border-radius: 999px;
}
.ccp-recovery-card-desc {
  font-size: 13px; line-height: 1.5; color: var(--ccp-text);
  margin-bottom: 6px;
}
.ccp-recovery-card-types,
.ccp-recovery-card-hint {
  font-size: 12px; color: var(--ccp-muted, #64748b);
  margin-bottom: 8px;
}
.ccp-recovery-card-types code {
  font-size: 11px;
  background: var(--ccp-accent-bg, #f1f5f9);
  padding: 1px 6px; border-radius: 4px;
  font-family: ui-monospace, monospace;
}
.ccp-language-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 10px;
  background: var(--ccp-accent-bg, #f1f5f9);
  border-radius: 999px;
}
.ccp-language-picker-label {
  font-size: 12px;
  color: var(--ccp-muted, #64748b);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ccp-language-pill {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ccp-text);
  cursor: pointer;
}
.ccp-language-pill.is-active {
  background: var(--ccp-surface, #fff);
  border-color: var(--ccp-blue, #1e40af);
  color: var(--ccp-blue-d, #1e3a8a);
}
.ccp-language-pill:focus {
  outline: 2px solid var(--ccp-blue, #1e40af);
  outline-offset: 2px;
}
.ccp-language-pill[aria-pressed="true"] {
  background: var(--ccp-surface, #fff);
  border-color: var(--ccp-blue, #1e40af);
  color: var(--ccp-blue-d, #1e3a8a);
}
.ccp-skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 100;
  background: var(--ccp-blue, #1e40af);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.ccp-skip-link:focus {
  top: 8px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Visually-hidden but accessible to screen readers (WCAG 2.1 1.3.1) */
.ccp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ccp-modal-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ccp-border);
}
.ccp-claim-list {
  margin: 0; padding-left: 18px; line-height: 1.7; font-size: 14px;
}

/* Presentation consent UI */
.ccp-present-candidates {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}
.ccp-present-card {
  border: 2px solid var(--ccp-border);
  border-radius: var(--ccp-radius);
  padding: 14px;
  transition: all 0.15s;
}
.ccp-present-card:has(input[type="radio"]:checked) { border-color: var(--ccp-blue); }
.ccp-present-card-dim { opacity: 0.5; }
.ccp-present-select {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  margin-bottom: 4px;
}
.ccp-present-title { font-weight: 700; }
.ccp-present-issuer { font-size: 12px; color: var(--ccp-muted); margin-bottom: 10px; }

.ccp-consent-list {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--ccp-border);
}
.ccp-consent-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
}
.ccp-consent-row:hover { background: var(--ccp-bg); }
.ccp-consent-row-missing { opacity: 0.5; cursor: not-allowed; }
.ccp-consent-key { font-weight: 600; font-size: 13px; }
.ccp-consent-val { font-size: 13px; color: var(--ccp-muted); }

.ccp-present-result { margin-top: 14px; }
.ccp-present-ok {
  background: #ECFDF5; border: 1px solid #A7F3D0;
  border-radius: 8px; padding: 12px; font-size: 13px; color: #065F46;
}
.ccp-present-sent, .ccp-present-received { font-size: 12px; margin-top: 6px; }
.ccp-present-sent code { background: #fff; padding: 1px 5px; border-radius: 3px; }
.ccp-present-err {
  background: #FEF2F2; border: 1px solid #FECACA;
  border-radius: 8px; padding: 12px; font-size: 13px; color: var(--ccp-red);
}

/* Toast */
.ccp-toast {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 100;
}
.ccp-toast-info { background: #1E293B; color: #fff; }
.ccp-toast-ok   { background: #065F46; color: #D1FAE5; }
.ccp-toast-err  { background: #7F1D1D; color: #FECACA; }

/* Responsive */
@media (max-width: 640px) {
  .ccp-header, .ccp-wallet-header { padding: 12px 16px; }
  .ccp-main, .ccp-wallet-main { padding: 24px 16px; }
  .ccp-section h1 { font-size: 24px; }
  .ccp-cred-claim { grid-template-columns: 1fr; }
  .ccp-cred-claim-key { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
  .ccp-disclosed-row { grid-template-columns: 1fr; }
}

/* ═══ Bureau (role pill + pages) ═══════════════════════════════ */
.ccp-role-bureau { background: #F5F3FF; color: #5B21B6; border: 1px solid #DDD6FE; }
.ccp-role-rp     { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.ccp-seal-bureau { background: #5B21B6; color: #FDE68A; border-color: #FDE68A; font-weight: 800; }
.ccp-seal-rp     { background: #FDB515; color: #0B5394; border-color: #0B5394; }

.ccp-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.ccp-role-card {
  background: var(--ccp-surface);
  border: 1px solid var(--ccp-border);
  border-radius: var(--ccp-radius);
  padding: 16px;
  box-shadow: var(--ccp-shadow);
}
.ccp-role-name {
  font-weight: 700;
  color: var(--ccp-blue-d);
  margin-bottom: 6px;
  font-size: 15px;
}
.ccp-role-desc { font-size: 13px; color: var(--ccp-muted); line-height: 1.55; }

.ccp-invariant-list { display: flex; flex-direction: column; gap: 8px; }
.ccp-invariant {
  background: #FAF5FF;
  border-left: 3px solid #7C3AED;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
}
.ccp-invariant-id {
  display: inline-block;
  font-weight: 700;
  color: #5B21B6;
  font-size: 12px;
  margin-bottom: 4px;
}
.ccp-invariant-statement { font-size: 13px; color: var(--ccp-text); line-height: 1.55; }

.ccp-issuer-card, .ccp-rs-card {
  background: var(--ccp-surface);
  border: 1px solid var(--ccp-border);
  border-radius: var(--ccp-radius);
  padding: 16px;
  box-shadow: var(--ccp-shadow);
  margin-bottom: 12px;
}
.ccp-issuer-head, .ccp-rs-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.ccp-issuer-did, .ccp-rs-id {
  font-size: 11px; color: var(--ccp-muted); word-break: break-all;
}
.ccp-issuer-scope { font-size: 13px; margin: 8px 0; }
.ccp-issuer-scope code {
  background: var(--ccp-accent-bg);
  padding: 1px 6px; border-radius: 4px;
  margin: 0 2px;
}
.ccp-issuer-meta { font-size: 11px; color: var(--ccp-muted); }
.ccp-rs-name { font-weight: 700; margin-bottom: 4px; }
.ccp-rs-rp { font-size: 12px; color: var(--ccp-muted); margin-bottom: 8px; }
.ccp-rs-desc { font-size: 13px; color: var(--ccp-text); margin-bottom: 10px; line-height: 1.55; }
.ccp-rs-checks { display: flex; flex-direction: column; gap: 4px; }
.ccp-rs-check {
  font-size: 12px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.ccp-rs-meta { color: var(--ccp-muted); font-size: 11px; }

.ccp-required-pill, .ccp-optional-pill {
  font-size: 10px; padding: 1px 6px; border-radius: 10px; font-weight: 600;
}
.ccp-required-pill { background: #FEF3C7; color: #92400E; }
.ccp-optional-pill { background: #F1F5F9; color: var(--ccp-muted); }

.ccp-status-pill {
  font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ccp-status-active     { background: #D1FAE5; color: #065F46; }
.ccp-status-lapsed     { background: #FEF3C7; color: #92400E; }
.ccp-status-terminated { background: #E2E8F0; color: #475569; }
.ccp-status-received   { background: #DBEAFE; color: #1E40AF; }
.ccp-status-admitted   { background: #D1FAE5; color: #065F46; }

.ccp-endpoint-list {
  padding: 0; list-style: none;
}
.ccp-endpoint-list li {
  padding: 6px 0;
  font-size: 13px;
  color: var(--ccp-muted);
}
.ccp-endpoint-list code {
  color: var(--ccp-blue-d);
  font-weight: 600;
}

/* ═══ RP (State HR) — openings + applications ══════════════════ */
.ccp-openings-list { display: flex; flex-direction: column; gap: 16px; }
.ccp-opening-card {
  background: var(--ccp-surface);
  border: 1px solid var(--ccp-border);
  border-radius: var(--ccp-radius);
  padding: 20px;
  box-shadow: var(--ccp-shadow);
}
.ccp-opening-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 8px;
}
.ccp-opening-title { font-weight: 700; font-size: 17px; }
.ccp-opening-sub { font-size: 13px; color: var(--ccp-muted); }
.ccp-opening-salary { font-size: 13px; color: var(--ccp-green); font-weight: 600; }
.ccp-opening-desc { font-size: 14px; margin: 10px 0; line-height: 1.55; color: var(--ccp-text); }
.ccp-opening-rs {
  background: var(--ccp-bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 12px;
}
.ccp-opening-rs-title { font-weight: 600; margin-bottom: 6px; color: var(--ccp-muted); }
.ccp-opening-rs-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.ccp-rs-check-pill {
  padding: 2px 8px;
  background: #fff;
  border: 1px solid var(--ccp-border);
  border-radius: 10px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
}
.ccp-rs-check-required { border-color: #FDE68A; background: #FEF3C7; color: #92400E; }
.ccp-opening-actions { margin-top: 10px; }

.ccp-application-card {
  background: var(--ccp-surface);
  border: 1px solid var(--ccp-border);
  border-radius: var(--ccp-radius);
  padding: 16px;
  margin-bottom: 12px;
}
.ccp-application-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; font-size: 12px; color: var(--ccp-muted);
}
.ccp-application-meta { font-size: 13px; color: var(--ccp-muted); margin-bottom: 10px; }
.ccp-application-meta code { background: var(--ccp-bg); padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.ccp-application-meta .ccp-ok { color: var(--ccp-green); font-weight: 600; }
.ccp-affiliation-note {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  color: #065F46;
  margin-top: 8px;
}

/* ═══ Wallet: goals, gap analysis, affiliations ═════════════════ */
.ccp-goal-card {
  background: var(--ccp-surface);
  border: 1px solid var(--ccp-border);
  border-radius: var(--ccp-radius);
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--ccp-shadow);
}
.ccp-goal-pass { border-color: #A7F3D0; background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 100%); }
.ccp-goal-head { margin-bottom: 10px; }
.ccp-goal-title { font-weight: 700; margin-bottom: 2px; }
.ccp-goal-rp { font-size: 12px; color: var(--ccp-muted); }
.ccp-goal-progress { margin-bottom: 10px; }
.ccp-goal-progress-bar {
  height: 6px;
  background: var(--ccp-bg);
  border-radius: 3px;
  overflow: hidden;
}
.ccp-goal-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ccp-blue), var(--ccp-green));
  transition: width 0.3s;
}
.ccp-goal-progress-text {
  font-size: 11px; color: var(--ccp-muted); margin-top: 4px;
}
.ccp-goal-pass .ccp-goal-progress-fill { background: var(--ccp-green); }

.ccp-goal-gap { margin-top: 14px; }
.ccp-gap-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ccp-muted); margin-bottom: 8px; font-weight: 600;
}
.ccp-gap-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 10px; border-radius: 6px;
  margin-bottom: 4px;
  font-size: 13px;
}
.ccp-gap-ok   { background: #F0FDF4; border: 1px solid #BBF7D0; }
.ccp-gap-miss { background: #FEF2F2; border: 1px solid #FECACA; }
.ccp-gap-icon {
  font-weight: 700; font-size: 16px; flex-shrink: 0;
  width: 20px; text-align: center;
}
.ccp-gap-ok .ccp-gap-icon   { color: #16A34A; }
.ccp-gap-miss .ccp-gap-icon { color: #DC2626; }
.ccp-gap-detail { font-size: 12px; color: var(--ccp-muted); margin-top: 2px; }
.ccp-gap-note {
  margin-top: 10px;
  padding: 10px;
  background: var(--ccp-accent-bg);
  color: var(--ccp-blue-d);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}

/* Affiliations */
.ccp-aff-card {
  background: var(--ccp-surface);
  border: 1px solid var(--ccp-border);
  border-radius: var(--ccp-radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: var(--ccp-shadow);
}
.ccp-aff-active     { border-left: 3px solid var(--ccp-green); }
.ccp-aff-lapsed     { border-left: 3px solid #F59E0B; }
.ccp-aff-terminated { border-left: 3px solid #94A3B8; opacity: 0.75; }
.ccp-aff-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.ccp-aff-rp { font-weight: 700; }
.ccp-aff-type { font-size: 12px; color: var(--ccp-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ccp-aff-meta { font-size: 11px; color: var(--ccp-muted); margin-top: 4px; }
.ccp-aff-meta code { background: var(--ccp-bg); padding: 1px 5px; border-radius: 3px; }

/* ═══ Five-role banner (shared pedagogy) ═══════════════════════ */
.ccp-role-banner {
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 14px 24px;
  background: linear-gradient(90deg, #F8FAFC 0%, #FFFFFF 100%);
  border: 1px solid var(--ccp-border);
  border-top: none;
  border-radius: 0 0 var(--ccp-radius) var(--ccp-radius);
  font-size: 13px;
}
.ccp-role-banner-label {
  color: var(--ccp-muted);
  margin-bottom: 8px;
}
.ccp-role-banner-label strong { color: var(--ccp-blue-d); }
.ccp-role-chain {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.ccp-role-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--ccp-border);
  color: var(--ccp-muted);
  text-decoration: none !important;
  transition: all 0.15s;
}
.ccp-role-chip:hover { border-color: var(--ccp-blue); color: var(--ccp-blue-d); }
.ccp-role-chip-active {
  background: var(--ccp-blue-d);
  color: #fff;
  border-color: var(--ccp-blue-d);
  cursor: default;
}
.ccp-role-chip-active:hover { color: #fff; }
.ccp-role-chip-label { font-size: 12px; font-weight: 700; }
.ccp-role-chip-sub { font-size: 10px; opacity: 0.8; }
.ccp-role-chip-sep { color: var(--ccp-border); font-weight: 700; }
.ccp-role-banner-audit {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ccp-muted);
}
.ccp-role-banner-audit code {
  background: var(--ccp-bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}

/* `hidden` attribute must win over display:flex on modal overlays */
.ccp-modal-overlay[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   WALLET — institutional aesthetic (per `proposal/orals/02-wallet-design-spec.md`
   and `proposal/orals/03-wallet-ia.md`).
   Soft navy backdrop · warm-paper card surface · deep teal accent ·
   four-tab bottom nav · institutional Inter Display + Inter type ·
   text-first status · generous spacing · hairline borders · no consumer cues.
   Scoped to body.ccp-app-wallet only.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

body.ccp-app-wallet {
  --w-bg:       #0d1a2e;   /* soft navy backdrop */
  --w-surface:  #f4f0e6;   /* warm-paper card */
  --w-surface-2:#ebe5d6;   /* warm-paper deeper (sub-surfaces) */
  --w-text:     #0c1f3d;   /* deep navy text on paper */
  --w-text-on-bg:#e8e3d3;  /* paper text on navy */
  --w-muted:    #5b6a7d;   /* warm gray for secondary text */
  --w-muted-on-bg:#8b95a3; /* secondary text on navy */
  --w-border:   #d4cebd;   /* hairline border on paper */
  --w-border-on-bg:rgba(244,240,230,0.12);
  --w-accent:   #1F5C6E;   /* deep teal — single accent for action and trust state */
  --w-accent-d: #16475A;
  --w-accent-l: #E8F0F2;
  --w-success:  #2D5A3D;   /* success state (used sparingly, text-first) */
  --w-warn:     #8C5A1F;   /* warning state */
  --w-danger:   #8B2828;
  --w-shadow:   0 1px 0 rgba(12, 31, 61, 0.04);
  --w-radius:   10px;
  --w-radius-sm:6px;
  --w-radius-lg:14px;

  background: var(--w-bg);
  color: var(--w-text-on-bg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body.ccp-app-wallet h1, body.ccp-app-wallet h2, body.ccp-app-wallet h3, body.ccp-app-wallet h4 {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.ccp-app-wallet code, body.ccp-app-wallet pre {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}

/* ── Header band — tightened to give the wallet card primacy ──────
   Keeps a tasteful wordmark + role pill at the top of the dark navy
   surround, but does not duplicate the wallet card's own title block.
   The role banner is hidden on the wallet origin (it teaches role
   context useful on Bureau/Issuer/RP/Verifier surfaces; on the holder's
   own wallet it competes with the product). The role chip remains in
   the DOM (FQT contract) but is visually hidden. */
body.ccp-app-wallet .ccp-wallet-header {
  background: transparent;
  border-bottom: 0;
  padding: 14px 28px 10px;
  max-width: 580px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.ccp-app-wallet .ccp-wallet-logo { display: flex; align-items: center; gap: 14px; }
body.ccp-app-wallet .ccp-wallet-header .ccp-seal {
  display: none; /* drop the consumer-app star avatar */
}
body.ccp-app-wallet .ccp-wallet-header .ccp-logo-text {
  display: flex; flex-direction: column;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--w-muted-on-bg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
body.ccp-app-wallet .ccp-wallet-header .ccp-logo-text small {
  display: none; /* The wallet card carries the subtitle. */
}
body.ccp-app-wallet .ccp-role-pill.ccp-role-holder {
  background: transparent;
  color: var(--w-muted-on-bg);
  border: 1px solid var(--w-border-on-bg);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-size: 9px;
  padding: 4px 10px;
}

/* Hide the five-role banner on the wallet origin entirely. The role
   context is taught on Bureau/Issuer/RP/Verifier surfaces. The chip
   stays in the DOM for the FQT contract; it just isn't shown. */
body.ccp-app-wallet #ccp-role-banner { display: none; }

/* ── Centered "screen" — warm-paper card on soft navy ─────────────── */
body.ccp-app-wallet .ccp-wallet-main {
  max-width: 580px;
  margin: 0 auto 80px; /* extra bottom for tab bar */
  padding: 0;
  background: var(--w-surface);
  color: var(--w-text);
  border-radius: var(--w-radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

body.ccp-app-wallet .ccp-wallet-main h1 {
  font-size: 24px;
  margin: 0 0 12px;
  color: var(--w-text);
}
body.ccp-app-wallet .ccp-wallet-main h2 {
  font-size: 17px;
  margin: 32px 0 12px;
  color: var(--w-text);
  letter-spacing: -0.005em;
}
body.ccp-app-wallet .ccp-wallet-main h3 {
  font-size: 14px;
  margin: 24px 0 10px;
  color: var(--w-text);
  font-weight: 600;
}
body.ccp-app-wallet .ccp-section-divider { display: none; }
body.ccp-app-wallet .ccp-wallet-main .ccp-muted {
  color: var(--w-muted);
  font-size: 13px;
}

/* ── Tab content panels ──────────────────────────────────────────── */
body.ccp-app-wallet .w-tab-panel {
  padding: 28px 28px 32px;
  display: none;
}
body.ccp-app-wallet .w-tab-panel.is-active { display: block; }

/* ── Bottom tab bar — anchored to the wallet card, not the viewport ──
   On desktop the bar sits inside the wallet's max-width column so it
   reads as part of the product, not a slab framing the page. On mobile
   it goes edge-to-edge as a normal mobile tab bar. */
body.ccp-app-wallet .w-tab-bar {
  position: sticky;
  bottom: 0;
  background: var(--w-surface);
  border-top: 1px solid var(--w-border);
  display: flex;
  justify-content: center;
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  z-index: 5;
  margin-top: 16px;
  border-radius: 0 0 var(--w-radius-lg) var(--w-radius-lg);
}
body.ccp-app-wallet .w-tab-bar-inner {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
body.ccp-app-wallet .w-tab-btn {
  background: transparent;
  border: 0;
  padding: 8px 6px 4px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--w-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: color 0.12s;
}
body.ccp-app-wallet .w-tab-btn:hover { color: var(--w-text); }
body.ccp-app-wallet .w-tab-btn.is-active { color: var(--w-accent); }
body.ccp-app-wallet .w-tab-glyph {
  font-size: 14px;
  line-height: 1;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  opacity: 0.7;
}
body.ccp-app-wallet .w-tab-btn.is-active .w-tab-glyph { opacity: 1; }

/* Reduce wallet-main bottom margin since the tab bar is now sticky-inside,
   not fixed-outside. */
body.ccp-app-wallet .ccp-wallet-main {
  margin-bottom: 40px;
}

/* ── Trust line at top of Home ───────────────────────────────────── */
body.ccp-app-wallet .w-title-block {
  border-bottom: 1px solid var(--w-border);
  padding-bottom: 22px;
  margin-bottom: 28px;
}
body.ccp-app-wallet .w-title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--w-text);
}
body.ccp-app-wallet .w-subtitle {
  font-size: 13px;
  color: var(--w-muted);
  margin: 0 0 14px;
  font-style: italic;
}
body.ccp-app-wallet .w-trust-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--w-text);
  font-weight: 500;
}
body.ccp-app-wallet .w-trust-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--w-accent);
  display: inline-block;
  flex-shrink: 0;
}

/* ── Wallet status row (Home > Wallet status) ─────────────────────── */
body.ccp-app-wallet .w-status-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--w-border);
  border-bottom: 1px solid var(--w-border);
}
body.ccp-app-wallet .w-status-item .w-status-label {
  font-size: 11px;
  color: var(--w-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
body.ccp-app-wallet .w-status-item .w-status-value {
  font-size: 13px;
  color: var(--w-text);
  font-weight: 500;
}

/* ── Section labels (calm, hairline-divider style) ────────────────── */
body.ccp-app-wallet .w-section-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--w-muted);
  margin: 28px 0 12px;
}

/* ── Ready-to-Use tiles ──────────────────────────────────────────── */
body.ccp-app-wallet .w-ready-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.ccp-app-wallet .w-ready-tile {
  background: #fff;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  transition: border-color 0.15s;
}
body.ccp-app-wallet .w-ready-tile:hover { border-color: var(--w-accent); }
body.ccp-app-wallet .w-ready-tile-info {
  flex: 1;
  min-width: 0;
}
body.ccp-app-wallet .w-ready-tile-kind {
  font-size: 11px;
  color: var(--w-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
body.ccp-app-wallet .w-ready-tile-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--w-text);
  margin-bottom: 2px;
}
body.ccp-app-wallet .w-ready-tile-detail {
  font-size: 12px;
  color: var(--w-muted);
}
body.ccp-app-wallet .w-ready-tile-action {
  font-size: 13px;
  color: var(--w-accent);
  font-weight: 500;
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
body.ccp-app-wallet .w-ready-empty {
  font-size: 13px;
  color: var(--w-muted);
  padding: 20px 0;
  text-align: center;
  font-style: italic;
}

/* ── Recent activity list ────────────────────────────────────────── */
body.ccp-app-wallet .w-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.ccp-app-wallet .w-activity-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--w-border);
  font-size: 13px;
}
body.ccp-app-wallet .w-activity-item:last-child { border-bottom: 0; }
body.ccp-app-wallet .w-activity-text { color: var(--w-text); flex: 1; }
body.ccp-app-wallet .w-activity-when { color: var(--w-muted); font-size: 12px; white-space: nowrap; }

/* ── Supportive explainer (one-liner) ────────────────────────────── */
body.ccp-app-wallet .w-explainer {
  background: var(--w-accent-l);
  border-left: 3px solid var(--w-accent);
  border-radius: 0 var(--w-radius-sm) var(--w-radius-sm) 0;
  padding: 12px 16px;
  margin-top: 24px;
  font-size: 13px;
  color: var(--w-accent-d);
  font-weight: 500;
}

/* ── Goals list (status-grouped) ─────────────────────────────────── */
body.ccp-app-wallet .ccp-goal-card {
  background: #fff;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  padding: 16px 18px;
  margin-bottom: 10px;
  box-shadow: var(--w-shadow);
}
body.ccp-app-wallet .ccp-goal-pass { border-color: var(--w-accent); }
body.ccp-app-wallet .ccp-goal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
body.ccp-app-wallet .ccp-goal-title { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 15px; color: var(--w-text); }
body.ccp-app-wallet .ccp-goal-rp { font-size: 12px; color: var(--w-muted); margin-top: 3px; }
body.ccp-app-wallet .w-goal-status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--w-muted);
  white-space: nowrap;
}
body.ccp-app-wallet .w-goal-status-ready { color: var(--w-accent); }
body.ccp-app-wallet .w-goal-status-almost { color: var(--w-warn); }
body.ccp-app-wallet .w-goal-status-missing { color: var(--w-muted); }
body.ccp-app-wallet .w-goal-coverage {
  font-size: 13px;
  color: var(--w-text);
  margin-bottom: 12px;
  font-weight: 500;
}
body.ccp-app-wallet .ccp-goal-progress { margin-bottom: 12px; }
body.ccp-app-wallet .ccp-goal-progress-bar { height: 3px; background: var(--w-surface-2); border-radius: 2px; overflow: hidden; }
body.ccp-app-wallet .ccp-goal-progress-fill { background: var(--w-accent); height: 100%; }
body.ccp-app-wallet .ccp-goal-progress-text {
  font-size: 11px;
  color: var(--w-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
body.ccp-app-wallet .w-goal-group-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--w-muted);
  margin: 24px 0 10px;
}
body.ccp-app-wallet .w-goal-group-label:first-child { margin-top: 8px; }

/* ── Credentials list (grouped by usefulness) ─────────────────────── */
body.ccp-app-wallet .ccp-credential-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.ccp-app-wallet .ccp-cred-card {
  background: #fff;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  padding: 16px 18px;
  box-shadow: var(--w-shadow);
}
body.ccp-app-wallet .ccp-cred-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--w-border);
}
body.ccp-app-wallet .ccp-cred-type {
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--w-text);
}
body.ccp-app-wallet .ccp-cred-issuer {
  font-size: 12px;
  color: var(--w-muted);
  margin-top: 4px;
}
body.ccp-app-wallet .ccp-cred-issuer-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.ccp-app-wallet .ccp-cred-issuer strong { color: var(--w-text); font-weight: 600; }
body.ccp-app-wallet .w-cred-trust {
  font-size: 11px;
  color: var(--w-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
body.ccp-app-wallet .w-cred-uselabel {
  font-size: 11px;
  color: var(--w-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin-top: 8px;
}
body.ccp-app-wallet .ccp-cred-claims {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.ccp-app-wallet .ccp-cred-claim {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 4px 0;
  font-size: 13px;
}
body.ccp-app-wallet .ccp-cred-claim-key {
  font-size: 10px;
  color: var(--w-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding-top: 2px;
}
body.ccp-app-wallet .ccp-cred-claim-val { color: var(--w-text); font-weight: 500; }
body.ccp-app-wallet .ccp-cred-subclaim { font-size: 12px; }
body.ccp-app-wallet .ccp-cred-subclaim-key {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  min-width: 90px;
  color: var(--w-muted);
}
body.ccp-app-wallet .ccp-cred-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--w-border);
  font-size: 11px;
  color: var(--w-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.ccp-app-wallet .ccp-cred-foot .ccp-btn-ghost {
  text-transform: none;
  font-size: 12px;
  letter-spacing: 0;
  padding: 4px 8px;
}

/* ── Goal modal (now a permission-review style sheet) ─────────────── */
body.ccp-app-wallet .ccp-modal {
  background: var(--w-surface);
  color: var(--w-text);
  border-radius: var(--w-radius-lg);
  font-family: inherit;
  padding: 28px;
}
body.ccp-app-wallet .ccp-modal h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--w-text);
}
body.ccp-app-wallet .ccp-modal-issuer,
body.ccp-app-wallet .ccp-modal-verifier {
  background: var(--w-accent-l);
  color: var(--w-accent-d);
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 13px;
}
body.ccp-app-wallet .ccp-gap-row {
  background: transparent;
  border: 0;
  padding: 6px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}
body.ccp-app-wallet .ccp-gap-ok { background: transparent; color: var(--w-text); }
body.ccp-app-wallet .ccp-gap-miss { background: transparent; color: var(--w-text); }
body.ccp-app-wallet .ccp-gap-ok .ccp-gap-icon { color: var(--w-accent); }
body.ccp-app-wallet .ccp-gap-miss .ccp-gap-icon { color: var(--w-warn); }
body.ccp-app-wallet .ccp-gap-detail { color: var(--w-muted); font-size: 12px; }
body.ccp-app-wallet .ccp-gap-title {
  color: var(--w-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body.ccp-app-wallet .ccp-gap-note {
  background: var(--w-accent-l);
  color: var(--w-accent-d);
  border-radius: var(--w-radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  margin-top: 14px;
}

/* ── More section cards — three-tier hierarchy ─────────────────────
   Primary (Move-to-another-wallet): full visual weight, accent-bordered,
   the headline portability commitment.
   Secondary (Trust & privacy): clean panel, slightly quieter.
   Tertiary (Have an invitation, Reset wallet): list-style, minimal chrome. */
body.ccp-app-wallet .w-more-section {
  background: #fff;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}
body.ccp-app-wallet .w-more-section--primary {
  border-left: 3px solid var(--w-accent);
  padding: 22px 22px 24px;
  margin-bottom: 22px;
}
body.ccp-app-wallet .w-more-section--secondary {
  background: var(--w-surface-2);
  border-color: var(--w-border);
}
body.ccp-app-wallet .w-more-section--tertiary {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--w-border);
  border-radius: 0;
  padding: 14px 0 8px;
  margin-bottom: 4px;
}
body.ccp-app-wallet .w-more-section-title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--w-text);
  margin: 0 0 6px;
}
body.ccp-app-wallet .w-more-section--primary .w-more-section-title {
  font-size: 17px;
  margin: 0 0 8px;
}
body.ccp-app-wallet .w-more-section--tertiary .w-more-section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--w-muted);
  font-weight: 600;
}
body.ccp-app-wallet .w-more-section-prose {
  font-size: 13px;
  color: var(--w-muted);
  line-height: 1.55;
  margin: 0 0 10px;
}
body.ccp-app-wallet .w-more-section--primary .w-more-section-prose {
  font-size: 14px;
}
body.ccp-app-wallet .w-more-section--tertiary .w-more-section-prose {
  font-size: 12px;
  margin-bottom: 8px;
}
body.ccp-app-wallet .w-more-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--w-text);
  margin: 0 0 14px;
}
body.ccp-app-wallet .w-more-list-item {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
body.ccp-app-wallet .w-more-list-item::before {
  content: '·';
  color: var(--w-muted);
  font-weight: 700;
}

/* ── Trust & privacy block (More section) ─────────────────────────── */
body.ccp-app-wallet .w-trust-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
body.ccp-app-wallet .w-trust-line-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
}
body.ccp-app-wallet .w-trust-line-mark {
  color: var(--w-accent);
  font-weight: 700;
  flex-shrink: 0;
  width: 12px;
}
body.ccp-app-wallet .w-trust-line-text { color: var(--w-text); flex: 1; }

/* ── Buttons (single-accent system) ───────────────────────────────── */
body.ccp-app-wallet .ccp-btn {
  font-family: inherit;
  border-radius: var(--w-radius-sm);
  font-weight: 500;
  letter-spacing: 0.005em;
}
body.ccp-app-wallet .ccp-btn-primary {
  background: var(--w-accent);
  border-color: var(--w-accent);
  color: var(--w-surface);
}
body.ccp-app-wallet .ccp-btn-primary:hover { background: var(--w-accent-d); border-color: var(--w-accent-d); }
body.ccp-app-wallet .ccp-btn-primary:disabled { background: var(--w-accent); opacity: 0.45; }
body.ccp-app-wallet .ccp-btn-secondary {
  background: transparent;
  color: var(--w-accent);
  border-color: var(--w-accent);
}
body.ccp-app-wallet .ccp-btn-secondary:hover { background: var(--w-accent-l); }
body.ccp-app-wallet .ccp-btn-ghost {
  background: transparent;
  color: var(--w-muted);
  border-color: var(--w-border);
}
body.ccp-app-wallet .ccp-btn-ghost:hover { background: var(--w-surface-2); color: var(--w-text); }

/* ── Technical details disclosure (raw DIDs, signing keys, etc.) ──
   Pushes implementation-language identifiers behind a one-click reveal
   so the primary surface stays human-facing. */
body.ccp-app-wallet .ccp-tech-details {
  margin-top: 14px;
  padding: 0;
  font-size: 12px;
  color: var(--w-muted);
}
body.ccp-app-wallet .ccp-tech-details summary {
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--w-muted);
  padding: 6px 0;
  list-style: none;
  user-select: none;
}
body.ccp-app-wallet .ccp-tech-details summary::-webkit-details-marker { display: none; }
body.ccp-app-wallet .ccp-tech-details summary::before {
  content: '▸ ';
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.12s;
}
body.ccp-app-wallet .ccp-tech-details[open] summary::before {
  content: '▾ ';
}
body.ccp-app-wallet .ccp-tech-row {
  padding: 4px 0;
  font-size: 11px;
  word-break: break-all;
}
body.ccp-app-wallet .ccp-tech-row code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--w-text);
}

/* ── Empty / lag-note states ─────────────────────────────────────── */
body.ccp-app-wallet .ccp-empty {
  background: #fff;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  padding: 22px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--w-muted);
  line-height: 1.6;
}
body.ccp-app-wallet .ccp-aff-note {
  background: var(--w-surface-2);
  border: 1px solid var(--w-border);
  border-left: 3px solid var(--w-muted);
  border-radius: var(--w-radius-sm);
  padding: 12px 14px;
  font-size: 12px;
  color: var(--w-muted);
  margin-top: 12px;
  text-align: left;
  line-height: 1.5;
}

/* ── Onboarding panel polish ─────────────────────────────────────── */
body.ccp-app-wallet .ccp-onboarding {
  padding: 32px 28px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.ccp-app-wallet .ccp-onboarding h1 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--w-text);
}
body.ccp-app-wallet .ccp-onboarding .ccp-lede {
  color: var(--w-muted);
  font-size: 14px;
}
body.ccp-app-wallet .ccp-onboarding-points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 22px 0 24px;
}
body.ccp-app-wallet .ccp-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 13px;
  line-height: 1.55;
}
body.ccp-app-wallet .ccp-point-num {
  background: var(--w-accent);
  color: var(--w-surface);
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
}
body.ccp-app-wallet .ccp-onboarding strong { color: var(--w-text); font-weight: 600; }
body.ccp-app-wallet .ccp-onboarding .ccp-note {
  color: var(--w-muted);
  font-size: 12px;
  font-style: italic;
}

/* ── Identity / DID display (used in Home wallet status + invitation) ── */
body.ccp-app-wallet .ccp-wallet-did {
  display: block;
  background: var(--w-surface-2);
  padding: 8px 10px;
  border-radius: var(--w-radius-sm);
  font-size: 11px;
  color: var(--w-text);
  word-break: break-all;
}
body.ccp-app-wallet .ccp-wallet-did-label {
  font-size: 11px;
  color: var(--w-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

/* ── Invitation form (Home or More) ──────────────────────────────── */
body.ccp-app-wallet .ccp-inline-form input {
  background: #fff;
  border: 1px solid var(--w-border);
  color: var(--w-text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
body.ccp-app-wallet .ccp-inline-form input:focus {
  outline: 2px solid var(--w-accent);
  outline-offset: -2px;
}

/* ═══════════════════════════════════════════════════════════════════
   PROPOSAL CAPTURE THEME — body.ccp-app-wallet.theme-proposal
   White-background variant for embedding in proposal PDFs / slides.
   Preserves the wallet card content; flips the surround so navy/teal
   become accents, not dominant fields. Triggered via ?theme=proposal.
   ═══════════════════════════════════════════════════════════════════ */

body.ccp-app-wallet.theme-proposal {
  --w-bg:        #fbfbfa;     /* near-white page surround */
  --w-text-on-bg:#0c1f3d;     /* navy text on the page */
  --w-muted-on-bg:#5b6a7d;
  --w-border-on-bg: rgba(12, 31, 61, 0.10);
}

/* Drop the heavy box-shadow on the wallet card — it was anchoring the card
   on dark navy; on a near-white page surround it just reads as a heavy
   shadow. Replace with a subtle hairline border. */
body.ccp-app-wallet.theme-proposal .ccp-wallet-main {
  box-shadow: none;
  border: 1px solid var(--w-border);
  background: var(--w-surface);
}

/* Header band — flip from navy-on-dark to muted-navy-on-light */
body.ccp-app-wallet.theme-proposal .ccp-wallet-header {
  border-bottom: 1px solid var(--w-border-on-bg);
}
body.ccp-app-wallet.theme-proposal .ccp-wallet-header .ccp-logo-text {
  color: var(--w-muted);
}
body.ccp-app-wallet.theme-proposal .ccp-role-pill.ccp-role-holder {
  border-color: var(--w-border-on-bg);
  color: var(--w-muted);
}

/* Five-role banner stays hidden on wallet (same as default theme).
   No further override needed. */

/* Modal backdrop — flip from the default dark scrim to white/near-white.
   The proposal theme's screenshots embed in white-page documents; a dark
   scrim around an open modal makes the capture read as two layers
   (page + dimmer) rather than one composed surface. Preserve focus on the
   modal sheet through a subtle border + soft shadow rather than a dimmer. */
body.ccp-app-wallet.theme-proposal .ccp-modal-overlay {
  background: var(--w-bg);   /* same near-white as the page surround */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.ccp-app-wallet.theme-proposal .ccp-modal {
  border: 1px solid var(--w-border);
  box-shadow: 0 6px 24px rgba(12, 31, 61, 0.06);
}
@media (max-width: 600px) {
  body.ccp-app-wallet .ccp-wallet-main {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: calc(100vh - 80px);
  }
  body.ccp-app-wallet .ccp-wallet-header { padding: 14px 18px; }
  body.ccp-app-wallet .w-tab-panel { padding: 22px 18px 28px; }
  body.ccp-app-wallet .ccp-cred-claim {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  body.ccp-app-wallet .ccp-cred-claim-key { margin-bottom: 2px; }
  body.ccp-app-wallet .w-status-row { grid-template-columns: 1fr; gap: 12px; padding: 12px 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHONE-FRAME SHELL — adapted from the Masar pilot's wallet pattern.
   When the body carries .ccp-phone-shell, the wallet renders inside a
   430×min-932 device frame on a slate-blue backdrop with a status bar +
   top bar. Outside that class, the wallet renders full-bleed (the
   pre-port aesthetic; preserved for proposal-capture variants).
   ═══════════════════════════════════════════════════════════════════ */

body.ccp-phone-shell {
  background: #1e293b;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 0 48px;
  margin: 0;
}

body.ccp-phone-shell #ccp-role-banner {
  width: 430px;
  max-width: calc(100% - 16px);
  margin-bottom: 12px;
}

.ccp-phone-frame {
  width: 430px;
  max-width: calc(100% - 16px);
  min-height: 932px;
  background: #f8fafc;
  border-radius: 2.5rem;
  border: 4px solid #334155;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Top bar — converts the existing ccp-wallet-header into the phone-frame top bar */
body.ccp-phone-shell .ccp-wallet-header {
  background: #1e3a8a;
  color: #fff;
  padding: 8px 20px 16px;
  margin: 0;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.ccp-phone-shell .ccp-wallet-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
body.ccp-phone-shell .ccp-wallet-logo::before {
  content: attr(data-avatar-letter, "C");
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.32);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
}
body.ccp-phone-shell .ccp-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  min-width: 0;
}
body.ccp-phone-shell .ccp-logo-text small {
  font-weight: 400;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.01em;
}
body.ccp-phone-shell .ccp-role-pill {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Content area inside the phone frame */
body.ccp-phone-shell .ccp-wallet-main {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f8fafc;
  position: relative;
}
body.ccp-phone-shell .ccp-wallet-main > section + section,
body.ccp-phone-shell .ccp-wallet-main > div + div { margin-top: 0 }

/* Tab bar — flush with phone-frame bottom */
body.ccp-phone-shell .w-tab-bar {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  z-index: 5;
}
body.ccp-phone-shell .w-tab-bar-inner {
  display: flex;
  justify-content: space-around;
  padding: 8px 4px 12px;
}
body.ccp-phone-shell .w-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  background: transparent;
  border: none;
  text-decoration: none;
  font-size: 0.62rem;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
}
body.ccp-phone-shell .w-tab-btn .w-tab-glyph { font-size: 1.1rem; line-height: 1; }
body.ccp-phone-shell .w-tab-btn.is-active,
body.ccp-phone-shell .w-tab-btn[aria-selected="true"] {
  color: #1e40af;
}

/* Modals — keep outside the phone frame so they cover the entire viewport */
body.ccp-phone-shell .ccp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
}

/* Skip link adjusted for phone-shell context */
body.ccp-phone-shell .ccp-skip-link {
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
}
body.ccp-phone-shell .ccp-skip-link:focus { top: 8px; }

/* ─── Wallet card system (Masar-pattern, CCP-themed) ──────────── */

body.ccp-phone-shell .ccp-card {
  background: #fff;
  border-radius: 0.75rem;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
}
/* Colored left-border keyed to credential state */
body.ccp-phone-shell .ccp-card-state-verified { border-left: 4px solid #16a34a; }
body.ccp-phone-shell .ccp-card-state-pending  { border-left: 4px solid #f59e0b; }
body.ccp-phone-shell .ccp-card-state-rejected { border-left: 4px solid #dc2626; }
body.ccp-phone-shell .ccp-card-state-info     { border-left: 4px solid #1e40af; }
body.ccp-phone-shell .ccp-card-state-neutral  { border-left: 4px solid #94a3b8; }

/* Status pill badges */
body.ccp-phone-shell .ccp-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.ccp-phone-shell .ccp-pill-verified { background: #d1fae5; color: #065f46; }
body.ccp-phone-shell .ccp-pill-pending  { background: #fef3c7; color: #92400e; }
body.ccp-phone-shell .ccp-pill-rejected { background: #fee2e2; color: #991b1b; }
body.ccp-phone-shell .ccp-pill-info     { background: #dbeafe; color: #1e3a8a; }
body.ccp-phone-shell .ccp-pill-neutral  { background: #f1f5f9; color: #475569; }

/* Per-claim dot indicators */
body.ccp-phone-shell .ccp-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
body.ccp-phone-shell .ccp-dot-green { background: #16a34a; }
body.ccp-phone-shell .ccp-dot-amber { background: #f59e0b; }
body.ccp-phone-shell .ccp-dot-gray  { background: #cbd5e1; }
body.ccp-phone-shell .ccp-dot-red   { background: #dc2626; }

/* Status banners — keyed to wallet journey state */
body.ccp-phone-shell .ccp-status-banner {
  border-radius: 0.75rem;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  line-height: 1.4;
}
body.ccp-phone-shell .ccp-status-banner-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}
body.ccp-phone-shell .ccp-status-banner-title { font-weight: 700; margin-bottom: 4px; }
body.ccp-phone-shell .ccp-status-banner-next  { font-size: 0.75rem; opacity: 0.85; }
body.ccp-phone-shell .ccp-status-getstarted { background: #dbeafe; border: 1px solid #bfdbfe; color: #1e3a8a; }
body.ccp-phone-shell .ccp-status-progress   { background: #fef3c7; border: 1px solid #fde68a; color: #92400e; }
body.ccp-phone-shell .ccp-status-ready      { background: #d1fae5; border: 1px solid #a7f3d0; color: #065f46; }

/* Bilingual side-by-side rendering — adapted from Masar.
   Default: both EN + ES visible. data-lang on .ccp-phone-frame controls
   per-card collapse: data-lang="en" hides .ccp-bi-es, data-lang="es"
   hides .ccp-bi-en, data-lang="both" (or unset) shows both stacked. */
.ccp-phone-frame[data-lang="en"] .ccp-bi-es { display: none !important; }
.ccp-phone-frame[data-lang="es"] .ccp-bi-en { display: none !important; }
.ccp-bi-en { display: block; color: #1e293b; line-height: 1.4; }
.ccp-bi-es { display: block; color: #475569; font-style: italic; line-height: 1.4; }
.ccp-bi-en + .ccp-bi-es { margin-top: 2px; }

/* Per-card bilingual mini-toggle (the EN | ES button on a card header) */
.ccp-bi-toggle {
  background: rgba(30, 64, 175, 0.08);
  border: 1px solid rgba(30, 64, 175, 0.18);
  color: #1e3a8a;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-transform: uppercase;
}
.ccp-bi-toggle:hover { background: rgba(30, 64, 175, 0.15); }
.ccp-bi-toggle:focus { outline: 2px solid #1e40af; outline-offset: 2px; }

/* IAL (NIST 800-63) callout — first-class on Home */
.ccp-ial-card {
  border-radius: 0.75rem;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
}
.ccp-ial-card .ccp-ial-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.ccp-ial-card .ccp-ial-level { font-weight: 700; font-size: 0.95rem; color: #1e293b; }
.ccp-ial-card .ccp-ial-code { font-size: 0.65rem; color: #94a3b8; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }
.ccp-ial-card .ccp-ial-method-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.78rem;
}
.ccp-ial-card .ccp-ial-method-row:last-child { border-bottom: none; }
.ccp-ial-card .ccp-ial-method-label { display: flex; align-items: center; gap: 8px; }
.ccp-ial-card.ccp-ial-l1 { border-left: 4px solid #94a3b8; }
.ccp-ial-card.ccp-ial-l2 { border-left: 4px solid #f59e0b; }
.ccp-ial-card.ccp-ial-l3 { border-left: 4px solid #16a34a; }
.ccp-ial-card.ccp-ial-institutional { border-left: 4px solid #1e40af; }

/* Disclosure-level radio with live preview */
.ccp-disclosure-levels {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px;
}
.ccp-disclosure-level {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.ccp-disclosure-level:has(input:checked) {
  border-color: #1e40af;
  background: rgba(30, 64, 175, 0.04);
}
.ccp-disclosure-level input { margin-top: 4px; }
.ccp-disclosure-level-label { font-weight: 700; font-size: 0.85rem; color: #1e293b; }
.ccp-disclosure-level-detail { font-size: 0.72rem; color: #64748b; line-height: 1.4; margin-top: 2px; }

/* Phone-frame overrides for narrower pre-existing components */
body.ccp-phone-shell .w-status-row { gap: 10px; }
body.ccp-phone-shell .w-section-label { padding: 0 4px; margin: 16px 0 8px; }
body.ccp-phone-shell .w-title-block { padding: 4px 4px 0; }

/* Mobile screens: phone frame becomes the actual viewport */
@media (max-width: 460px) {
  body.ccp-phone-shell {
    background: #f8fafc;
    padding: 0;
  }
  body.ccp-phone-shell #ccp-role-banner { display: none; }
  body.ccp-phone-shell .ccp-phone-frame {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Journey progress strip — shows the holder's position across the
   five-step Welcome → Setup → Education → Identity → Apply arc.
   Persistent under the status bar during the active goal journey.
   ═══════════════════════════════════════════════════════════════════ */

body.ccp-phone-shell .ccp-journey-strip {
  background: #1e3a8a;
  padding: 6px 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.ccp-phone-shell .ccp-journey-strip[hidden] { display: none !important; }
body.ccp-phone-shell .ccp-journey-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  position: relative;
}
body.ccp-phone-shell .ccp-journey-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}
body.ccp-phone-shell .ccp-journey-step + .ccp-journey-step::before {
  content: "";
  position: absolute;
  left: -50%;
  top: 9px;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  z-index: -1;
}
body.ccp-phone-shell .ccp-journey-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.62rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.ccp-phone-shell .ccp-journey-step.is-current .ccp-journey-dot {
  background: #fff;
  color: #1e3a8a;
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
body.ccp-phone-shell .ccp-journey-step.is-done .ccp-journey-dot {
  background: rgba(22, 163, 74, 0.92);
  color: #fff;
  border-color: rgba(22, 163, 74, 0.92);
}
body.ccp-phone-shell .ccp-journey-step.is-done .ccp-journey-dot::after { content: "✓"; }
body.ccp-phone-shell .ccp-journey-step.is-done .ccp-journey-dot { font-size: 0; }
body.ccp-phone-shell .ccp-journey-step.is-done .ccp-journey-dot::after { font-size: 0.7rem; font-weight: 700; }
body.ccp-phone-shell .ccp-journey-step + .ccp-journey-step.is-done::before,
body.ccp-phone-shell .ccp-journey-step + .ccp-journey-step.is-current::before {
  background: rgba(22, 163, 74, 0.5);
}
body.ccp-phone-shell .ccp-journey-label {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
}
body.ccp-phone-shell .ccp-journey-step.is-current .ccp-journey-label,
body.ccp-phone-shell .ccp-journey-step.is-done .ccp-journey-label {
  color: rgba(255, 255, 255, 0.95);
}

/* Why-this-matters expandable */
.ccp-why-toggle {
  background: transparent;
  border: none;
  color: #1e40af;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  text-decoration: underline;
}
.ccp-why-toggle:focus { outline: 2px solid #1e40af; outline-offset: 2px; }
.ccp-why-body {
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.55;
  background: rgba(30, 64, 175, 0.04);
  border-left: 2px solid #1e40af;
  padding: 8px 10px;
  margin-top: 6px;
  border-radius: 0 6px 6px 0;
}
.ccp-why-body[hidden] { display: none !important; }

/* Skip-options on Goal Welcome */
.ccp-onboarding-skip-group {
  margin-top: 14px;
  padding: 10px 0 0;
  border-top: 1px solid #e2e8f0;
  text-align: center;
}
.ccp-onboarding-skip-link {
  background: transparent;
  border: none;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  margin: 0 4px;
  text-decoration: underline;
}
.ccp-onboarding-skip-link:hover { color: #1e3a8a; }

/* ═══════════════════════════════════════════════════════════════════
   Focused-mode Home — until the holder claims their first credential,
   suppress every dashboard surface except the goal-progress card so
   first-paint Home reads as a continuation of the onboarding's
   single-step focus. Switches to dashboard mode once any credential
   lands (driven by JS toggling data-mode on the Home panel).
   ═══════════════════════════════════════════════════════════════════ */

body.ccp-phone-shell #tab-home[data-mode="focused"] #home-profile-card,
body.ccp-phone-shell #tab-home[data-mode="focused"] #home-skills-cloud,
body.ccp-phone-shell #tab-home[data-mode="focused"] #home-summary-card,
body.ccp-phone-shell #tab-home[data-mode="focused"] #home-ial-card,
body.ccp-phone-shell #tab-home[data-mode="focused"] #home-status-banner,
body.ccp-phone-shell #tab-home[data-mode="focused"] #wallet-status-row,
body.ccp-phone-shell #tab-home[data-mode="focused"] .w-section-label,
body.ccp-phone-shell #tab-home[data-mode="focused"] #ready-list,
body.ccp-phone-shell #tab-home[data-mode="focused"] #activity-list,
body.ccp-phone-shell #tab-home[data-mode="focused"] #affiliations-list,
body.ccp-phone-shell #tab-home[data-mode="focused"] .w-explainer {
  display: none !important;
}
/* Goal-progress card gets hero treatment in focused mode */
body.ccp-phone-shell #tab-home[data-mode="focused"] #home-goal-progress {
  margin-top: 24px;
  padding: 22px 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
body.ccp-phone-shell #tab-home[data-mode="focused"]::before {
  content: attr(data-focused-prelude);
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1e40af;
  text-align: center;
  margin: 6px 0 4px;
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════
   California brand pass — adopt the state digital-services pattern.
   Navy spine kept; CA gold introduced sparingly as an accent for
   identity-of-place: a 4px strip under the navy header, the brand
   word "California" in gold against the white wallet name, and the
   milestone celebration's check icon. Used as a signal, not as
   decoration.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ca-gold: #FDB81E;
  --ca-gold-deep: #C19000;
  --ca-navy-deep: #002F5F;
}

/* 4px gold strip immediately under the navy top bar — signature CA
   digital-services pattern, used by ca.gov and most state agencies. */
body.ccp-phone-shell .ccp-wallet-header {
  border-bottom: 4px solid var(--ca-gold);
}

/* "California" portion of the wallet name renders in gold; the rest
   stays white for legibility against the navy bar. */
body.ccp-phone-shell .ccp-logo-text .ca-emphasis {
  color: var(--ca-gold);
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Subtle 5-point star next to the wallet name — CA flag-derived,
   intentionally small and gold-only. Decorative; aria-hidden by
   the markup. */
body.ccp-phone-shell .ccp-ca-star {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  color: var(--ca-gold);
  vertical-align: -2px;
}

/* Milestone celebration — gold check icon on navy field. */
body.ccp-phone-shell #milestone-modal .ccp-milestone-mark {
  background: rgba(253, 184, 30, 0.15);
  border: 3px solid var(--ca-gold);
  color: var(--ca-gold);
}

/* Goal Welcome opportunity card — gold left-border accent (state-
   issued opportunity flag). */
body.ccp-phone-shell #goal-welcome > .ccp-card.ccp-card-state-info:first-of-type {
  border-left: 4px solid var(--ca-gold);
}

/* Focused-mode prelude ("Your next step") — gold accent so the
   prelude reads as an intentional state-program callout rather than
   ordinary section copy. */
body.ccp-phone-shell #tab-home[data-mode="focused"]::before {
  color: var(--ca-gold-deep);
}

/* ═══════════════════════════════════════════════════════════════════
   In-wallet identity verification flow.

   Three method groups (government ID / institutional / in-person),
   equal visual weight per ICN Q1's diverse-audience framing. WCAG 2.1
   AA: focus rings on every interactive surface, no color-only
   information, contrast ratios above the 4.5:1 floor.
   ═══════════════════════════════════════════════════════════════════ */

#verify-flow {
  padding: 16px;
  max-width: 100%;
}
.ccp-verify-screen { display: none; }
.ccp-verify-screen.is-active { display: block; }
.ccp-verify-screen h1,
.ccp-verify-screen h2 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 4px 0 8px;
  outline: none;
}
.ccp-verify-screen .ccp-lede {
  margin: 0 0 16px;
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.5;
}
.ccp-verify-screen .ccp-lede strong { color: #0f172a; }

/* Stepper — 3 dots showing pick → verify → done */
.ccp-verify-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0 4px;
}
.ccp-verify-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e2e8f0;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ccp-verify-dot.is-active { background: var(--ca-navy); color: #fff; border-color: var(--ca-navy); }
.ccp-verify-dot.is-done { background: var(--ca-gold); color: var(--ca-navy-deep); border-color: var(--ca-gold-deep); }
.ccp-verify-line { flex: 1; height: 2px; background: #e2e8f0; }
.ccp-verify-line.is-done { background: var(--ca-gold); }

/* Group cards (sub-screen 1) */
.ccp-verify-group-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.ccp-verify-group {
  appearance: none;
  text-align: left;
  width: 100%;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font: inherit;
  color: inherit;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.ccp-verify-group:hover { border-color: var(--ca-navy); background: #f8fafc; }
.ccp-verify-group:focus-visible {
  outline: 3px solid var(--ca-gold);
  outline-offset: 2px;
  border-color: var(--ca-navy);
}
.ccp-verify-group-icon {
  font-size: 1.4rem;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ccp-verify-group-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ccp-verify-group-name { font-weight: 700; font-size: 0.92rem; color: #0f172a; }
.ccp-verify-group-desc { font-size: 0.78rem; color: #475569; line-height: 1.4; }

/* Method cards (sub-screens 2-Gov, 2-Inst, 2-Person) */
.ccp-verify-method-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.ccp-verify-method {
  appearance: none;
  text-align: left;
  width: 100%;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font: inherit;
  color: inherit;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.ccp-verify-method:hover { border-color: var(--ca-navy); }
.ccp-verify-method:focus-visible {
  outline: 3px solid var(--ca-gold);
  outline-offset: 2px;
}
.ccp-verify-method.is-selected,
.ccp-verify-method[aria-checked="true"] {
  border-color: var(--ca-navy);
  background: rgba(30, 58, 138, 0.04);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
}
.ccp-verify-method-icon {
  font-size: 1.2rem;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ccp-verify-method-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ccp-verify-method-name { font-weight: 700; font-size: 0.88rem; color: #0f172a; }
.ccp-verify-method-desc { font-size: 0.75rem; color: #475569; line-height: 1.4; }
.ccp-verify-method-assurance {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: rgba(253, 184, 30, 0.16);
  color: #6b4f00;
  border: 1px solid rgba(253, 184, 30, 0.55);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  align-self: flex-start;
}

/* Capture screen */
.ccp-verify-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  margin-bottom: 14px;
}
.ccp-verify-capture-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(30, 58, 138, 0.08);
  border: 2px solid var(--ca-navy);
  color: var(--ca-navy);
  font-size: 1.6rem;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ccp-verify-detail-text { font-size: 0.85rem; color: #475569; line-height: 1.5; }
.ccp-verify-qr-mock {
  display: inline-block;
  width: 110px;
  height: 110px;
  background: repeating-linear-gradient(45deg, #0f172a 0 4px, transparent 4px 8px),
              repeating-linear-gradient(-45deg, #0f172a 0 4px, transparent 4px 8px),
              #fff;
  background-blend-mode: multiply;
  border-radius: 8px;
  margin: 6px 0 10px;
  padding: 6px;
  box-sizing: border-box;
}
.ccp-verify-doc-mock { display: flex; gap: 8px; justify-content: center; margin: 6px 0 10px; flex-wrap: wrap; }
.ccp-verify-doc-tile {
  width: 76px; height: 50px;
  border: 2px dashed #94a3b8;
  border-radius: 6px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: #64748b; font-size: 0.68rem; font-weight: 600;
}

/* Verification checklist */
.ccp-verify-checklist {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
}
.ccp-verify-check-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  color: #94a3b8;
  font-size: 0.85rem;
  transition: color 0.18s;
}
.ccp-verify-check-row.is-active { color: #0f172a; font-weight: 600; }
.ccp-verify-check-row.is-done { color: #475569; }
.ccp-verify-check-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  color: #94a3b8;
  font-weight: 700;
  font-size: 0.7rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ccp-verify-check-row.is-done .ccp-verify-check-icon {
  background: var(--ca-gold); border-color: var(--ca-gold-deep); color: var(--ca-navy-deep);
}
.ccp-verify-check-row.is-active .ccp-verify-check-icon {
  background: var(--ca-navy); border-color: var(--ca-navy); color: #fff;
}
.ccp-verify-spinner {
  width: 10px; height: 10px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ccp-verify-spin 0.7s linear infinite;
}
@keyframes ccp-verify-spin { to { transform: rotate(360deg); } }

/* In-person ticket card */
.ccp-verify-ticket-card {
  background: #fff;
  border: 2px solid var(--ca-gold);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  margin-bottom: 14px;
}
.ccp-verify-ticket-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ca-navy-deep);
  margin: 4px 0 12px;
}
.ccp-verify-ticket-meta {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 4px 0;
  font-size: 0.82rem;
  color: #475569;
}
.ccp-verify-ticket-meta span:last-child { color: #0f172a; font-weight: 600; }
.ccp-verify-ticket-bring {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
  text-align: left;
  font-size: 0.82rem;
  color: #475569;
}
.ccp-verify-ticket-bring strong { color: #0f172a; display: block; margin-bottom: 4px; }
.ccp-verify-ticket-bring ul { margin: 0; padding-left: 20px; }
.ccp-verify-ticket-bring li { margin: 2px 0; }

/* Result screen */
.ccp-verify-result-hero {
  background: var(--ca-navy);
  color: #fff;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-bottom: 14px;
}
.ccp-verify-result-mark {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: rgba(253, 184, 30, 0.15);
  border: 3px solid var(--ca-gold);
  color: var(--ca-gold);
  font-size: 1.4rem; font-weight: 700;
  margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
}
.ccp-verify-result-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 3px; outline: none; }
.ccp-verify-result-sub { font-size: 0.82rem; opacity: 0.9; }
.ccp-verify-claims {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.ccp-verify-claims-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.82rem;
}
.ccp-verify-claims-row:last-child { border-bottom: none; }
.ccp-verify-claims-label { color: #475569; }
.ccp-verify-claims-value { color: #0f172a; font-weight: 600; text-align: right; }
.ccp-verify-claims-value code {
  font-size: 0.74rem;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Failure screen */
.ccp-verify-fail-card {
  background: rgba(220, 38, 38, 0.04);
  border: 1.5px solid rgba(220, 38, 38, 0.3);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.ccp-verify-fail-title { font-weight: 700; color: #991b1b; margin-bottom: 4px; outline: none; }
.ccp-verify-fail-body { color: #475569; font-size: 0.85rem; }

/* Goals tab — Your goals (self-declared) + Opportunities sections */
.ccp-goals-section { margin-bottom: 28px; }
.ccp-goals-section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 4px;
}
.ccp-goals-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  flex: 1;
}
.ccp-goals-section-source {
  font-size: 0.75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ccp-goals-section-help {
  font-size: 0.82rem;
  color: #475569;
  margin: 0 0 12px;
  line-height: 1.5;
}

/* Self-declared goal cards */
.ccp-self-goal-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-left: 3px solid var(--ca-gold);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.ccp-self-goal-card-head {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 6px;
}
.ccp-self-goal-card-title {
  font-weight: 700; font-size: 0.95rem; color: #0f172a;
  flex: 1; min-width: 0;
}
.ccp-self-goal-card-ratio {
  background: rgba(30, 58, 138, 0.08);
  color: var(--ca-navy-deep);
  border: 1px solid rgba(30, 58, 138, 0.25);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.ccp-self-goal-card-why {
  font-size: 0.85rem;
  color: #475569;
  font-style: italic;
  margin-bottom: 6px;
}
.ccp-self-goal-card-meta {
  font-size: 0.74rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.ccp-self-goal-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px;
}
.ccp-self-goal-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid;
}
.ccp-self-goal-pill.is-met {
  background: rgba(253, 184, 30, 0.14);
  color: #6b4f00;
  border-color: rgba(253, 184, 30, 0.5);
}
.ccp-self-goal-pill.is-pending {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}
.ccp-self-goal-pill-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid currentColor;
  font-size: 0.7rem; font-weight: 700;
}
.ccp-self-goal-card-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 6px;
}

/* Self-goal modal */
.ccp-modal-self-goal { max-width: 500px; }
.ccp-self-goal-proofs { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ccp-self-goal-proof {
  display: flex; gap: 8px; align-items: center;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
}
.ccp-self-goal-proof:has(input:checked) {
  background: rgba(253, 184, 30, 0.08);
  border-color: var(--ca-gold-deep);
}

/* Share concept — Masar-pattern P2P share */
.ccp-share-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ccp-modal-share { max-width: 520px; }
.ccp-share-step { display: none; margin: 12px 0; }
.ccp-share-step.is-active { display: block; }

.ccp-share-level-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.ccp-share-level-card:hover { border-color: var(--ca-navy); background: #f8fafc; }
.ccp-share-level-card input[type="radio"] { margin-top: 4px; flex-shrink: 0; }
.ccp-share-level-card input[type="radio"]:checked ~ div strong { color: var(--ca-navy-deep); }
.ccp-share-level-card:has(input[type="radio"]:checked) {
  border-color: var(--ca-navy);
  background: rgba(30, 58, 138, 0.04);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
}
.ccp-share-level-card div { display: flex; flex-direction: column; gap: 2px; }
.ccp-share-level-card strong { font-size: 0.92rem; color: #0f172a; }
.ccp-share-level-card .ccp-form-help { font-size: 0.78rem; color: #475569; line-height: 1.45; margin-top: 4px; }

.ccp-share-checkbox {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 10px 0;
  font-size: 0.88rem;
  cursor: pointer;
}
.ccp-share-checkbox input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.ccp-share-checkbox span { line-height: 1.5; }

.ccp-share-done-strong {
  font-size: 1rem;
  font-weight: 700;
  color: #14532d;
  margin: 0 0 12px;
  text-align: center;
}
.ccp-share-qr-wrap {
  text-align: center;
  margin: 8px 0 14px;
}
.ccp-share-qr {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}
.ccp-share-url-row {
  display: flex; gap: 8px; align-items: center;
  margin: 6px 0 10px;
}
.ccp-share-url-row input { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; }
.ccp-share-done-actions { display: flex; gap: 8px; margin-top: 10px; }

/* Things you've shared — audit list */
.ccp-share-list-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.ccp-share-list-head {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 6px;
}
.ccp-share-list-status {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
}
.ccp-share-list-status.is-active { background: rgba(34,197,94,0.12); color: #14532d; border: 1px solid rgba(34,197,94,0.4); }
.ccp-share-list-status.is-inactive { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.ccp-share-list-recipient { font-weight: 700; color: #0f172a; flex: 1; min-width: 0; }
.ccp-share-list-views { font-size: 0.78rem; color: #64748b; }
.ccp-share-list-meta { font-size: 0.78rem; color: #475569; margin-bottom: 6px; }
.ccp-share-list-log summary { cursor: pointer; font-size: 0.82rem; color: var(--ca-navy); margin: 6px 0; }
.ccp-share-list-log ul { margin: 4px 0 8px; padding-left: 20px; font-size: 0.8rem; color: #475569; }
.ccp-share-list-log li { margin: 2px 0; }
.ccp-share-list-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* Residence questionnaire — three-step progressive disclosure */
.ccp-residence-status {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: #14532d;
}
.ccp-residence-actions { display: flex; gap: 8px; align-items: center; }

.ccp-modal-residence { max-width: 520px; }
.ccp-residence-step { display: none; margin: 12px 0; }
.ccp-residence-step.is-active { display: block; }
.ccp-residence-step .ccp-form-help {
  font-size: 0.78rem;
  color: #475569;
  margin: 4px 0 8px;
  line-height: 1.45;
}
.ccp-form-radios {
  display: flex; flex-direction: column; gap: 6px;
  margin: 6px 0 10px;
  font-size: 0.88rem;
}
.ccp-form-radios label {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}
.ccp-residence-no-fixed {
  margin-top: 14px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  font-size: 0.85rem;
}
.ccp-residence-no-fixed summary {
  cursor: pointer;
  color: #475569;
  font-weight: 600;
}
.ccp-residence-no-fixed p { margin: 8px 0 10px; line-height: 1.5; }
.ccp-residence-legal-block {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(30, 58, 138, 0.04);
  border-left: 3px solid var(--ca-navy);
  border-radius: 6px;
}
.ccp-residence-summary {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 8px 0 12px;
  font-size: 0.86rem;
}
.ccp-residence-summary-row {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid #f1f5f9;
}
.ccp-residence-summary-row:last-child { border-bottom: none; }
.ccp-residence-summary-label { color: #475569; }
.ccp-residence-summary-value { color: #0f172a; font-weight: 600; text-align: right; }
.ccp-residence-summary-enables {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
  font-size: 0.82rem;
  color: #475569;
}
.ccp-residence-summary-enables-empty { color: #64748b; font-style: italic; }
.ccp-residence-done-strong {
  font-size: 1rem;
  font-weight: 700;
  color: #14532d;
  margin: 0 0 8px;
}
.ccp-residence-actions-row { flex-wrap: wrap; gap: 6px; }

/* Passkey (FIDO2) — More-tab card */
.ccp-passkey-status {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: #14532d;
}
.ccp-passkey-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* AuthID Proof (IAL4) — real document + selfie + liveness in iframe */
.ccp-verify-authid-wrap {
  position: relative;
  background: #0f172a;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  min-height: 420px;
}
.ccp-verify-authid-iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: none;
  background: #fff;
}
.ccp-verify-authid-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 420px;
  color: #cbd5e1;
  font-size: 0.88rem;
}
.ccp-verify-authid-loading .ccp-verify-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(203, 213, 225, 0.4);
  border-top-color: #cbd5e1;
}

/* TOTP enrollment (IAL3) — real RFC 6238 QR + manual key + recovery codes */
.ccp-verify-totp-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  text-align: center;
}
.ccp-verify-totp-qr-wrap {
  display: inline-block;
  padding: 8px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
}
.ccp-verify-totp-qr {
  display: block;
  width: 200px;
  height: 200px;
}
.ccp-verify-totp-manual {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
}
.ccp-verify-totp-manual-label {
  font-size: 0.7rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 4px;
}
.ccp-verify-totp-manual-key {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 4px 10px;
  border-radius: 4px;
  user-select: all;
}
.ccp-verify-totp-recovery {
  margin: 0 0 12px;
  background: rgba(253, 184, 30, 0.06);
  border: 1px solid rgba(253, 184, 30, 0.4);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.82rem;
}
.ccp-verify-totp-recovery summary {
  cursor: pointer;
  font-weight: 700;
  color: #5c4400;
  user-select: none;
}
.ccp-verify-totp-recovery summary:focus-visible {
  outline: 2px solid var(--ca-gold);
  outline-offset: 2px;
}
.ccp-verify-totp-recovery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}
.ccp-verify-recovery-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 700;
  background: #fff;
  border: 1px solid #e2e8f0;
  padding: 6px 8px;
  border-radius: 4px;
  text-align: center;
  user-select: all;
}

/* Channel tabs (Phone | Email) on the verify-flow entry screen.
   Phone is the preferred channel; Email is the alternative. */
.ccp-verify-channel-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px;
  background: #f8fafc;
}
.ccp-verify-channel-tab {
  flex: 1;
  appearance: none;
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.12s, color 0.12s;
}
.ccp-verify-channel-tab:hover { color: #0f172a; }
.ccp-verify-channel-tab.is-active {
  background: #fff;
  color: var(--ca-navy-deep);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.ccp-verify-channel-tab:focus-visible {
  outline: 3px solid var(--ca-gold);
  outline-offset: 2px;
}
.ccp-verify-channel-icon { font-size: 1rem; }

/* Email entry form mirrors the phone-entry form layout */
.ccp-verify-email-form { margin-bottom: 14px; }

/* Phone-entry form (Masar pattern — phone-first IDV) */
.ccp-verify-phone-form { margin-bottom: 14px; }
.ccp-verify-input-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  margin: 8px 0 4px;
  letter-spacing: 0.01em;
}
.ccp-verify-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.ccp-verify-input:focus-visible {
  outline: none;
  border-color: var(--ca-navy);
  box-shadow: 0 0 0 3px rgba(253, 184, 30, 0.45);
}
.ccp-verify-country {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #475569 50%), linear-gradient(135deg, #475569 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 12px) center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.ccp-verify-otp-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.6rem;
  letter-spacing: 0.4em;
  text-align: center;
  font-weight: 700;
  padding: 14px 12px;
}

/* Live SMS-delivery indicator — shown after Telesign confirms send. */
.ccp-verify-sms-status {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 10px 0;
  font-size: 0.82rem;
  color: #14532d;
}
.ccp-verify-sms-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: ccp-verify-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ccp-verify-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* PhoneID enrichment card (Telesign Contact tier signal) */
.ccp-verify-phoneid-card {
  background: rgba(30, 58, 138, 0.04);
  border: 1px solid rgba(30, 58, 138, 0.15);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0;
  font-size: 0.82rem;
}
.ccp-verify-phoneid-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(30, 58, 138, 0.08);
}
.ccp-verify-phoneid-row:last-of-type { border-bottom: none; }
.ccp-verify-phoneid-label { color: #475569; }
.ccp-verify-phoneid-value { color: #0f172a; font-weight: 600; }
.ccp-verify-phoneid-attr {
  margin: 8px 0 0;
  font-size: 0.7rem;
  color: #64748b;
  font-style: italic;
}

/* IAL ladder cards — three step-up options after IAL1 */
.ccp-verify-ladder-list {
  display: flex; flex-direction: column; gap: 10px;
  margin: 12px 0 14px;
}
.ccp-verify-ladder-card {
  appearance: none;
  text-align: left;
  width: 100%;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  font: inherit;
  color: inherit;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.ccp-verify-ladder-card:hover { border-color: var(--ca-navy); background: #f8fafc; }
.ccp-verify-ladder-card:focus-visible {
  outline: 3px solid var(--ca-gold);
  outline-offset: 2px;
  border-color: var(--ca-navy);
}
.ccp-verify-ladder-tier {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 8px;
  background: var(--ca-navy);
  color: var(--ca-gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; justify-content: center;
}
.ccp-verify-ladder-body { flex: 1; min-width: 0; }
.ccp-verify-ladder-name { font-weight: 700; font-size: 0.88rem; color: #0f172a; }
.ccp-verify-ladder-desc { font-size: 0.74rem; color: #475569; line-height: 1.4; margin-top: 2px; }
.ccp-verify-ladder-time {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.68rem;
  color: #64748b;
  font-style: italic;
}
.ccp-verify-ladder-arrow { color: #94a3b8; font-size: 1.2rem; flex-shrink: 0; }
.ccp-verify-ladder-card:hover .ccp-verify-ladder-arrow { color: var(--ca-navy); }

/* Inline link button — for "Send a new code" inside body copy */
.ccp-link-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: var(--ca-navy);
  text-decoration: underline;
  cursor: pointer;
}
.ccp-link-btn:focus-visible {
  outline: 2px solid var(--ca-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Common verify-flow actions row */
.ccp-verify-actions {
  display: flex; gap: 8px; align-items: center;
  margin-top: 14px;
}
.ccp-verify-actions .ccp-spacer { flex: 1; }

/* Named-requirements list inside the goal-progress card — surfaces
   the journey (Identity → Academic → …) with state per requirement
   so the holder reads "where am I" not just "0/2." */
body.ccp-phone-shell .ccp-req-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.ccp-phone-shell .ccp-req-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
}
body.ccp-phone-shell .ccp-req-item .ccp-req-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}
body.ccp-phone-shell .ccp-req-item.is-met {
  background: rgba(253, 184, 30, 0.14);
  color: #6b4f00;
  border-color: rgba(253, 184, 30, 0.5);
}
body.ccp-phone-shell .ccp-req-item.is-met .ccp-req-icon {
  background: var(--ca-gold);
  color: var(--ca-navy-deep);
}
body.ccp-phone-shell .ccp-req-item.is-current {
  background: #dbeafe;
  color: #1e3a8a;
  border-color: #93c5fd;
}
body.ccp-phone-shell .ccp-req-item.is-current .ccp-req-icon {
  background: #1e3a8a;
  color: #fff;
}
body.ccp-phone-shell .ccp-req-item.is-pending {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}
body.ccp-phone-shell .ccp-req-item.is-pending .ccp-req-icon {
  background: #fff;
  color: #94a3b8;
  border: 1.5px solid #cbd5e1;
}

/* Goal-pathway CTA pattern — gold-on-navy is the recognizable
   California government "do this next" affordance. Reserved for the
   three forward-motion buttons on the goal pathway: Goal Welcome
   Start, Trust Beat Continue, focused-mode Home next-step CTA. Other
   primary buttons keep the teal accent so gold remains a hierarchy
   signal, not a default button skin. */
body.ccp-phone-shell #goal-welcome-start,
body.ccp-phone-shell #goal-trust-beat-continue,
body.ccp-phone-shell #home-goal-progress-cta {
  background: var(--ca-gold);
  border-color: var(--ca-gold-deep);
  color: var(--ca-navy-deep);
  font-weight: 700;
  letter-spacing: 0.01em;
}
body.ccp-phone-shell #goal-welcome-start:hover,
body.ccp-phone-shell #goal-trust-beat-continue:hover,
body.ccp-phone-shell #home-goal-progress-cta:hover {
  background: var(--ca-gold-deep);
  border-color: var(--ca-gold-deep);
  color: var(--ca-navy-deep);
}
body.ccp-phone-shell #goal-welcome-start:focus-visible,
body.ccp-phone-shell #goal-trust-beat-continue:focus-visible,
body.ccp-phone-shell #home-goal-progress-cta:focus-visible {
  outline: 3px solid var(--ca-navy-deep);
  outline-offset: 2px;
}