/* The welcome card: a passport. Cover on top, the data page below it on paper. Tokens and shared
   components only (see docs/DESIGN.md); the paper keeps its own light colours in both themes. */
@layer pages {
  .passport { --paper: #f3ecd9; --paper-ink: #2a2418; --paper-line: rgba(42, 36, 24, .22); --cover: #14284b; --cover-edge: #c9a24a;
    width: min(520px, 100%); display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-6);
    border-color: var(--cover-edge);
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--cover) 80%, #fff) 0%, var(--cover) 62%),
      repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 6px);
    color: #f4ecd2; }
  .passport .dialog-close { color: #f4ecd2; }
  .passport-head { display: flex; align-items: center; gap: var(--sp-4); padding-right: var(--sp-8); }
  .passport-head .overline { color: var(--cover-edge); letter-spacing: var(--ls-cta); }
  .passport-head h2 { margin: 0; color: #f4ecd2; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }

  .passport-page { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4);
    border-radius: var(--r-md); color: var(--paper-ink);
    background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 40%), var(--paper);
    box-shadow: inset 0 0 0 1px var(--paper-line), 0 6px 18px rgba(0, 0, 0, .35); }
  .passport-photo { display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: var(--r-sm); color: rgba(42, 36, 24, .45);
    background: repeating-linear-gradient(135deg, rgba(42, 36, 24, .07) 0 3px, transparent 3px 7px); box-shadow: inset 0 0 0 1px var(--paper-line); }
  .passport-fields { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; min-width: 0; }
  .passport-fields div { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-bottom: var(--sp-1); border-bottom: 1px dashed var(--paper-line); }
  .passport-fields dt { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; color: rgba(42, 36, 24, .6); }
  .passport-fields dd { margin: 0; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
  .passport-mrz { grid-column: 1 / -1; margin: var(--sp-1) 0 0; font: var(--fw-medium) 12px / 1.5 var(--font-mono); letter-spacing: .08em; color: rgba(42, 36, 24, .75); overflow: hidden; white-space: nowrap; }

  .passport-note { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-md);
    background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .35); }
  .passport-note .overline { color: var(--cover-edge); }
  .passport-note p { margin: 0; font-size: var(--fs-md); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }

  @media (max-width: 480px) {
    .passport { padding: var(--sp-4); }
    .passport-page { grid-template-columns: 72px minmax(0, 1fr); }
  }
}