/* Keep navigation, profile, uploads and own-video management usable during a
   freshness check. Mask viewer content (including metadata and paused frames),
   not the application shell. Authorization and playback holds remain in JS. */
html[data-access-held] :is(#home-continue,
  #notification-list, #saved-list, #moment-body, #stream-stage, #stream-what) { visibility: hidden; }
html[data-access-held] #home-topics .soon { visibility: hidden; }
.viewer-access { position: fixed; inset: 0; z-index: 2147483002; background: var(--bg); color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.viewer-access[hidden] { display: none; }
.viewer-access button { min-height: 44px; }

.viewing-settings { margin: 16px 0; padding: 0; border-top: 1px solid var(--line); }
.viewing-settings[hidden] { display: none; }
.viewing-settings summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 8px;
  list-style: none; color: var(--text-2); font-size: var(--type-secondary); font-weight: 600; }
.viewing-settings summary::-webkit-details-marker { display: none; }
.viewing-settings summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.viewing-settings summary .i { flex-shrink: 0; }
.viewing-settings summary .i:last-child { margin-left: auto; transition: transform .15s; }
.viewing-settings[open] summary { color: var(--link); }
.viewing-settings[open] summary .i:last-child { transform: rotate(90deg); }
.viewing-body { padding: 4px 0 12px; }
.viewing-birth { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.viewing-settings .viewing-support { margin: 0 0 12px; padding-left: 0; min-height: 44px; }
.viewing-settings .caption { margin: 6px 0; }
.viewing-birth .caption { margin: 0; }
.viewing-settings select { box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-2); color: inherit; font: inherit; color-scheme: inherit; }
.viewing-settings .btn { margin-top: 8px; }

.birth-sheet .sheet { gap: 12px; }
.birth-sheet .birth-form { display: grid; gap: 10px; }
.birth-sheet .birth-form[hidden] { display: none; }
.birth-sheet input, .birth-sheet textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); color: var(--text); font: inherit; color-scheme: inherit; }
.birth-sheet label { font-size: var(--type-caption); color: var(--text-2); }
.birth-sheet p { margin: 0; }
.birth-sheet .birth-card { display: grid; gap: 10px; border-top: 1px solid var(--line); padding: 16px 0; }
.birth-sheet .birth-confirm { display: flex; align-items: center; gap: 10px; }
.birth-sheet .birth-confirm input { width: 20px; min-height: 20px; flex: 0 0 20px; }
.birth-sheet .birth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.birth-sheet .birth-reference { overflow-wrap: anywhere; }
/* WebKit date fields must shrink inside the sheet instead of using intrinsic width. */
.birth-sheet input[type=date] { display: block; max-width: 100%; -webkit-appearance: none; appearance: none; font-size: var(--type-action); }
.birth-sheet input[type=date]::-webkit-date-and-time-value { min-width: 0; text-align: left; }

/* Profile: one rhythm for identity, preferences and account actions. */
/* One scrolling content area: flex shrinking must never clip expanded settings. */
#home-profile .sheet { gap: 12px; padding: 8px 0 0; overflow: hidden; max-height: calc(100% - max(16px, env(safe-area-inset-top))); background: var(--surface); }
#home-profile .compact-header { margin: 0 20px; }
#home-profile .profile-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 20px max(16px, calc(var(--sab) + 16px - var(--kb, 0px))); scroll-padding-block: 12px; }
#home-profile .profile-scroll > * + * { margin-top: 12px; }
#home-profile .profile-scroll > .caption.center { margin-top: 12px; padding-bottom: 4px; }
#home-profile .profile-actions a { color: var(--text); text-decoration: none; }
#home-profile .profile-actions .row { flex: 0 0 auto; }
#home-profile .profile-actions .row + .row { border-top: 1px solid var(--line); }
#home-profile .compact-header { padding-top: 10px; min-height: 48px; }
#home-profile .compact-header h3 { font-size: var(--type-title); font-weight: 600; letter-spacing: -.3px; }
#home-profile .sheet-close { background: none; }
#home-profile .prof { margin: 0; gap: 12px; }
#home-profile .prof-top { flex-direction: row; gap: 14px; align-items: flex-start; }
#home-profile .ava-xl { width: var(--profile-avatar-size, 72px); height: var(--profile-avatar-size, 72px); flex: 0 0 var(--profile-avatar-size, 72px); margin: var(--profile-avatar-offset, 0px) 0 0; }
#home-profile .ava-cam { width: 28px; height: 28px; }
#home-profile .prof-identity { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 0; }
#home-profile .prof-heading { gap: 8px; min-height: 44px; }
#home-profile #profile-handle { font-size: var(--type-caption); color: var(--text-3); }
#home-profile #profile-avatar-del { flex-shrink: 0; min-height: 44px; padding: 8px 0 8px 4px; font-size: var(--type-small); }
#home-profile #profile-name { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; border: 0; border-radius: 10px; padding: 10px 12px; background: var(--surface-2); font-size: var(--type-action); }
#home-profile .fields { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); gap: 4px; }
#home-profile .field-label { color: var(--text-3); font-size: var(--type-small); font-weight: 400; }
#home-profile #profile-bio { height: 40px; min-height: 40px; padding: 4px 0; border: 0; border-radius: 0; background: transparent; font-size: var(--type-action); }
#home-profile .profile-preferences { border-radius: 14px; background: var(--surface-2); overflow: hidden; }
#home-profile .profile-language-row { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 4px 14px; gap: 12px; font-size: var(--type-body); }
#home-profile .language-toggle { min-height: 44px; padding: 3px; border: 0; border-radius: 10px; background: var(--hover); }
#home-profile .language-toggle::before { border-radius: 8px; }
#home-profile .language-toggle span { min-width: 34px; font-size: 11px; }
#home-profile .viewing-settings { margin: 0; border-top: 1px solid var(--line); }
#home-profile .viewing-settings summary { min-height: 54px; padding: 10px 14px; font-size: var(--type-body); font-weight: 400; color: var(--text); gap: 10px; }
#home-profile .viewing-settings summary .i { width: 18px; height: 18px; color: var(--text-3); }
#home-profile .viewing-body { padding: 0 14px 14px; }
#home-profile .viewing-birth { padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--type-secondary); }
#home-profile .viewing-support { font-size: var(--type-caption); margin-bottom: 4px; }
#home-profile .viewing-settings select { min-width: 0; font-size: var(--type-action); background: var(--surface); border-color: var(--line); }
#home-profile .viewing-settings .caption { font-size: var(--type-small); line-height: 1.4; }
#home-profile .list { border-radius: 14px; background: var(--surface-2); }
#home-profile .row { min-height: 50px; padding: 12px 14px; gap: 10px; font-size: var(--type-secondary); }
#home-profile .row .i { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; }
#home-profile .row span { flex: 1; min-width: 0; }
#home-profile .profile-signout { background: var(--surface-2); }
#home-profile #home-logout { color: var(--danger); }
#home-profile #home-logout .i { color: inherit; }

#home-diag:empty { display: none; }
#home-profile .caption.center { margin: 0; color: var(--text-3); font-size: 11px; }

.viewer-access p { max-width: 32ch; margin: 0; font-size: var(--type-body); line-height: 1.5; }