/* workspace/starcode/css/cosmos-passport.css -- the Surveyor's Passport
   (js/passport-book.js). Landscape single ID page (owner order 2026-08-23:
   the page turns upright -- photo left, identity info right, on top; a
   customs-stamp band underneath; the whole page wider than tall, matching
   a real passport ID page). Replaces the earlier tall two-page open-book
   spread. The page itself (paper, ink, motif) is theme-invariant, the same
   physical-document reasoning cosmos-license.css states: js/passport-
   motifs.js writes its --face-bg/--card-ink custom properties straight
   onto the .passport-shell element at render time. There is no picker,
   pager for the whole page, or caption strip -- the stamp band pages on
   its own, with its own prev/next buttons, only when more stamps exist
   than fit on one page. Headings use --font-body, numeric/label text uses
   --font-data; nothing loads from the network. */
.passport-mount { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; }
.passport-shell { position: relative; width: 100%; max-width: 560px; aspect-ratio: 4 / 3;
  --card-ink: #3a2c14; --card-dim: #8a7550; --card-accent: #7a3420; --card-line: rgba(122, 52, 32, .45); --card-hair: rgba(40, 25, 5, .18); }
.passport-page { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--face-bg); border: 1px solid var(--card-line); border-radius: 10px; box-shadow: 0 22px 48px rgba(0, 0, 0, .5); overflow: hidden; }
.passport-texture { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.passport-id { position: relative; z-index: 1; flex: 1.7 1 0; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 10px 14px 6px; border-bottom: 1px solid var(--card-hair); }
.id-header { display: flex; flex-direction: column; gap: 1px; }
.id-authority { margin: 0; font-size: 8px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--card-dim); font-family: var(--font-data); }
.id-title { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: .4px; color: var(--card-ink); line-height: 1; }
/* The photo column is close to a third of the id band's own width now
   (owner feedback 2026-08-23, third round: the old fixed 64px column read
   thin next to the reference ID-card photos) -- same proportion
   css/cosmos-license.css gives the license's own photo column, so the two
   documents read as one family. */
.id-body { flex: 1; min-height: 0; display: flex; gap: 10px; }
.id-portrait { flex: 0 0 30%; max-width: 110px; align-self: stretch; border: 1px solid var(--card-line); border-radius: 6px; background: var(--portrait-bg, #0c0f16); overflow: hidden; }
/* js/passport-book.js sizes this canvas off the frame's own measured box
   every render (drawIdPortraitToFrame), so its intrinsic aspect always
   equals the frame's real aspect -- object-fit: contain is a pure safety
   net against sub-pixel rounding, never an active crop or stretch. */
.id-portrait canvas { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; }
/* Dense stacked flow, not justify-content: space-between (owner feedback
   2026-08-23, third round: space-between left one bare gap wherever a
   block's own content ran shorter than its share of the column). Hairlines
   before the fields grid and the signature read as one form with three
   named sections, matching the license card's own vessel-field divider. */
.id-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.id-nameblock { display: flex; flex-direction: column; gap: 2px; }
.id-passno { margin: 1px 0 0; font-family: var(--font-data); font-size: 10px; letter-spacing: .5px; color: var(--card-dim); }
.id-passno span { color: var(--card-ink); }
.id-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; border-top: 1px solid var(--card-hair); padding-top: 6px; }
.passport-shell .field-label { margin: 0; font-size: 7px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--card-dim); font-family: var(--font-data); }
.passport-shell .field-value { margin: 0; font-family: var(--font-data); font-size: 10px; letter-spacing: .2px; color: var(--card-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The holder's own name reads as the id band's most prominent line (the
   reference ID-card photos all give the name the biggest type on the
   page) -- every other field keeps the shared small .field-value size
   above. Comes after that shared rule so the same-specificity override
   actually wins. */
.id-nameblock .field-value { font-family: var(--font-body); font-weight: 600; font-size: 16px; letter-spacing: .2px; color: var(--card-ink); white-space: normal; }
.id-signature { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--card-hair); padding-top: 6px; }
.id-signature canvas { width: 110px; height: 26px; display: block; }
/* Stacked, not side by side -- each MRZ line needs the full page width to
   stay a readable font size (44 fixed monospace characters), so the hash
   sits on its own short line above rather than sharing a row with them. */
.id-mrz { display: flex; flex-direction: column; gap: 1px; padding-top: 3px; border-top: 1px solid var(--card-hair); }
.id-hash { margin: 0; font-family: var(--font-data); font-size: 7px; letter-spacing: .8px; color: var(--card-dim); white-space: nowrap; }
.id-mrz .mrz-line { margin: 0; width: 100%; font-family: var(--font-data); font-size: 8px; letter-spacing: .3px; color: var(--card-ink); white-space: nowrap; overflow: hidden; }
/* padding-right reserves the bottom-right column for the QR label below,
   so the stamps, their head line, and the pager never run under it. */
.passport-stamps { position: relative; z-index: 1; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 6px 118px 8px 14px; }
.stamps-head { display: flex; align-items: baseline; justify-content: space-between; }
.stamp-pagehead { margin: 0; font-family: var(--font-data); font-size: 8px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--card-dim); }
.stamp-pagecount { margin: 0; font-family: var(--font-data); font-size: 9px; color: var(--card-dim); }
.stamps-row { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: space-evenly; }
.stamps-empty { flex: 1; min-height: 0; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-data); font-size: 9px; letter-spacing: .4px; color: var(--card-dim); }
.passport-shell .stamp { position: relative; width: 15%; max-width: 56px; aspect-ratio: 1; cursor: default; background: transparent; border: 0; padding: 0; }
.passport-shell .stamp canvas { width: 100%; height: 100%; display: block; }
.passport-shell .stamp-label { position: absolute; bottom: 8%; left: 0; right: 0; text-align: center; font-family: var(--font-data); font-size: 6px; letter-spacing: .3px; color: var(--card-accent); pointer-events: none; text-transform: uppercase; }
/* Same pill shape as cosmos-license.css's .flip-btn, so the two documents'
   controls read as one family. Only rendered when more stamps exist than
   fit on one page (js/passport-book.js) -- with 5 or fewer visited
   galaxies there is nothing to page through, so no button appears. */
.passport-shell .stamps-nav { position: absolute; bottom: 6px; min-height: 24px; min-width: 24px; font-family: var(--font-data); font-size: 13px; color: var(--card-accent); background: rgba(255, 255, 255, .4); border: 1px solid var(--card-line); border-radius: 12px; cursor: pointer; }
.passport-shell .stamps-nav:disabled { opacity: .35; cursor: default; }
.passport-shell .stamps-prev { left: 14px; }
/* Sits just left of the QR label's reserved column -- the label owns the
   page's bottom-right corner now. */
.passport-shell .stamps-next { right: 124px; }
/* The QR label (SC-QR-DOCS): the baked module matrix for the plain public
   game URL (js/qr-link-matrix.js) on a printed light patch, pasted at the
   page's bottom-right corner, with the URL as a one-line caption. The size
   is fixed at every page width -- scannability beats aesthetics, and a
   patch that shrank with the phone layout would drop below what a phone
   camera reads off another phone's screen. At narrow widths the label's
   top edge overlaps the tail of the MRZ strip like a real pasted sticker;
   that tail is always "<" filler there (the name field is capped at 24
   characters, js/persistence.js), never data. */
.passport-qrlabel { position: absolute; z-index: 2; right: 12px; bottom: 10px; width: 96px; box-sizing: border-box; background: #f8f1de; border: 1px solid var(--card-hair); border-radius: 4px; padding: 4px 4px 2px; display: flex; flex-direction: column; align-items: center; gap: 1px; box-shadow: 0 1px 3px rgba(40, 25, 5, .3); }
.passport-qrcanvas { width: 100%; aspect-ratio: 1; display: block; }
.passport-qrcaption { margin: 0; max-width: 100%; overflow: hidden; font-family: var(--font-data); font-size: 6px; letter-spacing: .3px; color: var(--card-dim); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .passport-stamps { transition: none; } }
/* The fixed 4/3 landscape shell (kept exactly, an earlier ratified call)
   gives a 375px phone only around 60px of real height for the whole id
   band body -- the desktop breathing room this round adds (the 9px id-info
   gap, the two section dividers, the bigger name line) does not fit down
   there. Pull it back under a narrow shell so three sections still read
   as three sections instead of overflowing the page's own clip. */
@media (max-width: 460px) {
  .id-info { gap: 1px; }
  .id-fields { border-top: 0; padding-top: 0; gap: 0 8px; }
  .id-signature { border-top: 0; padding-top: 0; gap: 0; }
  .id-signature canvas { width: 56px; height: 10px; }
  .id-signature .field-label { display: none; }
  .id-nameblock { gap: 0; }
  .id-nameblock .field-value { font-size: 11px; line-height: 1.1; }
  .id-passno { font-size: 8px; margin-top: 0; }
  .passport-shell .field-label { font-size: 6px; line-height: 1.1; }
  .passport-shell .field-value { font-size: 8px; line-height: 1.15; }
}