/** * TRAuthorizationDetailSection Styles * * Generic authorization-detail screen: FIXED TOP (title + X + subtitle) * / SCROLLABLE MIDDLE (the document, the only thing that scrolls) / * FIXED BOTTOM (separator + instruction + CONTINUA). Reused for every * future authorization detail screen -- nothing here is Privacy- * specific; only privacy-detail.data.js's own strings are. * * .tr-auth-detail is positioned exactly like every other screen's own * .tr-hero-question-scroll shell (top: --tr-question-scroll-top, * bottom: --tr-question-scroll-bottom -- the SAME shared tokens, not a * new guessed offset), so it clears the header/bottom nav (both * position:absolute with z-index above this) identically to every * other overlay -- see mobile.css's own overlay-stacking notes for why * that's needed at all. */ :root { /* ─── Fixed top ─── */ --tr-auth-detail-top-padding-x: var(--tr-space-lg); /* 0px -- NOT a guessed number: .tr-auth-detail (this screen's own outer container, below) is ALREADY positioned at top: var(--tr-question-scroll-top) -- the exact same token every other registration/question screen's own .tr-hero-question-scroll shell uses, and none of those screens add any further padding-top before their own title (verified: DOB's own .tr-hero-copy-headline starts flush at its scroll shell's own top edge, 0px in between). This token previously added an extra 8px (--tr-space-md) on top of that already-correct position, pushing Privacy's title 8px lower than every other screen's own title. At 0px, the title simply starts at .tr-auth-detail's own already-correct Y position with nothing stacked on top, matching the standard exactly. */ --tr-auth-detail-top-padding-top: 0px; --tr-auth-detail-top-padding-bottom: var(--tr-space-md); /* Vertical positioning/gap between title and subtitle -- this screen's OWN independent layout control (overrides .tr-hero-copy- highlight's own margin-top -- see .tr-auth-detail-subtitle below). Title and subtitle typography themselves are NOT controlled here any more: both elements carry the actual shared classes (.tr-hero-copy-headline / .tr-hero-copy-highlight, see tr-authorization-detail-section.js) directly, so every typography property -- family, size, weight, line-height, letter-spacing, color -- comes from that one shared system verbatim, with no Privacy-specific copy of any of them to drift out of sync. */ --tr-auth-detail-title-to-subtitle-gap: var(--tr-space-xs); /* Moves the WHOLE intro block (title + subtitle together, via a paint-only transform on .tr-auth-detail-top -- see below) now that the normal header is hidden while this screen is open, freeing that upper space for the intro to move into. 0px = no guessed final position -- this screen's own already-correct .tr-question-scroll-top-derived start position, unchanged until manually tuned. Never affects the cancel icon, which is positioned independently against .tr-auth-detail itself, not nested inside .tr-auth-detail-top. */ --tr-auth-detail-intro-top: -46px; /* Rendered size of the real cancel-icon.svg asset -- same footprint (32px) the previous text "×" control occupied, so nothing shifts just from swapping the glyph for the real icon. */ --tr-auth-detail-close-size: 32px; /* Fine-calibration ONLY, layered on top of the base position (right: 0 relative to .tr-auth-detail, i.e. flush with the existing var(--tr-grid-margin) grid boundary -- see .tr-auth- detail-close below) via a paint-only transform: changing -x moves the icon horizontally only, -y moves it vertically only, neither touches the title/subtitle or anything else's layout. 0px/0px = exactly on the grid boundary, no nudge yet. */ --tr-auth-detail-close-offset-x: 0px; --tr-auth-detail-close-offset-y: -48px; /* ─── Shared horizontal content margin ─── ONE token drives the left/right alignment of the scrollable document, the separator, the instruction and CONTINUA -- they can never independently drift apart again. 0px -- NOT a guessed number, and not "no margin": .tr-auth-detail itself (this screen's own outer container, below) is ALREADY positioned at left/right: var(--tr-grid-margin) -- the exact same token that produces Slide 1's .tr-hero-copy/.tr-hero-cta/ .tr-discover-indicator boundary and Slide 7's own .tr-hero- question-scroll/.tr-question-card boundary (verified: all of these compute to the identical [28px, 347px] at 375px width). Adding this token's own extra padding ON TOP of that (18px, in an earlier pass) double-applied the margin, over-insetting this screen's content to [46px, 329px] -- narrower than, and misaligned with, every normal screen's own standard guide. At 0px, the content simply inherits .tr-auth-detail's own already-correct boundary with nothing stacked on top, matching the standard exactly. Does NOT include the fixed top area (title/subtitle/X), which keeps its own --tr-auth-detail-top- padding-x -- unrelated to this shared token. */ --tr-auth-detail-content-margin-x: 0px; /* ─── Scrollable middle ─── */ /* The ACTUAL visible/clipping boundary of the scroll viewport itself -- applied as margin-top/-bottom on .tr-auth-detail-scroll (a flex:1 1 auto item), not padding: margin shrinks the element's OWN box (and therefore where its overflow-y:auto clips content), while padding only adds space inside an unchanged box. Because .tr-auth-detail-top/-bottom are separate flex:0 0 auto siblings in a fixed-height flex column, changing these two values can never move either of them -- only .tr-auth-detail-scroll's own box shrinks/shifts within the space already between them. 0px/ 0px = the scroll box currently fills all available space, same as before these existed. Kept fully separate from --tr-auth-detail-scroll-padding-top/-bottom below, which remain internal spacing within whatever this box's size ends up being. */ --tr-auth-detail-scroll-viewport-top: -30px; --tr-auth-detail-scroll-viewport-bottom: 10px; --tr-auth-detail-scroll-padding-top: var(--tr-space-sm); --tr-auth-detail-scroll-padding-bottom: var(--tr-space-lg); --tr-auth-detail-heading-font-family: var(--tr-font-franklin-demi); --tr-auth-detail-heading-font-size: 12px; --tr-auth-detail-heading-letter-spacing: 0.04em; --tr-auth-detail-heading-color: var(--tr-color-accent); --tr-auth-detail-heading-margin-bottom: var(--tr-space-xs); --tr-auth-detail-body-font-family: var(--tr-font-franklin-book-condensed); --tr-auth-detail-body-font-size: 13px; --tr-auth-detail-body-line-height: 1.5; --tr-auth-detail-body-color: var(--tr-color-text-dim); --tr-auth-detail-section-gap: var(--tr-space-lg); --tr-auth-detail-end-message-font-family: var(--tr-font-franklin-demi); --tr-auth-detail-end-message-font-size: 13px; --tr-auth-detail-end-message-color: var(--tr-color-accent); --tr-auth-detail-end-message-margin-top: var(--tr-space-lg); /* ─── Fixed bottom ─── */ --tr-auth-detail-bottom-padding-top: var(--tr-space-sm); --tr-auth-detail-bottom-padding-bottom: var(--tr-space-sm); --tr-auth-detail-separator-color: rgba(255, 255, 255, 1); --tr-auth-detail-separator-height: 1px; --tr-auth-detail-separator-margin-bottom: var(--tr-space-sm); /* Instruction typography no longer has its own tokens: the element carries the shared .tr-question-helper class directly (see tr-authorization-detail-section.js), the exact same class every registration/question screen's own helper text already uses -- family/size/weight/letter-spacing/line-height/color all come from there verbatim now. */ /* CONTINUA's own "gap above" on this screen, same override technique .tr-dob-continue/.tr-auth-continue already use -- independent of the shared --tr-primary-action-gap-above. */ --tr-auth-detail-continue-gap: var(--tr-space-sm); } .tr-auth-detail { position: absolute; top: var(--tr-question-scroll-top); bottom: var(--tr-question-scroll-bottom); left: var(--tr-grid-margin); right: var(--tr-grid-margin); z-index: 10; display: flex; flex-direction: column; min-height: 0; } /* ─── FIXED TOP -- never scrolls ─── */ .tr-auth-detail-top { flex: 0 0 auto; padding: var(--tr-auth-detail-top-padding-top) var(--tr-auth-detail-top-padding-x) var(--tr-auth-detail-top-padding-bottom); /* Moves title+subtitle together (see --tr-auth-detail-intro-top's own note above) -- a paint-only transform, so it can never affect the cancel icon (a separate sibling, not nested in here) or this element's own layout footprint/the flex column below it. */ transform: translateY(var(--tr-auth-detail-intro-top)); } /* The close button is no longer a descendant of this row at all (see tr-authorization-detail-section.js) -- it is a sibling of .tr-auth- detail-top, positioned independently against .tr-auth-detail itself. This row's own width is therefore ALL the title ever sees, so its centering math has no knowledge of the X whatsoever. */ .tr-auth-detail-top-row { display: flex; align-items: center; justify-content: center; } /* Layout only -- every typography property comes from the shared .tr-hero-copy-headline class also applied to this same element (see tr-authorization-detail-section.js). width:100%/text-align:center is what makes the title center across the FULL row, independent of the X button. */ .tr-auth-detail-title { width: 100%; text-align: center; } /* The real cancel-icon.svg asset (never redrawn/recolored), positioned independently from .tr-auth-detail-top/-top-row entirely -- appended directly to .tr-auth-detail (see tr-authorization-detail-section.js), whose own right edge already sits exactly on var(--tr-grid-margin) -- the same standard boundary used elsewhere in this screen and app-wide (see .tr-auth-detail's own left/right below). right:0 here inherits that boundary directly, with no coupling to .tr-auth-detail-top's own inner padding. --tr-auth-detail-close-offset-x/-y are a pure paint- only transform layered on top for fine calibration only -- they can never affect the title, since this element sits outside .tr-auth- detail-top-row's own layout entirely. */ .tr-auth-detail-close { position: absolute; top: var(--tr-auth-detail-top-padding-top); right: 0; /* .tr-auth-detail-top now also carries a transform (see --tr-auth- detail-intro-top), which makes it establish its own stacking context and paint according to DOM order among other positioned/ transformed elements -- without an explicit z-index here, that put .tr-auth-detail-top's own (invisible, background-less) box on TOP of this button, silently swallowing its clicks even though nothing looked different. z-index:1 guarantees this stays above it regardless. */ z-index: 1; transform: translate(var(--tr-auth-detail-close-offset-x), var(--tr-auth-detail-close-offset-y)); width: var(--tr-auth-detail-close-size); height: var(--tr-auth-detail-close-size); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; cursor: pointer; } /* No background of its own -- the button/its own box stay fully transparent. The icon's white color comes from this element's own background, revealed only where the cancel-icon.svg mask is opaque (the ring + X artwork); var(--tr-color-text-dim), the existing global "white" token, not a new hardcoded value. Same width/height/position as before -- only the color/background mechanism changed. */ .tr-auth-detail-close-icon { display: block; width: 100%; height: 100%; background: var(--tr-color-text-dim); -webkit-mask-image: url('../../assets/icons/mobile/cancel-icon.svg'); mask-image: url('../../assets/icons/mobile/cancel-icon.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* Layout only -- every typography property comes from the shared .tr-hero-copy-highlight class also applied to this same element (see tr-authorization-detail-section.js). text-align:center is this screen's own concern (that shared class sets none). The combined .tr-hero-copy-highlight.tr-auth-detail-subtitle selector (2 classes) is needed only for margin-top, so this screen's own independent --tr-auth-detail-title-to-subtitle-gap reliably outranks the shared class's own margin-top rule regardless of stylesheet load order. */ .tr-auth-detail-subtitle { text-align: center; } .tr-hero-copy-highlight.tr-auth-detail-subtitle { margin-top: var(--tr-auth-detail-title-to-subtitle-gap); } /* ─── SCROLLABLE MIDDLE -- the ONLY thing that scrolls ─── */ .tr-auth-detail-scroll { flex: 1 1 auto; min-height: 0; /* The ACTUAL visible/clipping boundary (see --tr-auth-detail- scroll-viewport-top/-bottom's own note above) -- margin, not padding, so it genuinely shrinks this element's own box (and where overflow-y:auto clips its content), not just space inside an unchanged box. Cannot move .tr-auth-detail-top/-bottom: see that note for the flex-column math. */ margin-top: var(--tr-auth-detail-scroll-viewport-top); margin-bottom: var(--tr-auth-detail-scroll-viewport-bottom); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding: var(--tr-auth-detail-scroll-padding-top) var(--tr-auth-detail-content-margin-x) var(--tr-auth-detail-scroll-padding-bottom); scrollbar-width: none; -ms-overflow-style: none; } .tr-auth-detail-scroll::-webkit-scrollbar { display: none; } .tr-auth-detail-doc { display: flex; flex-direction: column; gap: var(--tr-auth-detail-section-gap); } .tr-auth-detail-heading { margin: 0 0 var(--tr-auth-detail-heading-margin-bottom); font-family: var(--tr-auth-detail-heading-font-family); font-size: var(--tr-auth-detail-heading-font-size); letter-spacing: var(--tr-auth-detail-heading-letter-spacing); text-transform: uppercase; color: var(--tr-auth-detail-heading-color); } .tr-auth-detail-body { margin: 0; font-family: var(--tr-auth-detail-body-font-family); font-size: var(--tr-auth-detail-body-font-size); line-height: var(--tr-auth-detail-body-line-height); color: var(--tr-auth-detail-body-color); } .tr-auth-detail-end-message { display: none; margin: var(--tr-auth-detail-end-message-margin-top) 0 0; font-family: var(--tr-auth-detail-end-message-font-family); font-size: var(--tr-auth-detail-end-message-font-size); text-align: center; color: var(--tr-auth-detail-end-message-color); } .tr-auth-detail-end-message--visible { display: block; } /* ─── FIXED BOTTOM -- never scrolls, pinned above the bottom nav ─── */ .tr-auth-detail-bottom { flex: 0 0 auto; padding: var(--tr-auth-detail-bottom-padding-top) var(--tr-auth-detail-content-margin-x) var(--tr-auth-detail-bottom-padding-bottom); } .tr-auth-detail-separator { width: 100%; height: var(--tr-auth-detail-separator-height); background: var(--tr-auth-detail-separator-color); margin-bottom: var(--tr-auth-detail-separator-margin-bottom); } /* .tr-auth-detail-instruction itself declares nothing: .tr-question- helper (also applied to this same element -- see tr-authorization- detail-section.js) already provides margin/text-align/width and every typography property, and no Privacy-specific position/spacing override is currently needed on top of it. Kept as a class purely as a selector hook for if one becomes needed later. */ /* Independent override of the shared .tr-option-button.tr-primary- action rule's own margin-top -- same technique .tr-dob-continue/ .tr-auth-continue already use, so this screen's CONTINUA can be calibrated without touching the shared rule/token or any other primary action. This is the ONLY source of the instruction-to- CONTINUA gap (the instruction itself sets no margin-bottom), so the two can never stack into a double gap. */ .tr-option-button.tr-primary-action.tr-auth-detail-continue { margin-top: var(--tr-auth-detail-continue-gap); } /* ─── Header hidden while an authorization-detail screen is open ─── .tr-header itself (tr-header.css/tr-header.js) is NOT touched -- this is a scoped override, true removal (display:none, not a visual cover), gated by .tr-authorization-detail-active on #mobileApp, which showAuthorizationDetail()/hideAuthorizationDetail() in mobile.js toggle in lockstep with the overlay's own --active class (same derived-state pattern syncRegistrationFlowLock() already uses for .mobile-app--flow-locked). The header reappears automatically the instant that class is removed -- INDIETRO/completion both call hideAuthorizationDetail(), so there is no path back to Authorizations or any other screen that leaves it hidden. */ .tr-authorization-detail-active .tr-header { display: none; }