/* Owner and guest pages. Light and dark follow the device; the camera stays black. */
:root {
  --ui-bg: #f5f5f7;
  --ui-card: #fff;
  --ui-text: #1d1d1f;
  --ui-secondary: #6e6e73;
  --ui-separator: rgb(60 60 67 / .13);
  --ui-fill: rgb(118 118 128 / .12);
  --ui-button: #1d1d1f;
  --ui-button-text: #fff;
  --ui-tint: #0066cc;
  --ui-danger: #d70015;
  --ui-success: #248a3d;
  --ui-serif: ui-serif, "New York", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root { --ui-bg: #000; --ui-card: #1c1c1e; --ui-text: #f5f5f7; --ui-secondary: #98989d; --ui-separator: rgb(84 84 88 / .55); --ui-fill: rgb(118 118 128 / .24); --ui-button: #f5f5f7; --ui-button-text: #000; --ui-tint: #2997ff; --ui-danger: #ff453a; --ui-success: #30d158; }
}
.camera-picker, .native-viewer { --ui-bg: #000; --ui-card: #1c1c1e; --ui-text: #f5f5f7; --ui-secondary: #98989d; --ui-separator: rgb(84 84 88 / .55); --ui-fill: rgb(118 118 128 / .24); --ui-button: #f5f5f7; --ui-button-text: #000; --ui-tint: #2997ff; --ui-danger: #ff453a; --ui-success: #30d158; }

html { height: auto; min-height: 100%; overflow: auto; }
html:has(body.camera-mode) { height: 100%; overflow: hidden; }
body:not(.camera-mode) { height: auto; min-height: 100dvh; overflow: auto; background: var(--ui-bg); color: var(--ui-text); color-scheme: light dark; -webkit-font-smoothing: antialiased; }
body.camera-mode { height: 100dvh; overflow: hidden; }
body:not(.camera-mode) :focus-visible:not([tabindex="-1"]) { outline: 2px solid var(--ui-tint); outline-offset: 2px; }
.app-view { width: 100%; min-height: 100dvh; }
body.camera-mode .app-view { display: none; }
.initial-loading { padding: 96px 24px; text-align: center; color: var(--ui-secondary); font-size: 15px; }

/* Page frame */
.flow-page { width: 100%; max-width: 600px; margin: auto; padding: max(12px, env(safe-area-inset-top)) 20px max(40px, env(safe-area-inset-bottom)); }
.flow-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; margin-bottom: 20px; }
.flow-brand { font-size: 17px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.flow-nav button, .text-link { min-height: 44px; padding: 8px 0; color: var(--ui-tint); font-size: 17px; text-decoration: none; }
.step-label { margin: 0 0 6px; color: var(--ui-secondary); font-size: 15px; }
.flow-title { font-size: clamp(30px, 8vw, 34px); font-weight: 700; letter-spacing: -.022em; line-height: 1.12; margin: 0 0 8px; overflow-wrap: anywhere; }
.flow-title:focus, .couple-name:focus { outline: none; }
.flow-copy { color: var(--ui-secondary); font-size: 17px; line-height: 1.45; margin: 0 0 28px; }
.flow-copy.small { font-size: 13px; line-height: 1.45; margin: 16px 0 0; text-align: center; }

/* Buttons */
.flow-primary, .flow-secondary, .flow-danger { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 12px 22px; border-radius: 980px; text-decoration: none; font-size: 17px; font-weight: 500; letter-spacing: -.01em; border: 0; transition: transform 100ms ease-out, opacity 100ms ease-out; }
.flow-primary { background: var(--ui-button); color: var(--ui-button-text); }
.flow-secondary { background: var(--ui-fill); color: var(--ui-text); }
.flow-danger { background: var(--ui-fill); color: var(--ui-danger); }
.flow-primary:active, .flow-secondary:active, .flow-danger:active { opacity: .8; transform: scale(.98); }
.flow-primary[aria-busy="true"] { opacity: .6; }
.flow-primary + .flow-secondary, .flow-secondary + .flow-secondary { margin-top: 10px; }
.button-row { display: flex; gap: 10px; }
.button-row > * { flex: 1; min-width: 0; margin: 0 !important; white-space: nowrap; }

/* Forms */
.flow-form { margin-top: 8px; }
.field { margin: 0 0 20px; }
.field label, .field-label { display: block; margin: 0 0 8px 4px; font-size: 15px; color: var(--ui-secondary); }
.field input, .field select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 50px; padding: 12px 16px; border: 0; border-radius: 12px; background: var(--ui-card); color: var(--ui-text); font: inherit; font-size: 17px; line-height: 1.3; box-shadow: inset 0 0 0 1px var(--ui-separator); }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ui-secondary) 50%), linear-gradient(135deg, var(--ui-secondary) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ui-tint); }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--ui-danger); }
.field-help, .field-error { display: block; margin: 8px 4px 0; font-size: 13px; line-height: 1.4; color: var(--ui-secondary); }
.field-error { color: var(--ui-danger); }
.form-error { font-size: 15px; line-height: 1.45; padding: 14px 16px; border-radius: 12px; background: var(--ui-card); color: var(--ui-danger); margin: 0 0 16px; }
.step-progress { display: flex; gap: 4px; margin: 0 0 24px; }
.step-progress span { height: 4px; border-radius: 2px; flex: 1; background: var(--ui-fill); }
.step-progress .complete { background: var(--ui-text); }
.wizard-footer { position: sticky; bottom: 0; z-index: 2; margin-top: 32px; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--ui-bg) 24px); }
.cover-picker { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; padding: 0 0 12px; border-radius: 12px; background: var(--ui-card); overflow: hidden; box-shadow: inset 0 0 0 1px var(--ui-separator); }
.cover-picker img { width: 100%; max-height: 280px; object-fit: cover; margin-bottom: 4px; }
.cover-picker button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px 20px 0; color: var(--ui-tint); font-size: 17px; }
.cover-picker .icon { width: 22px; height: 22px; }
.cover-picker .field-help { margin: 0 16px; text-align: center; }
.film-feature { border-radius: 16px; overflow: hidden; margin: 12px auto 4px; max-width: 280px; background: var(--ui-card); }
.film-feature img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.film-feature figcaption { padding: 12px 16px 14px; }
.film-feature strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.film-feature p { font-size: 13px; line-height: 1.4; color: var(--ui-secondary); margin: 0; }

/* Grouped list, iOS settings style */
.list { margin: 0 0 24px; border-radius: 12px; background: var(--ui-card); overflow: hidden; }
.choice { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; cursor: pointer; }
.choice + .choice { box-shadow: inset 0 1px 0 var(--ui-separator); }
.choice input[type=radio] { width: 22px; height: 22px; flex-shrink: 0; margin: 0; accent-color: var(--ui-tint); }
.choice > span { flex: 1; min-width: 0; }
.choice strong { display: block; font-size: 17px; font-weight: 400; }
.choice span span { display: block; color: var(--ui-secondary); font-size: 13px; line-height: 1.35; margin-top: 2px; }
.choice input[type=checkbox] { order: 2; appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative; width: 51px; height: 31px; margin: 0; border-radius: 16px; background: var(--ui-fill); transition: background-color 200ms ease; cursor: pointer; }
.choice input[type=checkbox]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / .15), 0 1px 1px rgb(0 0 0 / .16); transition: transform 200ms ease; }
.choice input[type=checkbox]:checked { background: var(--ui-success); }
.choice input[type=checkbox]:checked::after { transform: translateX(20px); }
.list-footer { margin: -16px 16px 24px; font-size: 13px; line-height: 1.4; color: var(--ui-secondary); }
.flow-banner { margin: 0 0 20px; padding: 14px 16px; border-radius: 12px; background: var(--ui-card); color: var(--ui-secondary); font-size: 15px; line-height: 1.45; }
.flow-banner.good { color: var(--ui-success); }

/* Owner dashboard */
.owner-head { margin-bottom: 24px; }
.owner-head p { margin: 0; color: var(--ui-secondary); font-size: 17px; line-height: 1.45; }
.owner-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 10px; border-radius: 980px; background: var(--ui-fill); font-size: 13px; font-weight: 500; }
.owner-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ui-secondary); }
.owner-status[data-status=active]::before { background: var(--ui-success); }
.owner-actions { display: flex; gap: 10px; margin-bottom: 8px; }
.owner-actions > * { flex: 1; min-width: 0; margin: 0 !important; white-space: nowrap; }
.owner-head .text-link { display: inline-block; margin-top: 4px; }
.owner-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 0 32px; padding: 16px 0; border-radius: 12px; background: var(--ui-card); text-align: center; }
.owner-stats > div + div { box-shadow: inset 1px 0 0 var(--ui-separator); }
.owner-stats strong { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.owner-stats span { font-size: 13px; color: var(--ui-secondary); }
.owner-section { margin: 0 0 32px; }
.owner-section h2 { margin: 0 0 8px 4px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.owner-card { padding: 16px; border-radius: 12px; background: var(--ui-card); }
.owner-card > p { margin: 0 0 16px; font-size: 15px; line-height: 1.45; color: var(--ui-secondary); }
.owner-card > p:last-child { margin-bottom: 0; }
.owner-card code { font-size: 13px; overflow-wrap: anywhere; }
.owner-card > a + .flow-secondary, .owner-card > p + .flow-secondary { margin-top: 10px; }
.drive-state { display: flex; align-items: center; gap: 8px; margin: 0 0 6px !important; color: var(--ui-text) !important; font-size: 17px !important; }
.drive-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-secondary); }
.drive-state.connected::before { background: var(--ui-success); }
.invite-qr { display: block; width: min(100%, 220px); margin: 4px auto 16px; padding: 10px; border-radius: 12px; background: #fff; }
.share-input { display: block; width: 100%; min-height: 44px; padding: 12px; border: 0; border-radius: 10px; font: inherit; font-size: 13px; color: var(--ui-secondary); background: var(--ui-fill); margin: 0 0 12px; text-overflow: ellipsis; }
.connection-help { margin-top: 12px; }
.connection-help summary { min-height: 44px; padding: 12px 0 0; color: var(--ui-tint); font-size: 15px; cursor: pointer; list-style: none; }
.connection-help summary::-webkit-details-marker { display: none; }
.connection-help p { font-size: 13px; color: var(--ui-secondary); line-height: 1.45; }
.connection-help code { font-size: 12px; overflow-wrap: anywhere; }

/* Guest invitation */
.guest-invite { width: 100%; max-width: 480px; min-height: 100dvh; margin: auto; padding: max(12px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
.guest-brand { min-height: 52px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: var(--ui-secondary); }
.invitation-art { margin: 16px 0 28px; text-align: center; }
.invitation-art img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 20px; margin-bottom: 28px; }
.couple-name { font-family: var(--ui-serif); font-size: clamp(34px, 10vw, 44px); line-height: 1.1; font-weight: 400; letter-spacing: -.01em; margin: 24px 0 0; }
.invitation-art.has-cover .couple-name { margin-top: 0; }
.couple-name .ampersand { display: block; font-size: .6em; font-style: italic; color: var(--ui-secondary); padding: 4px 0; }
.invite-date { text-align: center; font-size: 17px; margin: 0 0 2px; }
.invite-location { text-align: center; color: var(--ui-secondary); font-size: 15px; line-height: 1.45; margin: 0 0 24px; }
.guest-mode-note { width: max-content; max-width: 100%; margin: -8px auto 24px; padding: 4px 10px; border-radius: 980px; background: var(--ui-fill); color: var(--ui-secondary); font-size: 13px; }
.guest-details { margin: 0 0 24px; text-align: center; color: var(--ui-secondary); font-size: 15px; }
.guest-invite h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 8px 0 16px; text-align: center; }
.guest-invite .flow-form { margin-top: 0; }

/* Empty and error states */
.flow-empty { text-align: center; padding: 48px 8px; }
.flow-empty h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
.flow-empty p { color: var(--ui-secondary); font-size: 15px; line-height: 1.45; margin: 0; }
.flow-empty button { margin-top: 24px; }

@media (min-width: 768px) { .flow-page { padding-top: 32px; } }
@media (prefers-reduced-motion: reduce) {
  .flow-primary, .flow-secondary, .flow-danger, .choice input[type=checkbox], .choice input[type=checkbox]::after { transition: none; }
  .flow-primary:active, .flow-secondary:active, .flow-danger:active { transform: none; }
}
@media (prefers-contrast: more) {
  .field input, .field select, .cover-picker { box-shadow: inset 0 0 0 1px var(--ui-text); }
}