/* My Xenyra sign-in additions (A3.6e): Face ID button, "or" divider, info "i" with a glass note, consent row, Face ID offer.
   Thin type, colours from the app tokens; only new elements, nothing from app.css is overridden. */
.xa-pk { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-a) 8%, var(--surface)), color-mix(in srgb, var(--accent-b) 10%, var(--surface))); color: var(--text); cursor: pointer; text-align: left; font: inherit; transition: border-color .2s, transform .2s; }
.xa-pk:hover { border-color: var(--primary); transform: translateY(-1px); }
.xa-pk svg { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--primary); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.xa-pk span { display: grid; gap: 2px; min-width: 0; }
.xa-pk strong { font-weight: 500; font-size: 16px; }
.xa-pk small { color: var(--muted); font-size: 13px; font-weight: 300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xa-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 300; }
.xa-or::before, .xa-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.xa-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xa-i { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--muted); font: italic 300 12px/1 Georgia, serif; cursor: pointer; }
.xa-i:hover, .xa-i[aria-expanded="true"] { color: var(--primary); border-color: var(--primary); }
.xa-note { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(10px); color: var(--muted); font-size: 13px; font-weight: 300; line-height: 1.45; }
.xa-note a { color: var(--primary); }
.xa-check { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px; font-size: 14px; font-weight: 300; }
.xa-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); }
.xa-pk-hero { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); }
.xa-pk-hero svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.xa-label { font-weight: 600; font-size: 14px; }
.xa-date { display: flex; align-items: center; gap: 8px; }
.xa-date span { color: var(--muted); font-weight: 300; }
.xa-date input { width: 64px; min-height: 42px; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); text-align: center; font: inherit; font-variant-numeric: tabular-nums; }
.xa-date input.xa-date-y { width: 88px; }
.xa-date input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.xa-legal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-size: 13px; font-weight: 300; }
.xa-legal a { color: var(--primary); }
.xa-legal span { color: var(--muted); }
.xa-legal small { flex-basis: 100%; color: var(--muted); font-size: 12px; }