/* Deeper Blue Teal. Screen-only so passenger PDFs retain their white paper. */
@media screen{
 .roster-compact-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
 .roster-compact-toolbar .invitation-tabs{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;margin:0!important}
 .roster-compact-toolbar .btn{min-height:40px;padding:8px 12px;font-size:13px;line-height:1.3;border-radius:9px;white-space:nowrap}
 .roster-compact-toolbar .roster-create-compact{gap:5px;margin-left:auto;flex-shrink:0}
 .roster-create-compact svg{width:16px;height:16px}
 @media(max-width:760px){
  .rosters-page .roster-page-actions{display:block;margin:0 0 16px;padding:0;width:100%}
  .roster-compact-toolbar{width:100%;gap:8px}
  .roster-compact-toolbar .invitation-tabs{gap:5px;min-width:0}
  .roster-compact-toolbar .btn{min-height:40px;padding:8px 9px;font-size:12px}
 }
 @media(max-width:360px){.roster-compact-toolbar .btn{padding:8px 6px;font-size:11px}.roster-compact-toolbar{gap:5px}}
}
.roster-app .mobile-nav .traveler-avatar>.avatar-flag{display:none}
@media screen{
 .roster-app .traveler-avatar>.avatar-flag{font-size:28px;height:28px;bottom:-9px}
 .roster-app :is(.sidebar .account,.mobile-nav) .traveler-avatar>.avatar-flag{font-size:22px;height:22px;bottom:-6px}
}
.field-error-indicator{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:7px;vertical-align:middle;border-radius:50%;background:#ba3f3f;color:#fff;font-size:13px;font-weight:800;line-height:1;flex-shrink:0}
.field-error-description{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
@media screen{html[data-theme="dark"] .field-invalid{border-color:#ff929e!important;box-shadow:0 0 0 1px #ff929e!important}html[data-theme="dark"] .field-error-indicator{background:#ff929e;color:#43222b}}
@media screen{
 .page-loading{width:100%}.page-loading h1{margin-bottom:24px}
 .loading-skeleton-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
 .loading-skeleton-card{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:17px;background:var(--white,#fff);padding:24px;min-height:162px}
 .loading-skeleton-card>div{flex:1;min-width:0;padding-top:4px}
 .loading-skeleton{display:block;height:14px;margin-bottom:16px;border-radius:6px;background:linear-gradient(100deg,#d9e5e8 20%,#edf4f5 45%,#d9e5e8 70%);background-size:220% 100%;animation:roster-shimmer 1.5s linear infinite}
 .loading-skeleton.avatar-placeholder{width:58px;height:58px;border-radius:50%;flex-shrink:0}
 .loading-skeleton.title-placeholder{height:22px;width:75%}.loading-skeleton.short-placeholder{width:55%}
 html[data-theme="dark"] .loading-skeleton{background-image:linear-gradient(100deg,#355f6c 20%,#527b87 45%,#355f6c 70%)}
 .roster-app :is(.planner-status-badge,.mobile-badge.document-status){font-size:var(--text-support,14px)!important;line-height:1.4}
 .roster-app .profile-status :is(.status-label,.status-answer){font-size:var(--text-support,14px)}
 @keyframes roster-shimmer{from{background-position:180% 0}to{background-position:-40% 0}}
 @media(max-width:760px){.loading-skeleton-grid{grid-template-columns:1fr;gap:12px}.loading-skeleton-card{padding:18px;min-height:138px}}
 @media(prefers-reduced-motion:reduce){.loading-skeleton{animation:none}}
}
@media screen{
 html[data-theme="dark"] .add-choice{background:var(--tr-field)!important;border-color:var(--tr-border)!important;color:var(--tr-text)!important}
 html[data-theme="dark"] .add-choice:hover{background:var(--tr-selected)!important;border-color:var(--tr-link,#76ccef)!important}
 html[data-theme="dark"] .add-choice b{color:var(--tr-text)!important}
 html[data-theme="dark"] .add-choice small{color:var(--tr-muted)!important}
 html[data-theme="dark"] :is(.choice-icon,.traveler-type-switch){background:var(--tr-canvas)!important;border-color:var(--tr-border)!important;color:var(--tr-link,#76ccef)!important}
 html[data-theme="dark"] .add-choice>svg{color:var(--tr-link,#76ccef)}
 html[data-theme="dark"] .traveler-type-switch label>span{color:var(--tr-muted)!important}
 html[data-theme="dark"] .traveler-type-switch input:checked+span{background:var(--tr-selected)!important;color:var(--tr-link,#76ccef)!important;box-shadow:inset 0 0 0 1px var(--tr-link,#76ccef)}
 html[data-theme="dark"] .traveler-type-field>legend{color:var(--tr-muted)!important}
}
.sidebar-theme-toggle{display:flex;align-items:center;justify-content:flex-start;gap:0;width:max-content;min-height:48px;margin-top:18px;padding:8px 0;border:0;border-radius:12px;color:#285464;background:transparent;text-align:left;font-size:13px}
.theme-toggle-icons{display:flex;gap:4px;align-items:center}.theme-toggle-icons svg{width:30px;height:30px;padding:6px;border-radius:8px}
html[data-theme="light"] .theme-sun{background:#dcedf1;color:#183e49}
html[data-theme="dark"] .sidebar-theme-toggle{border-color:#547b85;color:#d3edf7}
html[data-theme="dark"] .theme-moon{background:#366873;color:#76ccef}
.sidebar-theme-toggle:hover{border-color:#76ccef}.sidebar-theme-toggle+.account{margin-top:12px}
@media(max-width:760px){.sidebar-theme-toggle{display:none}}
@media print{.sidebar-theme-toggle{display:none}}
@media print{html{color-scheme:light!important}}
@media screen{
 html[data-theme="dark"]{--tr-canvas:#0d2832;--tr-surface:#1e4652;--tr-field:#143640;--tr-border:#3c646f;--tr-text:#f3f8f6;--tr-muted:#cbdde0;--tr-accent:#87dec3;--tr-selected:#244e5b;background:var(--tr-canvas);color-scheme:dark}
 html[data-theme="dark"] body{--ink:var(--tr-text);--muted:var(--tr-muted);--paper:var(--tr-canvas);--line:var(--tr-border);--green:var(--tr-accent);--lime:var(--tr-accent);--white:var(--tr-surface);background:var(--tr-canvas)!important;color:var(--tr-text)!important}
 html[data-theme="dark"] :is(.shell,.main,.topbar,.wrap,.app,.mobile-nav){background:var(--tr-canvas)!important;color:var(--tr-text)!important;border-color:var(--tr-border)!important}
 html[data-theme="dark"] :is(.sidebar,.side-note,.panel,.profile-sheet,.profile,.booking-card,.roster-summary-card,.roster-manage-card,.account-profile-card,.trip-list-card,.first-roster,.modal,.roster-remove-dialog,.home-shortcuts>button,.document-group,.membership-row,.muted-box,.setting-row,.case,.dashboard-preview,.auth-wrap,.planner-step,.trip-passenger,.passenger-card,.trip-output){background:var(--tr-surface)!important;color:var(--tr-text)!important;border-color:var(--tr-border)!important;box-shadow:none}
 html[data-theme="dark"] :is(h1,h2,h3,h4,strong,b,legend,.brand,.wordmark,.profile-back,.datum-value,.account-email,.stat-value,.profile-status,.trip-roster-label){color:var(--tr-text)}
 html[data-theme="dark"] :is(.subtitle,.tiny,.stat-label,.field-label,.field,.form-grid label,.phone-label,.role,.avatar-role-label,.account-setting-copy,.account-section-note,.account-step-note,.account-step-progress,.account-step-status,.section-save-status,.bottom-info,.account-signout p,.home-guide li p,.home-guide-tip,.dashboard-home-heading p,.intro,.micro,.case-content p,.case-content li,.footer,.planner-step-heading p,.trip-list-card small,.traveler-filters label,.mobile-card-role,.roster-summary-card p,.description){color:var(--tr-muted)!important}
 html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.input,.full-month-date,.profile-inline-input,.loyalty-program-slot,.loyalty-number-slot){background:var(--tr-field)!important;color:var(--tr-text)!important;border-color:var(--tr-border)!important}
 html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#bdced2!important;opacity:1}
 html[data-theme="dark"] :is(select option,select optgroup){background:var(--tr-field);color:var(--tr-text)}
 html[data-theme="dark"] :is(.input,input,select,textarea):focus{border-color:var(--tr-accent)!important;box-shadow:0 0 0 3px #87dec322}
 html[data-theme="dark"] :is(.btn,.primary,.social,.first-roster-create,.bottom-cta .btn){background:var(--tr-accent)!important;border-color:var(--tr-accent)!important;color:#183e49!important}
 html[data-theme="dark"] .roster-icon-options input:checked+span{background:var(--tr-selected)!important;border-color:var(--tr-accent)!important;box-shadow:inset 0 0 0 1px var(--tr-accent);color:var(--tr-text)!important}
 html[data-theme="dark"] :is(.nav,.mobile-nav button,.crumb,.roster-breadcrumb,.traveler-breadcrumb,.trip-breadcrumb){color:var(--tr-muted)!important}
 html[data-theme="dark"] :is(.text-btn,.detail-link,.back-link,.roster-breadcrumb a,.traveler-breadcrumb a,.trip-breadcrumb a,.home-shortcuts b,.nav.active,.mobile-nav button.active){color:var(--tr-accent)!important}
 html[data-theme="dark"] .mobile-nav button.active:after{background:var(--tr-accent)}
 html[data-theme="dark"] :is(.profile-info,.profile-foot,.datum,.account-setting,.account-step,.account-step-footer,.profile-chunk,.modal-footer,.traveler-membership-actions,.setting-row,.booking-head,.access-row,.loyalty-row,.section-step-buttons button,.trip-passenger,.passenger-section){border-color:var(--tr-border)!important}
 html[data-theme="dark"] :is(.tag,.mobile-badge,.badge-outline,.hotel-badge,.hotel-program,.traveler-memberships>span,.associated-roster,.filter-count){background:var(--tr-field)!important;border-color:var(--tr-border)!important;color:var(--tr-muted)!important}
 html[data-theme="dark"] :is(.mobile-badge.document-status,.profile-status.provided,.badge.green){background:#285e56!important;border-color:#548e77!important;color:#a9ebc7!important}
 html[data-theme="dark"] .profile-status.provided :is(.status-label,.status-answer){color:#a9ebc7!important}
 html[data-theme="dark"] :is(.mobile-badge.missing,.profile-status.missing,.badge.missing,.alert-strip,.field-error){background:#63434b!important;border-color:#a56a77!important;color:#ffd0d5!important}
 html[data-theme="dark"] .profile-status.missing :is(.status-label,.status-answer){color:#ffd0d5!important}
 html[data-theme="dark"] :is(.not-provided,.missing-value,.roster-remove-x,.danger,.btn.account-delete-button){color:#ffadb5!important}
 html[data-theme="dark"] :is(.btn.danger,.btn.account-delete-button,.planner-cancel){background:transparent!important;color:#ffadb5!important;border-color:#da8290!important}
 html[data-theme="dark"] .roster-remove-x:hover,html[data-theme="dark"] .associated-roster:has(.roster-remove-x:hover){color:#ffadb5!important}
 html[data-theme="dark"] :is(.airline-group,.airline-badge,.tsa-badge,.hotel-badge,.sample-airline,.sample-tsa){border-color:var(--tr-border)!important}
 html[data-theme="dark"] .roster-icon-family{color:#ffb17c}html[data-theme="dark"] .roster-icon-team{color:#79dbc0}html[data-theme="dark"] .roster-icon-group{color:#b3b2ff}html[data-theme="dark"] .roster-icon-business{color:#8dceff}html[data-theme="dark"] .roster-icon-church{color:#d6afff}html[data-theme="dark"] .roster-icon-friends{color:#ffa8c4}html[data-theme="dark"] .roster-icon-school{color:#f3d37b}html[data-theme="dark"] .roster-icon-tour{color:#80dbe8}
 html[data-theme="dark"] .hero,html[data-theme="dark"] .bottom-cta{background:var(--tr-surface)!important;color:var(--tr-text)}
 html[data-theme="dark"] .providers button{background:var(--tr-field);color:var(--tr-muted);border-color:var(--tr-border)}
 html[data-theme="dark"] :is(.account-setting p,.panel p,.profile-sheet p,.roster-summary-card p,.home-shortcuts>button>span:not(.home-shortcut-icon)){color:var(--tr-muted)!important}
 html[data-theme="dark"] .toast{background:var(--tr-selected)!important;color:var(--tr-text)!important}
 html[data-theme="dark"] .planner-status-badge.complete{background:#285e56!important;border-color:#548e77!important;color:#a9ebc7!important}
 html[data-theme="dark"] .planner-status-badge.missing{background:#63434b!important;border-color:#a56a77!important;color:#ffd0d5!important}
 html[data-theme="dark"] .profile-setup .profile-sheet{background:var(--tr-surface)!important}
 html[data-theme="dark"] .account-step-number{border-color:var(--tr-border);color:var(--tr-muted)}
 html[data-theme="dark"] .roster-app .account-step.is-current .account-step-number{background:var(--tr-selected);color:var(--tr-accent)}
 html[data-theme="dark"] .roster-icon-options label>span:hover{border-color:var(--tr-accent)!important}
 html[data-theme="dark"] .eyebrow{color:var(--tr-muted)!important}
 html[data-theme="dark"] .home-guide li>span{background:var(--tr-field);color:var(--tr-accent)}
 html[data-theme="dark"] .passenger-sheet{background:var(--tr-surface)!important;color:var(--tr-text);border-color:var(--tr-border)!important}
 html[data-theme="dark"] :is(.passenger-sheet>header,.passenger-fields>div){border-color:var(--tr-border)!important}
 html[data-theme="dark"] :is(.passenger-fields dt,.passenger-sheet header p,.planner-step-number,.trip-output-heading p){color:var(--tr-muted)!important}
 html[data-theme="dark"] .passenger-missing{color:#ffadb5!important}
 html[data-theme="dark"] .passenger-index{background:var(--tr-field)!important;color:var(--tr-accent)!important}
 .theme-picker{min-width:120px;min-height:44px;padding:8px 12px;border-radius:9px}
 .theme-mobile-note{display:none}
 @media(max-width:760px){.theme-desktop-picker{display:none}.theme-mobile-note{display:block}}
}

/* High-contrast supporting copy, with a blue tint instead of grey. */
@media screen{
 html[data-theme="dark"]{--tr-muted:#d3edf7}
 html[data-theme="dark"] :where(p,small,label,dt,figcaption){color:var(--tr-muted)!important}
 html[data-theme="dark"] :is(.roster-participants,.roster-counts,.roster-counts span,.roster-chevron,.account-step-status,.profile-update,.guardian-note,.hotel-detail,.loyalty-row small,.existing-traveler-row small,.no-programs,.side-caption,.demo-label,.description,.access-person small){color:var(--tr-muted)!important}
 html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:var(--tr-muted)!important;opacity:1}
 html[data-theme="dark"] :is(.roster-participants,.roster-counts,.account-step-status){opacity:1}
}
@media(max-width:760px){
 .roster-app.profile-section-context .section-fields .full-month-date .full-month-date-value{font-size:16px!important;line-height:1.4!important}
 .roster-app.profile-section-context .section-fields .full-month-date select{font-size:16px!important}
 .roster-app.profile-section-context input[type="date"]{font-size:16px!important}
}

@media screen{
 html[data-theme="dark"]{--tr-link:#76ccef}
 html[data-theme="dark"] :is(a:not(.btn),.text-btn,.detail-link,.back-link,.profile-back,.roster-breadcrumb,.traveler-breadcrumb,.trip-breadcrumb,.nav,.mobile-nav button,.home-shortcuts b){color:var(--tr-link)!important}
 html[data-theme="dark"] :is(.nav.active,.mobile-nav button.active){color:var(--tr-link)!important;border-color:var(--tr-link)!important}
 html[data-theme="dark"] .mobile-nav button.active:after{background:var(--tr-link)!important}
 html[data-theme="dark"] :is(.mobile-badge.document-status,.profile-status.provided,.badge.green,.planner-status-badge.complete){color:#87dec3!important;border-color:#87dec3!important;background:#245b50!important}
 html[data-theme="dark"] .profile-status.provided :is(.status-label,.status-answer){color:#87dec3!important}
 html[data-theme="dark"] .traveler-avatar{background:#22404d!important;color:#effbff!important;border:1px solid #60899c}
 html[data-theme="dark"] .traveler-avatar[data-sex="female"]{background:#4b3853!important;border-color:#ae85b1}
 html[data-theme="dark"] .traveler-avatar[data-age="child"][data-sex="male"]{background:#204f60!important;border-color:#76ccef}
 html[data-theme="dark"] .traveler-avatar[data-age="child"][data-sex="female"]{background:#593f61!important;border-color:#d7a1da}
 html[data-theme="dark"] .traveler-avatar[data-sex="neutral"]{background:#284c49!important;border-color:#87dec3}
 html[data-theme="dark"] .traveler-avatar>.traveler-silhouette{fill:#b7dded;opacity:.3}
 html[data-theme="dark"] .traveler-avatar[data-sex="female"]>.traveler-silhouette{fill:#edc5ef}
 html[data-theme="dark"] .traveler-avatar>.avatar-initials{text-shadow:0 1px 3px #102a35}
 html :is(.avatar-role,.mobile-card)>.traveler-avatar{width:58px!important;height:58px!important;font-size:18px}
 html .account-settings-page .account-profile-card>.avatar-role{flex-basis:58px;width:58px;min-width:58px}
}

/* Shared brand badges retain their transparent image assets. */
@media screen{
 html[data-theme="dark"][data-theme="dark"] .roster-icon{fill:transparent!important}
 html[data-theme="dark"][data-theme="dark"] :is(.roster-card-icon,.first-roster-art .roster-icon){background:var(--tr-field)!important;border:1px solid var(--tr-border);box-shadow:none}
 html[data-theme="dark"][data-theme="dark"] :is(.tag,.mobile-badge,.badge,.badge-outline,.hotel-badge,.hotel-program,.airline-group,.airline-badge,.airline-badge img,.airline-fallback,.tsa-badge,.tsa-badge img,.hotel-badge img,.planner-status-badge,.profile-status,.sample-airline,.sample-tsa){background:transparent!important}
 html[data-theme="dark"][data-theme="dark"] .airline-fallback{color:var(--tr-link,#76ccef)}
 html[data-theme="dark"][data-theme="dark"] .airline-badge:has(img) .airline-fallback{visibility:hidden}
 /* Monochrome wordmarks; screen blending removes white artwork backplates. */
 html[data-theme="dark"] :is(.airline-badge img,.tsa-badge img,.hotel-badge img,.mobile-badge img,.tsa-pre-wordmark){filter:grayscale(1) invert(1) brightness(5) contrast(10);mix-blend-mode:screen;background:transparent!important}
 html[data-theme="dark"] .delta-mark{filter:brightness(0) invert(1)}
 html[data-theme="dark"] :is(.hotel-badge,.hotel-badge span,.airline-fallback,.no-programs){color:#fff!important}
}

@media screen{
 .roster-card-icon:has(.roster-icon-group){--roster-tint:#6874bd}
 html[data-theme="dark"] .roster-card-icon:has(.roster-icon-group){--roster-tint:#b3b2ff}
 .roster-card-icon:has(.roster-icon-family){--roster-tint:#d77c44}
 html[data-theme="dark"] .roster-card-icon:has(.roster-icon-family){--roster-tint:#ffb17c}
 .roster-card-icon:has(.roster-icon-team){--roster-tint:#32927e}
 html[data-theme="dark"] .roster-card-icon:has(.roster-icon-team){--roster-tint:#79dbc0}
 .roster-card-icon:has(.roster-icon-business){--roster-tint:#4586b6}
 html[data-theme="dark"] .roster-card-icon:has(.roster-icon-business){--roster-tint:#8dceff}
 .roster-card-icon:has(.roster-icon-church){--roster-tint:#9b68b5}
 html[data-theme="dark"] .roster-card-icon:has(.roster-icon-church){--roster-tint:#d6afff}
 .roster-card-icon:has(.roster-icon-friends){--roster-tint:#d16c85}
 html[data-theme="dark"] .roster-card-icon:has(.roster-icon-friends){--roster-tint:#ffa8c4}
 .roster-card-icon:has(.roster-icon-school){--roster-tint:#b08c24}
 html[data-theme="dark"] .roster-card-icon:has(.roster-icon-school){--roster-tint:#f3d37b}
 .roster-card-icon:has(.roster-icon-tour){--roster-tint:#3c9ca8}
 html[data-theme="dark"] .roster-card-icon:has(.roster-icon-tour){--roster-tint:#80dbe8}
 html .roster-summary-card .roster-card-icon,html[data-theme="dark"] .roster-summary-card .roster-card-icon{background:color-mix(in srgb,var(--roster-tint) 9%,transparent)!important;border-color:color-mix(in srgb,var(--roster-tint) 18%,transparent)!important}
}

/* Account identity tag follows the traveler’s name in both themes. */
.traveler-me-tag{display:inline-flex;vertical-align:middle;align-items:center;background:#76ccef!important;color:#163c48!important;font-size:12px!important;font-weight:700;line-height:1.3;padding:3px 7px;border-radius:6px;white-space:nowrap;margin-left:4px}

.rosters-page .main:has(.first-roster) .roster-create-compact{display:none!important}
.first-roster-create{display:flex;justify-content:center;align-items:center}
/* Compact trip wizard actions leave room for the primary action. */
.planner-actions.planner-actions-roster{flex-wrap:nowrap;gap:10px}
.planner-actions.planner-actions-roster>.btn.planner-icon-action{flex:0 0 48px;width:48px;min-width:48px;min-height:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:0}
.planner-actions.planner-actions-roster>.planner-icon-action svg{width:22px;height:22px}
.planner-actions.planner-actions-roster>.btn[type="submit"]{flex:1;min-width:0;white-space:nowrap;justify-content:center}
/* Filled selection indicator in the trip planner, in either theme. */
.planner-roster.selected .planner-radio,html[data-theme="dark"] .planner-roster.selected .planner-radio{background:#87dec3!important;border-color:#87dec3!important;color:#163c48!important;font-weight:700}
/* Traveler selection mirrors the roster indicator, with a larger right-hand control. */
/* Keep the selection beside the name; badges span the card below. */
@media(min-width:761px){}
/* Horizontal Travel Roster lockup at all app entry points. */
@media screen{
 .brand{display:inline-flex;align-items:center;gap:10px}
 .brand .wordmark,.brand>span{white-space:nowrap;line-height:1.1!important}
 .sidebar .brand .brand-symbol{width:44px!important;height:42px!important}
 .sidebar .brand .wordmark{font-size:24px!important;letter-spacing:-1px}
 .roster-app .topbar .brand .brand-symbol,.onboarding-app .brand .brand-symbol{width:48px!important;height:44px!important}
 .roster-app .topbar .brand .wordmark,.onboarding-app .brand .wordmark{font-size:30px!important;letter-spacing:-1px}
 @media(max-width:360px){.roster-app .topbar .brand .wordmark,.onboarding-app .brand .wordmark{font-size:27px!important}}
}
.trip-print-logo>span{white-space:nowrap;line-height:1.1}

/* Secondary actions stay unfilled; navigation uses theme-specific selection. */
@media screen {
 html body :is(.btn.secondary,.shared-icon-action,.planner-icon-action,.planner-cancel,.profile-back,.back-link,button[aria-label="Back"],button[aria-label="Cancel"],button[aria-label="Cancel trip"]),
 html[data-theme="dark"] body :is(.btn.secondary,.shared-icon-action,.planner-icon-action,.planner-cancel,.profile-back,.back-link,button[aria-label="Back"],button[aria-label="Cancel"],button[aria-label="Cancel trip"]) {background:transparent!important;background-image:none!important;box-shadow:none!important}
 html[data-theme="dark"] body :is(.btn.secondary,.shared-icon-action,.planner-icon-action){color:var(--tr-link,#76ccef)!important;border-color:var(--tr-border,#547b85)!important}
 html[data-theme="dark"] body :is(.planner-cancel,[aria-label="Cancel"],[aria-label="Cancel trip"]){color:#ff929e!important;border-color:#ff929e!important}
 html body :is(.sidebar .nav,.mobile-nav button){background:transparent!important}
 html body :is(.sidebar .nav.active,.mobile-nav button.active){background:#e7f1f2!important;color:#285464!important}
 html[data-theme="dark"] body :is(.sidebar .nav.active,.mobile-nav button.active){background:var(--tr-selected,#366873)!important;color:var(--tr-link,#76ccef)!important}
}

/* Destructive actions always use a red outline, including confirmation buttons. */
@media screen{
 html body.roster-app :is(button.danger,button.account-delete-button,button.membership-delete,button.roster-remove-x){color:#b83e3e!important;border:1px solid #c45b5b!important;background:transparent!important;background-image:none!important;box-shadow:none!important;border-radius:8px}
 html[data-theme="dark"] body.roster-app :is(button.danger,button.account-delete-button,button.membership-delete,button.roster-remove-x){color:#ff929e!important;border-color:#ff929e!important;background:transparent!important}
 html body.roster-app :is(button.text-btn.danger){padding:8px 12px}
}

@media screen and (max-width:760px){.roster-app .mobile-nav{padding-top:6px!important;padding-bottom:clamp(8px,calc(env(safe-area-inset-bottom,0px) - 14px),20px)!important}.roster-app .mobile-nav button{padding-top:3px;padding-bottom:3px}}

@media screen{
 html[data-theme="dark"] body.roster-app .planner-roster{background:var(--tr-field)!important;border-color:var(--tr-border)!important;color:var(--tr-text)!important}
 html[data-theme="dark"] body.roster-app .planner-roster.selected{background:var(--tr-selected)!important;border-color:var(--tr-accent)!important}
 html[data-theme="dark"] body.roster-app .planner-roster strong{color:var(--tr-text)!important}
 html[data-theme="dark"] body.roster-app .planner-roster small{color:#d3edf7!important}
 html body.roster-app :is(button.planner-cancel,button[aria-label="Cancel"],button[aria-label="Cancel trip"]){background:transparent!important;color:#b83e3e!important;border:1px solid #c45b5b!important;box-shadow:none!important}
 html[data-theme="dark"] body.roster-app :is(button.planner-cancel,button[aria-label="Cancel"],button[aria-label="Cancel trip"]){background:transparent!important;color:#ff929e!important;border-color:#ff929e!important}
}

@media screen{
 html[data-theme="dark"] body.roster-app .roster-icon-options label>span{background:var(--tr-field)!important;border-color:var(--tr-border)!important;color:var(--tr-text)!important}
 html[data-theme="dark"] body.roster-app .roster-icon-options input:checked+span{background:var(--tr-selected)!important;border-color:var(--tr-accent)!important;color:var(--tr-text)!important}
 html body.roster-app .btn{height:48px!important;min-height:48px!important;box-sizing:border-box; padding-top:0!important;padding-bottom:0!important;line-height:1.25;align-items:center;justify-content:center}
 html body.roster-app :is(.modal-footer,.account-step-footer,.planner-actions){align-items:center}
 html body.roster-app :is(.shared-icon-action,.planner-icon-action){height:48px!important;min-height:48px!important;width:48px!important;flex-basis:48px!important}
}

/* Primary actions use the same brand mint in both themes. */
@media screen{
 html body.roster-app .btn:not(.secondary):not(.danger):not(.account-delete-button):not(.planner-cancel):not(.planner-icon-action):not(.shared-icon-action):not([aria-pressed]),
 html[data-theme="dark"] body.roster-app .btn:not(.secondary):not(.danger):not(.account-delete-button):not(.planner-cancel):not(.planner-icon-action):not(.shared-icon-action):not([aria-pressed]),
 html body .primary,html[data-theme="dark"] body .primary,
 html body .first-roster-create,html[data-theme="dark"] body .first-roster-create{background:#87dec3!important;background-image:none!important;border-color:#87dec3!important;color:#183e49!important}
}

@media screen{.roster-app .roster-filter-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px}.roster-app .roster-filter-actions>.invitation-tabs{display:flex;gap:8px;margin:0!important}.roster-app .roster-filter-actions>.roster-create-compact{margin-left:auto;flex-shrink:0}.roster-app .roster-filter-actions .invitation-tabs .btn{padding:0 14px!important;font-size:13px!important}@media(max-width:400px){.roster-app .roster-filter-actions{gap:8px}.roster-app .roster-filter-actions .invitation-tabs{gap:5px}.roster-app .roster-filter-actions .invitation-tabs .btn{font-size:11px!important;padding:0 8px!important}.roster-app .roster-filter-actions>.roster-create-compact{font-size:12px;padding-left:10px;padding-right:10px}}}

/* Login notices follow the same dark palette as the surrounding form. */
@media screen{
 html[data-theme="dark"] .auth-wrap .auth-note{background:var(--tr-field);color:var(--tr-muted)!important;border:1px solid var(--tr-border)}
}

/* One brand lockup across public pages, onboarding, and the dashboard. */
@media screen{
 html body :is(a.brand,a.onboarding-brand){display:inline-flex!important;align-items:center!important;gap:10px!important;font-family:'Manrope',system-ui,sans-serif!important;font-size:26px!important;font-weight:800!important;line-height:1.1!important;letter-spacing:-1px!important;text-decoration:none!important;color:#183e49!important}
 html body :is(a.brand,a.onboarding-brand)>span{font-family:inherit!important;font-size:26px!important;font-weight:800!important;line-height:1.1!important;letter-spacing:-1px!important;white-space:nowrap!important;color:inherit!important}
 html body :is(a.brand,a.onboarding-brand)>img{display:block!important;width:48px!important;height:44px!important;min-width:48px!important;flex:0 0 48px!important;object-fit:contain!important;filter:none!important;mix-blend-mode:normal!important}
 html[data-theme="dark"] body :is(a.brand,a.onboarding-brand){color:#f3f8f6!important}
 html[data-theme="dark"] body :is(a.brand,a.onboarding-brand)>span{color:inherit!important}
}

/* Manual traveler type selector: match dark-mode navigation selection. */
@media screen{
 html[data-theme="dark"] .roster-app .segmented{background:var(--tr-field,#234854)!important;border:1px solid var(--tr-border,#547985);color:var(--tr-text,#f3f8f7)!important}
 html[data-theme="dark"] .roster-app .segmented button{background:transparent!important;color:var(--tr-text,#f3f8f7)!important;min-height:44px;box-shadow:none!important}
 html[data-theme="dark"] .roster-app .segmented button.active{background:var(--tr-link,#76ccef)!important;color:var(--tr-canvas,#1e4652)!important}
 html[data-theme="dark"] .roster-app .segmented button:focus-visible{outline:2px solid var(--tr-link,#76ccef);outline-offset:2px}
}

/* Mobile pages use document scrolling; only bottom navigation stays fixed. */
@media screen and (max-width:760px){
 html:has(body.roster-app),body.roster-app{height:auto;min-height:100%;overflow:visible}
 body.roster-app .shell{height:auto;min-height:100dvh;display:block;overflow:visible}
 body.roster-app .topbar,body.roster-app .mobile-page-title{position:static;height:auto;flex:none}
 body.roster-app .main{display:block;height:auto;max-height:none;min-height:0;overflow:visible;padding-bottom:calc(110px + env(safe-area-inset-bottom))}
 body.roster-app.profile-setup .main{padding-bottom:36px}
 body.roster-app :is(.profile-page,.profile-sheet,#accountTravelerForm,#travelerSectionForm,.account-step-content,.section-fields){height:auto;max-height:none;min-height:0;overflow:visible;flex:none}
 body.roster-app :is(.profile-page,.profile-sheet,#accountTravelerForm,#travelerSectionForm,.account-step-content){display:block}
 body.roster-app .account-step.is-current{display:block;height:auto;max-height:none;min-height:0;overflow:visible;flex:none}
 body.roster-app .section-fields{overscroll-behavior:auto}
 body.roster-app .account-step-footer{position:static}
 body.roster-app .mobile-nav{position:fixed;left:0;right:0;bottom:0}
 body.onboarding-app .app{height:auto;min-height:100svh;overflow:visible}
}

/* Keep mobile step labels centered beneath their numbers. */
@media screen and (max-width:760px){
 html body.roster-app .account-step-track.section-step-buttons{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px!important;align-items:start}
 html body.roster-app .account-step-track.section-step-buttons>button{display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px!important;min-width:0;height:auto;min-height:72px;padding:8px 0!important;text-align:center}
 html body.roster-app .account-step-track.section-step-buttons>button>small{display:block;min-width:0;width:100%;margin:0;white-space:normal;text-align:center}
}

/* Created and invited rosters share one destination. */
.roster-view-tabs{display:flex;gap:6px;min-width:0}
.roster-view-tabs .btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.roster-view-count{font-size:12px;opacity:.8}
html body.roster-app .roster-view-tabs .btn.active{background:#76ccef!important;color:#183e49!important;border-color:#76ccef!important}
html body.roster-app .account-rosters-section{padding:8px 16px}
html body.roster-app .account-roster-list{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
html body.roster-app .account-roster-list .roster-summary-card{padding:12px 0;border:0;border-bottom:1px solid var(--tr-border,var(--line));border-radius:0;background:transparent!important;gap:12px;box-shadow:none}
html body.roster-app .account-roster-list .roster-summary-card:last-child{border-bottom:0}
html body.roster-app .account-roster-list .roster-card-icon{padding:6px;border-radius:8px}
html body.roster-app .account-roster-list .roster-card-icon .roster-icon{width:22px;height:22px}
html body.roster-app .account-roster-list .roster-card-content{gap:3px}
html body.roster-app .account-roster-list .roster-card-content>strong{font-size:16px;line-height:1.35}
html body.roster-app .account-roster-list .roster-participants{font-size:13px;line-height:1.4}
html body.roster-app .account-roster-list .roster-counts{font-size:12px;line-height:1.35}
html body.roster-app .account-roster-list .roster-chevron{width:18px;height:18px}
@media(max-width:760px){.roster-view-tabs{gap:4px}.roster-view-tabs .btn{font-size:13px!important;padding:8px 10px!important;gap:5px}.roster-view-count{font-size:11px}.roster-filter-actions{flex-wrap:wrap}}

/* Keep roster participant previews within one line, with an exact omitted count. */
html body.roster-app .roster-card-content{min-width:0}
html body.roster-app .roster-name-preview{display:flex;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;gap:4px}
html body.roster-app .roster-name-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body.roster-app .roster-name-more{flex:0 0 auto;white-space:nowrap}

/* Align document section icons and titles on the same center line. */
html body.roster-app .document-heading{display:flex;align-items:center;gap:10px}
html body.roster-app .document-heading>svg{display:block;flex:0 0 20px;width:20px;height:20px;margin:0}
html body.roster-app .document-heading>h3{display:flex;align-items:center;margin:0!important;min-height:24px;line-height:1.3}
html body.roster-app .document-heading .tsa-pre-wordmark{display:block;margin:0;vertical-align:middle}

/* Leave breathing room after the final traveler action. */
html body.roster-app .traveler-membership-actions{height:auto;max-height:none;min-height:0;padding-bottom:24px;margin-bottom:8px;overflow:visible;display:flow-root}
html body.roster-app .traveler-membership-actions .btn{height:auto;min-height:44px}

html body.roster-app .associated-roster-list{margin-top:12px}

/* Size TSA artwork by height so its box starts at the shared title edge. */
html body.roster-app .document-heading .tsa-pre-wordmark{width:auto!important;height:14px!important;max-height:14px;max-width:none;object-fit:contain;object-position:left center}

/* Shared field sizing for account setup, invited profiles, and traveler editing. */
html body.roster-app .profile-sheet :is(input.input,select.input,.full-month-date){
 box-sizing:border-box;height:44px!important;min-height:44px!important;
 min-width:0;max-width:100%;padding:9px 10px!important;
 font-size:16px!important;line-height:24px!important;
}
html body.roster-app .profile-sheet .full-month-date>.full-month-date-native{
 height:100%!important;min-height:0!important;padding:0!important;
}
html body.roster-app .profile-sheet .phone-entry>.input{margin-top:0!important}
html body.roster-app .profile-sheet textarea.input{box-sizing:border-box;min-width:0;max-width:100%;min-height:100px}


/* Let native select rendering center its text instead of adding input text padding. */
html body.roster-app .profile-sheet select.input{padding-top:0!important;padding-bottom:0!important;line-height:normal!important}

/* Center the visible date label independently of native date picker rendering. */
html body.roster-app .profile-sheet .full-month-date{display:flex!important;align-items:center;padding-top:0!important;padding-bottom:0!important}
html body.roster-app .profile-sheet .full-month-date .full-month-date-value{width:100%;margin:0;line-height:24px!important;white-space:nowrap!important}

/* A consistent, compact icon row for every bottom navigation destination. */
html body.roster-app .mobile-nav button{grid-template-rows:32px auto;gap:2px;justify-items:center}
html body.roster-app .mobile-nav .nav-icon-slot{width:32px;height:32px;padding:0;align-items:center;justify-content:center}
html body.roster-app .mobile-nav .nav-icon-slot>svg{width:32px;height:32px;display:block}
html body.roster-app .mobile-nav .nav-icon-slot>.traveler-avatar{width:32px;height:32px;margin:0;font-size:11px}

html body.roster-app .traveler-avatar{border:1px solid var(--tr-border,var(--line))!important}
html body.roster-app .traveler-avatar[data-account="true"]{border:1px solid var(--tr-link,#76ccef)!important}

html body.roster-app .traveler-avatar[data-account="true"][data-sex="female"]{border-color:#c49be8!important}

html[data-theme="dark"] body.roster-app .traveler-avatar[data-account="true"][data-sex="female"]{border-color:#ff8fce!important}

/* Roster navigation and removal are separate, comfortably spaced targets. */
html body.roster-app .associated-roster{gap:12px}
html body.roster-app .associated-roster-link{display:inline-flex;align-items:center;gap:6px;min-width:0;min-height:44px;color:inherit!important;text-decoration:none;overflow-wrap:anywhere}
html body.roster-app .associated-roster-link:focus-visible{outline:2px solid var(--tr-link,#76ccef);outline-offset:3px;border-radius:4px}
html body.roster-app .associated-roster .roster-remove-x{flex-shrink:0}

/* Compact page headings with the selected roster identity. */
html body.roster-app{--text-page-title:28px}
html body.roster-app :is(.mobile-page-title,.main h1){font-size:28px!important;line-height:1.25!important;letter-spacing:-.5px}
html body.roster-app .roster-page-heading:has(>.roster-icon){display:flex;align-items:center;gap:10px}
@media(max-width:760px){html body.roster-app .mobile-page-title:has(>.roster-icon){display:none}}
html body.roster-app :is(.mobile-page-title,.roster-page-heading)>.roster-icon{width:28px;height:28px;flex-shrink:0}
html body.roster-app :is(.mobile-page-title,.roster-page-heading)>span{min-width:0;overflow-wrap:anywhere}
@media(max-width:760px){html body.roster-app :is(.mobile-page-title,.main h1){font-size:26px!important}html body.roster-app :is(.mobile-page-title,.roster-page-heading)>.roster-icon{width:26px;height:26px}}

html body.roster-app .associated-roster{padding-left:12px;padding-right:12px;box-sizing:border-box;max-width:100%}

/* One connected container for roster view tabs. */
html body.roster-app .roster-view-tabs{display:inline-flex;gap:0!important;padding:3px;border:1px solid var(--tr-border,var(--line));border-radius:12px;background:var(--tr-field,#eef3f0);overflow:hidden}
html body.roster-app .roster-view-tabs .btn{flex:1;border:0!important;border-radius:9px;margin:0;box-shadow:none!important;background:transparent!important;min-height:42px;padding:8px 12px!important}
html body.roster-app .roster-view-tabs .btn.active{background:#76ccef!important;color:#183e49!important}
@media(max-width:400px){html body.roster-app .roster-view-tabs .btn{padding:8px!important;gap:4px}}

/* Touch browsers retain hover after copying; keep that state dark and legible. */
html[data-theme="dark"] body.roster-app .copy:is(:hover,:active,:focus-visible){background:var(--tr-selected,#366873)!important;color:var(--tr-accent,#87dec3)!important}
html[data-theme="dark"] body.roster-app .copy:focus-visible{outline:2px solid var(--tr-link,#76ccef);outline-offset:2px}

/* Midnight teal: shared public pages, app screens, and nested surfaces. */
@media screen{
 html[data-theme="dark"] :is(.header,.top,.onboard,.email-layout){background:transparent}
 html[data-theme="dark"] :is(.overlay,.roster-remove-overlay){background:#061b24cc}
 html[data-theme="dark"] .loading-skeleton{background-image:linear-gradient(100deg,#1e4652 20%,#3c646f 45%,#1e4652 70%)}
 html[data-theme="dark"] .theme-moon{background:var(--tr-selected)}
 html[data-theme="dark"] .sidebar-theme-toggle{border-color:var(--tr-border)}
 html[data-theme="dark"] body:has(.welcome-page) .hero{background:transparent!important}
}

/* Account navigation remains available while reading the policy. */
.privacy-account-page{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
.privacy-account-page .header{gap:16px;flex-wrap:wrap}
.privacy-account-page .header>a:last-child{color:var(--tr-link,#2882a7);font-size:14px;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.privacy-account-nav{position:fixed;z-index:30;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:6px 8px max(8px,env(safe-area-inset-bottom));background:var(--tr-canvas,#fffdf9);border-top:1px solid var(--tr-border,#dbe3df)}
.privacy-account-nav>a{display:grid;grid-template-rows:32px auto;justify-items:center;align-content:center;gap:2px;min-width:0;min-height:62px;padding:3px 2px;border-radius:14px;color:var(--tr-link,#2882a7);text-decoration:none;font-size:12px;line-height:1.4}
.privacy-account-nav>a.active{background:var(--tr-selected,#e7f1f2);font-weight:700;position:relative}
.privacy-account-nav>a.active:after{content:"";position:absolute;bottom:-3px;width:34px;height:3px;border-radius:3px;background:var(--tr-link,#2882a7)}
.privacy-nav-icon,.privacy-nav-icon>svg{display:flex;align-items:center;justify-content:center;width:32px;height:32px}
.privacy-nav-avatar{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--tr-link,#2882a7);border-radius:50%;background:var(--tr-field,#edf3f3);color:var(--tr-text,#183e49);font-size:11px;font-weight:700}
@media print{.privacy-account-nav{display:none}.privacy-account-page{padding-bottom:0}}

/* Keep mobile navigation anchored after iOS refresh/viewport restoration. */
@media screen and (max-width:760px){
 body.roster-app .mobile-nav{position:fixed!important;inset:auto 0 0!important;margin:0!important;height:auto!important;max-height:none;transform:none!important;box-sizing:border-box}
}

/* Full company logos identify loyalty memberships consistently across cards and previews. */
.company-logo-badge{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;padding:0!important;border:0!important;background:transparent!important;max-width:min(220px,100%);min-height:26px;vertical-align:middle}
.company-logo-badge img{display:block;width:auto!important;height:18px!important;max-height:18px!important;max-width:min(220px,100%);object-fit:contain;border-radius:0!important}
/* Preserve the source alpha/antialiasing rather than clipping logo edges with high contrast. */
html[data-theme="dark"] .company-logo-badge.company-logo-badge img{filter:brightness(0) invert(1);opacity:.82;mix-blend-mode:normal}

.privacy-acknowledgment{display:flex;align-items:flex-start;gap:10px;margin:24px 0 20px;font-size:15px;line-height:1.5;text-align:left}
.privacy-acknowledgment input[type="checkbox"]{appearance:auto;-webkit-appearance:checkbox;flex:0 0 20px;width:20px;min-height:20px;height:20px;margin:2px 0 0;padding:0;accent-color:var(--tr-accent,#87dec3)}
.privacy-acknowledgment a{text-decoration:underline}

/* Keep actual multicolor/negative-space artwork readable rather than flattening it. */
html[data-theme="dark"] .company-logo-badge.company-logo-badge img:is([src$="/EK.png"],[src$="/TP.png"],[src$="/LX.png"],[src$="/QF.png"]){filter:none;opacity:1;mix-blend-mode:normal}
html[data-theme="dark"] .company-logo-badge:has(img:is([src$="/EK.png"],[src$="/TP.png"],[src$="/LX.png"],[src$="/QF.png"])){background:#f3f8f6!important;border-radius:3px;padding:2px 5px!important}
html[data-theme="dark"] .company-logo-badge.company-logo-badge img[src$="/SK.png"]{content:url("/brands/airlines/dark/SK.svg");filter:none;opacity:1;mix-blend-mode:normal}
html[data-theme="dark"] .company-logo-badge.company-logo-badge img[src$="/TK.png"]{content:url("/brands/airlines/dark/TK.svg");filter:none;opacity:1;mix-blend-mode:normal}

/* Preserve TSA image alpha edges; avoid threshold-like contrast amplification. */
html[data-theme="dark"][data-theme="dark"] img[src*="/brands/tsa-precheck.png"]{filter:brightness(0) invert(1);opacity:.82;mix-blend-mode:normal}

/* Consistent square privacy checkboxes, including iOS dark mode. */
html body :is(.privacy-acknowledgment,.privacy-agreement) input[type="checkbox"]{appearance:none!important;-webkit-appearance:none!important;position:relative;display:block;flex:0 0 22px;width:22px!important;min-width:22px;max-width:22px;height:22px!important;min-height:22px!important;margin:2px 0 0!important;padding:0!important;border:2px solid #6d8790!important;border-radius:5px!important;background:#fff!important;box-shadow:none!important;cursor:pointer}
html[data-theme="dark"] body :is(.privacy-acknowledgment,.privacy-agreement) input[type="checkbox"]{background:#143640!important;border-color:#8eb7c4!important}
html body :is(.privacy-acknowledgment,.privacy-agreement) input[type="checkbox"]:checked{background:#87dec3!important;border-color:#87dec3!important}
html body :is(.privacy-acknowledgment,.privacy-agreement) input[type="checkbox"]:checked:after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid #183e49;border-width:0 2px 2px 0;transform:rotate(45deg)}
html body :is(.privacy-acknowledgment,.privacy-agreement) input[type="checkbox"]:focus-visible{outline:3px solid #76ccef!important;outline-offset:3px}

/* Keep iOS status icons and the home indicator clear of app content. */
@media screen and (max-width:760px){
 body.roster-app .topbar{padding-top:calc(env(safe-area-inset-top,0px) + 22px)}
 body.roster-app.profile-section-context .topbar{padding-top:calc(env(safe-area-inset-top,0px) + 10px)}
 body.roster-app::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--tr-canvas,#1e4652);z-index:40;pointer-events:none}
 body.roster-app .mobile-nav{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))!important}
}

/* Shared mobile safe areas, including iOS keyboard-driven document scrolling. */
@media screen and (max-width:760px){
 :root{--tr-safe-top:env(safe-area-inset-top,0px);--tr-safe-bottom:env(safe-area-inset-bottom,0px)}
 /* Some installed iOS versions report a zero top inset while the keyboard is open. */
 @supports(-webkit-touch-callout:none){
  @media(display-mode:standalone) and (orientation:portrait){
   :root{--tr-safe-top:max(48px,env(safe-area-inset-top,0px))}
  }
 }
 html body::before{content:"";position:fixed;inset:0 0 auto;height:var(--tr-safe-top);background:var(--tr-canvas,#faf8f0);z-index:40;pointer-events:none}
 html body.roster-app::before,html body.onboarding-app::before{background:var(--tr-canvas,#1e4652)}
 html body.roster-app .topbar{position:sticky;top:0;z-index:35;padding-top:calc(var(--tr-safe-top) + 16px);background:var(--tr-canvas,#1e4652)}
 html body.roster-app.profile-section-context .topbar{padding-top:calc(var(--tr-safe-top) + 10px)}
 html body:not(.roster-app):not(.onboarding-app){padding-top:var(--tr-safe-top);padding-bottom:var(--tr-safe-bottom)}
 html body.onboarding-app .app{padding-top:calc(var(--tr-safe-top) + 16px);padding-bottom:max(24px,var(--tr-safe-bottom))}
 html body.roster-app .shell{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
 html body.roster-app .mobile-nav,html body .privacy-account-nav{padding-bottom:calc(8px + var(--tr-safe-bottom))!important;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
 html body.roster-app .main{scroll-margin-top:calc(var(--tr-safe-top) + 80px)}
}

/* Give translated mobile tab names two lines without widening their columns. */
@media screen and (max-width:760px){
 html body.roster-app .mobile-nav button{flex:1 1 0;width:0;min-width:0;grid-template-columns:minmax(0,1fr);grid-template-rows:32px 2.5em;white-space:normal}
 html body.roster-app .mobile-nav .nav-label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%;min-width:0;height:2.5em;line-height:1.25;white-space:normal;overflow-wrap:anywhere;word-break:normal;overflow:hidden;text-align:center}
}


@media screen and (max-width:760px){
 html body.roster-app .shell{min-height:max(100dvh,var(--tr-app-height,100dvh))}
}

/* Avoid iOS clipping a backdrop-filter layer at its stale browser viewport.
   The navigation already has an opaque theme background. */
@media screen and (max-width:760px){
 html body.roster-app .mobile-nav,html body .privacy-account-nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:visible!important;clip-path:none!important;contain:none!important}
}

/* Preserve avatar size while blending unclaimed profile rings into their fill. */
html body.roster-app .traveler-avatar:not([data-account="true"]){border-color:transparent!important}