/* Auth area: sign-up/sign-in/invite, account, export, delete, household. Tokens only, no new colours or sizes.
   Layout on top of app.css primitives (hero, section cards, list rows, chips); see docs/UI.md. */

/* Sign-in / sign-up: the card footer link ("Sign in instead" / "Create an account") is the one secondary action, so
   the shell's duplicate top-bar guest link is hidden on these two pages (docs/UI.md §7: never say the same thing twice). */
body[data-page="sign-in"] .pt-signin-link, body[data-page="sign-up"] .pt-signin-link { display: none; }

/* ---- Two-column page frame (form/main + quiet aside) --------------------------------------- */
.pt-auth { display: grid; gap: var(--pt-space-5); padding-top: var(--pt-space-2); }
.pt-auth-main { display: grid; gap: var(--pt-space-4); min-width: 0; }
.pt-auth-aside { display: grid; gap: var(--pt-space-2); min-width: 0; }
.pt-auth-aside .pt-section { margin-block: 0 var(--pt-space-3); }
.pt-auth-single { max-width: var(--pt-form-max); }

/* Intro: brand tile or avatar, 24 px title, one muted line. */
.pt-auth-intro { display: flex; align-items: center; gap: var(--pt-space-3); }
.pt-auth-intro-media { flex: none; display: inline-flex; }
.pt-auth-intro-media .pt-avatar { --pt-avatar-size: var(--pt-tile); }
.pt-auth-intro-body { display: grid; gap: 2px; min-width: 0; }
.pt-auth-title { font-size: var(--pt-text-2xl); line-height: var(--pt-line-2xl); font-weight: var(--pt-weight-title); letter-spacing: -.015em; text-wrap: balance; }
.pt-auth-sub { color: var(--pt-text-muted); font-size: var(--pt-text-md); line-height: var(--pt-line-md); text-wrap: pretty; max-width: 48ch; }

/* Form card. */
.pt-auth-card { display: grid; gap: var(--pt-space-4); }
.pt-auth-switch { display: flex; align-items: center; gap: var(--pt-space-2); padding-top: var(--pt-space-3); border-top: 1px solid var(--pt-border); color: var(--pt-text-muted); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); }
.pt-auth-switch .pt-icon { flex: none; color: var(--pt-text-muted); }
.pt-auth-switch a { font-weight: var(--pt-weight-medium); }
.pt-auth-lead { font-size: var(--pt-text-lg); line-height: var(--pt-line-lg); color: var(--pt-text); text-wrap: pretty; max-width: 60ch; }
.pt-auth-note { display: flex; align-items: flex-start; gap: var(--pt-space-2); color: var(--pt-text-muted); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); }
.pt-auth-note .pt-icon { flex: none; margin-top: 1px; }
.pt-auth-identity { background: var(--pt-surface); }
.pt-auth-signed-in { display: grid; gap: var(--pt-space-1); }

/* Role radio cards: icon tile + two lines; side by side from 520 px. */
.pt-auth-roles { grid-template-columns: minmax(0, 1fr); }
.pt-auth-role { display: grid; gap: 1px; min-width: 0; }
.pt-auth-role > b { font-weight: var(--pt-weight-medium); font-size: var(--pt-text-md); line-height: var(--pt-line-md); }
.pt-auth-role-meta { color: var(--pt-text-muted); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); }
.pt-radio-card:has(input:checked) .pt-tile { background: var(--pt-surface); color: var(--pt-accent); }
@media (min-width: 520px) {
  .pt-auth-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Read-only "field" showing the invite's fixed email address. */
.pt-input-static { display: flex; align-items: center; gap: var(--pt-space-2); min-height: var(--pt-tap); color: var(--pt-text-muted); background: var(--pt-surface-2); }
.pt-input-static .pt-icon { flex: none; }
.pt-input-static > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Account -------------------------------------------------------------------------------- */
.pt-account { display: grid; gap: var(--pt-space-4); padding-top: var(--pt-space-2); }
.pt-account-cols { display: grid; gap: var(--pt-space-2); }
.pt-account-cols .pt-section { margin-block: 0 var(--pt-space-3); }
.pt-account-side { display: grid; gap: var(--pt-space-2); min-width: 0; }
.pt-account-form-card { display: grid; gap: var(--pt-space-4); }
.pt-account-danger .pt-h2 .pt-icon, .pt-account-danger .pt-section-card-title { color: var(--pt-danger); }
.pt-account-page { padding-top: var(--pt-space-3); }

/* The photo control is attached to the avatar: pt-file-drop restyled as a 44 px tap target whose visible part is a
   32 px round badge (camera icon) overlapping the avatar bottom-right — no detached hero row. With `upload` the file
   posts on selection, so the "Save photo" button is the no-JS fallback only (hidden once JS attaches). */
.pt-account-hero .pt-hero-media { position: relative; }
.pt-account-photo-form { position: absolute; right: calc(-1 * var(--pt-space-2)); bottom: calc(-1 * var(--pt-space-2)); display: flex; align-items: center; }
.pt-account-photo-form pt-file-drop { display: contents; }
.pt-account-photo-form .pt-drop {
  position: relative;
  display: block;
  width: var(--pt-tap);
  height: var(--pt-tap);
  min-height: 0;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: var(--pt-radius-pill);
  background: transparent;
  color: var(--pt-text);
  cursor: pointer;
}
.pt-account-photo-form .pt-drop:hover, .pt-account-photo-form .pt-drop.pt-dragover { background: transparent; border-color: transparent; }
.pt-account-photo-form .pt-drop::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-pill);
  background: var(--pt-surface);
  box-shadow: 0 0 0 2px var(--pt-surface);
  transition: background-color var(--pt-dur-fast) var(--pt-ease), border-color var(--pt-dur-fast) var(--pt-ease);
}
.pt-account-photo-form .pt-drop:hover::before, .pt-account-photo-form .pt-drop.pt-dragover::before { background: var(--pt-surface-2); border-color: var(--pt-text-muted); }
.pt-account-photo-form .pt-drop:active::before { background: var(--pt-border); }
.pt-account-photo-form .pt-drop:focus-within { box-shadow: none; }
.pt-account-photo-form .pt-drop:focus-within::before { box-shadow: var(--pt-focus); }
.pt-account-photo-form .pt-drop:has(.pt-progress)::before { opacity: .6; }
/* The camera glyph is drawn by the server over the badge; the drop's own icon, preview, hint and buttons are hidden. */
.pt-account-photo-icon { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; pointer-events: none; color: var(--pt-text); }
.pt-account-photo-form .pt-drop-icon, .pt-account-photo-form .pt-drop-preview, .pt-account-photo-form .pt-drop > .pt-text-sm,
.pt-account-photo-form .pt-drop-file, .pt-account-photo-form .pt-drop .pt-progress, .pt-account-photo-form .pt-drop .pt-btn,
.pt-account-photo-form .pt-drop .pt-success-text, .pt-account-photo-form .pt-drop .pt-error { display: none; }
.pt-account-photo-form .pt-drop-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pt-account-photo-form.pt-js .pt-account-photo-save { display: none; }

/* ---- Export: one-line lead spanning both columns; the list is the main column, the file facts the aside. ---- */
.pt-export-lead { display: grid; gap: var(--pt-space-2); max-width: 60ch; order: -2; }
.pt-export-lead .pt-metaline-item .pt-icon { color: var(--pt-accent); }
.pt-export-filename { color: var(--pt-text); font-weight: var(--pt-weight-medium); font-variant-numeric: tabular-nums; }
/* Stacked (phone/tablet): lead, then the three file facts, then the long list, so the fold never ends on a bare header. */
.pt-export > .pt-auth-aside { order: -1; }

/* A section card whose action is a button (sheet trigger, form submit): same look as `a.pt-section-card`. */
button.pt-section-card { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; appearance: none; }
button.pt-section-card:hover { background: var(--pt-surface-2); }
button.pt-section-card:active { background: var(--pt-border); }
button.pt-section-card:focus-visible { box-shadow: inset var(--pt-focus); outline: none; }
.pt-inline-form { display: contents; }
.pt-section-cards > .pt-inline-form > .pt-section-card { border: 0; border-radius: 0; border-top: 1px solid var(--pt-border); }
.pt-section-cards > .pt-inline-form:first-child > .pt-section-card { border-top: 0; }

/* ---- Household ------------------------------------------------------------------------------ */
.pt-household { display: grid; gap: var(--pt-space-4); padding-top: var(--pt-space-2); }
.pt-household-cols { display: grid; gap: var(--pt-space-2); }
.pt-household-cols .pt-section { margin-block: 0 var(--pt-space-3); }
.pt-household-main, .pt-household-side { display: grid; gap: var(--pt-space-2); min-width: 0; align-content: start; }
.pt-household-hero .pt-avatar-stack { display: inline-flex; padding: 2px; }
.pt-household-hero .pt-avatar-stack .pt-avatar { --pt-avatar-size: var(--pt-tile); box-shadow: 0 0 0 2px var(--pt-surface); }
.pt-household-hero .pt-avatar-stack pt-avatar + pt-avatar { margin-left: calc(-1 * var(--pt-space-2)); }
/* Member trail: date on line 1, role pill on line 2, and (primary only) the Remove icon button beside the stack.
   The row's own `.pt-row-trail` column becomes a two-column grid so the button never pushes the pill inline. */
.pt-household-members .pt-row-trail { display: grid; grid-template-columns: auto auto; grid-template-areas: "meta remove" "pill remove"; align-items: center; justify-items: end; column-gap: 0; row-gap: 3px; }
.pt-household-members .pt-row-trail > .pt-row-meta { grid-area: meta; }
.pt-household-members .pt-row-trail > pt-status-pill { grid-area: pill; }
/* The 32 px control carries a 44 px tap area (::after) and sits flush with the row's right padding. */
.pt-household-remove { position: relative; grid-area: remove; margin-right: calc(-1 * var(--pt-space-1)); }
.pt-household-remove::after { content: ""; position: absolute; inset: -6px; }
/* Emails wrap only after the "@" (a <wbr> in the markup), never mid-word; the narrower trail leaves them room. */
.pt-household-members .pt-row-sub { white-space: normal; overflow-wrap: normal; word-break: keep-all; }
.pt-household .pt-section > pt-empty-state { display: block; margin-top: var(--pt-space-2); }

/* ---- Breakpoints ---------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .pt-auth-signup .pt-auth-aside { display: none; }
}
@media (min-width: 768px) {
  .pt-auth, .pt-account, .pt-household { padding-top: var(--pt-space-3); }
  .pt-auth-single { margin-inline: auto; }
  .pt-auth-card { padding: var(--pt-space-5); }
  .pt-household-hero .pt-avatar-stack .pt-avatar { --pt-avatar-size: var(--pt-row); }
  .pt-account-photo-form .pt-drop .pt-error { white-space: normal; }
}
@media (min-width: 1080px) {
  .pt-auth { grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: var(--pt-space-7); align-items: start; }
  .pt-export { grid-template-areas: "lead lead" "main aside"; row-gap: var(--pt-space-4); }
  .pt-export > .pt-export-lead { grid-area: lead; }
  .pt-export > .pt-auth-main { grid-area: main; }
  .pt-export > .pt-auth-aside { grid-area: aside; padding-top: 0; }
  .pt-auth-single { grid-template-columns: minmax(0, 1fr); }
  .pt-auth-aside { padding-top: var(--pt-space-1); }
  .pt-account-cols, .pt-household-cols { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: var(--pt-space-6); align-items: start; }
}