/** * TRClubSelectionSection Styles * * The post-Authorizations club-selection screen. Reuses the shared * .tr-question-section/.tr-question-content/.tr-question-bottom-action * shell (tr-question.css), the shared intro typography, TRButton's own * .tr-button--outline variant (tr-button.css) for INDIETRO, * TROptionButton's own plain/unfilled .tr-option-button (tr-question. * css) for "Non trovo il mio circolo" -- the exact same component/class * "Per un minore / Figlio o figlia" already renders with elsewhere in * this app, not a club-specific visual system -- and INDIETRO's own * typography tokens (tr-header.css/tokens.css -- --tr-font-franklin- * demi, --tr-header-button-text-size, --tr-font-weight-bold, * --tr-header-button-tracking, --tr-color-green) for CERCA / RISULTATI, * not .tr-identity-field-label -- none of that is redeclared here. Only * the search box, the result rows and their scrollable viewport are * genuinely new UI (see tr-club-selection-section.js's own file-level * note for why nothing else qualified as "genuinely new"). * * Visual family: same black-card/white-border language * tr-authorizations.css already established for this app's cards, not * a new one -- values below intentionally alias the same radius/space * tokens rather than re-picking new numbers. */ :root { --tr-club-label-gap: var(--tr-space-xs); /* ─── Search box ─── A normal two-column flex layout: an icon column (fixed width, .tr-club-search-icon-column) and a content column (.tr-club- search-content, the remaining width) -- the relationship between them comes entirely from layout (icon-column's own width + the box's own real flex gap), never from translating either column's text. Every control below is independent by construction: geometry (height/radius/border-width/padding) lives on .tr-club- search-box only; the icon column's own width is its one control; the gap between the two columns is its own control, independent of both column's internal padding/geometry; CERCA-to-input vertical gap is a real flex gap on .tr-club-search-content, independent of the box/columns around it. Horizontal position still comes from the real layout (container padding + icon-column-width + columns-gap) -- --tr-club-search-icon- offset-x/-y and --tr-club-search-content-offset-y remain as small OPTIONAL paint-only nudges on top of that real layout (for tiny optical correction only, never primary positioning): at 0px the icon is mathematically centered in its column by the column's own justify-content/align-items alone. The input's own typography (font-family/font-size/letter-spacing) is NOT one of this screen's own tokens: .tr-club-search-input reads --tr-identity-field-value-font-family/-font-size/-letter- spacing directly (tr-identity.css, the same tokens "Sasha Gorup"/ "sgorup@burgheria.it" render with on the identity-confirmation card) so it automatically follows any future change to that shared field-value typography -- no --tr-club-search-input-* token duplicates or snapshots those values. */ --tr-club-search-height: 76px; --tr-club-search-radius: var(--tr-radius-md); --tr-club-search-border-width: 1px; --tr-club-search-padding-left: var(--tr-space-md); --tr-club-search-padding-right: var(--tr-space-md); --tr-club-search-background: rgba(0, 0, 0, 0.8); /* Width of the ENTIRE icon area (not just the icon glyph inside it) -- the icon itself centers within this column via the column's own flex centering (tr-club-search-icon-column below), not a manual offset. */ --tr-club-search-icon-column-width: 40px; /* Space between the icon column and the content column -- a real flex gap on .tr-club-search-box, reusing the same shared spacing token the old (now-retired) --tr-club-search-icon-gap aliased, not a new literal. */ --tr-club-search-columns-gap: var(--tr-space-sm); /* Size is NOT one of this screen's own tokens: .tr-club-search-icon reads --tr-auth-completed-check-icon-size directly (tr- authorizations.css, the exact token check-icon.svg's own width/ height already use in the Authorizations completed state) so both icons always stay the same size globally. Real horizontal AND vertical centering is the icon column's own job (see .tr-club-search-icon-column's own justify-content/align-items, below) -- these two are small OPTIONAL nudges on top of that, at 0px/0px the icon is already mathematically centered. */ --tr-club-search-icon-offset-x: 4px; --tr-club-search-icon-offset-y: -1px; /* Not one of the caller's own listed controls either (that list is positions/sizes, not color) -- aliases the same white --tr-color-text-dim token cancel-icon.svg's own mask already uses elsewhere in this app, not a new color value. */ --tr-club-search-icon-color: var(--tr-color-text-dim); /* Small optional vertical nudge only -- horizontal position is no longer this token's concern (see the tokens' own note above). */ --tr-club-search-content-offset-y: 2px; /* Matches --tr-dob-selected-label-value-gap's own value (2px) -- the same tight label-above-value convention already used on the DOB screen, not a new number picked in isolation. */ --tr-club-search-label-input-gap: 8px; /* ─── Results box ─── ONE fixed-height rounded/bordered container (replaces the previous one-card-per-club layout -- see tr-club-selection- section.js's own note): height/radius/border-width live on .tr-club-results-box only; the header's own height and its gap to the separator below it are independent of both the box's height and the row list's own geometry; each row's own height and its name-to-address gap are independent of the box/header; the bottom indicator's reserved height is independent of all of the above. Background reuses --tr-club-search-background directly (tr-club-search-box is the same semi-transparent black family) -- not a new duplicate value; border color reuses the same plain #ffffff every other boxed element in this app uses, same as the search box's own border. --tr-club-results-content-inset-x is the ONE shared left/right inset every piece of this box's own internal content derives from -- BOTH sides, always the same value, never two separate numbers: RISULTATI's own padding, the header separator's margin, every row's own margin (and so, by construction, its text, its separator line and its right-side icon), and the final separator under the last row. It reads --tr-space-lg directly (tokens.css, resolves to 18px) -- the app's own standard 18px spacing unit, not a hardcoded duplicate of that value. Nothing stacks a second padding/margin on top of it anywhere below -- each element applies this token exactly once, so nothing can drift out of alignment with RISULTATI/the separators again. --tr-club-results-header-to-rows-gap is a separate, independent control: the vertical space between the header separator and the results list's own first row (currently 0 -- there was no gap here before this token existed; see .tr-club-results-list's own margin-top below). Moves the rows area up/down only -- it can never move RISULTATI itself (fixed above it) or change any row's own height (--tr-club-result-row-height, untouched). */ --tr-club-results-height: 320px; --tr-club-results-radius: var(--tr-radius-lg); --tr-club-results-border-width: 1px; --tr-club-results-content-inset-x: var(--tr-space-lg); --tr-club-results-header-to-rows-gap: 0px; --tr-club-results-header-height: 40px; /* Vertical gap between the RISULTATI label and the horizontal separator directly below it ONLY -- applied as margin-top on .tr-club-results-separator (below), so it moves that separator up/down without ever moving RISULTATI itself (fixed in its own header area above), changing row height, club text positioning, the outer results box, or any other row's own separator (those are governed entirely by --tr-club-result-separator-opacity/ .tr-club-result::after, untouched by this token). Starts at 0px, the current/already-approved visual distance, not a number picked in isolation. */ --tr-club-results-label-to-separator-gap: -4px; --tr-club-result-row-height: 64px; --tr-club-result-name-address-gap: 4px; /* The name+address group is already vertically centered between this row's own top/bottom separator lines via real flex centering (.tr-club-result's own align-items: center -- see that rule's own note) -- this is a small OPTIONAL paint-only nudge on top of that, for later optical fine-tuning only, same "manual nudge" pattern --tr-auth-text-offset-y etc. already use elsewhere. 0px = exactly centered. */ --tr-club-result-text-offset-y: 2px; /* Real layout spacing around the bottom scroll/discover arrow (see .tr-club-results-bottom-indicator below) -- padding, not a fixed container height + centering (the old --tr-club-results- bottom-indicator-height is retired) and not a transform/absolute nudge. -gap-top is the space between the final row separator (the row list's own bottom edge) and the top of the arrow; -gap-bottom is the space between the bottom of the arrow and the results box's own inner bottom edge. Starting values are a snapshot of the current, already-rendered gaps at this viewport (measured ~2.9px / ~1.1px), rounded to clean pixels -- not a guess. */ --tr-club-results-arrow-gap-top: 8px; --tr-club-results-arrow-gap-bottom: 10px; /* Franklin Gothic Demi Condensed, lime -- both existing global tokens, not new values. --tr-club-name-letter-spacing is new (nothing controlled this before); starts at 'normal' -- a snapshot of the current, already-approved appearance, not a guessed new value. */ --tr-club-name-font-family: var(--tr-font-franklin-demi-condensed); /* Registration-responsive-pass: no shared "result-row title" token exists elsewhere (genuinely local to this list row) -- same idiom(B) clamp-ramp used throughout this pass, 320px floor ramping back up to the original flat 15px by ~374px. */ --tr-club-name-font-size: calc(13px + clamp(0px, calc(100vw - 320px), 53.832px) * 0.037151); --tr-club-name-letter-spacing: 0.7px; --tr-club-name-color: var(--tr-color-accent); /* Franklin Gothic Book Condensed, 100% white, no dimming -- same existing white token typed search text/cancel-icon already use, not the dimmer grey this used to alias. --tr-club-address- letter-spacing is new, same reasoning as the name's own above. font-size: same idiom(B) treatment, 320px floor ramping back up to the original flat 13px by ~374px. */ --tr-club-address-font-family: var(--tr-font-franklin-book-condensed); --tr-club-address-font-size: calc(11.5px + clamp(0px, calc(100vw - 320px), 53.832px) * 0.027863); --tr-club-address-letter-spacing: 0.5px; --tr-club-address-color: var(--tr-color-text-dim); /* ONE shared opacity control for EVERY white horizontal separator line in the RISULTATI box: the header separator directly below RISULTATI (.tr-club-results-separator), every row separator (.tr-club-result's own ::after -- see that rule's own note for why a pseudo-element, not opacity on the element itself), and so the final separator under the last visible row too (no :last-child exception exists). All three read this exact token, never their own independent opacity. Each of those rules also paints solid #ffffff, not var(--tr-question-card-border-color) (whose own rgba alpha would otherwise cap them below 100% even at opacity: 1) -- so at 1 (the current/already-approved appearance, unchanged here), every line renders at genuine 100% opacity, with no other opacity/alpha/filter involved. */ --tr-club-result-separator-opacity: 1; /* Icon SIZE is NOT a club-specific token any more: .tr-club-result- arrow reads --tr-auth-completed-check-icon-size directly (tr- authorizations.css) -- the exact same shared token the search icon (.tr-club-search-icon) already uses, so the Continue icon always stays exactly the same size as the CERCA search icon; the old --tr-club-arrow-size is retired (nothing references it any more). --tr-club-arrow-color is unrelated and stays as-is. --tr- club-result-icon-column-width remains the RIGHT column's own fixed width in this row's own two-column flex layout (text column flex: 1, icon column fixed -- see .tr-club-result/.tr- club-result-icon-column's own notes below) -- independent of the icon glyph's own size, unaffected by this change. X/Y offset remain small OPTIONAL nudges for tiny optical calibration only, on top of the icon's own real centering within its column -- at 0px/0px the icon is already mathematically centered, both within its column and (since the column itself is centered in the row) between the row's own top/bottom separator lines. */ --tr-club-arrow-color: var(--tr-color-accent); --tr-club-result-icon-column-width: 24px; --tr-club-result-icon-offset-x: 0px; --tr-club-result-icon-offset-y: 0px; /* ─── CERCA / RISULTATI color ─── CERCA and RISULTATI still reuse INDIETRO's own font-family/font- size/font-weight/letter-spacing/line-height tokens directly (see .tr-club-search-label/.tr-club-results-label below) -- only COLOR is independent of INDIETRO's own --tr-color-green, via this one token, used by these two labels only. */ --tr-club-section-label-color: var(--tr-color-text); } /* Vertical rhythm between this group's own three distinct blocks (search box -> results box -> "Non trovo il mio circolo") reuses --tr-question-card-to-helper-gap directly (tr-question.css) -- the same established "one content block to the next" spacing every other registration/question screen already uses (e.g. the auth-group -> helper gap on Authorizations, the dob-row -> helper gap on DOB) -- not a club-specific duplicate value. The group -> INDIETRO gap needs no rule here at all: it is already --tr-question-helper-to-skip-gap, the shared floor gap .tr-question-section itself enforces between .tr-question-content and .tr-question-bottom-action on every screen using this shell -- Club Selection inherits it automatically. */ /* Responsive pass: flex:1 + min-height:0 let this group (and, scoped below, .tr-question-content itself) stretch to fill/shrink into whatever vertical space is actually available, instead of staying at natural content height -- this is what lets .tr-club-results-box below genuinely grow on a tall screen and shrink+scroll on a short one. Scoped to THIS screen only (see the .tr-question-content:has() override further down) -- the shared .tr-question-content rule itself, and every other screen using it, is untouched. */ .tr-club-group { display: flex; flex-direction: column; gap: var(--tr-question-card-to-helper-gap); width: 100%; flex: 1 1 auto; min-height: 0; } /* Lets .tr-club-group above genuinely stretch/shrink within .tr-question-section's own available height, instead of sizing to natural content like every other screen's .tr-question-content does (that shared rule, tr-question.css, is untouched). Scoped via :has() to ONLY the instance that contains .tr-club-group -- i.e. only this screen -- the same :has() scoping technique .tr-player-summary-avatar::before already uses elsewhere in this app. */ .tr-question-content:has(.tr-club-group) { flex: 1 1 auto; min-height: 0; } /* Typography (family/size/weight/tracking/line-height) reads INDIETRO's own tokens directly (tr-header.css/tokens.css: --tr-font- franklin-demi, --tr-header-button-text-size, --tr-font-weight-bold, --tr-header-button-tracking) -- the exact tokens .tr-question-skip. tr-button itself renders INDIETRO with -- no --tr-club-* typography tokens duplicate them, and .tr-identity-field-label is no longer used here. Line-height is left unset for the same reason INDIETRO's own is: neither .tr-button nor .tr-question-skip.tr-button sets one, so both default to the same browser 'normal'. COLOR is deliberately NOT inherited from INDIETRO (--tr-color-green) -- see --tr-club-section-label-color's own note above. Only centering (via its .tr-club-results-header parent, below) is this screen's own concern. */ .tr-club-results-label { display: block; font-family: var(--tr-font-franklin-demi); font-size: var(--tr-header-button-text-size); font-weight: var(--tr-font-weight-bold); letter-spacing: var(--tr-header-button-tracking); color: var(--tr-club-section-label-color); } /* ─── Search box ─── Two plain flex columns (icon-column + content), no manual X positioning anywhere: the box itself does NOT set align-items (so it defaults to 'stretch' -- both columns stretch to the box's own full height), letting each column center its OWN content vertically within that full height independently (see .tr-club-search-icon- column / .tr-club-search-content below). Border/background/radius alias the same black-card/white-border language tr-authorization-detail.css/tr-authorizations.css already use for this app's boxed elements. padding-left/-right are purely horizontal internal margins, never affecting height. */ .tr-club-search-box { display: flex; flex-shrink: 0; gap: var(--tr-club-search-columns-gap); width: 100%; height: var(--tr-club-search-height); box-sizing: border-box; padding-left: var(--tr-club-search-padding-left); padding-right: var(--tr-club-search-padding-right); border: var(--tr-club-search-border-width) solid #ffffff; border-radius: var(--tr-club-search-radius); background: var(--tr-club-search-background); } /* The icon area -- fixed width (--tr-club-search-icon-column-width), stretched to the box's own full height (see .tr-club-search-box's own note above). justify-content/align-items: center mathematically centers the icon glyph horizontally AND vertically inside itself -- this IS "the layout" the icon's position derives from; the icon's own optional offset-x/-y (below) are small nudges on TOP of this already-centered position, not a replacement for it. */ .tr-club-search-icon-column { flex: 0 0 var(--tr-club-search-icon-column-width); width: var(--tr-club-search-icon-column-width); display: flex; align-items: center; justify-content: center; } /* The real, unmodified search-icon.svg asset, used as a CSS mask (same technique as cancel-icon.svg/check-icon.svg elsewhere in this app): the asset's own fill is opaque line-art, so masking a colored element with it controls color without redrawing the file. Sized from --tr-auth-completed-check-icon-size directly (tr-authorizations.css) -- the same token check-icon.svg itself uses -- so both icons always stay the same size globally. --tr-club-search-icon-offset-x/-y are a small optional nudge on top of the column's own centering (positive X = right, negative X = left; at 0px/0px the icon is already mathematically centered by the column alone -- see its own note above). */ .tr-club-search-icon { flex: 0 0 auto; width: var(--tr-auth-completed-check-icon-size); height: var(--tr-auth-completed-check-icon-size); background: var(--tr-club-search-icon-color); -webkit-mask-image: url('../../assets/icons/mobile/search-icon.svg'); mask-image: url('../../assets/icons/mobile/search-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; transform: translate(var(--tr-club-search-icon-offset-x), var(--tr-club-search-icon-offset-y)); } /* CERCA + the input, as one group, stretched to the box's own full height (see .tr-club-search-box's own note above) and vertically centered WITHIN that full height via justify-content -- replaces the old outer-box-level align-items:center centering, now that this column stretches instead. Both children share exactly the same left edge (plain in-flow stacking, no per-element offset). Only a small optional vertical nudge remains on top of that centering (--tr-club-search-content-offset-y) -- horizontal position is never this token's concern. */ .tr-club-search-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--tr-club-search-label-input-gap); transform: translateY(var(--tr-club-search-content-offset-y)); } /* Typography reads INDIETRO's own tokens directly, color does not -- same reasoning as .tr-club-results-label above, not repeated here. Only left-alignment (position, unaffected by this task) is this screen's own concern. */ .tr-club-search-label { display: block; text-align: left; font-family: var(--tr-font-franklin-demi); font-size: var(--tr-header-button-text-size); font-weight: var(--tr-font-weight-bold); letter-spacing: var(--tr-header-button-tracking); color: var(--tr-club-section-label-color); } /* Typography reads --tr-identity-field-value-* directly (tr-identity. css) -- the exact tokens the identity-confirmation card's own field values ("Sasha Gorup"/"sgorup@burgheria.it") render with -- so this input automatically follows any future change to that shared typography; no --tr-club-search-input-* token copies/snapshots those values (font-weight/line-height have no dedicated token there either -- .tr-identity-field-value doesn't set them, so neither does this, both inheriting the same browser default). Applies to both the placeholder and whatever the user actually types -- both the same color (var(--tr-color-text-dim)); only OPACITY differs (see .tr-club-search-input::placeholder below, opacity: 0.20 -- the sole dimming mechanism now, not a second color value). */ .tr-club-search-input { width: 100%; border: none; background: transparent; padding: 0; margin: 0; font-family: var(--tr-identity-field-value-font-family); font-size: var(--tr-identity-field-value-font-size); letter-spacing: var(--tr-identity-field-value-letter-spacing); /* The existing normal/white text color token -- the same one .tr-identity-edit-input-color already aliases for typed text elsewhere in this app, not a new value. Full opacity (the default) -- only the placeholder below is dimmed. */ color: var(--tr-color-text-dim); -webkit-appearance: none; appearance: none; } /* Scoped to THIS input only -- the outer .tr-club-search-box already supplies the visual container (its own white border, untouched here), so the browser's native focus ring/inner-border/box-shadow on the input itself would be a redundant/conflicting second outline. Does not touch focus visibility anywhere else in the app. */ .tr-club-search-input:focus { outline: none; border: none; box-shadow: none; background: transparent; } /* Same white --tr-color-text-dim the typed text itself uses (not the separate dim/grey token this used to alias) -- opacity: 0.20 is now the ONLY dimming mechanism, so the placeholder still reads as dimmed relative to typed text (which stays at the default, full opacity) without a second color value. Typography (font-family/size/letter- spacing) is inherited from .tr-club-search-input above, unchanged. */ .tr-club-search-input::placeholder { color: var(--tr-color-text-dim); opacity: 0.20; } /* ─── Results box ─── A rounded/bordered/semi-transparent container whose OWN height is now responsive (responsive pass) -- flex: 1 1 auto + min-height: 0 lets it fill whatever space is actually left under CERCA (growing on a tall screen, shrinking on a short one) instead of a fixed height; max-height caps it at exactly its own original height (--tr-club-results-height, untouched) so the reference-viewport design is unchanged (any extra leftover space on taller-than- reference screens still flows to INDIETRO's own existing margin-top: auto bottom-anchor, same as before). RISULTATI + its separator stay fixed (flex: 0 0 auto), the row list is still the only part that grows/scrolls (flex: 1 1 auto, min-height: 0, unchanged below) -- so scrolling it can never move RISULTATI, the separator, the bottom indicator or the box's own edges. overflow: hidden clips the row list's own corners to the box's border-radius. */ .tr-club-results-box { display: flex; flex-direction: column; width: 100%; flex: 1 1 auto; min-height: 0; max-height: var(--tr-club-results-height); box-sizing: border-box; border: var(--tr-club-results-border-width) solid #ffffff; border-radius: var(--tr-club-results-radius); background: var(--tr-club-search-background); overflow: hidden; } /* RISULTATI, centered (this task's own spec) -- was left-stacked above the old card list; only this centering/fixed-height container changed, never the label's own typography. */ .tr-club-results-header { flex: 0 0 auto; height: var(--tr-club-results-header-height); display: flex; align-items: center; justify-content: center; padding: 0 var(--tr-club-results-content-inset-x); box-sizing: border-box; } /* Solid white (#ffffff), not var(--tr-question-card-border-color) -- that token's own value is rgba(255, 255, 255, 0.3), a 30% alpha baked directly into the color, which would silently cap this line at 30% visual intensity even at opacity: 1. Line color is still white (unchanged in HUE) -- only the alpha moved out of the color and into --tr-club-result-separator-opacity (below), the ONE shared control for every separator line in this box, so opacity: 1 genuinely means 100%, not a hidden ceiling. Inset left/right by --tr-club-results- content-inset-x (not width:100% edge-to-edge) so it lines up with RISULTATI/the row content on exactly the same guide -- see that token's own note above. No explicit width: a flex item with equal left/right margins and no width auto-fills the remaining cross size (the box's own default 'stretch'), so this can't drift out of sync with the header's own padding. */ .tr-club-results-separator { flex: 0 0 auto; height: 1px; margin: var(--tr-club-results-label-to-separator-gap) var(--tr-club-results-content-inset-x) 0; background: #ffffff; opacity: var(--tr-club-result-separator-opacity); } /* ─── Results list ─── The ONLY scrollable part of .tr-club-results-box (see its own note above) -- the same "nested scroll region" idea .tr-auth-detail-scroll already uses on the authorization-detail screen, just without that screen's fixed-top/fixed-bottom split (RISULTATI/the separator/the bottom indicator already do that job here, via flex: 0 0 auto). No gap: rows sit flush against each other, divided by their own border-bottom instead (see .tr-club-result below). */ .tr-club-results-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; /* Moves the rows area up/down only -- see --tr-club-results-header- to-rows-gap's own note above. Never affects RISULTATI itself (fixed above this element) or any row's own height. */ margin-top: var(--tr-club-results-header-to-rows-gap); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; } .tr-club-results-list::-webkit-scrollbar { display: none; } /* One row -- NOT a card: no individual border, no individual border-radius, no individual background (all three now belong to .tr-club-results-box, the single shared container). Inset left/right by the SAME --tr-club-results-content-inset-x every other piece of this box's content uses (margin, not padding: a separator line sits at an element's own edge, so only inset via margin lines it up with RISULTATI/the separators above; padding alone would have left it spanning edge-to-edge regardless of content padding) -- content itself then needs no padding of its own, since the row's own edge is already on the shared guide. A plain two-column flex row: the text column (.tr-club-result- content, flex: 1) and the icon column (.tr-club-result-icon-column, fixed width) -- see their own rules below for how each is sized; this row's own align-items: center vertically centers BOTH columns as a whole within its fixed height, and each column then centers ITS OWN content within that -- real flex centering throughout, never guessed/absolute positioning. gap is the space between the two columns only, reusing the same shared spacing token the search box's own icon-to-content gap already uses, not a new value. position: relative anchors the row's own separator line (::after, below), which needs its own opacity control independent of this row's content -- a plain border-bottom can't be given its own opacity without also fading the text/icon, since opacity on the row itself would apply to everything inside it. */ .tr-club-result { display: flex; align-items: center; gap: var(--tr-space-sm); position: relative; margin: 0 var(--tr-club-results-content-inset-x); height: var(--tr-club-result-row-height); flex: 0 0 auto; box-sizing: border-box; /* Neutralizes the native