/* The App's own sheet (docs/vision/APP-PLAN.md §2; the mockup of 20 Oct 2026). The client theme is the Passport's —
   paper, burgundy on hairlines and the few buttons, no ink tiles, no red — so this sheet adds only what the App has
   and the Passport does not: the door, the cards, the tabs at the thumb. The tokens are house.css's. */
/* The faces, from the repo (Open Font License): Cormorant Garamond 600 and 700, Manrope 400 and 700. A weight in between
   is drawn from the nearest; nothing is fetched from a third party (23 Oct 2026). */
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: normal; font-display: swap; src: url("../sales/fonts/CormorantGaramond-SemiBold.9868f4ffd74c.ttf") format('truetype'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 700; font-style: normal; font-display: swap; src: url("../sales/fonts/CormorantGaramond-Bold.fc73db04e0e3.ttf") format('truetype'); }
@font-face { font-family: 'Manrope'; font-weight: 400; font-style: normal; font-display: swap; src: url("../sales/fonts/Manrope-Regular.b14c3069e3f7.ttf") format('truetype'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-style: normal; font-display: swap; src: url("../sales/fonts/Manrope-Bold.ad56d0ba69e7.ttf") format('truetype'); }
body.app { min-height: 100vh; }
.app-main { padding-bottom: 96px; }
.app-door { display: flex; flex-direction: column; min-height: calc(100vh - 60px); padding-top: 72px; }
.app-mark .house-mark { font-size: 2rem; }
.app-lede { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; line-height: 1.25; text-align: center; margin: 36px 0 0; text-wrap: balance; }
.app-form { display: flex; flex-direction: column; gap: 10px; margin-top: 44px; }
.app-label { font-weight: 600; font-size: 14px; }
.app-star { color: var(--wine); }
.app-phone { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 8px 0 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; }
.app-phone select { border: 0; background: transparent; font: 600 15px 'Manrope', sans-serif; color: var(--soft); max-width: 40%; }
.app-phone input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 18px 'Manrope', sans-serif; letter-spacing: .04em; color: var(--ink); outline: none; }
.app-digits { display: block; width: 100%; box-sizing: border-box; padding: 14px; font: 600 28px/1 'Manrope', sans-serif; letter-spacing: .5em; text-align: center; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); color: var(--ink); }
.app-digits:focus, .app-phone:focus-within { border-color: var(--wine); outline: none; }
.app-button { height: 54px; margin-top: 8px; border: 0; border-radius: 10px; background: var(--wine); color: var(--wine-on); font: 600 16px 'Manrope', sans-serif; cursor: pointer; }
.app-button:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.app-links { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.app-link { border: 0; background: transparent; padding: 0; font: 600 14px 'Manrope', sans-serif; color: var(--wine); text-decoration: none; text-align: left; cursor: pointer; }
.app-link.is-small { font-size: 13px; }
.app-debug { font-size: 13px; color: var(--soft); border: 1px dashed var(--rule); border-radius: 8px; padding: 8px 12px; text-align: center; margin: 16px 0 0; }
.app-foot { margin-top: auto; padding-top: 24px; font-size: 12px; color: var(--quiet); text-align: center; line-height: 1.6; }
.app-foot a { color: var(--quiet); }
/* Keep the App on your phone (23 Oct 2026): one quiet bar, shown by install.js when the phone can add it, gone on Not now */
.app-install { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 0 0 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; font-size: 13px; }
.app-install span { flex: 1; min-width: 0; }
.app-install .app-small { height: 32px; }
/* Your pieces */
.app-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 8px; }
.app-head-mark .house-mark { font-size: 1.3rem; text-align: left; }
.app-worth { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; margin-top: 18px; }
.app-worth-fig { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 30px; line-height: 1.1; }
.app-worth small { font-size: 12.5px; color: var(--soft); }
.app-cards { display: flex; flex-direction: column; gap: 12px; }
.app-card { display: flex; gap: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; text-decoration: none; color: var(--ink); }
.app-card.is-row { margin-bottom: 10px; }
.app-card-pic { width: 84px; height: 84px; flex: none; border-radius: 8px; background: var(--beige); overflow: hidden; display: grid; place-items: center; color: var(--soft); font-size: 11px; }
.app-card-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-card-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-card-name { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 22px; line-height: 1.1; }
.app-card-name.is-small { font-size: 18px; }
.app-card-words small { display: block; font-size: 13px; color: var(--soft); }
.app-card-words small.is-wine { color: var(--wine); font-weight: 600; margin-top: 4px; }
.app-card-name { text-decoration: none; color: var(--ink); }
.app-card-links { margin-top: 6px; }
.app-card-links a { color: var(--wine); font-weight: 600; text-decoration: none; }
.app-or { display: flex; align-items: center; gap: 14px; margin: 32px 0 18px; color: var(--quiet); font-size: 13px; }
.app-or span { flex: 1; height: 1px; background: var(--rule); }
.app-ways { display: flex; flex-direction: column; gap: 10px; }
.app-way { display: flex; align-items: center; justify-content: center; height: 52px; border: 1px solid var(--ink); border-radius: 10px; color: var(--ink); font: 600 15px 'Manrope', sans-serif; text-decoration: none; }
.pp-note.is-centred { text-align: center; margin-top: 4px; font-size: 12px; }
.app-small.is-link { display: inline-flex; align-items: center; text-decoration: none; }
/* Your dates */
.app-text { height: 44px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); font: 500 15px 'Manrope', sans-serif; color: var(--ink); width: 100%; box-sizing: border-box; }
.app-date-parts { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 8px; }
.app-date-parts label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--soft); }
.app-date-parts .app-select { height: 44px; }
.pp-line form, form.pp-line { align-items: center; }
/* Messages */
.pp-foot a { color: var(--soft); }
.app-message { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.app-message:last-child { border-bottom: 0; }
.app-message small { color: var(--soft); font-size: 12.5px; }
.app-message summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.app-message summary::-webkit-details-marker { display: none; }
.app-message summary b { font-weight: 600; font-size: 14px; }
.app-message p { margin: 8px 0 0; font-size: 14px; white-space: pre-line; color: var(--soft); }
/* Your Tray and visits */
.app-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.app-slot { height: 42px; padding: 0 14px; border: 1px solid var(--wine); border-radius: 999px; background: transparent; color: var(--wine); font: 600 14px 'Manrope', sans-serif; cursor: pointer; }
.app-slot:hover, .app-slot:focus-visible { background: var(--rose); outline: none; }
/* Care */
.app-care-form { display: flex; flex-direction: column; gap: 10px; }
.app-select { height: 48px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); font: 500 15px 'Manrope', sans-serif; color: var(--ink); }
.app-care-form .app-two { margin-top: 4px; }
.app-care-form .app-button { height: 50px; font-size: 14px; }
.app-care-form .app-button.is-quiet { display: flex; align-items: center; justify-content: center; }
.pp-fig.is-wine { color: var(--wine); }
.app-ticket { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.app-ticket:last-child { border-bottom: 0; }
.app-ticket-head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.app-ticket-head .is-wine { color: var(--wine); font-weight: 600; }
.app-ticket > small { display: block; color: var(--soft); font-size: 12.5px; }
.app-ticket ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; }
/* You */
.app-box { padding: 14px 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; }
.app-box.is-list { padding: 0 16px; }
.app-box > small { display: block; font-size: 13px; color: var(--soft); margin-top: 2px; }
.app-number { font-size: 18px; font-weight: 600; letter-spacing: .04em; }
.app-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); margin: 0; }
.app-row:last-child { border-bottom: 0; }
.app-row-words { min-width: 0; font-size: 14px; }
.app-row-words small { display: block; font-size: 12.5px; color: var(--soft); }
.app-row.is-lock { flex-wrap: wrap; }
.app-lock-acts { display: flex; gap: 6px; align-items: center; }
.app-four { width: 84px; padding: 8px; font: 600 15px 'Manrope', sans-serif; letter-spacing: .3em; text-align: center; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); }
.app-small { height: 36px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 8px; background: transparent; color: var(--ink); font: 600 13px 'Manrope', sans-serif; cursor: pointer; white-space: nowrap; }
.app-small.is-wine { border-color: var(--wine); color: var(--wine); }
.app-office-stays { margin: 6px 0 10px; padding-left: 18px; }
/* Your piece today */
.app-back { display: inline-block; margin-bottom: 14px; }
.app-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.app-figure { padding: 14px 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; display: flex; flex-direction: column; gap: 2px; }
.app-figure-fig { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 26px; line-height: 1.1; }
.app-figure small { font-size: 12.5px; color: var(--soft); }
.pp-fig.is-off { color: var(--soft); font-weight: 500; }
.app-desk { font-weight: 600; margin: 8px 0 0; }
.app-policy { margin-top: 24px; }
.app-policy summary { list-style: none; cursor: pointer; }
.app-policy summary::-webkit-details-marker { display: none; }
.app-button.is-quiet { display: block; width: 100%; box-sizing: border-box; height: auto; padding: 14px; background: transparent; color: var(--ink); border: 1px solid var(--ink); text-align: center; }
.app-policy-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.app-policy-table th, .app-policy-table td { padding: 8px 6px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; font-weight: 500; }
.app-policy-table thead th { font: 600 10.5px/1 'Manrope', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); }
.app-policy-terms { margin: 14px 0 0; padding-left: 18px; font-size: 13px; color: var(--soft); }
.app-policy-terms li { margin: 6px 0; }
.app-jazaa { font: 700 11px/1 'Cormorant Garamond', Georgia, serif; letter-spacing: .34em; text-transform: uppercase; margin-left: 6px; vertical-align: middle; }
.app-nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 10px 8px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--rule); }
.app-nav a { padding: 6px 12px; font: 600 11px/1 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); text-decoration: none; }
.app-nav a.is-current { color: var(--wine); }

/* Asking to join, the Library and the house (20 Oct 2026). */
.app-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--soft); line-height: 1.4; margin-top: 6px; }
.app-consent input { margin-top: 3px; flex: none; }
.app-library-pic { margin: 14px 0 18px; border-radius: 14px; overflow: hidden; background: var(--beige); aspect-ratio: 1; display: grid; place-items: center; color: var(--soft); font-size: 12px; }
.app-library-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-about p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; line-height: 1.45; margin: 0 0 14px; }
.app-about-line { margin: 0 0 6px; font-size: 15px; }
.app-library-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.app-library-acts .app-two { margin: 0; }
.app-library-acts .app-button.is-quiet { color: var(--wine); border-color: var(--wine); }
a.app-button { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.app-textarea { height: auto; padding: 12px; line-height: 1.4; resize: vertical; }
/* Passkeys at the door (21 Oct 2026): her face above her number */
.app-face { display: grid; place-items: center; text-decoration: none; margin: 18px 0 0; }
.app-face-note { text-align: center; margin: 8px 0 18px; }
/* Pay from the App (22 Oct 2026) */
.app-owed .app-card.is-row { align-items: center; justify-content: space-between; margin-top: 10px; }
.app-owed .app-card.is-row form { margin: 0; }
/* Pass it on (22 Oct 2026) */
.pp-passform .app-field { display: block; }
.pp-passform .app-field > input { display: block; box-sizing: border-box; width: 100%; height: 52px; margin-top: 6px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); font: 500 16px 'Manrope', sans-serif; color: var(--ink); }
.pp-passform .app-phone { margin-top: 6px; }
.pp-passform .pp-choice { margin-bottom: 6px; }

/* A form that goes once (22 Oct 2026): the button quiet while the first tap travels */
.app-button.is-sending, .app-link.is-sending { opacity: .6; pointer-events: none; }