/* UMA-feedback-06oct2026-v1.css (feedback dashboard session, 6 Oct 2026): release build 71's UMA.css with its 8 colour mixes replaced by the fixed colours they work out to (job crafting's four zones, light and dark), so html2canvas can read every colour (search: NO COLOUR MIX 6 OCT), and position: relative on the Remove screenshot button so its invisible touch area stays on it (search: HIT AREA 6 OCT). Nothing else changed. */

/* CSS CORRECT AS OF 27 SEPTEMBER 2026 - UMA-27sep2026-v34.css, VERBATIM */

/*PASTE TO HEAD
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;350;400;500;600;700&family=Merriweather:ital,wght@1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,400;1,700&display=swap" rel="stylesheet">

<link rel="stylesheet" href="UMA.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/bold/style.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css" />


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
*/

:root { /* used: screening-results-pages, screenings, auth */

--light-white-rgb: 250, 248, 247; /*FOR FADE*/ /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

  /*RESULTS*/

  --radar-graph-tile-width: 280px;
--radar-graph-score-width: 3.5rem; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--card-title-lg: 1.4rem; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--card-title-sm: 1.3rem; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--table-tick-col-width: 3.5rem; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--rule-grey: #E0E0E0; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-inset-total: 4rem; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--carouselle-card-xs: 300px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--carouselle-card-lg: 340px; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--carouselle-card-xl: 360px; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--carouselle-card-xxl: 380px; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--idle-notice-width: 420px; /* used: idle-notice */
--hero-film-scrim: rgba(var(--black-rgb), 0.7); /* used: homepage */
--default-radius: 10px; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--default-row-gap: var(--app-default-top-bottom-margin-sm); /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--default-max-width: 1280px; /* used: learn-pages-homepage-legal */
--pill-filter-height: 45px; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--pill-filter-selected-height: var(--button-size-xs); /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--nav-link-padding-horizontal: 1rem; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--filter-bar-left-right-padding: 10px; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--default-whitespace-below-section-headings: 4rem; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--default-whitespace-below-panel-headings: 2.3rem; /* used: screenings-home */
--default-whitespace-below-tables: 3rem;
--default-card-top-padding: 2rem; /* used: onboarding, learn-pages-homepage-legal */




/*APPLE SPOTIFY*/
--platform-spotify: rgb(31, 31, 31); /* used: chrome */
--platform-apple: rgb(27, 27, 29);
--platform-spotify-height: 352px;
--platform-apple-height: 352px;
--platform-spotify-height-compact: 152px; /* used: chrome */
--platform-apple-height-compact: 175px;

/*BLUR*/
--blur-md: 8px; /* used: chrome, learn-pages-homepage-legal */
--blur-lg: 20px; /* used: learn-pages-homepage-legal */

/*OPACITY SCALE*/
--opacity-very-low: 0.05; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--opacity-low: 0.2; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--opacity-moderate: 0.5; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--opacity-high: 0.7; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--opacity-very-high: 0.8; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--opacity-near-full: 0.9; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */


/*
--hover-overlay-dark: rgba(var(--navy-rgb), 0.08);
--hover-overlay-light: rgba(0, 0, 0, var(--opacity-very-low));
--hover-overlay-light-strong: rgba(0, 0, 0, 0.08);*/

--hover-overlay-dark: rgba(35, 47, 75, 0.08); /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--hover-overlay-light: rgba(0, 0, 0, 0.05); /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--hover-overlay-light-strong: rgba(0, 0, 0, 0.08); /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

/*WHITES*/
--pure-white: #FFFFFF;  /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--bright-white: #F9F9F9; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--new-white: #F6F3F1; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--white: var(--bright-white); /* used: screenings, chrome, screenings-home, profile */
--light-white: #FAF8F7; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--mid-white: #F2EDEA; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--dark-white: #DCD6D4; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--white-text-default: var(--bright-white); /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */

/*GREYS*/
--lightest-charcoal: #9C9894; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--light-charcoal: #808080; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--mid-charcoal: #333232; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--dark-charcoal: #0E0F15; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

--bright-white-rgb: 249,249,249; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--black-rgb: 0,0,0; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--white-rgb: 255,255,255; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */

/*COLOURS*/
--navy: #232F4B; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--navy-dark: #192032; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--bright-blue: #034A69; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--bright-teal: #009691; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--dark-teal: #006570; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--bright-green: #23683B; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--moss-green: #104736; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--light-sage-green: #808029; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--dark-sage-green: #565205; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--orange: #EA7100; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--bright-orange: #EA7100;
--orange-dark: #D36400; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--yellow: #EAB409; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--mustard: #B08211; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--tomato: #DE4D00; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--red: #C34825; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--red-dark: #A93C1E; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */


--light-mushroom: #D6C9B4; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--mid-mushroom: #B2A899; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--mushroom: #9F9280; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */


/*Sunrise and set*/
--sunrise-amber: #f4a84a; /* used: onboarding */
--sunrise-gold: #fdd08a; /* used: onboarding */
--sunrise-peach: #fde9c8; /* used: onboarding */
--sunrise-cream: #fff6e9; /* used: onboarding */
--moon-cream: #fdfbe7; /* used: onboarding */
--bottle-navy: #1b2c50;
--bottle-steel: #3a4f7a;
--bottle-water: #5bb6e6; /* used: onboarding */
--bird-grey: #5a5a64; /* used: onboarding */
--bird-grey-light: #6a6a74; /* used: onboarding */
--egg-disabled: #6b7488; /* used: onboarding */


/* === SEMANTIC STATUS (traffic light) === */



--tomato-rgb: 222, 77, 0;

--success: var(--bright-green); /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--error: var(--tomato); /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */



--card-default-background: var(--light-white); /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

--flood-color: var(--navy); /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--shadow-overlay: rgba(var(--black-rgb), var(--opacity-low)); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */





/*LOGO SIZES**/
--uma-xxs:     30px;
--uma-xs:      40px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--uma-sm:      50px; /* used: chrome */
--uma-md:      60px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--uma-lg:      70px; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--uma-xl:      80px;
--uma-xxl:      100px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--uma-xxxl:      120px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--uma-xxxxl:     150px;



/*=== HEADING SIZE SCALE === */
--heading-size-xxxl: 3rem; /* used: screenings-home, profile, learn-pages-homepage-legal */
--heading-size-xxl: 2.75rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--heading-size-xl: 2.2rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--heading-size-lg: 2rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--heading-size-md: 1.7rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--heading-size-sm: 1.2rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--heading-size-xs: 1.12rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */


--heading-letter-spacing-tight: -0.02em; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */



/* === BODY TEXT SCALE === */
--body-text-xxxl: 1.6rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--body-text-xxl: 1.4rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--body-text-xl: 1.2rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

--body-text-lg: 1.12rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--body-text-sm: 1rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--body-text-xs: .9rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--body-text-xxs: .8rem; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */


--app-default-para-text: var(--body-text-sm); /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--app-section-para-text: var(--body-text-lg); /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */


/* FONT WEIGHTS */
--font-weight-thin: 200;
--font-weight-extra-light: 300; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--font-weight-light: 350; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--font-weight-normal: 400; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--font-weight-medium: 500; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--font-weight-semi-bold: 600; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--font-weight-bold: 700; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--font-weight-extra-bold: 800;
--font-weight-black: 900;



/*LINE HEIGHTS*/
--default-line-height-single: 1; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--default-line-height-x-small: 1.3; /*CHANGED FROM1.2*/ /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--default-line-height-small: 1.5; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--default-line-height-large: 1.6; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--default-line-height-x-large: 1.7; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */



/* subnav locals */
--subnav-link-font-size: 1em; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--subnav-link-item-font-size: .9em; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--subnav-link-item-font-size-mobile: 1em; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

/* intervention menu page locals */
--intervention-heading-size: var(--heading-size-xl); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--intervention-heading-margin-bottom: var(--app-default-top-bottom-margin-xl); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--accordion-open-max-height: 4000px; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */



/*ICON SIZES*/
--button-icon-xs: 0.8rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--button-icon-sm: 1.1rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--button-icon-md: 1.2rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--button-icon-lg: 1.4rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--button-icon-xl: 1.5rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--button-icon-xxl: 1.6rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--button-icon-xxxl: 2rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--button-icon-xxxxl: 4rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */



/*BTN SIZES*/
--button-size-xs: 30px; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--button-size-sm: 35px; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--button-size-md: 40px; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--button-size-lg: 50px; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--button-size-xl: 60px; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--button-size-xxl: 70px; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--button-size-xxxl: 80px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */

/*SWITCH SIZES*/
--switch-thumb-ratio: 0.8;
--switch-mini-height: var(--button-size-xs); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--switch-sm-height: var(--button-size-sm);
--switch-md-height:   var(--button-size-sm);
--switch-lg-height:   var(--button-size-md); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */


/*WHERE DID THIS COME FROM WTF and why us is setting fucking focnnt and gaps nanually */
--switch-thumb-inset: 4px; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */


--switch-lg-width: calc(var(--button-size-md) * 2); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--switch-lg-thumb: calc(var(--button-size-md) - var(--switch-thumb-inset) * 2); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--switch-lg-icon: var(--button-icon-xl); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */


--switch-mini-width: calc(var(--button-size-xs) * 1.75); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--switch-mini-thumb: calc(var(--button-size-xs) - var(--switch-thumb-inset) * 2); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--switch-mini-icon: var(--button-icon-xs); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */


--switch-sm-width: calc(var(--button-size-sm) * 1.75);
--switch-sm-thumb: calc(var(--button-size-sm) - var(--switch-thumb-inset) * 2);
--switch-sm-icon: var(--button-icon-sm);





/* === GAP SCALE — flex/grid gap, row + column, app-wide === */
--gap-xxs:     0.4rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--gap-xs:      0.5rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--gap-sm:      0.6rem; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--gap-md:      0.8rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--gap-regular: 1rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--gap-lg:      1.25rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--gap-xl:      1.5rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--gap-xxl:     2rem; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--default-gap: var(--gap-regular);   /* alias — keeps existing references working */ /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */




/* === HEADING TOP-BOTTOM-MARGIN SCALE === */
--app-default-top-bottom-margin-xxxxs: 0.2rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--app-default-top-bottom-margin-xxxs: 0.4rem; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--app-default-top-bottom-margin-xxs: 0.5rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--app-default-top-bottom-margin-xs: .8rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--app-default-top-bottom-margin-sm: 1rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--app-default-top-bottom-margin-md: 1.3rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--app-default-top-bottom-margin-lg: 1.5rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--app-default-top-bottom-margin-xl: 2rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--app-default-top-bottom-margin-xxl: 2.5rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--app-default-top-bottom-margin-xxxl: 3rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--app-default-top-bottom-margin-xxxxl: 4rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--app-default-top-bottom-margin-xxxxxl: 6rem; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */



/*STROKE WEDIGHTS*/
--stroke-hairline: 0.5px; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--stroke-thin: 1px; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--stroke-thick: 2px; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--stroke-extra-thick: 2.5px; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */

/*FOCUS RINGS*/
--field-border-active: var(--stroke-thick); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--focus-outline-color: var(--orange); /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--focus-outline-width: var(--stroke-extra-thick); /*BUTTONS*/ /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--focus-ring-offset: 2px; /*BUTTONS*/ /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */




/*RADIUS SCALES*/
--app-default-radius-xs: 4px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--app-default-radius-sm: 8px; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--app-default-radius-md: 10px; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--app-default-radius-lg: 15px; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */

--default-focus-ring-radius: 4px;/*WHY AM I NEEDED*/ /* used: screenings, chrome, screenings-home, profile */
--default-left-right-padding: 1.25rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--lr: 80px;
--r: 10px; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */


--md-radius: 0; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--btn-radius: 10px; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--radius-pill: 999px; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--radius-circle: 50%; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */


--radius-letter-tile: 5px; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--radius-tooltip: 5px; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--radius-tooltip-large: 0.5rem; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--radius-square-letter: 6px; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--radius-input: 0.25rem; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */




/* === FIELD SYSTEM TOKENS === */
--field-height: var(--button-size-lg); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--field-radius: var(--app-default-radius-md); /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */


--field-padding-x: 1rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--field-padding: 0.875rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--field-multiline-min-height: 110px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--field-action-gap: 0.5rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--field-action-btn-padding-x: 1.25rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */





--btn-padding-x: 2rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--marker-size: 2rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */

--marker- font-size: var(--body-text-lg);
--pill-marker-gap: 0.75rem; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

--answer-button-height: var(--button-size-xxl); /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--marker-inset: calc((var(--answer-button-height) - var(--marker-size)) / 2); /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

--pill-padding: 0.625rem 1rem; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--pill-padding-right: 1.5rem; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--pill-rect-padding: 0.875rem 1rem; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--radius-rect-pill: 0.5rem; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--answer-gap: 0.75rem; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */


















/* ============================================================
CANONICAL CAROUSELLE-CARD SCALE
Each line: what it's typical of  |  OLD homepage class + raw value it replaces
Use the "WAS" notes to find-and-replace when wiping the homepage inline CSS
============================================================ */

/* ---------- WIDTHS ---------- */
--carouselle-card-width-small:  240px;   /* typical: small product image cards   | WAS .amazon-product / .amazon-product-standard  width: 240px */ /* used: learn-pages-homepage-legal */
--carouselle-card-width-medium: 320px;   /* typical: default product/screening/book card | WAS .miniscreencard, .threebyfive-carousel-card, .bookshelf-item, .amazon-product-with-evidence, .amazon-product-in-tile, .book-cover  width: 320px */ /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--carouselle-card-width-large:  400px;   /* typical: landscape feature cards      | WAS .uma-not-carousel-card, .landscape-plus-card  width/flex: 380-400px (and .card 400px) */ /* used: onboarding */
--carouselle-card-width-mobile: 310px;   /* typical: medium card on mobile, sits just under medium so next card peeks | WAS uma-disc card-width-mobile 310px (home used 320px) */ /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--carouselle-card-width-review: 300px;   /* typical: review & title cards         | WAS .review-card, .title-card  width: 300px (height 480px) */ /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

/* ---------- ASPECT RATIOS (sorted tallest → shortest) ---------- */
--carouselle-card-ratio-review:    3 / 5;     /* typical: review & title cards | WAS aspect-ratio: 3 / 5  (reviews .uma-review-card / .uma-rw-card) */ /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--carouselle-card-ratio-golden:    1 / 1.618; /* typical: golden-ratio product/VAT cards   | WAS aspect-ratio: 1 / var(--golden-ratio)  (uma-disc product card, .uma-vat-card) */ /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--carouselle-card-ratio-tall:      16 / 25;   /* typical: tall screening cards (~3:5)      | WAS aspect-ratio: 16 / 25  (.miniscreencard, .threebyfive-carousel-card) */ /* used: onboarding */
--carouselle-card-ratio-book:      1 / 1.5;   /* typical: book covers / bookshelf (2:3)    | WAS aspect-ratio: 1 / 1.5  (.book-cover, .book-buy) */ /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--carouselle-card-ratio-poker:     7 / 10;    /* typical: playing-card proportion (2.5x3.5) | WAS the "7:10" reference in .miniscreencard comment */
--carouselle-card-ratio-portrait:  3 / 4;     /* typical: portrait feature/preview cards   | WAS aspect-ratio: 3 / 4  (.trandiagnostic-card; home upgrade-preview slide) */ /* used: learn-pages-homepage-legal */
--carouselle-card-ratio-square:    1 / 1;     /* typical: avatars, square media tiles      | WAS aspect-ratio: 1 / 1  (.goldensectionpanel-tile, .spotlighted-product-img, .amazon-product, .amazon-product-in-tile, .chartjs-square) */ /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--carouselle-card-ratio-landscape: 4 / 3;     /* typical: landscape "what it is NOT" cards | WAS aspect-ratio: 4 / 3  (.uma-not-carousel-card) */ /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

/* === DISCOUNTS PAGE (new) === */
--product-tile-bg: var(--pure-white); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--transition-base: 0.3s; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--opacity-visible: 1; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--opacity-hidden: 0; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--earmark-size: 90px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--earmark-text-top: 17px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--earmark-text-right: 12px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--pill-row-padding-x: 1.25rem;
--uma-disc-card-img-padding: 3rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--uma-disc-card-img-padding-sm: 0; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--uma-disc-card-img-padding-md: 2rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--uma-disc-card-width:        var(--carouselle-card-width-medium); /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--uma-disc-card-width-mobile: var(--carouselle-card-width-mobile); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--uma-disc-card-height: calc(var(--uma-disc-card-width) * var(--golden-ratio));



--lozenge-border-color: var(--bright-blue);
--lozenge-selected-bg: var(--bright-blue); /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--lozenge-unselected-color: var(--bright-blue);
--circle-stroke-color: var(--bright-blue);

--circle-size: 32px;




/*WIDTHS AND HEIGHTS*/


--sidebar-width: 60px; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--fixed-header-height: 60px; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--subnav-row-height: 60px; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--link-line-height: 4px; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */



--max-body-content-width: 1280px; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */

--max-stack-width: calc(var(--max-body-content-width) / 2); /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

--max-body-wrapper-width: calc(var(--max-body-content-width) - var(--sidebar-width)); /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */



/*DEFAULT PADDING LEFT RIGHT*/
--inner-wrapper-margin-top-desktop: 2.5rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--inner-wrapper-margin-top-mobile: 1.5rem; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

--default-left-right-mob-body-padding: 2rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--default-left-right-desk-body-padding: 4rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */


--results-mirror-padding: calc(var(--default-left-right-desk-body-padding) + var(--sidebar-width)); /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--mirror-right-padding: calc(var(--default-left-right-desk-body-padding) + var(--sidebar-width)); /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */





/*GOLDEN RATIO*/

--golden-ratio: 1.618; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--golden-ratio-small: 0.382; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--golden-ratio-large: 0.618; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--golden-ratio-small-percentage: 38.2%; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--golden-ratio-large-percentage: 61.8%; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */


--golden-width-small: calc(var(--max-body-content-width) * var(--golden-ratio-small)); /*488.96px*/ /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--golden-width-large: calc(var(--max-body-content-width) * var(--golden-ratio-large)); /*791.04px*/ /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--max-content-width-golden-section-small: calc((var(--max-body-wrapper-width) - 2 * var(--default-left-right-desk-body-padding)) * var(--golden-ratio-small));/*417px*/ /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--max-content-width-golden-section-large: calc((var(--max-body-wrapper-width) - 2 * var(--default-left-right-desk-body-padding)) * var(--golden-ratio-large));/*675px*/ /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */













--back-next-button-diameter: 2.5rem; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--section-title-font-size: var(--heading-size-xxl);; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */

--section-pseudo-gap-adjustment: calc(var(--inner-wrapper-margin-top-desktop) + var(--back-next-button-diameter) + var(--section-title-font-size));

--lozenge-padding-x: 1.5rem; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--lozenge-padding-y: 1rem;
--lozenge-gap-x: 1rem; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--lozenge-gap-y: 1rem; /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */


--title-page-background-color: var(--bright-blue); /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--info-icon-color: var(--bright-blue); /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--circle-stroke-width: 2px;



--next-btn-bg: var(--orange);
--next-btn-text: var(--bright-white);




--condition-card-width: 460px;
--condition-card-aspect-ratio: calc(613 / 460);

--reviews-scrollbar-size: 8px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--reviews-quote-scrollbar-size: 6px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

--reviews-empty-padding-y: 3rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--default-card-left-right-padding: 2rem; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--default-card-bottom-padding: 2.5rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--review-widget-card-peek: 85%; /* used: screenings-home */
--review-widget-sort-min-width: 12rem;
--review-widget-sort-padding-right: 2.6rem;







--button-transition-duration: 0.3s;/*WHAT TEHJ FUCK*/ /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */

--button-transition-ease: ease; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
/*--font-size-base: 1rem;*/
--btn-padding-x-default: 1.5rem; /* used: screenings-home, onboarding */
/*--btn-radius-default: 8px;*/

/*
--form-label-emoji-size: 1.1rem;
--button-icon-md: 1.2rem;
--marker-tick-size: 1.1rem;
*/

--form-label-emoji-size: var(--button-icon-sm); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--marker-tick-size: var(--button-icon-sm);


--chrome-progress-bar-height: 0.5rem; /* used: screenings, onboarding */

/*
--form-label-size: 0.95rem;



--chrome-control-bar-margin-bottom: var(--app-default-top-top-margin-lg);
--chrome-progress-bar-segment-gap: 0.7rem;
--form-label-emoji-gap: 0.5rem;
--form-item-gap: 1.1rem;
--chrome-row-gap: 0.75rem;*/


--form-label-size: var(--body-text-sm); /*was 0.95 num,ped to 1*/ /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */

--chrome-control-bar-margin-top: var(--app-default-top-bottom-margin-lg); /* used: onboarding */

--chrome-progress-bar-segment-gap: var(--gap-md);    /* was 0.7rem → 0.8rem */ /* used: screenings */
--form-label-emoji-gap: var(--gap-xs);               /* 0.5rem exact */ /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--form-item-gap: var(--gap-regular);                 /* was 1.1rem → 1rem */ /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--chrome-row-gap: var(--gap-md);                      /* was 0.75rem → 0.8rem */

/*
--stroke-hairline: 0.5px;*/ /* used: screening-results-pages */







--canvas-toggle-size: 18px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-wcell-size: 96px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-note-size: 80px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-note-size-lg: 100px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-add-circle: 20px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-bullet-dot-size: 6px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-sheet-width: 1123px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-sheet-height: 794px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */


--canvas-sheet-padding: var(--app-default-top-bottom-margin-xxl) var(--app-default-top-bottom-margin-xxxl) var(--app-default-top-bottom-margin-xxl); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-sheet-shadow: 0 4px 22px rgba(var(--black-rgb), var(--opacity-very-low)); /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */


--canvas-dashed-border: var(--stroke-thin) dashed var(--dark-white); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */


--canvas-pt-xs: 10pt; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-pt-sm: 11pt; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--canvas-pt-md: 12pt; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-pt-lg: 16pt; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-pt-xl: 22pt; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-pt-xxl: 28pt; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--transition-fast: .2s; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--shake-distance: 10px; /* NEW TOKEN, security-shake, 2 Oct 2026: how far the PIN and code boxes move each way */ /* used: profile, auth */
--shake-duration: 0.5s; /* NEW TOKEN, security-shake, 2 Oct 2026: the whole shake, about 3 times side to side */ /* used: profile, auth */
--canvas-logo-top: 42px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-logo-right: 48px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-tray-width: 1100px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-wdrop-size: 458px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-card-pad: var(--app-default-top-bottom-margin-xxl) 30px var(--app-default-top-bottom-margin-xl); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--canvas-introtile-pad: 34px 38px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */


--bullet-text-size: var(--canvas-pt-sm); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--bullet-line-height: var(--default-line-height-large); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--bullet-gap: var(--gap-lg); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */



--feedback-panel-width: 400px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--feedback-panel-margin: 1.25rem; /* no exact token */ /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--z-feedback-tab: 10000005; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--z-feedback-panel: 10000007; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--uma-flyout-logo-size: var(--uma-lg); /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--uma-logo-flyout-margin-bot: 0.9rem; /* no exact token */ /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--uma-title-flyout-font-size: var(--app-default-top-bottom-margin-xxxl); /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--flyout-pseudo-gap-adjustment: calc(var(--uma-flyout-logo-size) + var(--uma-logo-flyout-margin-bot) + var(--uma-title-flyout-font-size)); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--flyout-padding-left-desktop: var(--app-default-top-bottom-margin-xxxl); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--flyout-padding-left-mobile: var(--app-default-top-bottom-margin-xl); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--flyout-padding-right: 1.25rem; /* no exact token */ /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--flyout-padding-bottom-desktop: var(--app-default-top-bottom-margin-xxxl); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--flyout-padding-bottom-mobile: var(--app-default-top-bottom-margin-xl); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--inverted-pill-dim-text: rgba(249,249,249,0.6); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */


  /*SOS PANEL AND CRISIS PANE (added 22 September 2026)*/
  --crisis-pane-control-height: var(--button-size-xl); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
  --crisis-pane-breath-max-width: 28.125rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
  --crisis-pane-breath-label-size: 1.25rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
  --crisis-pane-breath-cycle: 9s; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
  --crisis-pane-breath-stage-ratio: 1 / 1; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
  --crisis-pane-breath-height-small: 46%; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
  --crisis-pane-breath-height-large: 72%; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
  --crisis-pane-z: 2147483000; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
  --z-chrome: 1001; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

  /*COLOURED PANEL TEXT (added 22 September 2026)*/
  /* The white used for text in dark mode, reused on the red and blue panels
     so full strength white does not glare against the colour. */
  --panel-text-white: var(--mid-white); /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
  --panel-text-white-rgb: 242, 237, 234; /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
}





/* Device has a touch screen */
@media (pointer: coarse) {
/* Larger buttons, more white space */
}

/* Device lacks a mouse/fine pointer */
@media (hover: none) {
/* Remove hover-only interactions */
}

/* Tablet Landscape */
/* CHANGE THIS: */
@media (min-width: 901px) and (max-width: 1280px) and (orientation: landscape) {}






/* Accessibility: Skip to main content link styles
This link is visible only when it receives keyboard focus,
allowing users of screen readers and keyboards to skip navigation.
*/
.skip-link { /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
position: absolute;
top: -2.5rem;
left: 0;
background: #000;
color: #fff;
padding: .5rem;
z-index: 9999;
text-decoration: none;
}

.skip-link:focus { /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
top: 0;
}


html, body { /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
/*overflow-x: hidden !important; THIS SHOULD NOT BE THE DEFAULT*/
scrollbar-gutter: stable;
}


/*
li, ul {
padding: 0 !important;
margin: 0 !important;
}*/


/* Base styles for all devices (mobile first) 
html {
font-size: 85%; 
}
*/
/* For screens 768px and wider 
@media (min-width: 768px) {
html {
font-size: 90%; 
}
}
*/
/* For screens 1024px and wider 
@media (min-width: 1024px) {
html {
font-size: 95%; 
}
}
*/
/* For screens 1280px and wider
@media (min-width: 1280px) {
html {
font-size: 100%; 
}
}*/


/*BODY DEFAULT*/
body { /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
background-color: var(--mid-white);
font-family: 'Inter', sans-serif;
color: var(--mid-charcoal);
margin: 0; /*Centers the body and its content */
overscroll-behavior: none; 
scroll-behavior: smooth;
}


/*WHEN TEXT SELECTED*/

::selection { /* used: screenings, learn-pages-homepage-legal, auth */
background-color: var(--orange);
color: var(--white-text-default);
}

::-moz-selection { /* used: screenings, learn-pages-homepage-legal, auth */
background-color: var(--orange);
color: var(--white-text-default);
}





/* HYPERLINK DEFAULTS */
body a { /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
color: var(--orange);
transition: text-decoration-color 0.4s ease, color 0.4s ease, text-decoration 0.4s ease;
}


a { /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
color: var(--orange);
text-decoration: none;
transition: text-decoration-color 0.4s ease,  color 0.4s ease, text-decoration 0.4s ease;
}

a:hover { /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
text-decoration: underline;
text-underline-offset: 7px; 
color: var(--orange);

}



/* Merriweather Font Styles */

/* === BASE HEADING RULES (canonical) === */
h1 { font-size: var(--heading-size-xl);}  /*2.2*/ /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
h2 { font-size: var(--heading-size-lg);} /*2*/ /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
h3 { font-size: var(--heading-size-md);} /*1.7*/ /* used: screening-results-pages, screenings, learn-pages-homepage-legal */
h4 { font-size: var(--heading-size-sm);} /*1.2*/ /* used: screening-results-pages, learn-pages-homepage-legal */
h5 { font-size: var(--heading-size-xs);} /* 1.12*/ /* used: screening-results-pages, learn-pages-homepage-legal */


h1, h2, h3, h4, h5, h6 { line-height: var(--default-line-height-single); } /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
h1, h2, h3, h4, h5, h6 { text-wrap: pretty; } /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-light); } /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */

h1 { color: var(--navy);  letter-spacing: var(--heading-letter-spacing-tight); } /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */

.eyebrow {color: var(--light-charcoal); font-size: var(--body-text-xs); margin-bottom: var(--app-default-top-bottom-margin-xxs) } /* used: chrome, learn-pages-homepage-legal */



/* === BASE PARAGRAPH === */
p { font-size: var(--body-text-sm); } /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */

/* === BASE PARAGRAPH === */
p { line-height: var(--default-line-height-large); margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
p:last-of-type { margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */

/* tighter gap when a paragraph is immediately followed by a heading or a button */
p:has(+ h1), /* used: auth */
p:has(+ h2), /* used: auth */
p:has(+ h3),
p:has(+ h4),
p:has(+ h5),
p:has(+ h6),
p:has(+ .btn), /* used: chrome, screenings-home, onboarding, profile, auth */
p:has(+ button) { /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
margin-bottom: var(--app-default-top-bottom-margin-xl);
}
.app-section-para-text {font-size: var( --app-section-para-text);} /* used: learn-pages-homepage-legal */


/* === BUTTON ROW — auto width/height, flex row of buttons with a density gap === */
.button-row { display: inline-flex; align-items: center; flex-wrap: wrap; width: auto; height: auto; gap: var(--gap-regular); } /* used: learn-pages-homepage-legal */

/* === CONTROL ROW — full width; single (left/right) or multiple (between) === */

/* === SHARED INTRO COLUMN — eyebrow + heading + intro text before card/table/list content === */
@media (max-width: 600px) {
.intro-column { max-width: 100%; padding-right: 0; } /* used: screening-results-pages */
}



/* ---------- MUST BE USED FOR ALL BUTTONS ---------- */
.btn { display: inline-flex; align-items: center; padding: 0 1.5rem; border: none; border-radius: var(--md-radius); background: transparent; font-family: inherit; font-size: var(--body-text-sm);; font-weight: 400; line-height: var(--default-line-height-single); cursor: pointer; flex-shrink: 0; } /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */


/************* REMOVED ANNOYING *******************/
/*
.btn:focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); }*/

/*SHAPES*/
.btn-pill { border-radius: var(--radius-pill); padding-left: var(--btn-padding-x); padding-right: var(--btn-padding-x); justify-content: center; } /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
.btn-rectangle { border-radius: var(--btn-radius); padding-left: var(--btn-padding-x); padding-right: var(--btn-padding-x); } /* used: screening-results-pages, chrome, screenings-home, profile, auth */
.btn-square { border-radius: var(--btn-radius); aspect-ratio: 1 / 1; flex-shrink: 0; padding: 0; justify-content: center; } /* used: auth */
.btn-circular { border-radius: var(--radius-pill); aspect-ratio: 1 / 1; flex-shrink: 0; padding: 0; justify-content: center; } /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */



/*BTN sizes*/
.btn-xs { height: var(--button-size-xs); } /* used: screening-results-pages, chrome, onboarding, learn-pages-homepage-legal */
.btn-sm { height: var(--button-size-sm); } /* used: chrome, learn-pages-homepage-legal */
.btn-md { height: var(--button-size-md); } /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
.btn-lg { height: var(--button-size-lg); } /* used: screening-results-pages, chrome, screenings-home, profile, learn-pages-homepage-legal, auth */
.btn-xl { height: var(--button-size-xl); } /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
.btn-xxl { height: var(--button-size-xxl); } /* used: screenings, auth */
.btn-xxxl { height: var(--button-size-xxxl); } /* used: auth */



/*BTN icon sizes*/
.btn-xs i { font-size: var(--button-icon-xs); } /* used: chrome, onboarding */
.btn-sm i { font-size: var(--button-icon-sm); } /* used: chrome, learn-pages-homepage-legal */
.btn-md i { font-size: var(--button-icon-md); } /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
.btn-lg i { font-size: var(--button-icon-lg); } /* used: screening-results-pages, chrome, screenings-home, profile, learn-pages-homepage-legal, auth */
.btn-xl i { font-size: var(--button-icon-xl); } /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
.btn-xxl i { font-size: var(--button-icon-xxl); } /* used: screenings, auth */
.btn-xxxl i { font-size: var(--button-icon-xxxl); } /* used: auth */




/*PRIMARY*/
.btn-primary-orange { --btn-color: var(--orange); background: var(--orange); color: var(--bright-white); transition: background 0.3s; } /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
.btn-primary-orange:hover { background: var(--orange-dark); } /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
.btn-primary-navy { --btn-color: var(--navy); background: var(--navy); color: var(--bright-white); transition: background 0.3s; } /* used: screening-results-pages, chrome, screenings-home, onboarding, auth */
.btn-primary-navy:hover { background: var(--navy-dark); } /* used: screening-results-pages, chrome, screenings-home, onboarding, auth */
.btn-secondary-navy-on-white { background: transparent; color: var(--navy); border: var(--stroke-hairline) solid var(--navy); transition: background 0.3s, border-color 0.3s, color 0.3s; } /* used: chrome, screenings-home, onboarding, learn-pages-homepage-legal, auth */
.btn-secondary-navy-on-white:hover { background: var(--hover-overlay-dark); border-color: var(--navy-dark); color: var(--navy-dark); } /* used: chrome, screenings-home, onboarding, learn-pages-homepage-legal, auth */
.btn-primary-teal { --btn-color: var(--bright-teal); background: var(--bright-teal); color: var(--bright-white); transition: background 0.3s; } /* used: learn-pages-homepage-legal */
.btn-primary-teal:hover { background: var(--dark-teal); } /* used: learn-pages-homepage-legal */

/*SECONDARY WHITE*/
.btn-secondary-gray-on-white { background: transparent; color: var(--light-charcoal); border: var(--stroke-hairline) solid var(--light-charcoal); transition: background 0.3s, border-color 0.3s, color 0.3s; } /* used: screenings, chrome, screenings-home, onboarding, profile */
.btn-secondary-gray-on-white:hover { background: var(--hover-overlay-light); color: var(--mid-charcoal); border-color: var(--mid-charcoal); } /* used: screenings, chrome, screenings-home, onboarding, profile */


/*SECONDARY DARK*/
.btn-primary-white-on-dark { background: var(--bright-white); color: var(--navy); transition: background 0.3s, color 0.3s; } /* used: chrome, learn-pages-homepage-legal */
.btn-primary-white-on-dark:hover { background: var(--bright-white); color: var(--navy-dark); } /* used: chrome, learn-pages-homepage-legal */


.btn-secondary-white-on-dark { background: transparent; color: var(--bright-white); border: var(--stroke-hairline) solid var(--bright-white); transition: background 0.3s; } /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */

/*this is the defaul that is used by the controls turning the button white and te icon the background colour*/
.btn-secondary-white-on-dark:hover { mix-blend-mode: normal; color: var(--flood-color); } /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */

/*this sould be used on te cop btn on te dscount page, the carouselles on the ntervetniosn pages, and te products casrouselles on the helaht interventons page*/
/*.btn-secondary-white-on-dark-text-btn:hover {
color: var(--bright-white);
background-color: rgba(var(--bright-white-rgb), var(--opacity-low));
}*/

.btn-secondary-white-on-dark-text-btn:hover {
color: var(--bright-white);
background-color: rgba(249, 249, 249, 0.2);
}


.btn-secondary-red-on-dark { background: transparent; color: var(--bright-white); border: var(--stroke-hairline) solid var(--bright-white); transition: background 0.3s; } /* used: screenings-home, profile */


.btn-secondary-orange-on-dark,
.btn-secondary-navy-on-dark,
.btn-secondary-red-on-dark, /* used: screenings-home, profile */
.btn-secondary-teal-on-dark,
.btn-secondary-green-on-dark {
background: transparent;
color: var(--bright-white);
border: var(--stroke-hairline) solid var(--bright-white);
transition: background 0.3s;
}


/*DISABLED*/
.btn-disabled-on-white:disabled { background: var(--dark-white); color: var(--light-charcoal); border-color: transparent; cursor: not-allowed; pointer-events: none; } /* used: screenings, onboarding, learn-pages-homepage-legal, auth */
/*.btn-disabled-on-dark:disabled { background: rgba(var(--bright-white-rgb), var(--opacity-low)); color: rgba(var(--bright-white-rgb), var(--opacity-moderate)); border-color: transparent; cursor: not-allowed; pointer-events: none; }
*/
.btn-disabled-on-dark:disabled { background: rgba(249, 249, 249, 0.2); color: rgba(249, 249, 249, 0.5); border-color: transparent; cursor: not-allowed; pointer-events: none; } /* used: onboarding, auth */

/* ============================================================
CANONICAL FIELD SYSTEM — single source of truth.
Tokens (in :root) + .field + .field-multiline + .field-action.
Every input across the app uses this. No bespoke fields.

Parts:   .field (single-line) · .field-multiline (textarea) ·
    .field-action (composite: input + affixed square end-block)
Sizes:   default 50px · .field-lg 60px · .field-action--digits 70px
States:  :focus (orange) · .has-error (red ring) · :disabled (grey)
Affix:   .field-action-button--return (orange action) ·
    --danger (red error, clears) · --valid (green tick, static)
Shape:   .field-action-button--square (field-height, 1:1, sharp-left/round-right)
============================================================ */
/* --- BASE FIELD (single-line) --- */
.field { width: 100%; height: var(--field-height); font-family: inherit; font-size: var(--font-size-base); color: var(--mid-charcoal); background: var(--bright-white); border: var(--stroke-hairline) solid rgba(var(--black-rgb), var(--opacity-low)); border-radius: var(--field-radius); padding: 0 var(--field-padding-x); transition: border-color 0.2s ease, background 0.2s ease; box-sizing: border-box; } /* used: chrome, screenings-home, onboarding, learn-pages-homepage-legal, auth */


/**************FOCUS RINGS FOR ALL INPUT FIELDS is 2px*/
.field:focus-visible:where(:not(.uma-input-pointer *)) { outline: none; border-color: var(--orange); border-width: var(--field-border-active); } /* used: chrome, screenings-home, onboarding, learn-pages-homepage-legal, auth */

.field.is-error, .field.has-error { border-color: var(--error); border-width: var(--field-border-active); /*box-shadow: 0 0 0 var(--field-border-active) var(--error);*/ } /* used: chrome, screenings-home, onboarding, profile, auth */

.field.is-error:focus-visible:where(:not(.uma-input-pointer *)), .field.has-error:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--error); border-width: var(--field-border-active); } /* used: chrome, screenings-home, onboarding, profile, auth */

.field:disabled { background: var(--dark-white); color: var(--light-charcoal); cursor: not-allowed; } /* used: chrome, screenings-home, onboarding, learn-pages-homepage-legal, auth */
.field::placeholder { color: var(--light-charcoal); } /* used: chrome, screenings-home, onboarding, learn-pages-homepage-legal, auth */




/* --- SIZE MODIFIERS (mirror button-size scale) --- */


/* --- MULTILINE (textarea) --- */
.field-multiline { height: auto; min-height: var(--field-multiline-min-height); padding: var(--field-padding); resize: vertical; line-height: var(--default-line-height-large, 1.5); } /* used: chrome, screenings-home, learn-pages-homepage-legal, auth */
/* --- AFFIXED END-BLOCK COMPOSITE --- */


.field-action { position: relative; display: flex; align-items: stretch; width: 100%; height: var(--field-height); background: var(--bright-white); border: var(--stroke-hairline) solid rgba(var(--black-rgb), var(--opacity-low)); border-radius: var(--field-radius); overflow: hidden; transition: border-color 0.2s ease; } /* used: chrome, screenings-home, onboarding, profile, auth */


/*FIELD FOCUS RINGS*/
.field-action.has-input, .field-action:focus-within:where(:not(.uma-input-pointer *)) { border-color: var(--orange); border-width: var(--field-border-active);  } /* used: chrome, screenings-home, onboarding, profile, auth */
.field-action.is-return.has-input, .field-action.is-return:focus-within:where(:not(.uma-input-pointer *)) { border-color: var(--orange); border-width: var(--field-border-active); } /* used: chrome, screenings-home, onboarding, profile */

.field-action.is-valid { border-color: rgba(var(--black-rgb), var(--opacity-low)); border-width: var(--stroke-hairline); } /* used: chrome, screenings-home, onboarding, profile */


/*
.field-action.has-error, .field-action.is-invalid { border-color: var(--error); border-width: var(--field-border-active); box-shadow: 0 0 0 var(--field-border-active) var(--error); }*/

.field-action--validate { height: var(--button-size-xl); } /* used: chrome, profile */



/*GLOBAL LEFT ALIGN*/
.field-action-input { text-align: left !important; flex: 1; min-width: 0; padding: 0 var(--field-padding-x); border: none; background: transparent; font-family: inherit; font-size: var(--font-size-base); color: var(--mid-charcoal); } /* used: chrome, screenings-home, onboarding, profile, auth */
.field-action-input::placeholder { color: var(--light-charcoal); } /* used: chrome, screenings-home, onboarding, profile, auth */

/* --- ERROR MESSAGE (brief, no full stop) LEFT ALIIGN --- */
.field-error-message { text-align: left !important; font-size: var(--body-text-xs); color: var(--error); margin-top: var(--app-default-top-bottom-margin-xxxs); } /* used: onboarding, auth */




.field-action-button { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--field-action-gap); background: transparent; border: none; border-left: var(--stroke-hairline) solid rgba(var(--black-rgb), var(--opacity-low)); color: var(--navy); padding: 0 var(--field-action-btn-padding-x); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); font-family: inherit; margin: 0; border-radius: 0; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* used: chrome, screenings-home, onboarding, profile, auth */
/*
.field-action.has-input .field-action-button, .field-action:focus-within .field-action-button { border-left-color: var(--navy); }


.field-action.has-input .field-action-button { background: var(--navy); color: var(--bright-white); border-left-color: var(--navy); }*/
.field-action-button:hover { background: var(--navy); color: var(--bright-white); border-left-color: var(--navy); } /* used: chrome, screenings-home, onboarding, profile, auth */
.field-action-button:disabled { background: var(--dark-white); border-color: var(--dark-white); color: var(--light-charcoal); cursor: not-allowed; } /* used: chrome, screenings-home, onboarding, profile, auth */

.field-action-button--square { height: 100%; aspect-ratio: 1 / 1; padding: 0; } /* used: onboarding, auth */
.field-action-button--return, .field-action.has-input .field-action-button--return { background: var(--orange); color: var(--bright-white); border-left-color: var(--orange); } /* used: chrome, screenings-home, onboarding, profile, auth */
.field-action-button--return:hover { background: var(--orange-dark); border-left-color: var(--orange-dark); } /* used: auth */

.field-action-button--danger, .field-action .field-action-button.is-invalid, .field-action.has-input .field-action-button--danger { background: var(--error); color: var(--bright-white); border-left-color: var(--error); } /* used: chrome, screenings-home, onboarding, profile, auth */

.field-action-button--danger:hover, .field-action .field-action-button.is-invalid:hover { background: var(--red-dark); border-left-color: var(--red-dark); } /* used: chrome, screenings-home, onboarding, profile, auth */
.field-action-button--valid, .field-action .field-action-button.is-valid, .field-action.has-input .field-action-button--valid { background: var(--success); color: var(--bright-white); border-left-color: var(--success); } /* used: chrome, screenings-home, onboarding, profile, auth */
.field-action .field-action-button.is-valid { cursor: default; pointer-events: none; } /* used: chrome, screenings-home, onboarding, profile */
.field-action-button .ph-check { font-size: var(--font-size-base); } /* used: chrome, screenings-home, onboarding, profile, auth */


.field-action-button i { font-size: var(--button-icon-md); } /* used: chrome, screenings-home, onboarding, profile, auth */
.field-action-button--return i   { font-size: var(--button-icon-md); } /* used: auth */
.field-action-button--valid i    { font-size: var(--button-icon-xxl); } /* used: auth */
.field-action-button--danger i   { font-size: var(--button-icon-xxxl); } /* used: onboarding, auth */









.letter-marker { width: var(--marker-size); height: var(--marker-size); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-circle); border: var(--stroke-hairline) solid var(--bright-white); background: transparent; color: var(--bright-white); text-transform: uppercase; font-weight: 400; font-size: var(--marker-font-size); line-height: var(--default-line-height-single); flex-shrink: 0; } /* used: screenings, onboarding, profile */
.letter-marker-square { border-radius: var(--radius-square-letter); } /* used: screenings, onboarding, profile */
.letter-marker.is-selected { background: var(--navy); color: var(--bright-white); border-color: var(--navy); } /* used: screenings, onboarding, profile */
.letter-marker .marker-tick { display: none;  font-size: var(--body-text-lg); } /* used: screenings, onboarding, profile */
.letter-marker.is-selected .marker-letter { display: none; } /* used: screenings, onboarding, profile */
.letter-marker.is-selected .marker-tick { display: inline-block; } /* used: screenings, onboarding, profile */

/*
.answer-pill { display: inline-flex; padding: var(--pill-padding); padding-right: var(--pill-padding-right); border-radius: var(--radius-pill); border: var(--stroke-hairline) solid rgba(var(--bright-white-rgb), var(--opacity-low)); background: rgba(var(--bright-white-rgb), var(--opacity-very-low)); color: var(--bright-white); transition: background 0.3s, border-color 0.3s, color 0.3s; }
*/
.answer-pill { display: inline-flex; padding: var(--pill-padding); padding-right: var(--pill-padding-right); border-radius: var(--radius-pill); border: var(--stroke-hairline) solid rgba(249, 249, 249, 0.2); background: rgba(249, 249, 249, 0.05); color: var(--bright-white); transition: background 0.3s, border-color 0.3s, color 0.3s; } /* used: onboarding */

/*
.answer-pill:hover { background: transparent; border-color: rgba(var(--bright-white-rgb), var(--opacity-moderate)); }
*/
.answer-pill:hover { background: transparent; border-color: rgba(249, 249, 249, 0.5); } /* used: onboarding */

.answer-pill .letter-marker { margin-right: var(--pill-marker-gap); } /* used: onboarding, profile */
.answer-pill.is-selected { background: var(--bright-white); border-color: var(--bright-white); color: var(--navy); } /* used: onboarding, profile */
.answer-pill.is-selected:hover { background: var(--bright-white); border-color: var(--bright-white); } /* used: onboarding, profile */
.answer-rect-list { display: flex; flex-direction: column; gap: var(--answer-gap); width: 100%; max-width: var(--golden-width-small); } /* used: screenings, onboarding */
.screening-page-health .answer-rect-list { display: flex; flex-direction: column; gap: var(--answer-gap); width: 100%; max-width: 360px; } /* used: screenings, onboarding */
.answer-pill-rect { width: 100%; justify-content: flex-start; text-align: left; padding: var(--pill-rect-padding); border-radius: var(--radius-rect-pill); } /* used: screenings, onboarding */
.answer-pill-rect .letter-marker { border-radius: var(--radius-square-letter); } /* used: screenings, onboarding, profile */
.answer-tile { position: relative; aspect-ratio: 1 / 1; width: 100%; display: flex; justify-content: center; text-align: center; padding: 1rem; border-radius: var(--radius-rect-pill); border: var(--stroke-hairline) solid rgba(var(--bright-white-rgb), var(--opacity-low)); background: rgba(var(--bright-white-rgb), var(--opacity-very-low)); color: var(--bright-white); transition: background 0.3s, border-color 0.3s, color 0.3s; } /* used: onboarding */

/*
.answer-tile:hover { background: transparent; border-color: rgba(var(--bright-white-rgb), var(--opacity-moderate)); }
*/
.answer-tile:hover { background: transparent; border-color: rgba(249, 249, 249, 0.5); } /* used: onboarding */

.answer-tile .letter-marker { position: absolute; top: var(--marker-inset); left: var(--marker-inset); border-radius: var(--radius-square-letter); } /* used: onboarding, profile */
.answer-tile.is-selected { background: var(--bright-white); border-color: var(--bright-white); color: var(--navy); } /* used: onboarding, profile */
.answer-tile.is-selected:hover { background: var(--bright-white); border-color: var(--bright-white); } /* used: onboarding, profile */

/*
.btn-inverted { background: rgba(var(--bright-white-rgb), var(--opacity-moderate)); color: var(--bright-white); border: var(--stroke-hairline) solid rgba(var(--bright-white-rgb), var(--opacity-moderate)); transition: background 0.3s, border-color 0.3s, color 0.3s; }
*/
.answer-pill-on-white { display: inline-flex; padding: var(--pill-padding); padding-right: var(--pill-padding-right); border-radius: var(--radius-pill); border: var(--stroke-hairline) solid var(--t-answer-outline, var(--accent)); background: transparent; color: var(--t-answer-text, var(--accent)); transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base); } /* used: screenings */
.answer-pill-on-white .letter-marker { margin-right: var(--pill-marker-gap); border-color: var(--t-answer-outline, var(--accent)); color: var(--t-answer-text, var(--accent)); } /* used: screenings, onboarding, profile */
.answer-pill-on-white:hover { background: var(--t-answer-hover, var(--hover-overlay-light)); } /* used: screenings */
.answer-pill-on-white.is-selected { background: var(--t-answer-selected-fill, var(--accent)); border-color: var(--t-answer-selected-fill, var(--accent)); color: var(--t-answer-selected-text, var(--bright-white)); } /* used: screenings, onboarding, profile */
.answer-pill-on-white.is-selected .letter-marker { background: var(--t-answer-selected-marker, var(--bright-white)); border-color: var(--t-answer-selected-marker, var(--bright-white)); color: var(--accent); } /* used: screenings, onboarding, profile */
.answer-pill-on-white.is-selected .marker-letter { display: none; } /* used: screenings, onboarding, profile */
.answer-pill-on-white.is-selected .marker-tick { display: inline-block; color: var(--t-answer-selected-tick, inherit); } /* used: screenings, onboarding, profile */
.answer-pill-on-white.answer-negative { background: var(--t-answer-hover, var(--hover-overlay-light)); } /* used: screenings */
.answer-pill-on-white.answer-negative:hover { background: var(--t-answer-hover, var(--hover-overlay-light-strong)); } /* used: screenings */
.answer-pill-on-white.answer-negative.is-selected { background: var(--t-answer-selected-fill, var(--accent)); } /* used: screenings, onboarding, profile */
.answer-pill-on-white.answer-pill-rect { width: 100%; justify-content: flex-start; text-align: left; padding: var(--pill-rect-padding); border-radius: var(--radius-rect-pill); } /* used: screenings, onboarding */
.answer-pill-on-white.answer-pill-rect .letter-marker { border-radius: var(--radius-square-letter); } /* used: screenings, onboarding, profile */
.answer-pill-rect-xxl { min-height: var(--answer-button-height); padding-top: var(--marker-inset); padding-bottom: var(--marker-inset); align-items: center; } /* used: screenings */
.answer-pill-rect-xxl .letter-marker { font-size: var(--marker-font-size); } /* used: screenings, onboarding, profile */
.answer-pill-rect-xxl .marker-tick { font-size: var(--marker-font-size); } /* used: screenings, onboarding, profile */
.answer-pill-on-white.answer-tile-shape .letter-marker { position: absolute; top: var(--marker-inset); left: var(--marker-inset); margin-right: 0; border-radius: var(--radius-square-letter); } /* used: onboarding, profile */
.answer-tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--answer-gap); width: 100%; max-width: 360px; } /* used: onboarding */
.answer-accent-orange { --accent: var(--orange); }
.answer-accent-navy { --accent: var(--navy); }
.answer-accent-bright-blue { --accent: var(--bright-blue); } /* used: screenings */
.answer-accent-dark-teal { --accent: var(--dark-teal); } /* used: screenings */
.answer-accent-bright-teal { --accent: var(--bright-teal); }
.answer-accent-moss-green { --accent: var(--moss-green); } /* used: screenings */
.answer-accent-bright-green { --accent: var(--bright-green); } /* used: screenings */
.answer-accent-dark-sage-green { --accent: var(--dark-sage-green); } /* used: screenings */
.answer-accent-light-sage-green { --accent: var(--light-sage-green); } /* used: screenings */

/*
:focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: 0; }*/

.screening-theme-navy { --lozenge-border-color: var(--navy); --lozenge-selected-bg: var(--navy); --lozenge-unselected-color: var(--navy); --circle-stroke-color: var(--navy); }
.screening-page-cptsd .screening-theme-navy { --section-color: var(--navy); --lozenge-border-color: var(--navy); --lozenge-selected-bg: var(--navy); --lozenge-unselected-color: var(--navy); --circle-stroke-color: var(--navy); }
.screening-theme-bright-blue { --lozenge-border-color: var(--bright-blue);--lozenge-selected-bg: var(--bright-blue);--lozenge-unselected-color: var(--bright-blue);--circle-stroke-color: var(--bright-blue); } /* used: screenings */
.screening-page-cptsd .screening-theme-bright-blue { --section-color: var(--bright-blue);--lozenge-border-color: var(--bright-blue);--lozenge-selected-bg: var(--bright-blue);--lozenge-unselected-color: var(--bright-blue);--circle-stroke-color: var(--bright-blue); } /* used: screenings */
.screening-theme-dark-teal { --lozenge-border-color: var(--dark-teal); --lozenge-selected-bg: var(--dark-teal); --lozenge-unselected-color: var(--dark-teal); --circle-stroke-color: var(--dark-teal); } /* used: screenings */
.screening-page-cptsd .screening-theme-dark-teal { --section-color: var(--dark-teal); --lozenge-border-color: var(--dark-teal); --lozenge-selected-bg: var(--dark-teal); --lozenge-unselected-color: var(--dark-teal); --circle-stroke-color: var(--dark-teal); } /* used: screenings */
.screening-theme-bright-teal { --section-color: var(--bright-teal);--lozenge-border-color: var(--bright-teal);--lozenge-selected-bg: var(--bright-teal);--lozenge-unselected-color: var(--bright-teal);--circle-stroke-color: var(--bright-teal); }
.screening-theme-moss-green { --lozenge-border-color: var(--moss-green); --lozenge-selected-bg: var(--moss-green); --lozenge-unselected-color: var(--moss-green); --circle-stroke-color: var(--moss-green); } /* used: screenings */
.screening-page-cptsd .screening-theme-moss-green { --section-color: var(--moss-green); --lozenge-border-color: var(--moss-green); --lozenge-selected-bg: var(--moss-green); --lozenge-unselected-color: var(--moss-green); --circle-stroke-color: var(--moss-green); } /* used: screenings */
.screening-theme-bright-green { --lozenge-border-color: var(--bright-green);--lozenge-selected-bg: var(--bright-green);--lozenge-unselected-color: var(--bright-green);--circle-stroke-color: var(--bright-green); } /* used: screenings */
.screening-page-adhd .screening-theme-bright-green { --lozenge-border-color: var(--bright-green); --lozenge-selected-bg: var(--bright-green); --lozenge-unselected-color: var(--bright-green); --circle-stroke-color: var(--bright-green); } /* used: screenings */
.screening-page-cptsd .screening-theme-bright-green { --section-color: var(--bright-green);--lozenge-border-color: var(--bright-green);--lozenge-selected-bg: var(--bright-green);--lozenge-unselected-color: var(--bright-green);--circle-stroke-color: var(--bright-green); } /* used: screenings */
.screening-theme-dark-sage-green { --lozenge-border-color: var(--dark-sage-green); --lozenge-selected-bg: var(--dark-sage-green); --lozenge-unselected-color: var(--dark-sage-green); --circle-stroke-color: var(--dark-sage-green); } /* used: screenings */
.screening-page-cptsd .screening-theme-dark-sage-green { --section-color: var(--dark-sage-green); --lozenge-border-color: var(--dark-sage-green); --lozenge-selected-bg: var(--dark-sage-green); --lozenge-unselected-color: var(--dark-sage-green); --circle-stroke-color: var(--dark-sage-green); } /* used: screenings */

.screening-screen { display: none; width: 100%; position: relative; z-index: 1; overflow: hidden; padding-left: var(--gap-xs); } /* used: screenings */
#dynScreens { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* used: screenings */
.screening-screen.screening-active { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* used: screenings */
body[class*="screening-flood-"] .screening-screen.screening-active { color: var(--bright-white); }
.page-progress-bar-question { height: 100%; position: relative; } /* used: screenings, onboarding */
.page-progress-bar-foreground { background-color: var(--yellow); border-radius: var(--radius-pill); height: 100%; width: 0%; z-index: 1001; position: absolute; top: 0; left: 0; transition: width .4s ease; } /* used: screenings, onboarding */
.page-progress-bar-background { background-color: var(--dark-white); border-radius: var(--radius-pill); width: 100%; height: 100%; z-index: 1000; position: absolute; top: 0; left: 0; } /* used: screenings, onboarding */
.page-progress-bar-background-title { background-color: rgba(var(--white-rgb), var(--opacity-low)) !important; } /* used: screenings, onboarding */
.page-progress-bar-foreground-title { background-color: rgba(var(--white-rgb), var(--opacity-very-high)) !important; } /* used: screenings, onboarding */
.page-progress-bar { display: grid; grid-auto-rows: auto; align-items: stretch; height: .5rem; column-gap: .7rem; width: 100%; position: relative; z-index: 5; } /* used: screenings, onboarding */
.screening-page-health .page-progress-bar { position: static !important; width: 100% !important; max-width: none !important; left: auto !important; transform: none !important; padding: 0 !important; top: auto !important; margin: 0 !important; z-index: 5; } /* used: screenings, onboarding */


/*PADDING OW ON BAR*/ 
.page-control-bar { padding-top: 1rem;  width: 100%; margin-bottom: var(--app-default-top-top-margin-lg); display: none; justify-content: space-between; align-items: center; position: relative; z-index: 4; } /* used: screenings, onboarding */


.page-control-bar.screening-show { display: flex; } /* used: screenings, onboarding */
.screening-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* used: screenings */
.screening-nav-icon-button.screening-gone { display: none; } /* used: screenings, onboarding */
.voice-wrap.screening-show { display: block; } /* used: onboarding */


.uma-chrome-all-content-wrapper { width: calc(100% - var(--sidebar-width)); margin-left: var(--sidebar-width); border-top: var(--stroke-hairline) solid transparent; height: auto; display: flex; flex-direction: column; box-sizing: border-box; } /* used: chrome, screenings-home, profile */
.uma-chrome-inner-content-wrapper { width: 100%; max-width: var(--max-body-wrapper-width); padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); margin-top: var(--inner-wrapper-margin-top-desktop); } /* used: chrome, screenings-home, profile */


/*NEW*/
.uma-chrome-all-content-wrapper.is-blurred { filter: blur(20px); pointer-events: none; user-select: none; transition: filter 0.3s ease; } /* used: chrome, screenings-home, profile */



.screening-page-health .uma-chrome-all-content-wrapper { width: calc(100% - var(--sidebar-width)); margin-left: var(--sidebar-width);  border-top: var(--stroke-hairline) solid transparent; height: auto; display: flex; flex-direction: column; box-sizing: border-box; position: relative; z-index: 1; } /* used: chrome, screenings-home, profile */
body.screening-fixed-height .uma-chrome-all-content-wrapper { height: calc(100% - var(--fixed-header-height)); } /* used: chrome, screenings-home, profile */
body.screening-fixed-height .uma-chrome-inner-content-wrapper { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* used: chrome, screenings-home, profile */
.screening-screens-area { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* used: screenings */



.screening-page-cptsd .uma-chrome-inner-content-wrapper { width: 100%; max-width: var(--max-body-wrapper-width); padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); margin-top: var(--inner-wrapper-margin-top-desktop); display: flex; flex-direction: column; } /* used: chrome, screenings-home, profile */
.screening-page-rsd .uma-chrome-inner-content-wrapper { width: 100%; max-width: var(--max-body-wrapper-width); padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); margin-top: var(--inner-wrapper-margin-top-desktop); display: flex; flex-direction: column; } /* used: chrome, screenings-home, profile */
body.screening-flood-navy { --flood-color: var(--navy); }
body.screening-flood-bright-blue { --flood-color: var(--bright-blue); } /* used: screenings */
body.screening-flood-dark-teal { --flood-color: var(--dark-teal); } /* used: screenings */
body.screening-flood-bright-teal { --flood-color: var(--bright-teal); }
body.screening-flood-moss-green { --flood-color: var(--moss-green); } /* used: screenings */
body.screening-flood-bright-green { --flood-color: var(--bright-green); } /* used: screenings */
body.screening-flood-dark-sage-green { --flood-color: var(--dark-sage-green); } /* used: screenings */

.screening-title-page.screening-active { display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; overflow-x: hidden; } /* used: screenings */
.screening-title-cta { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: var(--app-default-top-bottom-margin-lg); } /* used: screenings */

.screening-title-page > .pseudo-gap-section { flex-shrink: 0; height: calc(38.2vh - var(--fixed-header-height) - var(--inner-wrapper-margin-top-desktop) - var(--back-next-button-diameter) - var(--section-title-font-size)); } /* used: screenings, screenings-home */
.screening-title-inner { max-width: var(--max-content-width-golden-section-large); padding-right: var(--mirror-right-padding); } /* used: screenings */
.screening-title-page h1 { font-size: var(--heading-size-xxl); font-weight: var(--font-weight-normal); color: var(--bright-white); margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: screenings */
.screening-title-page .screening-intro-para-text { font-size: var(--app-section-para-text); } /* used: screenings */
.screening-tmeta { font-size: var(--body-text-xs); color: rgba(var(--bright-white-rgb), var(--opacity-high)); display: flex; flex-direction: row; align-items: center; gap: var(--default-gap); flex-wrap: wrap; line-height: var(--default-line-height-single); margin-bottom: var(--app-default-top-bottom-margin-xxl); } /* used: screenings, onboarding */
.screening-tmeta > span { display: inline-flex; align-items: center; gap: var(--gap-xxs); line-height: var(--default-line-height-single); } /* used: screenings, onboarding */
.screening-tmeta > span i { display: inline-flex; align-items: center; font-size: var(--button-icon-xxl); line-height: var(--default-line-height-single); } /* used: screenings, onboarding */
.screening-title-actions { display: flex; flex-direction: row; align-items: center; gap: var(--default-gap); flex-wrap: wrap; } /* used: screenings */
.screening-qPage { position: relative; } /* used: screenings */
.screening-q-content-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; } /* used: screenings */
.screening-qHeader { margin-bottom: 0; flex-shrink: 0; padding-top: 0; } /* used: screenings */
.screening-question-count-heading-h3 { font-size: var(--heading-size-sm); font-weight: var(--font-weight-normal); color: var(--light-charcoal); margin-bottom: var(--app-default-top-top-margin-xxxl); margin-bottom: var(--app-default-top-bottom-margin-xs); line-height: var(--default-line-height-single); } /* used: screenings, onboarding */

/*PADDG REMOVED FROM CETRE @*/
.page-control-bar-section-heading-h2 { font-size: var(--heading-size-xs); font-weight: var(--font-weight-normal); color: var(--light-charcoal); text-align: center; flex: 1; /*padding: 0 1rem;*/ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; } /* used: screenings, onboarding */

.page-control-bar-section-heading-h2.screening-white-mode { color: rgba(var(--bright-white-rgb), var(--opacity-very-high)); } /* used: screenings, onboarding */


.screening-question-text-wrap { flex-shrink: 0; margin-bottom: 0; } /* used: screenings */
.screening-question-text { opacity: 1; } /* used: screenings */
.screening-options-wrapper { margin-top: var(--app-default-top-bottom-margin-lg); margin-bottom: var(--app-default-top-top-margin-xxl); } /* used: screenings */
.screening-confirm-button-wrapper.screening-visible { display: flex; } /* used: screenings */
.screening-confirm-selection-button.screening-resultsPage { padding: 0; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; } /* used: screenings */
.screening-resultsPage .screening-reg-split { display: flex; flex: 1; flex-direction: row; width: 100%; min-height: 0; gap: 0; align-items: center; } /* used: screenings */
.screening-resultsPage .screening-reg-content { flex: 0 0 var(--golden-ratio-large-percentage); width: var(--golden-ratio-large-percentage); height: 100%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; padding-right: var(--results-mirror-padding); } /* used: screenings */
.screening-resultsPage .screening-reg-visual { flex: 0 0 var(--golden-ratio-small-percentage); width: var(--golden-ratio-small-percentage); max-width: none; display: flex; align-items: center; justify-content: flex-start; } /* used: screenings */
.screening-regulationPage { justify-content: center; align-items: stretch; padding: 0; flex: 1; } /* used: screenings */
.screening-regulationPage .screening-reg-split { display: flex; flex: 1; flex-direction: row; width: 100%; min-height: 0; gap: 0; align-items: center; } /* used: screenings */
.screening-regulationPage .screening-reg-content { flex: 0 0 var(--golden-ratio-large-percentage); width: var(--golden-ratio-large-percentage); height: 100%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; padding-right: var(--results-mirror-padding); overflow-y: auto; overflow-x: hidden; } /* used: screenings */
.screening-page-rsd .screening-regulationPage .screening-reg-content { justify-content: flex-start; overflow-y: auto; overflow-x: hidden; min-height: 0; } /* used: screenings */
.screening-regulationPage .screening-reg-visual { flex: 0 0 var(--golden-ratio-small-percentage); width: var(--golden-ratio-small-percentage); max-width: none; display: flex; align-items: center; justify-content: flex-start; } /* used: screenings */
.scrollable-left-pane { padding-top: 5rem; padding-bottom: 4rem; } /* used: screenings */
.pseudo-bottom-margin { height: 2rem; width: 100%; flex-shrink: 0; } /* used: screenings */
.screening-donutWrap { position: relative; width: 80%; aspect-ratio: 1 / 1; height: auto; flex-shrink: 0; } /* used: screenings */
.screening-donutWrap canvas { display: block; width: 100%; height: 100%; } /* used: screenings */
.donut-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 15%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } /* used: screenings */
.donut-percentage { width: 100%; text-align: center; margin: 0 0 0.5rem; font-size: var(--heading-size-xxl);; font-weight: 400; line-height: var(--default-line-height-single); color: var(--bright-white); } /* used: screenings */
.donut-severity-label { width: 100%; text-align: center; margin: 0; font-size: var(--body-text-xl);; font-weight: 400; line-height: var(--default-line-height-small); color: var(--bright-white); } /* used: screenings */
.screening-page-heading-h1 { font-size: var(--heading-size-lg); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-x-small); margin-bottom: var(--app-default-top-bottom-margin-sm); color: var(--bright-white); } /* used: screenings */
.screening-sos-heading-h2 { font-size: var(--heading-size-md); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-x-small); margin-bottom: var(--app-default-top-top-margin-xl); margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: screenings */
.screening-checkinPage .screening-intro-para-text { opacity: 1; color: rgba(var(--bright-white-rgb), var(--opacity-very-high)); } /* used: screenings */
.crisis-pane .screening-intro-para-text { opacity: 1; color: rgba(var(--bright-white-rgb), var(--opacity-very-high)); } /* used: chrome, screenings-home */
.screening-safeguard-page .screening-intro-para-text { opacity: 1; color: rgba(var(--bright-white-rgb), var(--opacity-very-high)); } /* used: screenings */
.screening-text-bright-white { color: var(--bright-white); } /* used: screenings, chrome, screenings-home */
.screening-checkin-crisis-btns { display: flex; flex-direction: column; gap: var(--default-gap); height: auto; width: -moz-fit-content; width: fit-content; align-items: stretch; } /* used: screenings */
.screening-intro-para-text { font-size: var(--app-default-para-text); line-height: var(--default-line-height-large); margin-bottom: 1.1rem; opacity: var(--opacity-very-high); } /* used: screenings */
.screening-regulationPage .screening-intro-para-text { opacity: 1; color: rgba(var(--bright-white-rgb), var(--opacity-very-high)); } /* used: screenings */
.credits { font-size: var(--body-text-xs); opacity: var(--opacity-high); } /* used: screenings */
.screening-intro-para-text:last-of-type { margin-bottom: var(--app-default-top-bottom-margin-xxxl); } /* used: screenings */
.screening-q-exiting-forward { animation: slideUpOut 0.4s ease-out forwards; } /* used: screenings */
.screening-q-exiting-back { animation: slideDownOut 0.4s ease-out forwards; } /* used: screenings */
.screening-q-entering-back { animation: slideDownIn 0.4s ease-out forwards; } /* used: screenings */
.screening-question-text:focus, .screening-question-text:focus-visible { outline: none; } /* used: screenings */
.screening-question-text .screening-word { opacity: 0; display: inline; white-space: normal; animation: word-pop var(--word-stream-duration) ease-out forwards; } /* used: screenings */
.screening-skip-link { position: absolute; left: 0; top: 0; transform: translateY(-150%); background: var(--mid-charcoal); color: var(--bright-white); padding: 0.75rem 1rem; border-radius: 0 0 var(--btn-radius) 0; z-index: 3000; transition: transform 0.15s ease; } /* used: screenings */
.screening-skip-link:focus { transform: translateY(0); } /* used: screenings */
.screening-question-timeframe { color: var(--mid-charcoal); font-weight: var(--font-weight-normal); } /* used: screenings */
.screening-title-cites { margin-bottom: var(--app-default-top-bottom-margin-lg); } /* used: screenings */
.screening-title-cites summary { font-size: var(--body-text-xs); color: rgba(var(--bright-white-rgb), var(--opacity-high)); display: inline-flex; align-items: center; gap: var(--gap-xs); cursor: pointer; list-style: none; line-height: var(--default-line-height-single); } /* used: screenings */
.screening-title-cites summary::-webkit-details-marker { display: none; } /* used: screenings */
.screening-title-cites .screening-cites-icon { position: relative; display: inline-block; width: 0.9rem; height: 0.9rem; flex-shrink: 0; } /* used: screenings */
.screening-title-cites .screening-cites-icon::before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: currentColor; transform: translateY(-50%); } /* used: screenings */
.screening-title-cites .screening-cites-icon::after { content: ""; position: absolute; left: 50%; top: 0; height: 100%; width: 1.5px; background: currentColor; transform: translateX(-50%); transition: opacity 0.2s; } /* used: screenings */
.screening-title-cites[open] .screening-cites-icon::after { opacity: 0; } /* used: screenings */
.screening-title-cites .screening-cites-body { margin-bottom: var(--app-default-top-top-margin-sm); } /* used: screenings */
.screening-placeholderPage { justify-content: center; align-items: flex-start; } /* used: screenings */
.screening-placeholder-inner { max-width: 600px; text-align: left; color: var(--bright-white); } /* used: screenings */
.screening-placeholderPage h2 { margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: screenings */
.screening-reg-body { display: flex; flex-direction: column; } /* used: screenings */
.screening-regulationPage .screening-reg-visual svg { width: 100%; max-width: 440px; color: var(--bright-white); } /* used: screenings */
.intervention-icon { display: flex; align-items: center; justify-content: center; width: 100%; } /* used: screenings */
.intervention-icon i { font-size: 12rem; line-height: var(--default-line-height-single); color: var(--bright-white); } /* used: screenings */
.screening-continue-button { align-self: flex-start; gap: var(--gap-xs); } /* used: screenings */
.screening-liquid { transform-origin: center bottom; transform: scaleY(0); animation: fillUp 2800ms cubic-bezier(0.25, 0.8, 0.4, 1) 500ms forwards; } /* used: screenings */
.screening-rect-stage { width: 100%; max-width: 440px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } /* used: screenings */
.screening-breath-rect { width: 65%; height: 46%; border: var(--stroke-thin) solid var(--bright-white); border-radius: 16px; animation: breathe 9s ease-in-out infinite; position: relative; color: rgba(var(--bright-white-rgb), .85); font-weight: 500; font-size: var(--body-text-sm);; text-align: center; } /* used: screenings */
.screening-breath-label { white-space: nowrap; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); } /* used: screenings */
.screening-label-in { animation: showIn 9s ease-in-out infinite; } /* used: screenings */
.screening-label-out { animation: showOut 9s ease-in-out infinite; } /* used: screenings */
.screening-checkinPage, .screening-safeguard-page { color: var(--bright-white); justify-content: center; align-items: flex-start; min-height: calc(100vh - 114px); min-height: calc(100dvh - 114px); padding: 2rem 0 4rem; } /* used: screenings */
.screening-safeguard-inner { max-width: var(--golden-ratio-large-percentage); width: 100%; display: flex; flex-direction: column; gap: var(--gap-lg); } /* used: screenings */
.screening-buttons { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0; align-items: stretch; width: 100%; } /* used: screenings */
.screening-secondary-btn { background: transparent; border: var(--stroke-thin) solid var(--bright-white); border-radius: var(--radius-pill); padding: 0.9rem 1.5rem; cursor: pointer; text-align: center; color: var(--bright-white); font-size: var(--body-text-xs); font-weight: 400; font-family: inherit; text-decoration: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 52px; } /* used: screenings */
.screening-secondary-btn:hover { background: rgba(var(--bright-white-rgb), .08); } /* used: screenings */
.screening-slide-btn { text-decoration: none; cursor: pointer; background: transparent; border: var(--stroke-thin) solid var(--bright-white); border-radius: var(--radius-pill); padding: 4px; display: none; align-items: center; height: 52px; box-sizing: border-box; } /* used: screenings */
.screening-slide-thumb { width: 44px; height: 44px; border-radius: var(--radius-circle); background: var(--tomato); display: flex; align-items: center; justify-content: center; color: var(--bright-white); flex-shrink: 0; font-size: var(--button-icon-md); } /* used: screenings */
.screening-slide-label { flex: 1; text-align: center; font-size: var(--body-text-xs); color: rgba(var(--bright-white-rgb), .85); font-weight: 500; } /* used: screenings */
.screening-secondary-btn, .screening-slide-btn { max-width: 100%; } /* used: screenings */
.screening-selfCompassionPage { padding: 2rem 0 4rem; } /* used: screenings */
.sos-btn { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1001; }
body.screening-hide-sos .sos-btn { display: none; }
.crisis-pane { position: fixed; inset: 0; top: 0; left: 0; margin: 0; z-index: 2147483000; display: none; overflow-y: auto; background: var(--flood-color, var(--navy)); color: var(--bright-white); } /* used: chrome, screenings-home */
.crisis-pane.screening-open { display: flex; justify-content: flex-start; } /* used: chrome, screenings-home */
h1, h2, h3 { text-wrap: balance; } /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
.screening-traumaPage { display: none; overflow: hidden; } /* used: screenings */
.screening-traumaPage.screening-active { display: flex; flex-direction: column; align-items: flex-start; } /* used: screenings */
.screening-trauma-content { max-width: var(--max-body-wrapper-width, 1200px); width: 100%; margin: 0 auto; padding: 0; overflow-x: hidden; } /* used: screenings */
.screening-trauma-heading-h2 { color: var(--lozenge-selected-bg, var(--bright-blue)); } /* used: screenings */
.multi-choice-list-category-heading-h2 { font-size: var(--heading-size-lg); font-weight: var(--font-weight-normal); margin-bottom: var(--app-default-top-bottom-margin-xs); } /* used: screenings */
.multiple-choice-question-text { font-size: var(--body-text-xl);; line-height: var(--default-line-height-small); margin-bottom: 0; color: var(--mid-charcoal); display: block; width: 100%; max-width: var(--golden-width-small); white-space: normal; word-wrap: break-word; text-wrap: pretty; } /* used: screenings */
.lozenge-container { display: flex; flex-direction: column; gap: var(--default-gap); margin-bottom: var(--app-default-top-top-margin-xxl); } /* used: screenings */
.lozenge-wrapper { position: relative; display: block; width: 100%; max-width: var(--golden-width-small); } /* used: screening-results-pages, screenings */
.lozenge { width: 100%; position: relative; padding-right: 3.5rem; padding-left: calc((var(--button-size-xl) - var(--marker-size)) / 2); justify-content: flex-start; text-align: left; height: auto; min-height: var(--button-size-xl); line-height: var(--default-line-height-large); padding-top: 0.8rem; padding-bottom: 0.8rem; } /* used: screening-results-pages, screenings */
.lozenge-animated-wrapper { animation-name: normal-lozenge-stagger; animation-duration: 0.3s; animation-timing-function: ease-out; animation-fill-mode: both; opacity: 0; animation-delay: calc(var(--index) * 0.05s); } /* used: screenings */
.screening-trauma-age-section { margin-bottom: var(--app-default-top-top-margin-xxl); } /* used: screenings */
.screening-trauma-age-label {  font-size: var(--body-text-lg); color: var(--mid-charcoal); margin-bottom: .75rem; line-height: 1.4; } /* used: screenings */
.screening-trauma-dropdown-wrap { position: relative; display: inline-block; } /* used: screenings */
.screening-trauma-dropdown-caret { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--section-color); font-size: var(--body-text-sm);; } /* used: screenings */
.screening-trauma-age-dropdown { width: 9rem; height: var(--button-size-lg); padding: 0 2.5rem 0 1rem; border-radius: var(--btn-radius); border: var(--stroke-hairline, 0.5px) solid var(--light-charcoal); color: var(--mid-charcoal); background: var(--dark-white); -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: inherit; font-size: var(--body-text-sm);; line-height: (--default-line-height-small); cursor: pointer; } /* used: screenings */
/*.screening-trauma-age-dropdown:focus, .screening-trauma-age-dropdown:focus-visible { outline: var(--focus-outline-width) solid var(--orange); outline-offset: 2px; border-color: var(--orange); }*/
.screening-trauma-content .screening-confirm-button-wrapper { display: none; } /* used: screenings */
.screening-trauma-content .screening-confirm-button-wrapper.screening-visible { display: flex; } /* used: screenings */
.screening-trauma-finish-note { font-size: var(--body-text-sm);; line-height: var(--default-line-height-small); color: var(--mid-charcoal); margin: 0 0 1rem; } /* used: screenings */
.add-on-press-animation { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, background 0.2s ease; } /* used: screening-results-pages, screenings, screenings-home, auth */
.add-on-press-animation:active { transform: scale(0.94); transition-duration: 0.08s, 0.08s, 0.08s; } /* used: screening-results-pages, screenings, screenings-home, auth */
*, *::before, *::after { box-sizing: border-box; } /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
body.screening-page-health { background-color: var(--mid-white); font-family: 'Inter', sans-serif; color: var(--mid-charcoal); } /* used: screenings */
button { font-family: inherit; cursor: pointer; } /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
.tooltip { z-index: 99999; position: absolute; top: -2.5rem; left: 50%; transform: translateX(-50%); background-color: var(--mid-charcoal); color: var(--bright-white); font-weight: var(--font-weight-normal); padding: 5px 10px; border-radius: var(--radius-tooltip); white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.health-screening-question-page { overflow-y: hidden; overflow-x: hidden; display: flex; flex-direction: column; height: calc(100vh - var(--fixed-header-height) - var(--inner-wrapper-margin-top-desktop)); height: calc(100dvh - var(--fixed-header-height) - var(--inner-wrapper-margin-top-desktop)); min-height: 0; } /* used: screenings */
body[class*="screening-flood-"] .page-control-bar-section-heading-h2 { color: rgba(var(--bright-white-rgb), var(--opacity-very-high)); } /* used: onboarding */
.screening-page-health .page-progress-bar-foreground { background-color: var(--yellow); border-radius: var(--radius-pill); height: 100%; width: 100%; z-index: 1001; position: absolute; top: 0px; left: 0px; } /* used: screenings, onboarding */
.screening-page-health .page-progress-bar-background { background-color: var(--dark-white); border-radius: var(--radius-pill); width: 100%; height: 100%; z-index: 1000; position: absolute; top: 0px; left: 0px; } /* used: screenings, onboarding */
.screening-page-health .page-progress-bar-background-title { background-color: rgba(var(--bright-white-rgb), var(--opacity-low)) !important; } /* used: screenings, onboarding */
.screening-page-health .page-progress-bar-foreground-title { background-color: rgba(var(--bright-white-rgb), var(--opacity-very-high)) !important; } /* used: screenings, onboarding */
.screening-page-health .page-progress-bar { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; align-items: stretch; height: .5rem; column-gap: .7rem; top: 1.5rem; } /* used: screenings, onboarding */
.reset-lozenge-group { position: relative; display: block; width: 100%; max-width: var(--golden-width-small); } /* used: screenings */
.fade { opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; }
.fade.show { opacity: 1; pointer-events: auto; }
.theme-navy { --title-page-background-color: var(--navy); --info-icon-color: var(--navy); --lozenge-border-color: var(--navy); --lozenge-selected-bg: var(--navy); --lozenge-unselected-color: var(--navy); --circle-stroke-color: var(--navy); }
.theme-bright-blue { --title-page-background-color: var(--bright-blue); --info-icon-color: var(--bright-blue); --lozenge-border-color: var(--bright-blue); --lozenge-selected-bg: var(--bright-blue); --lozenge-unselected-color: var(--bright-blue); --circle-stroke-color: var(--bright-blue); } /* used: screenings */
.theme-dark-teal { --title-page-background-color: var(--dark-teal); --info-icon-color: var(--dark-teal); --lozenge-border-color: var(--dark-teal); --lozenge-selected-bg: var(--dark-teal); --lozenge-unselected-color: var(--dark-teal); --circle-stroke-color: var(--dark-teal); } /* used: screenings */
.theme-moss-green { --title-page-background-color: var(--moss-green); --info-icon-color: var(--moss-green); --lozenge-border-color: var(--moss-green); --lozenge-selected-bg: var(--moss-green); --lozenge-unselected-color: var(--moss-green); --circle-stroke-color: var(--moss-green); } /* used: screenings */
.theme-bright-green { --title-page-background-color: var(--bright-green); --info-icon-color: var(--bright-green); --lozenge-border-color: var(--bright-green); --lozenge-selected-bg: var(--bright-green); --lozenge-unselected-color: var(--bright-green); --circle-stroke-color: var(--bright-green); } /* used: screenings */
.health-screening-title-page { overflow: hidden; } /* used: screenings */
.screening-page-health .lozenge-container { display: flex; flex-direction: column; gap: var(--lozenge-gap-y) var(--lozenge-gap-x); } /* used: screenings */
.hidden { display: none !important; opacity: 0; } /* used: screening-results-pages, screenings, screenings-home, learn-pages-homepage-legal, auth */
.lozenge-transformed-to-input { position: relative; border-radius: var(--radius-input); background-color: var(--bright-white); border: var(--stroke-hairline, var(--stroke-thin)) solid var(--lightest-charcoal); padding: .625rem 3.5rem .625rem 1rem; width: 100%; max-width: var(--golden-width-small); font-size: var(--body-text-sm);; line-height: (--default-line-height-small); cursor: text; display: flex; align-items: center; transition: border-color 0.2s ease; box-sizing: border-box; } /* used: screenings */
.lozenge-transformed-to-input.keyboard-focus { border-color: var(--focus-outline-color); } /* used: screenings, chrome, onboarding, profile */
.lozenge-transformed-to-input .lozenge-submit-trigger { position: absolute; right: 0; top: 0; bottom: 0; aspect-ratio: 1 / 1; background-color: var(--orange); color: var(--bright-white); border: none; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease; } /* used: screenings */
.lozenge-transformed-to-input .lozenge-submit-trigger:hover { background-color: var(--orange-dark); } /* used: screenings */
.lozenge-transformed-to-input .custom-condition-input { height: 1.5rem; line-height: (--default-line-height-small); font-size: var(--body-text-sm);; padding: 0; margin: 0; border: none; outline: none; background: transparent; width: 100%; font-family: inherit; color: inherit; } /* used: screenings */
.lozenge-custom-added:has(.lozenge-info:hover) .lozenge { border-color: var(--tomato) !important; background: var(--tomato) !important; color: var(--bright-white) !important; } /* used: screenings */
.lozenge-custom-added:has(.lozenge-info:hover) .lozenge-circle { background: var(--bright-white); color: var(--tomato); border-color: var(--bright-white); } /* used: screenings, onboarding */
.lozenge-custom-added.lozenge-wrapper:has(.lozenge-info:hover) .lozenge-info, .lozenge-custom-added .lozenge-info:hover { color: var(--tomato); } /* used: screenings */
.lozenge-info { font-family: Merriweather; font-style: italic; color: var(--info-icon-color); cursor: pointer; position: absolute; display: inline-flex; align-items: center; font-size: var(--body-text-xl);; font-weight: 700; right: 1rem; top: 50%; transform: translateY(-50%); z-index: 2; width: auto; height: auto; border-radius: var(--radius-circle); border: none; padding: .625rem; background-color: transparent; } /* used: screenings */
.tooltip-more-info { position: absolute; z-index: 99999; font-family: sans-serif; font-style: normal; line-height: 1.4rem; background-color: #333; color: var(--bright-white); padding: .7rem; border-radius: var(--radius-tooltip-large); font-size: var(--body-text-xs); width: 250px; text-align: left; white-space: normal; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; top: 50%; left: 100%; transform: translate(1rem, -50%); } /* used: screenings */
.lozenge-wrapper:hover { position: relative; z-index: 100000; } /* used: screening-results-pages, screenings */
.TertiaryCircleWhiteStroke { background-color: transparent; border: var(--stroke-hairline) solid var(--bright-white); color: var(--bright-white); } /* used: screenings */
.TertiaryCircleWhiteStroke:hover { background-color: var(--bright-white); border-color: transparent; color: var(--title-page-background-color); } /* used: screenings */
.screening-page-health .page-control-bar { width: 100%; margin-bottom: var(--app-default-top-top-margin-lg); display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 4; } /* used: screenings, onboarding */
body.screening-on-title-page body.screening-on-title-page .page-control-bar .page-control-bar-section-heading-h2 { visibility: hidden; } /* used: screenings, onboarding */
body.screening-on-title-page .screening-nav-icon-button { background: transparent; color: var(--bright-white); border: var(--stroke-hairline) solid var(--bright-white); } /* used: screenings, onboarding */
body.screening-on-title-page .screening-nav-icon-button:hover { mix-blend-mode: normal; background: var(--bright-white); border-color: var(--bright-white); color: var(--flood-color); } /* used: screenings, onboarding */
.health-screening-title-page, .health-screening-title-page.screening-title-page { display: flex; flex-direction: column; justify-content: flex-start; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; } /* used: screenings */
.health-screening-title-page .screening-title-cta { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: var(--app-default-top-bottom-margin-lg); } /* used: screenings */
.health-screening-title-page.screening-title-page > .pseudo-gap-section { flex-shrink: 0; height: calc(38.2vh - var(--fixed-header-height) - var(--inner-wrapper-margin-top-desktop) - var(--back-next-button-diameter) - var(--section-title-font-size)); } /* used: screenings, screenings-home */
.health-screening-title-page .screening-title-inner { max-width: var(--max-content-width-golden-section-large); padding-right: var(--mirror-right-padding); } /* used: screenings */
.health-screening-title-page .health-category-heading-h1 { font-size: var(--heading-size-xxl); font-weight: var(--font-weight-normal); color: var(--bright-white); margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: screenings */
.health-screening-title-page .health-category-text-description { font-size: var(--app-section-para-text); line-height: var(--default-line-height-large); color: rgba(var(--bright-white-rgb), var(--opacity-very-high)); margin-bottom: 1.1rem; text-wrap: balance; } /* used: screenings */
.health-screening-title-page .screening-tmeta { font-size: var(--body-text-xs); color: rgba(var(--bright-white-rgb), var(--opacity-high)); display: flex; flex-direction: row; align-items: center; gap: var(--default-gap); flex-wrap: wrap; line-height: var(--default-line-height-single); margin-bottom: var(--app-default-top-bottom-margin-xxl); } /* used: screenings, onboarding */
.health-screening-title-page .screening-tmeta .health-category-noQuestions, .health-screening-title-page .screening-tmeta .health-category-time { display: inline-flex; align-items: center; gap: var(--gap-xxs); line-height: var(--default-line-height-single); font-size: var(--body-text-xs); } /* used: screenings, onboarding */
.health-screening-title-page .screening-tmeta i, .health-screening-title-page .screening-tmeta .health-category-noQuestions i, .health-screening-title-page .screening-tmeta .health-category-time i { display: inline-flex; align-items: center; font-size: var(--button-icon-xxl); line-height: var(--default-line-height-single); } /* used: screenings, onboarding */
.health-screening-title-page .screening-title-actions { display: flex; flex-direction: row; align-items: center; gap: var(--default-gap); flex-wrap: wrap; } /* used: screenings */
.health-screening-question-page .screening-q-content-wrap { width: 100%; max-width: var(--max-body-wrapper-width, 1200px); margin: 0 auto; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; } /* used: screenings */
.health-screening-question-page .screening-qHeader { margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: screenings */
.health-screening-question-page .screening-question-text-wrap { margin-bottom: 0; } /* used: screenings */
.health-screening-question-page .answer-options-container { margin-bottom: var(--app-default-top-top-margin-xxl); } /* used: screenings, onboarding */
.health-screening-question-page .screening-confirm-button-wrapper { display: flex; margin-bottom: var(--app-default-top-bottom-margin-xxxl); } /* used: screenings */
.screening-confirm-selection-button .tooltip, .screening-start-pill .tooltip { display: none; }
.screening-q-content-wrap.screening-q-exiting-forward { animation: slideUpOut 0.4s ease-out forwards; } /* used: screenings */
.screening-q-content-wrap.screening-q-exiting-back { animation: slideDownOut 0.4s ease-out forwards; } /* used: screenings */
.screening-q-content-wrap.screening-q-entering-forward { animation: slideUpIn 0.4s ease-out forwards; } /* used: screenings */
.screening-q-content-wrap.screening-q-entering-back { animation: slideDownIn 0.4s ease-out forwards; } /* used: screenings */
body.screening-flood-light-sage-green { --flood-color: var(--light-sage-green); } /* used: screenings */
.btn-pill.screening-start-button, .btn-pill.screening-next-section-button, .btn-pill.screening-continue-button { align-self: flex-start; } /* used: screenings, chrome, screenings-home, onboarding, profile */
.screening-reg-split { display: flex; flex-direction: row; gap: 4rem; flex: 1; align-items: center; width: 100%; } /* used: screenings */
.screening-reg-content { display: flex; flex-direction: column; flex: 0 0 var(--golden-ratio-large-percentage); max-width: var(--golden-ratio-large-percentage); } /* used: screenings */
.screening-page-rsd .screening-reg-content { display: flex; flex-direction: column; } /* used: screenings */
.screening-reg-visual { flex: 0 0 var(--golden-ratio-small-percentage); max-width: var(--golden-ratio-small-percentage); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; } /* used: screenings */
.screening-page-rsd .screening-reg-visual { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; } /* used: screenings */
.screening-reg-visual svg { width: 100%; max-width: 440px; color: var(--bright-white); } /* used: screenings */
.screening-stimPage.screening-active { display: flex; flex-direction: column; align-items: flex-start; } /* used: screenings */
.screening-stim-content { max-width: var(--max-body-wrapper-width, 1200px); width: 100%; margin: 0 auto; } /* used: screenings */
.screening-stim-heading-h2 { color: var(--lozenge-selected-bg, var(--dark-teal)); } /* used: screenings */
.screening-stim-adult .screening-stim-heading-h2 { color: var(--orange); } /* used: screenings */
.screening-stim-content .screening-confirm-button-wrapper { display: none; } /* used: screenings */
.screening-stim-content .screening-confirm-button-wrapper.screening-visible { display: flex; } /* used: screenings */
.screening-reg-content.screening-reg-content-full { flex: 1 1 100%; max-width: 720px; } /* used: screenings */
.screening-rumination-cloud { width: 100%; max-width: 440px; aspect-ratio: 1/1; padding: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1rem; } /* used: screenings */
.screening-page-rsd .screening-rumination-cloud { width: 100%; padding: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--default-gap) 0.85rem; } /* used: screenings */
.screening-rc-word { color: rgba(var(--bright-white-rgb), .85); font-weight: 400; line-height: 1.1; letter-spacing: -0.3px; white-space: nowrap; animation: rc-drift 8s ease-in-out infinite alternate; display: inline-block; } /* used: screenings */
.screening-page-rsd .screening-rc-word { color: var(--bright-white); font-weight: 400; line-height: 1.2; letter-spacing: -0.3px; white-space: nowrap; animation: rc-drift 8s ease-in-out infinite alternate; display: inline-block; } /* used: screenings */
.screening-rc-word:nth-child(1) { font-size: var(--body-text-xxxl); animation-delay: 0.0s; opacity: .95; transform: rotate(-2deg); } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(1) {  font-size: var(--body-text-lg); animation-delay: 0.0s; opacity: var(--opacity-near-full); transform: rotate(-2deg); } /* used: screenings */
.screening-rc-word:nth-child(2) { font-size: var(--body-text-xl);; animation-delay: 0.6s; opacity: .7; transform: rotate(1deg); } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(2) { font-size: var(--body-text-xxl); animation-delay: 0.6s; opacity: 1; } /* used: screenings */
.screening-rc-word:nth-child(3) { font-size: 1.9rem; animation-delay: 1.2s; opacity: 1; transform: rotate(-1deg); } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(3) { font-size: 1.0rem; animation-delay: 1.2s; opacity: var(--opacity-high); transform: rotate(1deg); } /* used: screenings */
.screening-rc-word:nth-child(4) {  font-size: var(--body-text-lg); animation-delay: 1.8s; opacity: .65; } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(4) { font-size: var(--body-text-xl);; animation-delay: 1.8s; opacity: var(--opacity-near-full); } /* used: screenings */
.screening-rc-word:nth-child(5) { font-size: 1.5rem; animation-delay: 0.4s; opacity: .9; transform: rotate(2deg); } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(5) { font-size: 1.5rem; animation-delay: 0.4s; opacity: 1; transform: rotate(-1deg); } /* used: screenings */
.screening-rc-word:nth-child(6) { font-size: 1.7rem; animation-delay: 1.0s; opacity: .95; transform: rotate(-1deg); } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(6) {  font-size: var(--body-text-lg); animation-delay: 1.0s; opacity: var(--opacity-high); } /* used: screenings */
.screening-rc-word:nth-child(7) { font-size: 1.3rem; animation-delay: 2.2s; opacity: .75; } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(7) { font-size: var(--body-text-xl);; animation-delay: 1.6s; opacity: var(--opacity-near-full); transform: rotate(2deg); } /* used: screenings */
.screening-rc-word:nth-child(8) {  font-size: var(--body-text-lg); animation-delay: 0.8s; opacity: .6; transform: rotate(1deg); } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(8) { font-size: 1.0rem; animation-delay: 2.2s; opacity: var(--opacity-high); } /* used: screenings */
.screening-rc-word:nth-child(9) { font-size: var(--body-text-xxl); animation-delay: 1.6s; opacity: .8; transform: rotate(-2deg); } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(9) { font-size: var(--body-text-xl);; animation-delay: 0.2s; opacity: var(--opacity-very-high); transform: rotate(-1deg); } /* used: screenings */
.screening-rc-word:nth-child(10) { font-size: var(--body-text-xl);; animation-delay: 0.2s; opacity: .7; } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(10) { font-size: var(--body-text-xxl); animation-delay: 0.8s; opacity: 1; } /* used: screenings */
.screening-rc-word:nth-child(11) { font-size: var(--body-text-xxxl); animation-delay: 2.0s; opacity: .9; transform: rotate(2deg); } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(11) {  font-size: var(--body-text-lg); animation-delay: 1.4s; opacity: var(--opacity-high); transform: rotate(1deg); } /* used: screenings */
.screening-rc-word:nth-child(12) {  font-size: var(--body-text-lg); animation-delay: 1.4s; opacity: .65; transform: rotate(-1deg); } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(12) { font-size: var(--body-text-xs); animation-delay: 2.0s; opacity: var(--opacity-high); } /* used: screenings */
.screening-rc-word:nth-child(13) { font-size: 1.5rem; animation-delay: 0.5s; opacity: .85; } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(13) {  font-size: var(--body-text-lg); animation-delay: 0.5s; opacity: var(--opacity-very-high); transform: rotate(-2deg); } /* used: screenings */
.screening-rc-word:nth-child(14) { font-size: var(--body-text-xl);; animation-delay: 1.1s; opacity: .7; transform: rotate(1deg); } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(14) { font-size: var(--body-text-xs); animation-delay: 1.1s; opacity: var(--opacity-high); } /* used: screenings */
.screening-rc-word:nth-child(15) { font-size: 1.3rem; animation-delay: 1.9s; opacity: .75; transform: rotate(-2deg); } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(15) { font-size: 1.0rem; animation-delay: 1.7s; opacity: var(--opacity-high); transform: rotate(1deg); } /* used: screenings */
.screening-rc-word:nth-child(16) { font-size: 1.7rem; animation-delay: 0.3s; opacity: .95; } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(16) {  font-size: var(--body-text-lg); animation-delay: 2.3s; opacity: var(--opacity-very-high); transform: rotate(-1deg); } /* used: screenings */
.screening-rc-word:nth-child(17) { font-size: var(--body-text-xxl); animation-delay: 1.3s; opacity: .8; transform: rotate(2deg); } /* used: screenings */
.screening-page-rsd .screening-rc-word:nth-child(17) {  font-size: var(--body-text-lg); animation-delay: 0.3s; opacity: var(--opacity-near-full); } /* used: screenings */
.screening-rc-word:nth-child(18) { font-size: 1.8rem; animation-delay: 0.7s; opacity: 1; transform: rotate(-1deg); } /* used: screenings */
.screening-square-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 2rem; } /* used: screenings */
.screening-square-paper { aspect-ratio: 1/1; width: 70%; max-width: 280px; background: rgba(var(--bright-white-rgb), .96); border-radius: 4px; padding: 1.75rem 1.5rem; display: flex; flex-direction: column; justify-content: center; gap: var(--default-gap); transform: rotate(-3deg); position: relative; } /* used: screenings */
.screening-square-paper::before { content: ""; position: absolute; inset: 0; border: var(--stroke-thin) solid rgba(var(--black-rgb), var(--opacity-very-low)); border-radius: 4px; pointer-events: none; } /* used: screenings */
.screening-square-line { height: 1px; background: rgba(var(--black-rgb), .18); width: 100%; } /* used: screenings */
.screening-square-line:nth-child(1) { width: 75%; } /* used: screenings */
.screening-square-line:nth-child(2) { width: 60%; } /* used: screenings */
.screening-square-line:nth-child(3) { width: 80%; } /* used: screenings */
.screening-square-line:nth-child(4) { width: 50%; } /* used: screenings */
.screening-resultsPage .screening-reg-split, .screening-regulationPage .screening-reg-split { display: flex; flex: 1; flex-direction: row; width: 100%; min-height: 0; gap: 0; align-items: center; } /* used: screenings */
.screening-resultsPage .screening-reg-content, .screening-regulationPage .screening-reg-content { flex: 0 0 var(--golden-ratio-large-percentage); width: var(--golden-ratio-large-percentage); height: 100%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; padding-right: var(--results-mirror-padding); } /* used: screenings */
.screening-resultsPage .screening-reg-visual, .screening-regulationPage .screening-reg-visual { flex: 0 0 var(--golden-ratio-small-percentage); width: var(--golden-ratio-small-percentage); max-width: none; display: flex; align-items: center; justify-content: flex-start; } /* used: screenings */
.screening-para-subheads { color: var(--bright-white) !important; opacity: 1 !important; font-style: italic !important; margin-bottom: var(--app-default-top-bottom-margin-xxs) !important; } /* used: screenings */
.screening-theme-light-sage-green { --lozenge-border-color: var(--light-sage-green); --lozenge-selected-bg: var(--light-sage-green); --lozenge-unselected-color: var(--light-sage-green); --circle-stroke-color: var(--light-sage-green); } /* used: screenings */

@keyframes slideUpOut { /* used: screenings */
from { transform:translateY(0);opacity:1 }
.screening-page-health from { transform: translateY(0); opacity: 1; }
to { transform:translateY(-80px);opacity:0 }
.screening-page-health to { transform: translateY(-80px); opacity: 0; }
}

@keyframes slideDownOut { /* used: screenings */
from { transform:translateY(0);opacity:1 }
.screening-page-health from { transform: translateY(0); opacity: 1; }
to { transform:translateY(80px);opacity:0 }
.screening-page-health to { transform: translateY(80px); opacity: 0; }
}

@keyframes slideDownIn { /* used: screenings */
0% { transform:translateY(-50px);opacity:0 }
.screening-page-health 0% { transform: translateY(-50px); opacity: 0; }
100% { transform:translateY(0);opacity:1 }
.screening-page-health 100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideUpIn { /* used: screenings */
0% { transform:translateY(50px);opacity:0 }
.screening-page-health 0% { transform: translateY(50px); opacity: 0; }
100% { transform:translateY(0);opacity:1 }
.screening-page-health 100% { transform: translateY(0); opacity: 1; }
}

@keyframes word-pop { /* used: screenings */
from { opacity:0;transform:translateY(3px);filter:blur(1px) }
to { opacity:1;transform:translateY(0);filter:blur(0) }
}

@keyframes streamIn {
from { opacity:0;transform:translateY(6px) }
to { opacity:1;transform:translateY(0) }
}

@keyframes calm-fade-in { /* used: screenings */
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes calm-fade-out { /* used: screenings */
from { opacity: 1; }
to { opacity: 0; }
}

@keyframes fillUp { /* used: screenings */
0% { transform: scaleY(0); }
100% { transform: scaleY(1); }
}

@keyframes showIn { /* used: screenings */
0%, 32% { opacity: 0; }
4%, 30% { opacity: 1; }
34%, 100% { opacity: 0; }
}

@keyframes showOut { /* used: screenings */
0%, 32% { opacity: 0; }
36%, 98% { opacity: 1; }
100% { opacity: 0; }
}

@keyframes breathe { /* used: screenings, learn-pages-homepage-legal */
0% { width: 65%; height: 46%; }
33% { width: 95%; height: 72%; }
42% { width: 95%; height: 72%; }
100% { width: 65%; height: 46%; }
}

@keyframes normal-lozenge-stagger { /* used: screenings */
0% { opacity: 0; transform: translateX(-10px); }
100% { opacity: 1; transform: translateX(0); }
}

@keyframes rc-drift { /* used: screenings */
0% { transform: translateY(0) rotate(var(--r, 0deg)); }
100% { transform: translateY(-4px) rotate(var(--r, 0deg)); }
}

@keyframes cost-pop { /* used: screenings */
to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
.screening-resultsPage .screening-reg-split { flex: 1; flex-direction: column; min-height: 0; gap: 0; align-items: flex-start; max-width: var(--max-stack-width); } /* used: screenings */
.screening-resultsPage .screening-reg-visual { order: -1; flex: 0 0 var(--golden-ratio-large-percentage); min-height: 0; width: 100%; max-width: none; aspect-ratio: auto; display: flex; align-items: center; justify-content: flex-start; } /* used: screenings */
.screening-resultsPage .screening-reg-content { flex: 0 0 var(--golden-ratio-small-percentage); width: 100%; max-width: none; aspect-ratio: auto; align-items: flex-start; justify-content: flex-start; text-align: left; padding-right: 0; margin-top: 0; } /* used: screenings */
.screening-resultsPage .screening-reg-visual .screening-donutWrap { width: auto; height: var(--golden-ratio-large-percentage); aspect-ratio: 1 / 1; } /* used: screenings */
.screening-regulationPage { min-height: 0; } /* used: screenings */
.screening-regulationPage .screening-reg-split { flex: 1; flex-direction: column; min-height: 0; gap: 0; align-items: flex-start; max-width: var(--max-stack-width); overflow-y: auto; overflow-x: hidden; } /* used: screenings */
.screening-page-rsd .screening-regulationPage .screening-reg-split { overflow-y: auto; overflow-x: hidden; } /* used: screenings */
.screening-regulationPage .screening-reg-content { overflow-y: visible; flex: 0 0 auto; width: 100%; max-width: none; align-items: flex-start; justify-content: flex-start; text-align: left; padding-right: 0; margin-top: 0; } /* used: screenings */
.screening-page-rsd .screening-regulationPage .screening-reg-content { flex: 0 0 auto; } /* used: screenings */
.screening-regulationPage .screening-reg-visual { order: -1; flex: 0 0 var(--golden-ratio-large-percentage); min-height: 0; width: 100%; max-width: none; aspect-ratio: auto; display: flex; align-items: center; justify-content: flex-start; } /* used: screenings */
.scrollable-left-pane { padding-top: 0; padding-bottom: 0; } /* used: screenings */
.screening-regulationPage .screening-continue-button { margin-bottom: 0; } /* used: screenings */
.intervention-icon i { font-size: 8rem; } /* used: screenings */
.screening-resultsPage .screening-reg-split, .screening-regulationPage .screening-reg-split { flex: 1; flex-direction: column; min-height: 0; gap: 0; align-items: flex-start; max-width: var(--max-stack-width); } /* used: screenings */
.screening-resultsPage .screening-reg-visual, .screening-regulationPage .screening-reg-visual { order: -1; flex: 0 0 var(--golden-ratio-large-percentage); min-height: 0; width: 100%; max-width: none; aspect-ratio: auto; display: flex; align-items: center; justify-content: flex-start; } /* used: screenings */
.screening-resultsPage .screening-reg-content, .screening-regulationPage .screening-reg-content { flex: 0 0 var(--golden-ratio-small-percentage); width: 100%; max-width: none; aspect-ratio: auto; align-items: flex-start; justify-content: flex-start; text-align: left; padding-right: 0; margin-top: 0; } /* used: screenings */
.screening-resultsPage .screening-reg-visual .screening-donutWrap, .screening-regulationPage .screening-reg-visual .screening-donutWrap { width: auto; height: var(--golden-ratio-large-percentage); aspect-ratio: 1 / 1; } /* used: screenings */
}




/*ALLOWS FOR INNER PAGE SCROLL*/ 
/*accounts for width of fixed sidebar*/




/*this is for grids that shift carouselled that are cariouslele always by default*/










/*this is for grids that shift carouselled that are cariouslele always by default*/




/*this is for grids that shift to caourselles at 750px, not carouselle by default*/





@media (max-width: 600px) {

.uma-chrome-all-content-wrapper { margin-left: 0; width: 100%; } /* used: chrome, screenings-home, profile */
.uma-chrome-inner-content-wrapper { max-width: 100%; padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); margin-top: var(--inner-wrapper-margin-top-mobile); } /* used: chrome, screenings-home, profile */


.screening-nav-icon-button.btn-circular { height: var(--button-size-sm); } /* used: screenings, chrome, screenings-home, onboarding, profile */
.screening-nav-icon-button.btn-circular i { font-size: var(--button-icon-sm); } /* used: screenings, chrome, screenings-home, onboarding, profile */
.screening-continue-button { width: 100%; } /* used: screenings */



.screening-question-count-heading-h3 { margin-bottom: var(--app-default-top-top-margin-xl); } /* used: screenings, onboarding */
.screening-options-wrapper { margin-bottom: var(--app-default-top-top-margin-xl); } /* used: screenings */
.screening-confirm-selection-button.btn-circular { height: var(--button-size-xl); } /* used: screenings, chrome, screenings-home, onboarding, profile */
.screening-resultsPage .screening-reg-split { flex: 1; flex-direction: column; min-height: 0; gap: 0; align-items: center; max-width: none; } /* used: screenings */
.screening-resultsPage .screening-reg-visual { order: -1; flex: 0 0 auto; width: 100%; max-width: none; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } /* used: screenings */
.screening-resultsPage .screening-reg-visual .screening-donutWrap { width: var(--golden-ratio-large-percentage); height: auto; aspect-ratio: 1 / 1; } /* used: screenings */
.screening-resultsPage .screening-reg-content { flex: 1; width: 100%; max-width: none; aspect-ratio: auto; justify-content: flex-start; padding-right: 0; margin-top: 0; } /* used: screenings */
.screening-regulationPage .screening-reg-split { flex: 1; flex-direction: column; min-height: 0; gap: 0; align-items: center; max-width: none; } /* used: screenings */
.screening-regulationPage .screening-reg-visual { order: -1; flex: 0 0 auto; width: 100%; max-width: none; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } /* used: screenings */
.screening-regulationPage .screening-reg-content { flex: 0 0 auto; width: 100%; max-width: none; justify-content: flex-start; padding-right: 0; margin-top: 0; } /* used: screenings */
.screening-page-rsd .screening-regulationPage .screening-reg-content { flex: 0 0 auto; } /* used: screenings */
.screening-intro-para-text:last-of-type { margin-bottom: var(--app-default-top-bottom-margin-lg); } /* used: screenings */
.screening-slide-btn { display: flex; } /* used: screenings */
.screening-reg-split, .screening-crisis-split { flex-direction: column; gap: var(--gap-xl); min-height: 0; align-items: stretch; } /* used: screenings */
.screening-reg-content, .screening-crisis-content { flex: 1 1 auto; max-width: 100%; } /* used: screenings */
.screening-reg-visual, .screening-crisis-visual { flex: 1 1 auto; max-width: 100%; } /* used: screenings */
.screening-reg-visual svg { max-width: 260px; } /* used: screenings */
.screening-rect-stage { max-width: 280px; } /* used: screenings */
.sos-btn { top: 13rem; right: 1.5rem; bottom: auto; height: var(--button-size-lg); }
.lozenge-container { margin-bottom: var(--app-default-top-top-margin-xl); } /* used: screenings */
.health-screening-question-page { overflow: hidden; } /* used: screenings */
.page-progress-bar { transform: none !important; width: 100% !important; } /* used: screenings, onboarding */
.health-screening-title-page.screening-title-page > .pseudo-gap-section { display: none; } /* used: screenings, screenings-home */
.health-screening-title-page.screening-title-page { display: flex; flex-direction: column; justify-content: space-between; } /* used: screenings */
.health-screening-title-page .screening-title-inner { max-width: 100%; padding-right: 0; margin-top: 20%; } /* used: screenings */
.health-screening-title-page .screening-title-cta { align-items: stretch; } /* used: screenings */
.health-screening-title-page .health-category-heading-h1 { font-size: var(--heading-size-lg); } /* used: screenings */
.health-screening-title-page .screening-title-actions { flex-direction: column; align-items: stretch; gap: var(--default-gap); width: 100%; } /* used: screenings */
.health-screening-title-page .screening-title-actions .btn-pill { width: 100%; } /* used: screenings, chrome, screenings-home, onboarding, profile */
.health-screening-question-page .answer-options-container { margin-bottom: var(--app-default-top-top-margin-xl); } /* used: screenings, onboarding */
.screening-resultsPage .screening-reg-split, .screening-regulationPage .screening-reg-split { flex: 1; flex-direction: column; min-height: 0; gap: 0; align-items: center; max-width: none; } /* used: screenings */
.screening-resultsPage .screening-reg-visual, .screening-regulationPage .screening-reg-visual { order: -1; flex: 0 0 auto; width: 100%; max-width: none; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } /* used: screenings */
.screening-resultsPage .screening-reg-visual .screening-donutWrap, .screening-regulationPage .screening-reg-visual .screening-donutWrap { width: var(--golden-ratio-large-percentage); height: auto; aspect-ratio: 1 / 1; } /* used: screenings */
.screening-resultsPage .screening-reg-content, .screening-regulationPage .screening-reg-content { flex: 1; width: 100%; max-width: none; aspect-ratio: auto; justify-content: flex-start; padding-right: 0; margin-top: 0; } /* used: screenings */
}

@media(max-width:600px) {
.screening-title-page h1 { font-size: var(--heading-size-lg); } /* used: screenings */
.screening-title-page > .pseudo-gap-section { display: none; } /* used: screenings, screenings-home */
.screening-title-page.screening-active { display: flex; flex-direction: column; justify-content: space-between; } /* used: screenings */
.screening-title-inner { max-width: 100%; padding-right: 0; margin-top: 20%; } /* used: screenings */
.screening-title-cta { align-items: stretch; } /* used: screenings */
.screening-title-actions { flex-direction: column; align-items: stretch; gap: var(--default-gap); width: 100%; } /* used: screenings */
.screening-title-actions .btn-pill { width: 100%; } /* used: screenings, chrome, screenings-home, onboarding, profile */
.screening-tmeta { flex-direction: column; align-items: flex-start; gap: var(--default-gap); } /* used: screenings, onboarding */
.screening-question-text { width: 100%; max-width: 100%; } /* used: screenings */
.screening-title-cta > .btn-pill { width: 100%; } /* used: screenings, chrome, screenings-home, onboarding, profile */
}

@media (hover: hover) and (pointer: fine) {
.lozenge-info:hover .tooltip-more-info, .lozenge-info:focus-visible .tooltip-more-info { opacity: 1; visibility: visible; } /* used: screenings */
}

@media (hover: none) and (pointer: coarse) {
.lozenge-info:active .tooltip-more-info, .lozenge-info:focus .tooltip-more-info { opacity: 1; visibility: visible; } /* used: screenings */
.lozenge-info .tooltip-more-info { right: 30px; left: auto !important; transform: translateY(0%); top: 50px; bottom: auto !important; } /* used: screenings */
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
.add-on-press-animation, .add-on-press-animation:active { transition: none; transform: none; } /* used: screening-results-pages, screenings, screenings-home, auth */
}

/* ============================================================
GOLDEN-SECTION PSEUDO-GAP COLLAPSE
Collapse the golden-section spacer (and apply the 80/20 split)
whenever vertical height is constrained: narrow portrait phones,
OR short landscape on touch devices (where a tall spacer pushes
the CTA / content off the bottom of the screen).
Placed last so it wins the cascade over the base golden formula.
============================================================ */
@media (max-width: 600px), (max-height: 800px) {
.screening-title-page > .pseudo-gap-section { display: none; } /* used: screenings, screenings-home */
.screening-title-inner { margin-top: 20%; } /* used: screenings */
}

/* === CANONICAL FOOTNOTE + VALIDATION TEXT === */
.footnote { font-size: var(--body-text-xs); color: var(--light-charcoal); }

.validation-text.is-valid { color: var(--success); } /* used: chrome, screenings-home, onboarding, profile */
.validation-text.is-invalid { color: var(--error); } /* used: chrome, screenings-home, onboarding, profile */

.btn-square-affixed { border-radius: 0 var(--btn-radius) var(--btn-radius) 0; aspect-ratio: 1 / 1; flex-shrink: 0; padding: 0; justify-content: center; }

.switch { position: relative; display: inline-block; width: var(--switch-lg-width); height: var(--switch-lg-height); cursor: pointer; flex-shrink: 0; } /* used: chrome, screenings-home, profile, auth */
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* used: chrome, screenings-home, profile, auth */
.switch-track { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--mid-mushroom); transition: background .3s ease; overflow: hidden; } /* used: chrome, screenings-home, profile, auth */
.switch input:checked ~ .switch-track { background: var(--bright-green); } /* used: chrome, screenings-home, profile, auth */
.switch-thumb { position: absolute; top: var(--switch-thumb-inset); left: var(--switch-thumb-inset); width: var(--switch-lg-thumb); height: var(--switch-lg-thumb); border-radius: 50%; background: var(--bright-white); box-shadow: 0 2px 4px var(--shadow-overlay, rgba(0,0,0,.2)); transition: left .25s ease; z-index: 2; } /* used: chrome, screenings-home, profile, auth */
.switch input:checked ~ .switch-track .switch-thumb { left: calc(100% - var(--switch-lg-thumb) - var(--switch-thumb-inset)); } /* used: chrome, screenings-home, profile, auth */
.switch-icon { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; pointer-events: none; color: var(--bright-white); display: flex; align-items: center; justify-content: center; font-size: var(--switch-lg-icon); transition: left .25s ease; } /* used: chrome, screenings-home */
.switch--mini { width: var(--switch-mini-width); height: var(--switch-mini-height); } /* used: profile, auth */
.switch--mini .switch-thumb { width: var(--switch-mini-thumb); height: var(--switch-mini-thumb); } /* used: chrome, screenings-home, profile, auth */
.switch--mini input:checked ~ .switch-track .switch-thumb { left: calc(100% - var(--switch-mini-thumb) - var(--switch-thumb-inset)); } /* used: chrome, screenings-home, profile, auth */
.switch--mini .switch-icon { font-size: var(--switch-mini-icon); } /* used: chrome, screenings-home, profile */
.switch--calm .switch-track { background: var(--yellow); } /* used: chrome, screenings-home, profile */
.switch--calm input:checked ~ .switch-track { background: var(--red); } /* used: chrome, screenings-home, profile */
.switch--voice .switch-track { background: var(--navy-dark); } /* used: chrome, screenings-home, profile */
.switch--voice:hover input:not(:checked) ~ .switch-track { background: var(--navy-dark); } /* used: chrome, screenings-home, profile */
.switch--voice input:checked ~ .switch-track { background: var(--dark-teal); } /* used: chrome, screenings-home, profile */
.switch--tickcross .switch-track { background: var(--tomato); } /* used: chrome, screenings-home, profile */
.switch--tickcross input:checked ~ .switch-track { background: var(--bright-green); } /* used: chrome, screenings-home, profile */
.form { display: flex; flex-direction: column; gap: var(--form-item-gap); } /* used: auth */
.form-group { display: flex; flex-direction: column; gap: var(--app-default-top-bottom-margin-xxxs); } /* used: onboarding, auth */

/*GLOBAL LEFTR ALGIGN*/
.form-label { text-align: left !important; font-size: var(--form-label-size); /*color: var(--mid-charcoal);*/ font-weight: var(--font-weight-medium); } /* used: onboarding, auth */

.form-alt-link { text-align: center; margin-bottom: var(--app-default-top-top-margin-lg); font-size: 0.95rem; color: var(--mid-charcoal); } /* used: auth */
.form-alt-link a { color: var(--orange); text-decoration: none; transition: text-decoration 0.4s ease; } /* used: auth */
.form-alt-link a:hover { text-decoration: underline; text-underline-offset: 4px; } /* used: auth */


.form-label-row { display: flex; justify-content: space-between; align-items: center; } /* used: auth */


.reveal-password { background: transparent; border: none; color: var(--light-charcoal); padding: 0.25rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s ease; } /* used: auth */
.reveal-password:hover { color: var(--mid-charcoal); } /* used: auth */
.reveal-password i { font-size: var(--button-icon-md); } /* used: auth */

.field-action.is-invalid { border-color: var(--error); border-width: var(--field-border-active); } /* used: chrome, screenings-home, onboarding, profile */

.field-action.has-input .field-action-button--return, .field-action-button--return { background: var(--orange); color: var(--bright-white); border-left-color: var(--orange); } /* used: chrome, screenings-home, onboarding, profile, auth */
.field-action.has-input .field-action-button--danger, .field-action-button--danger { background: var(--error); color: var(--bright-white); border-left-color: var(--error); } /* used: chrome, screenings-home, onboarding, profile, auth */
.field-action.has-input .field-action-button--valid, .field-action-button--valid { background: var(--success); color: var(--bright-white); border-left-color: var(--success); } /* used: chrome, screenings-home, onboarding, profile, auth */
.field-action.has-input .field-action-button--invalid, .field-action-button--invalid { background: var(--error); color: var(--bright-white); border-left-color: var(--error); } /* used: chrome, screenings-home, onboarding, profile */
.field-action-button--return { background: var(--orange); color: var(--bright-white); border-left-color: var(--orange); } /* used: auth */
.field-action .field-action-button.is-invalid { background: var(--error); color: var(--bright-white); border-left-color: var(--error); } /* used: chrome, screenings-home, onboarding, profile */
.field-action .field-action-button.is-invalid:hover { background: var(--red-dark); border-left-color: var(--red-dark); } /* used: chrome, screenings-home, onboarding, profile */
.field-action-button--danger:hover { background: var(--red-dark); border-left-color: var(--red-dark); } /* used: onboarding, auth */

.field-action.has-error { border-color: var(--error); border-width: var(--field-border-active); /*box-shadow: 0 0 0 var(--field-border-active) var(--error);*/ } /* used: chrome, screenings-home, onboarding, profile, auth */

.screening-page-health { --answer-list-max-width: 360px; } /* used: screenings */
.page-control-bar.page-control-back-only { justify-content: flex-start; } /* used: onboarding */
.page-control-bar.page-control-exit-only { justify-content: flex-end; } /* used: onboarding */
.chrome-right { display: flex; align-items: center; gap: var(--default-gap); } /* used: onboarding */
.uma-chrome-voice-switch { position: relative; width: 80px; height: 40px; cursor: pointer; display: inline-block; flex-shrink: 0; } /* used: onboarding */
.uma-chrome-voice-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* used: onboarding */
.uma-chrome-voice-track { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--navy); transition: background .3s ease; overflow: hidden; } /* used: onboarding */
.uma-chrome-voice-switch input:checked ~ .uma-chrome-voice-track { background: var(--bright-green); } /* used: onboarding */
.uma-chrome-voice-icon { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); color: var(--bright-white); z-index: 3; pointer-events: none; transition: left .25s ease; display: flex; align-items: center; justify-content: center; } /* used: onboarding */
.uma-chrome-voice-switch input:checked ~ .uma-chrome-voice-track .uma-chrome-voice-icon { left: 10px; } /* used: onboarding */
.uma-chrome-voice-thumb { position: absolute; top: 4px; left: 4px; width: 32px; height: 32px; border-radius: var(--radius-circle); background: var(--bright-white); transition: left .25s ease; z-index: 2; } /* used: onboarding */
.uma-chrome-voice-switch input:checked ~ .uma-chrome-voice-track .uma-chrome-voice-thumb { left: 44px; } /* used: onboarding */
.pane { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--default-gap); padding: 2rem; }



/****************************DISCOUNTS PAGE********************************/


/* ---------- product card ---------- */
.uma-disc-product-card { scroll-snap-align:start; width:100%; aspect-ratio: var(--carouselle-card-ratio-golden); display:flex; flex-direction:column; position:relative; background-color:var(--navy); color:var(--light-white); border-radius:var(--app-default-radius-md); transition:background-color var(--transition-base) ease-in-out; }
.uma-disc-product-card:hover { background-color:var(--navy-dark); }
.uma-disc-product-card:hover .uma-disc-product-buy,
.uma-disc-product-card:focus-within .uma-disc-product-buy { opacity:var(--opacity-visible); }
.uma-disc-product-card p { color:var(--light-white); }
.uma-disc-product-img-wrap > a { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.uma-disc-product-img-wrap img { width:100%; height:100%; object-fit:contain; background-color:var(--product-tile-bg); padding:var(--uma-disc-card-img-padding); }
.uma-disc-product-img-wrap img.product-img-full-bleed { padding:0; width:100%; height:100%; object-fit:cover; }
.uma-disc-product-img-wrap img.uma-disc-product-img-full { padding:0; width:auto; height:100%; max-width:100%; object-fit:contain; }
.uma-disc-product-img-wrap img.product-img-pad-md { padding:var(--uma-disc-card-img-padding-md); }
.uma-disc-product-details { flex:1; min-height:0; padding:var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-lg) 0 var(--app-default-top-bottom-margin-lg); }
.uma-disc-item-title { font-size:var(--heading-size-xs); line-height:var(--default-line-height-x-small); margin-bottom:var(--app-default-top-bottom-margin-xxs); color:var(--light-white); font-weight:var(--font-weight-normal); }
.uma-disc-item-subtitle { text-wrap:pretty; line-height:var(--default-line-height-large); margin-bottom:var(--app-default-top-bottom-margin-xl); font-size:var(--body-text-xs); color:var(--light-white); }
.uma-disc-item-subtitle a { color:var(--light-white); text-decoration:underline; text-underline-offset:2px; }
.uma-disc-inline-link-icon { font-size:var(--button-icon-xs); margin-left:var(--app-default-top-bottom-margin-xxxxs); }
.uma-disc-product-buy { margin-top:auto; height:auto; display:flex; flex-direction:row; justify-content:flex-start; align-items:flex-end; gap:var(--app-default-top-bottom-margin-xs); padding:0 var(--app-default-top-bottom-margin-lg) var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-lg); opacity:var(--opacity-hidden); transition:opacity var(--transition-base) ease; }
.uma-disc-product-buy .btn { /* used: chrome, screenings-home, onboarding, profile */
padding-left: var(--gap-xxl); 
padding-right: var(--gap-xxl); 
font-size: var(--body-text-xs);
}
/* ---------- copy-code button (scoped, unique to this page) ---------- */
.btn[data-code].is-copied { background:var(--bright-green); color:var(--white-text-default); border-color:var(--bright-green); } /* used: chrome, screenings-home, onboarding, profile */

/*
.btn[data-code].btn-secondary-white-on-dark:hover { color:var(--bright-white); background-color:rgba(var(--bright-white-rgb), var(--opacity-low)); }
*/
.btn[data-code].btn-secondary-white-on-dark:hover { color:var(--bright-white); background-color:rgba(249, 249, 249, 0.2); } /* used: screenings, chrome, screenings-home, onboarding, profile */

/* ---------- yellow earmark (folded corner) ---------- */
.uma-disc-card-earmarked { position:relative; }
.uma-disc-earmark-label { position:absolute; top:0; right:0; width:var(--earmark-size); height:var(--earmark-size); overflow:hidden; z-index:2; border-top-right-radius:var(--app-default-radius-md); pointer-events:none; }
.uma-disc-earmark-label::before { content:""; position:absolute; top:0; right:0; width:0; height:0; border-style:solid; border-width:0 var(--earmark-size) var(--earmark-size) 0; border-color:transparent var(--yellow) transparent transparent; }
.uma-disc-earmark-label-text { position:absolute; top:var(--earmark-text-top); right:var(--earmark-text-right); color:var(--navy); font-size:var(--body-text-sm); font-weight:var(--font-weight-semi-bold); line-height:var(--default-line-height-single); text-align:right; z-index:3; }

/* ---------- rail layout ---------- */
.uma-rail-layout { display:grid; grid-template-columns:1fr auto; gap:var(--app-default-top-bottom-margin-xxxl); align-items:start; width:100%; }
.uma-rail-layout-aside { align-self:start; display:flex; flex-direction:column; gap:var(--app-default-top-bottom-margin-lg); }
.uma-rail-layout-main { display:flex; flex-direction:column; min-width:0; width:calc(var(--uma-disc-card-width) * 2 + var(--default-gap)); }
.uma-rail-layout-grid { display:flex; flex-wrap:wrap; align-content:flex-start; gap:var(--default-gap); width:100%; }
.uma-rail-layout-grid > * { flex:0 0 var(--uma-disc-card-width); width:var(--uma-disc-card-width); max-width:var(--uma-disc-card-width); }
.uma-discounts-title { line-height:var(--default-line-height-x-small); margin-bottom:var(--app-default-top-bottom-margin-md); }
.intro-column { width:100%; height:auto; max-width:var(--golden-width-small); padding-right:var(--default-left-right-desk-body-padding); } /* used: screening-results-pages */

/* ---------- VAT relief + partnerships card ---------- */

/* ---------- responsive ---------- */
@media (max-width:1100px) {
.uma-rail-layout { grid-template-columns:1fr; }
.uma-rail-layout-main { width:100%; }
.uma-rail-layout-grid > * { flex:0 0 calc((100% - var(--default-gap)) / 2); width:calc((100% - var(--default-gap)) / 2); max-width:none; }
}
@media (max-width:750px) {
.uma-rail-layout-grid { flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:var(--app-default-top-bottom-margin-sm); align-items:flex-start; }
.uma-rail-layout-grid::-webkit-scrollbar { display:none; }
.uma-rail-layout-grid > * { flex:0 0 var(--uma-disc-card-width-mobile); width:var(--uma-disc-card-width-mobile); max-width:var(--uma-disc-card-width-mobile); }
}
@media (max-width:600px) {
.intro-column { max-width:100%; padding-right:0; } /* used: screening-results-pages */
}

/* ---------- fixed-page scroll (scoped to body.uma-discounts-fixed) ---------- */
html:has(body.uma-discounts-fixed), body.uma-discounts-fixed { height:100%; overflow:hidden; } /* used: screenings */
body.uma-discounts-fixed .uma-chrome-all-content-wrapper { height:100%; } /* used: chrome, screenings-home, profile */
body.uma-discounts-fixed .uma-chrome-inner-content-wrapper { height:100%; display:flex; flex-direction:column; min-height:0; } /* used: chrome, screenings-home, profile */




/****************************REVIEWS PAGE (wrapped) — NEW ONLY********************************/



/* ---------- layout: golden split, only the card grid scrolls ---------- */

/* ---------- review card ---------- */
.uma-review-card { position:relative; display:flex; flex-direction:column; background-color:var(--card-default-background); border-radius:var(--app-default-radius-md); overflow:hidden; flex:0 1 var(--carouselle-card-width-review); max-width:var(--carouselle-card-width-review); aspect-ratio:var(--carouselle-card-ratio-review); }
.uma-review-band { position:relative; background-color:var(--yellow); color:var(--navy); padding:var(--app-default-top-bottom-margin-md) var(--default-card-left-right-padding) var(--app-default-top-bottom-margin-sm); }
.uma-review-stars { display:flex; gap:0.15rem; font-size:var(--button-icon-xxl); line-height:var(--default-line-height-single); color:var(--navy); }
.uma-review-quote-icon { font-style:normal; margin-right:var(--app-default-top-bottom-margin-xxxs); }
.uma-review-meta { margin-top:var(--app-default-top-bottom-margin-xs); font-size:var(--body-text-xs); color:var(--navy); }
.uma-review-body { flex:1 1 auto; display:flex; flex-direction:column; padding:var(--app-default-top-bottom-margin-xl) var(--default-card-left-right-padding) var(--default-card-bottom-padding); min-height:0; }
.uma-review-quote { font-size:var(--body-text-lg); line-height:var(--default-line-height-x-large); margin:0; overflow-y:auto; flex:1 1 auto; min-height:0; padding-right:var(--app-default-top-bottom-margin-xxxs); }
.uma-review-quote-text::before { content:'\201C'; }
.uma-review-quote-text::after  { content:'\201D'; }
.uma-review-quote::-webkit-scrollbar { width:var(--reviews-quote-scrollbar-size); }
.uma-review-quote::-webkit-scrollbar-thumb { background:rgba(var(--black-rgb), var(--opacity-low)); border-radius:var(--radius-pill); }

.uma-reviews-empty { flex:1 1 100%; padding:var(--reviews-empty-padding-y) var(--default-gap); text-align:center; color:var(--light-charcoal); font-size:var(--app-default-para-text); }

/* ---------- responsive ---------- */
@media (max-width:1050px) {
.switch.uma-reviews-switch-bar { display:inline-block; } /* used: chrome, screenings-home, profile */
.uma-review-card { flex:0 0 var(--carouselle-card-width-review); width:var(--carouselle-card-width-review); }
}
@media (max-width:750px) {
.uma-review-card { flex:0 0 auto; width:min(85%, var(--carouselle-card-width-review)); max-width:var(--carouselle-card-width-review); scroll-snap-align:start; }
}

/* ---------- standalone preview override (scoped, NOT for master) ---------- */
html:has(body.uma-reviews-standalone), body.uma-reviews-standalone { width:100%; height:100%; overflow-y:hidden; } /* used: screenings */
@media (min-width:751px) and (max-width:1050px) { html:has(body.uma-reviews-standalone), body.uma-reviews-standalone { height:100%; overflow-y:hidden; } } /* used: screenings */
@media (max-width:750px) { html:has(body.uma-reviews-standalone), body.uma-reviews-standalone { height:auto; overflow-y:auto; } } /* used: screenings */





/**************************************INTERVENTIONS PAGES********************************/

/* --- intervention menu --- */
.intervention-menu {
width: 100%;
height: 100px;
background: var(--bright-blue);
}

.intervention-menu-header { /* used: chrome */
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: var(--app-default-top-bottom-margin-xxxxl);
/*  padding-bottom: var(--app-default-top-bottom-margin-lg);*/
}

@media (max-width: 600px) {
.intervention-menu-header { /* used: chrome */
padding-top: var(--app-default-top-bottom-margin-xxxl);
padding-bottom: 0;
}
}

.intervention-menu-header-text {
max-width: calc(var(--max-body-wrapper-width) * var(--golden-ratio-large));
padding-left: var(--default-left-right-desk-body-padding);
padding-right: var(--mirror-right-padding);
}

@media (max-width: 600px) {
.intervention-menu-header-text {
padding-left: var(--default-left-right-mob-body-padding);
padding-right: var(--default-left-right-mob-body-padding);
}
}

.intervention-menu-header h1 { /* used: chrome */
font-size: var(--heading-size-xxl);
color: var(--bright-white);
line-height: var(--default-line-height-x-small);
max-width: 15ch;

padding-top: 0;
margin-top: 0;
margin-bottom: var(--app-default-top-bottom-margin-sm);
}

.intervention-menu-header p { /* used: chrome */
font-size: var(--body-text-sm);
line-height: var(--default-line-height-large);
color: var(--bright-white);
margin: 0;
margin-bottom: var(--app-default-top-bottom-margin-lg);
}




/* ══════════════════════════════════════════════
   ARTWORK CONTAINERS — SHARED BASE
   ══════════════════════════════════════════════ */
.app-artwork-media-library,
.audiobook-artwork-media-library,
.ebook-artwork-media-library,
.podcast-artwork-media-library,
.video-artwork-media-library,
.show-artwork-media-library,
.top-voice-artwork-media-library,
.app-artwork-drawer,
.audiobook-artwork-drawer,
.ebook-artwork-drawer,
.podcast-artwork-drawer,
.video-artwork-drawer,
.show-artwork-drawer,
.top-voice-artwork-drawer {
  display: block;
  align-self: flex-start;
  max-width: 100%;
  flex-shrink: 0;
  flex-grow: 0;
  overflow: hidden;
  position: relative;
}


.app-artwork-drawer img,
.audiobook-artwork-drawer img,
.ebook-artwork-drawer img,
.podcast-artwork-drawer img,
.video-artwork-drawer img,
.show-artwork-drawer img,
.top-voice-artwork-drawer img
 {
    display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}




/* ── ASPECT RATIOS + CORNER RADIUS ── */

/* Portrait (book ratio 1:1.5) */

/* Square (1:1) */

/* App drawer: square with larger radius */

/* Landscape (16:9) */
.video-artwork-media-library {
  aspect-ratio: var(--carouselle-card-ratio-video);
  border-radius: var(--app-default-radius-md);
}

/* Podcast + video drawer: full-width panes, no radius */
.podcast-artwork-drawer,
.video-artwork-drawer {
  aspect-ratio: var(--carouselle-card-ratio-video);
  border-radius: 0;
}

/* ── LIBRARY CARD WIDTHS ── */

/* Group A: voice, book, audiobook, show — 280 / 300 / 310 / 320 */

/* Group B: podcast — 280 / 300 / 340 / 360 / 380 */

/* Group C: video — 300 / 320 / 400 / 420 / 450 */
.video-artwork-media-library {
  width: var(--carouselle-card-xs);
}

/* Group D: app — 240 / 260 / 280 / 300 */

@media (min-width: 450px) {
  .video-artwork-media-library { width: var(--carouselle-card-md); }
}

@media (min-width: 600px) {
  .video-artwork-media-library { width: var(--carouselle-card-xxxl); }
}

@media (min-width: 900px) {
  .video-artwork-media-library { width: var(--carouselle-card-420); }
}

@media (min-width: 1280px) {
  .video-artwork-media-library { width: var(--carouselle-card-xxxxl); }
}

/* ── DRAWER HERO WIDTHS (mobile-first) ── */

/* Group E: book, audiobook, show — 260 / 280 / 300 / 320 */

/* Group F: app drawer — 180 / 200 / 240 / 260 */

/* Group G: podcast + video drawer — full width */
.podcast-artwork-drawer,
.video-artwork-drawer {
  width: 100%;
}

/* Group H: meet author/host/guest — 320 (same as top voices) */

/* 1. First Child (Holds artwork size without shrinking/clipping) */

/* 2. Second Child (Fills all remaining space) */


/* 1. All direct children must have snap alignment */

/* 2. Last child alignment & cleanup */




/* DESKTOP (Default): Vertical List */










/* --- intervention carousel --- */
.uma-fullscreen-default-carouselle {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
display: flex;
gap: var(--gap-regular);
padding-top: var(--app-default-top-bottom-margin-xl);
padding-bottom: var(--app-default-top-bottom-margin-xl);
padding-left: var(--default-left-right-desk-body-padding);
padding-right: var(--default-left-right-desk-body-padding);

scroll-snap-type: x mandatory;
scroll-padding-left: var(--default-left-right-desk-body-padding);
scroll-padding-right: var(--default-left-right-desk-body-padding);
}

.uma-fullscreen-default-carouselle::-webkit-scrollbar {
display: none;
}

.uma-disc-card-fixed-auto {
flex: 0 0 var(--uma-disc-card-width);
width: var(--uma-disc-card-width);
max-width: var(--uma-disc-card-width);
aspect-ratio: auto;
height: auto;
}

@media (max-width: 600px) {
.uma-fullscreen-default-carouselle {
padding-left: var(--default-left-right-mob-body-padding);
padding-right: var(--default-left-right-mob-body-padding);
scroll-padding-left: var(--default-left-right-mob-body-padding);
scroll-padding-right: var(--default-left-right-mob-body-padding);
}
}

.intervention-menu-item {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
background: transparent;
border: none;
scroll-snap-align: start;
}

.uma-fullscreen-default-carouselle > *:last-child {
scroll-snap-align: end;
}

.intervention-menu-item-icon {
font-size: var(--button-icon-xxxxl);
line-height: var(--default-line-height-single);
flex-shrink: 0;
color: var(--bright-white);
margin-bottom: var(--app-default-top-bottom-margin-lg);
transition: transform 0.3s ease;
}

.intervention-menu-item-icon-grow {
transition: transform 0.3s ease;
}
.intervention-menu-item:hover .intervention-menu-item-icon-grow {
transform: scale(1.15);
}
/*
.intervention-menu-item:hover .btn-secondary-white-on-dark-text-btn {
color: var(--bright-white);
background-color: rgba(var(--bright-white-rgb), var(--opacity-low));
}*/

.intervention-menu-item:hover .btn-secondary-white-on-dark-text-btn {
color: var(--bright-white);
background-color: rgba(249, 249, 249, 0.2);
}

.intervention-menu-item-label {
white-space: nowrap;
padding-left: var(--gap-lg);
padding-right: var(--gap-lg);
}

.intervention-menu-item-pill-selected {
background: var(--bright-white);
border-color: var(--bright-white);
color: var(--bright-blue);
}

/* --- golden-ratio content sections --- */
.section {
width: 100%;
position: relative;
transition: background-color 0.4s ease;
}

.intervention-section-moss-green      { background: var(--moss-green); }
.intervention-section-dark-sage-green { background: var(--dark-sage-green); }
.intervention-section-light-sage-green { background: var(--light-sage-green); }
.intervention-section-yellow          { background: var(--yellow); }
.intervention-section-mustard         { background: var(--mustard); }
.intervention-section-orange-dark     { background: var(--orange-dark); }
.intervention-section-red             { background: var(--red); }

.intervention-section {
display: flex;
max-width: var(--max-body-wrapper-width);
width: 100%;
}

.intervention-section-left {
width: 61.8%;
flex-shrink: 0;
background: var(--mid-white);
padding-top: var(--app-default-top-bottom-margin-xxxxl);
padding-left: var(--default-left-right-desk-body-padding);
padding-right: var(--mirror-right-padding);
padding-bottom: var(--app-default-top-bottom-margin-xxxxxl);
display: flex;
flex-direction: column;
justify-content: flex-start;
}

@media (max-width: 600px) {
.intervention-section-left {
padding-left: var(--default-left-right-mob-body-padding);
padding-right: var(--default-left-right-mob-body-padding);
}
}

.intervention-section-left h2 {
font-size: var(--intervention-heading-size);
color: var(--navy);
line-height: var(--default-line-height-single);
margin-bottom: var(--intervention-heading-margin-bottom);
}

.intervention-section-left p {
font-size: var(--body-text-sm);
margin-top: 0;
margin-bottom: var(--app-default-top-bottom-margin-sm);
padding-top: 0;
}

.intervention-section-left p:last-child {
margin-bottom: 0;
}

.intervention-section-right {
width: 38.2%;
flex-shrink: 0;
container-type: inline-size;
display: flex;
align-items: flex-start;
justify-content: flex-start;
transition: background-color 0.4s ease;
}

.intervention-section-right-moss-green      { background: var(--moss-green); }
.intervention-section-right-dark-sage-green { background: var(--dark-sage-green); }
.intervention-section-right-light-sage-green { background: var(--light-sage-green); }
.intervention-section-right-yellow          { background: var(--yellow); }
.intervention-section-right-mustard         { background: var(--mustard); }
.intervention-section-right-orange-dark     { background: var(--orange-dark); }
.intervention-section-right-red             { background: var(--red); }

@media (max-width: 600px) {
.intervention-section {
flex-direction: column;
min-height: 0;
background: var(--mid-white);
padding: 0 var(--default-left-right-mob-body-padding) 6rem;
}
.intervention-section-left,
.intervention-section-right {
display: contents;
} 

.intervention-img          { order: 1; }
.intervention-section-left h2 { order: 2; margin-top: var(--app-default-top-bottom-margin-xxl); margin-bottom: var(--app-default-top-bottom-margin-xxl); line-height: var(--default-line-height-x-small); }
.intervention-body  { order: 3; }
/*.intervention-body p:first-of-type { margin-top: var(--app-default-top-bottom-margin-xl); }*/
}

.intervention-img {
width: calc(80% + var(--sidebar-width));
aspect-ratio: 1 / 1;
/* height: 80cqw; */
border-radius: var(--app-default-radius-md);
overflow: hidden;
background: var(--bright-white);
margin-left: calc(-1 * var(--sidebar-width));
margin-top: calc(var(--app-default-top-bottom-margin-xxxxl) + var(--intervention-heading-size) + var(--intervention-heading-margin-bottom));
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}

@media (max-width: 900px) {
.intervention-img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
margin-top: calc(var(--app-default-top-bottom-margin-xxxxl) + (2 * (var(--intervention-heading-size) * var(--default-line-height-x-small))) + var(--intervention-heading-margin-bottom));
}
.intervention-section-left h2 {
line-height: var(--default-line-height-x-small);
}
}

@media (max-width: 600px) {
.intervention-img {
width: 100dvw;
max-width: none;
height: auto;
aspect-ratio: var(--carouselle-card-ratio-landscape);
border-radius: 0;
margin-left: calc(-1 * var(--default-left-right-mob-body-padding));
margin-top: 0;
}
.intervention-img .uma-disc-earmark-label { border-top-right-radius: 0; }
}

.intervention-img img {
padding: 0;
width: auto;
height: 100%;
max-width: 100%;
object-fit: contain;
display: block;
}

.intervention-img { position: relative; }
.intervention-img img.intervention-img-cover { width: 100%; object-fit: cover; }
.intervention-img > a { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }

.intervention-body {
transition: opacity 0.3s ease;
}

/* --- references accordion + support buttons --- */
.toggle-icon { /* used: screening-results-pages, learn-pages-homepage-legal */
font-size: var(--button-icon-xl);
line-height: var(--default-line-height-single);
transition: transform 0.3s ease;
display: flex;
align-items: center;
}
.override-left-right-padding { padding-left: 0; padding-right: 0; font-size: var(--body-text-xl) !important; }
.reference-text { font-size: var(--body-text-sm) !important; } /* used: screening-results-pages, learn-pages-homepage-legal */
.reference-italics { font-style: italic; } /* used: screening-results-pages, learn-pages-homepage-legal */
.reference-link { word-break: break-all; overflow-wrap: break-word; display: inline-block; max-width: 100%; } /* used: screening-results-pages, learn-pages-homepage-legal */

.support-buttons { display:flex; flex-direction:column; width:100%; gap:var(--gap-xs); margin-top:var(--app-default-top-bottom-margin-lg); margin-bottom:var(--app-default-top-bottom-margin-xxxl); }
.support-button-full { width:100%; gap:var(--gap-xxs); }


/* --- subnav --- */
.profile-nav-links { list-style: none; padding: 0; margin-left: 0; margin-top: 0; margin-bottom: 0; }
.profile-nav-links li a:hover { color: var(--orange) !important; }
.profile-nav-links li a:active { color: var(--navy) !important; }
.profile-nav-links { height: max-content; display: flex; justify-content: flex-end; align-items: baseline; white-space: nowrap; }
.profile-nav-links { width: auto; text-align: center; font-size: var(--subnav-link-font-size); }
.profile-nav-links li { font-size: var(--subnav-link-item-font-size) !important; }
@media (max-width:600px) { .profile-nav-links li { font-size: var(--subnav-link-item-font-size-mobile) !important; } }
.profile-nav-links a { display: block; position: relative; cursor: pointer; text-decoration: none; color: var(--mid-charcoal); line-height: var(--default-line-height-single); padding-top: calc((var(--subnav-row-height) - 1em) / 2 + var(--link-line-height)); padding-bottom: calc((var(--subnav-row-height) - 1em) / 2 - var(--link-line-height)); transition: color 0.3s ease; }
.profile-nav-links a { padding-left: var(--gap-xl); padding-right: var(--gap-xl); }
.profile-nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: var(--link-line-height); background-color: transparent; transition: background-color 0.3s ease; }
.profile-nav-links a::after { background-color: transparent; display: block; }
.profile-nav-links a.active::after { background-color: var(--navy); }
@media (max-width: 600px) {
.profile-nav-links { width:100%; height: auto; align-items: baseline; justify-content: flex-start; text-align: center; padding-left: 0; padding-right: 0; gap: 0; }
}
@media (max-width: 900px) {
.subnav-links { display: flex; flex-direction: row; align-items: baseline; width:100%; overflow-x: scroll; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; overflow-y: hidden; }
.subnav-links::-webkit-scrollbar { display: none; }
.profile-nav-links { min-width: max-content; justify-content: flex-start; overflow-y: visible; }
}
@media (min-width: 600px) {
.subnav-links { padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); }
}
@media (max-width: 600px) {
.subnav-links { padding-right: var(--default-left-right-mob-body-padding); }
}
.mob-button-text, .desktop-button-text { white-space: nowrap; display: inline-flex; } /* used: screening-results-pages */
@media (min-width: 900px) { .mob-button-text { display: none; } .desktop-button-text { display: inline; } }
@media (max-width: 900px) { .desktop-button-text { display: none !important; } .mob-button-text { display: inline; } }

/* --- subnav full-bleed override --- */

/* --- references drawer --- */
.references-wrapper { width: 100%; max-width: var(--golden-width-large); margin: 0 auto; text-align: left !important; } /* used: screening-results-pages */
.references-item { border-bottom: var(--stroke-thin) solid var(--dark-white); text-align: left !important; } /* used: screening-results-pages */
.references-button {
background-color: transparent;
font-weight: var(--font-weight-semi-bold);
padding-top: var(--app-default-top-bottom-margin-sm);
padding-bottom: var(--app-default-top-bottom-margin-sm);
padding-right: 0;
padding-left: 0;
width: 100%;
text-align: left !important;
border: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--dark-charcoal);
transition: background-color 0.3s ease, color 0.3s ease;
}
.references-button:hover, .references-button-toggle-hover:hover { color: var(--orange); }
.references-content { /* used: screening-results-pages */
text-align: left !important;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}
.references-content.open { /* used: screening-results-pages */
max-height: var(--accordion-open-max-height);
padding-top: var(--app-default-top-bottom-margin-sm);
padding-bottom: var(--app-default-top-bottom-margin-lg);

padding-right: 0;
padding-left: 0;
}
@media (max-width:600px) {
.references-content.open, .references-content { padding-left: 0; } /* used: screening-results-pages */
.references-button { padding-right: 0; padding-left: 0; }
}
.references-button-toggle {
font-size: var(--button-icon-xl);
line-height: var(--default-line-height-single);
transition: transform 0.3s ease;
display: flex;
align-items: center;
color: var(--dark-charcoal);
}

.intervention-img .intervention-embed {
width: 100%;
height: 100%;
border: 0;
display: block;
border-radius: inherit;
}

.intervention-img--embed {
aspect-ratio: auto;
height: auto;
}

.intervention-img--embed .intervention-embed {
height: 352px;
}

.intervention-img img.intervention-img-padded {
width: 100%;
height: 100%;
object-fit: contain;
padding: var(--uma-disc-card-img-padding-md);
background-color: var(--product-tile-bg);
box-sizing: border-box;
}





/* NEW: .intervention-menu-carousel-box
Second blue box holding the carousel. This is what sticks. */
.intervention-menu-carousel-box {
background: var(--bright-blue);
padding-bottom: var(--app-default-top-bottom-margin-lg); /* desktop */
position: sticky;
top: var(--fixed-header-height);
z-index: 5;
}

/* NEW: temporary fixed white header.
TEMPORARY — remove once the real app chrome is in place. */

/* Mobile: carousel box drops its bottom padding */
@media (max-width: 599px) {
.intervention-menu-carousel-box { padding-bottom: 0; }
}

/* NOTE: .intervention-sticky-scope is a structural wrapper div
(carousel-box + #intervention-frame). It needs NO CSS of its own —
position:sticky on the child is enough. Listed here only so you
know the markup wrapper exists. */



/* =====================================================================
UMA.css additions — INTERVENTION / STRATEGY PAGES (this session)
Wand earmark + wish-list confirmation pill.
[REPLACES] = swap the body of an existing rule.  [NEW] = add it.
Design values use existing UMA.css tokens.
===================================================================== */

/* [REPLACES] image wrap becomes the positioning context so the pill centres
on the IMAGE (add position:relative to the existing rule). */
.uma-disc-product-img-wrap { position:relative; width:100%; aspect-ratio:1/1; border-top-left-radius:var(--app-default-radius-md); border-top-right-radius:var(--app-default-radius-md); flex-shrink:0; overflow:hidden; background-color:var(--product-tile-bg); }

/* [REPLACES] earmarked wand corner — green -> orange */
.uma-disc-wand-earmark--added .uma-disc-wand-earmark-corner { border-color:transparent var(--orange) transparent transparent; }

/* [NEW] confirmation pill centred on the product image.
green = added ("on wish list"); red variant = removed ("off wish list"). */
.uma-disc-wishpill { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.9); display:inline-flex; align-items:center; gap:var(--gap-sm); padding:var(--gap-md) var(--gap-lg); border-radius:var(--radius-pill); background:var(--bright-green); color:var(--bright-white); font-size:var(--body-text-lg); font-weight:var(--font-weight-bold); white-space:nowrap; box-shadow:var(--canvas-sheet-shadow); opacity:var(--opacity-hidden); pointer-events:none; z-index:6; transition:opacity var(--transition-fast) ease, transform var(--transition-fast) ease; }
.uma-disc-wishpill.show { opacity:var(--opacity-visible); transform:translate(-50%,-50%) scale(1); }
.uma-disc-wishpill i { color:var(--bright-white); font-size:var(--button-icon-md); }
.uma-disc-wishpill--off { background:var(--tomato); }

/* [NEW] visually-hidden utility for the aria-live announcer.
(Skip if you already have .sr-only / .visually-hidden.) */
.uma-visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* used: screening-results-pages, profile, learn-pages-homepage-legal, auth */


/* ============================================================
DISCOUNT CAROUSEL — cluster grouping
(container .uma-fullscreen-default-carouselle already in UMA.css;
these add the cluster-by-intervention flex behaviour)
============================================================ */
.uma-disc-carousel { display:flex; flex-direction:row; }

/* ============================================================
WAND EARMARK — add-to-wishlist control on a product card
(child of .uma-disc-product-card; UMA.css already has the
.uma-disc-wand-earmark--added corner rule)
============================================================ */
.uma-disc-wand-earmark {
--wand-earmark-size:75px; --wand-icon-top:11px; --wand-icon-right:11px; /* used: chrome, screenings-home, onboarding, profile */
position:absolute; top:0; right:0;
width:var(--wand-earmark-size); height:var(--wand-earmark-size);
padding:0; margin:0; border:0; background:transparent; cursor:pointer;
z-index:4; overflow:hidden;
border-top-right-radius:var(--app-default-radius-md);
opacity:var(--opacity-hidden);
transition:opacity var(--transition-base) ease;
}
.uma-disc-wand-earmark:focus-visible:where(:not(.uma-input-pointer *)) { outline:2px solid var(--bright-white); outline-offset:-2px; }

.uma-disc-wand-earmark-corner {
position:absolute; top:0; right:0; width:0; height:0;
border-style:solid;
border-width:0 var(--wand-earmark-size) var(--wand-earmark-size) 0;
border-color:transparent var(--yellow) transparent transparent;
}
.uma-disc-wand-earmark-icon {
position:absolute; top:var(--wand-icon-top); right:var(--wand-icon-right);
color:var(--bright-white); font-size:1.5rem;
line-height:var(--default-line-height-single);
z-index:5; transition:opacity var(--transition-fast) ease;
}

/* reveal the earmark on card hover / focus */
.uma-disc-product-card:hover .uma-disc-wand-earmark,
.uma-disc-product-card:focus-within .uma-disc-wand-earmark { opacity:var(--opacity-visible); }

/* states */
.uma-disc-wand-earmark--removing .uma-disc-wand-earmark-corner { border-color:transparent var(--tomato) transparent transparent; }
.uma-disc-wand-earmark--hidden .uma-disc-wand-earmark-corner,
.uma-disc-wand-earmark--hidden .uma-disc-wand-earmark-icon { opacity:var(--opacity-hidden); }

/* ============================================================
INTERVENTION SECTION / IMAGE variants
============================================================ */
.intervention-section-dark-orange { background: var(--orange-dark); }
.intervention-section-right-dark-orange { background: var(--orange-dark); }
.intervention-img--canvas { aspect-ratio: 297 / 210; border-radius: 0; }

/************************************** UMA CANVAS CSS **********************************/
/************************************** UMA CANVAS CSS **********************************/


/* ---------- 2. NEW RULES (append to bottom of uma-app.css) ---------- */
/* canvas modifier (do NOT touch base .uma-chrome-all-content-wrapper) */ /* used: chrome, screenings-home, profile */
.uma-canvas-wrapper { position:fixed;top:var(--fixed-header-height);left:var(--sidebar-width);right:0;bottom:0;margin:0;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden }
/* canvas modifier (do NOT touch base .uma-chrome-inner-content-wrapper) */ /* used: chrome, screenings-home, profile */
.uma-canvas-inner { position:relative;flex:1;min-height:0;width:100%;max-width:none;margin-top:0;display:flex;flex-direction:column;padding:var(--inner-wrapper-margin-top-desktop) var(--default-left-right-desk-body-padding) 0;box-sizing:border-box;overflow:hidden }
.inner-wrapper-overide-max-screen { padding:0 !important }
.uma-guide-controls-layer { z-index:40;pointer-events:none }
.uma-guide-controls-inner-no-pad { padding-top:0 !important;padding-bottom:0 !important;justify-content:flex-start }
.uma-canvas-nav { display:flex;align-items:flex-start;justify-content:space-between;width:100%;margin-top:var(--app-default-top-bottom-margin-sm);flex-shrink:0;pointer-events:none }
.uma-logo { position:absolute;top:var(--canvas-logo-top);right:var(--canvas-logo-right);width:var(--button-size-xl);aspect-ratio:1/1;flex-shrink:0;fill:var(--navy) }
.uma-canvas-zoom .btn { width:var(--button-size-md);height:var(--button-size-md);padding:0;display:flex;align-items:center;justify-content:center } /* used: chrome, screenings-home, onboarding, profile */
.uma-canvas-zoom .btn:first-child { border-top-left-radius:var(--app-default-radius-sm);border-top-right-radius:var(--app-default-radius-sm);border-bottom:none } /* used: chrome, screenings-home, onboarding, profile */
.uma-canvas-zoom .btn:last-child { border-bottom-left-radius:var(--app-default-radius-sm);border-bottom-right-radius:var(--app-default-radius-sm) } /* used: chrome, screenings-home, onboarding, profile */
.uma-canvas-title-row { display:flex;gap:var(--gap-xl);width:var(--canvas-sheet-width);align-items:stretch;margin-bottom:var(--app-default-top-bottom-margin-xxl) }
.uma-canvas-title-tile h1 { color:var(--bright-white);line-height:var(--default-line-height-x-small);margin-bottom:var(--app-default-top-bottom-margin-xl) }
.uma-canvas-title-tile p { color:var(--bright-white) }
.uma-canvas-title-tile .legal { font-weight:var(--font-weight-medium);background:rgba(var(--bright-white-rgb),.1);border-radius:var(--app-default-radius-sm);padding:var(--gap-md) var(--gap-regular);margin-bottom:0;display:flex;gap:var(--gap-sm);align-items:flex-start;text-align:left;line-height:var(--default-line-height-small) }  /* job-crafting only */
.uma-canvas-title-tile .legal i { flex:0 0 auto;margin-top:var(--gap-xxs);color:var(--bright-white);font-size:var(--button-icon-sm) }  /* job-crafting only */
.uma-canvas-title-tile .legal span { flex:1;min-width:0 }  /* job-crafting only */
.uma-canvas-title-tile .legal strong { font-weight:var(--font-weight-bold) }  /* job-crafting only */
.theoryrow { display:flex;flex-direction:column;gap:var(--gap-sm);width:var(--canvas-sheet-width);margin-bottom:var(--app-default-top-bottom-margin-xxl) }  /* job-crafting only */
.theoryrow details { background:var(--bright-white);border:var(--stroke-thin) solid var(--dark-white);border-radius:var(--app-default-radius-md);overflow:hidden }  /* job-crafting only */
.theoryrow summary { list-style:none;cursor:pointer;height:var(--button-size-xxl);box-sizing:border-box;padding:0 var(--gap-lg);display:flex;align-items:center;gap:var(--gap-md);font-weight:var(--font-weight-semi-bold);color:var(--navy);font-size:var(--body-text-lg) }  /* job-crafting only */
.theoryrow summary h2 { font-size:var(--heading-size-md);font-weight:var(--font-weight-semi-bold);color:var(--navy);margin:0;line-height:var(--default-line-height-x-small) }  /* job-crafting only */
.theoryrow details[open] summary { padding-bottom:0 }  /* job-crafting only */
.theoryrow summary::-webkit-details-marker { display:none }  /* job-crafting only */
.theoryrow .ttoggle { position:relative;flex:0 0 auto;width:var(--canvas-toggle-size);height:var(--canvas-toggle-size);display:inline-block }  /* job-crafting only */
.theoryrow .ttoggle::before,.theoryrow .ttoggle::after { content:"";position:absolute;background:var(--navy);transition:opacity var(--transition-fast) }  /* job-crafting only */
.theoryrow .ttoggle::before { left:0;top:50%;width:100%;height:var(--stroke-thick);transform:translateY(-50%) }  /* job-crafting only */
.theoryrow .ttoggle::after { top:0;left:50%;height:100%;width:var(--stroke-thick);transform:translateX(-50%) }  /* job-crafting only */
.theoryrow details[open] .ttoggle::after { opacity:0 }  /* job-crafting only */
.theoryrow .tbody { padding:var(--app-default-top-bottom-margin-xl) var(--gap-lg) var(--app-default-top-bottom-margin-xxxl) }  /* job-crafting only */
.theoryrow .tbody p { font-size:var(--body-text-lg);padding-left:2rem;margin-bottom:var(--app-default-top-bottom-margin-xl);line-height:var(--default-line-height-large);max-width:calc(var(--canvas-sheet-width) * 0.618 - 38px) }  /* job-crafting only */
.theoryrow .tbody p:last-child { margin-bottom:0 }  /* job-crafting only */
.uma-canvas-shortcuts dl>div { display:flex;align-items:center;gap:var(--gap-md) }
.uma-canvas-shortcuts dt { display:flex;align-items:center;gap:var(--gap-xxs);flex:0 0 auto;font-size:var(--app-section-para-text);color:var(--light-charcoal) }
.uma-canvas-shortcuts kbd { display:inline-flex;align-items:center;justify-content:center;min-width:var(--button-size-md);height:var(--button-size-md);padding:0 var(--gap-md);font-size:var(--body-text-xxl);font-weight:var(--font-weight-semi-bold);color:var(--mid-charcoal);background:var(--bright-white);border:var(--stroke-thin) solid var(--mid-mushroom);border-bottom-width:var(--stroke-thick);border-radius:var(--app-default-radius-sm);line-height:1 }
.uma-canvas-shortcuts .uma-canvas-shortcut-symbol { font-size:var(--heading-size-md);margin-left:var(--gap-xs) }
.uma-canvas-shortcuts dd { font-size:var(--app-section-para-text);color:var(--mid-charcoal);margin:0;line-height:var(--default-line-height-x-small) }
.howhead { font-size:var(--heading-size-md);font-weight:var(--font-weight-semi-bold);color:var(--navy);margin-bottom:var(--app-default-top-bottom-margin-lg);line-height:var(--default-line-height-x-small);width:var(--canvas-sheet-width) }  /* job-crafting only */
.howrow { display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;align-items:stretch;gap:var(--gap-xl);width:var(--canvas-sheet-width);margin-bottom:var(--app-default-top-bottom-margin-xxl) }  /* job-crafting only */
.howcard { display:flex;flex-direction:column;height:100%;background:var(--bright-white);border:var(--stroke-thin) solid var(--dark-white);border-radius:var(--app-default-radius-md);padding:var(--app-default-top-bottom-margin-xxl) var(--app-default-top-bottom-margin-xxl) var(--app-default-top-bottom-margin-xxxxl) }  /* job-crafting only */
.howcard h3 { font-size:var(--heading-size-md);font-weight:var(--font-weight-semi-bold);color:var(--navy);margin-bottom:var(--gap-md);line-height:var(--default-line-height-x-small) }  /* job-crafting only */
.howcard p { font-size:var(--body-text-lg);font-weight:var(--font-weight-normal);line-height:var(--default-line-height-large);margin-bottom:var(--gap-md) }  /* job-crafting only */
.howcard p:last-child { margin-bottom:0 }  /* job-crafting only */
.uma-canvas-download-button { position:fixed;bottom:var(--default-left-right-desk-body-padding);right:var(--default-left-right-desk-body-padding);z-index:40;gap:var(--gap-xs) }
.uma-canvas-viewport { position:relative;flex:1;min-height:0;width:100%;overflow:hidden;touch-action:none }
.uma-canvas-stage { position:absolute;top:0;left:50%;transform-origin:top center;transition:transform .1s ease-out }
.uma-canvas-column { position:relative;display:flex;flex-direction:column;gap:var(--app-default-top-bottom-margin-xxl);align-items:center;padding-bottom:var(--app-default-top-bottom-margin-xxxxl) }


.uma-canvas-unit { display:flex;flex-direction:column;gap:var(--gap-regular);align-items:center }



.uma-canvas-identity-row { display:flex;align-items:flex-end;justify-content:flex-start;gap:var(--gap-xxl);width:100% }
.uma-canvas-creator-name { position:relative;display:flex;align-items:center;gap:var(--gap-regular);border-bottom:var(--stroke-thick) solid transparent;padding-bottom:var(--gap-xxs);transition:border-color var(--transition-fast) }
.uma-canvas-creator-name:hover { border-bottom-color:var(--dark-white) }
.uma-canvas-creator-name .uma-canvas-name-input { border-bottom:none;padding:0 var(--gap-sm) 0 0;white-space:nowrap;min-width:70px }
.uma-canvas-creator-name .uma-canvas-identity-tag { flex:0 0 auto }
.uma-canvas-neurotype-group { display:flex;flex-direction:column;gap:var(--gap-xxs);padding-bottom:var(--gap-xxs);border-bottom:var(--stroke-thick) solid transparent }
.uma-canvas-neurotype-pills { position:relative;display:flex;flex-wrap:wrap;gap:var(--gap-xxs) }
.uma-canvas-also-label { font-size:var(--canvas-pt-xs);font-weight:var(--font-weight-semi-bold);color:var(--light-charcoal) }
.uma-canvas-identity-tag { position:relative;display:inline-flex;align-items:center;height:var(--button-size-md);background:var(--mid-white);border:var(--stroke-thin) solid var(--dark-white);border-radius:var(--radius-pill);padding:var(--gap-xxs) var(--gap-lg) var(--gap-xxs) var(--gap-sm);font-size:var(--canvas-pt-xs) }
.uma-canvas-identity-tag .bin { position:absolute;right:var(--gap-xs);opacity:var(--opacity-hidden);color:var(--light-charcoal);cursor:pointer;font-size:var(--button-icon-xs);padding:var(--gap-sm);margin:calc(-1 * var(--gap-sm)) }
.uma-canvas-identity-tag .bin:hover { opacity:var(--opacity-visible);color:var(--bright-white) }
.uma-canvas-identity-tag:has(.bin:hover) { background:var(--tomato);border-color:transparent;color:var(--bright-white) }
.uma-canvas-tag-add { cursor:pointer;color:var(--light-charcoal);gap:var(--gap-xs);padding-left:var(--gap-xxs) }
.uma-canvas-tag-add:hover { border-color:var(--orange);color:var(--orange) }
.uma-canvas-tag-add .addc { width:var(--canvas-add-circle);aspect-ratio:1/1;border-radius:var(--radius-circle);border:var(--stroke-thick) solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:var(--button-icon-xs);flex:0 0 auto }
.uma-canvas-allergies-option { padding:var(--gap-xs) var(--gap-sm);border-radius:var(--app-default-radius-xs);font-size:var(--body-text-xs);cursor:pointer;display:flex;align-items:center;gap:var(--gap-xs) }
.uma-canvas-allergies-option:hover { background:var(--mid-white) }
.uma-canvas-allergies-custom { border-top:var(--stroke-thin) solid var(--mid-white);margin-top:var(--gap-xxs);color:var(--orange);font-weight:var(--font-weight-semi-bold) }
.uma-canvas-name-input { display:inline-block;font-family:'Caveat',cursive;font-size:var(--canvas-pt-xxl);font-weight:var(--font-weight-semi-bold);color:var(--dark-charcoal);padding:0 var(--gap-xxs) var(--gap-xxs);min-width:70px;outline:none;cursor:text;white-space:nowrap }
.uma-canvas-name-input:empty::before { content:"Your name";color:var(--lightest-charcoal) }
.grid-wrap { flex:1;display:flex;gap:var(--gap-md);min-height:0;padding:var(--app-default-top-bottom-margin-xl) 116px var(--gap-md) 60px }  /* job-crafting only */
.yaxis { flex:0 0 4px;position:relative }  /* job-crafting only */
.gridcol { flex:1;display:flex;flex-direction:column;min-width:0 }  /* job-crafting only */
.grid { position:relative;flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;border:var(--stroke-thin) solid var(--dark-white) }  /* job-crafting only */
.quad { position:relative;border:var(--stroke-hairline) dashed rgba(var(--black-rgb),.12);display:flex;flex-direction:column;overflow:hidden }  /* job-crafting only */
.quad .qlabel { position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--gap-xxs);cursor:pointer;padding:var(--gap-md);pointer-events:auto }  /* job-crafting only */
.quad .qname { font-size:var(--canvas-pt-lg);font-weight:var(--font-weight-bold);line-height:var(--default-line-height-x-small);display:flex;align-items:center;gap:var(--gap-xxs);justify-content:center }  /* job-crafting only */
.quad .qaction { font-size:var(--canvas-pt-md);font-weight:var(--font-weight-semi-bold);line-height:1.3;opacity:.92 }  /* job-crafting only */

/*
.quad.q-low { background:rgba(169, 60, 30, 0.09) }  */

.quad.q-low { background:rgba(169, 60, 30, 0.09) }/* job-crafting only */

.quad.q-low .qname,.quad.q-low .qaction { color:var(--red-dark) }  /* job-crafting only */



.quad.q-growth .qname,.quad.q-growth .qaction { color:var(--bright-green) }  /* job-crafting only */



.quad.q-forced .qname,.quad.q-forced .qaction { color:var(--mustard) }  /* job-crafting only */

/*
.quad.q-growth { background:rgba(35, 104, 59, 0.09) }  
.quad.q-forced { background:rgba(176, 130, 17, 0.12) }  
.quad.q-optimum { background:rgba(0, 101, 112, 0.09) }  */

.quad.q-growth { background:rgba(35, 104, 59, 0.09) }  /* job-crafting only */
.quad.q-forced { background:rgba(176, 130, 17, 0.12) }  /* job-crafting only */
.quad.q-optimum { background:rgba(0, 101, 112, 0.09) }  /* job-crafting only */


.quad.q-optimum .qname,.quad.q-optimum .qaction { color:var(--dark-teal) }  /* job-crafting only */
.grid { overflow:visible }  /* job-crafting only */
.axline { position:absolute;z-index:4;background:var(--mid-charcoal);pointer-events:none }  /* job-crafting only */
.axline-x { left:0;right:calc(-1 * var(--gap-regular));top:50%;height:var(--stroke-thick);transform:translateY(-50%) }  /* job-crafting only */
.axarrow { position:absolute;font-size:var(--button-icon-xxl);line-height:1 }  /* job-crafting only */
.axline-x .axarrow { right:calc(-1 * var(--gap-lg));top:50%;transform:translateY(-50%) }  /* job-crafting only */
.axline-yc { top:calc(-1 * var(--gap-regular));bottom:0;left:50%;width:var(--stroke-thick);transform:translateX(-50%) }  /* job-crafting only */
.axline-yc .axarrow { top:calc(-1 * var(--gap-lg));left:50%;transform:translateX(-50%) }  /* job-crafting only */
.axlbl { position:absolute;font-size:var(--canvas-pt-md);font-weight:var(--font-weight-bold);padding:var(--gap-xxs) var(--gap-xxs);white-space:nowrap;line-height:1.2 }  /* job-crafting only */
.axlbl-top { bottom:100%;left:50%;transform:translate(-50%,-22px) }  /* job-crafting only */
.axlbl-bot { top:100%;left:50%;transform:translate(-50%,16px) }  /* job-crafting only */
.axlbl-left { right:100%;top:50%;transform:translate(-6px,-50%);text-align:right;white-space:normal;max-width:11ch;width:max-content }  /* job-crafting only */
.axlbl-right { left:100%;top:50%;transform:translate(28px,-50%);white-space:normal;max-width:11ch;width:max-content }  /* job-crafting only */
.plot { position:absolute;inset:0;z-index:3 }  /* job-crafting only */
.plot.over { background:rgba(var(--orange),.04) }  /* job-crafting only */
.ptask { position:absolute;transform:translate(-50%,-50%);max-width:280px;background:var(--navy);color:var(--bright-white);border-radius:var(--app-default-radius-md);padding:var(--gap-xxs) var(--gap-lg) var(--gap-xxs) var(--gap-sm);font-size:var(--canvas-pt-xs);font-weight:var(--font-weight-medium);line-height:var(--default-line-height-x-small);cursor:grab;user-select:none;box-shadow:0 2px 6px rgba(var(--black-rgb),.2);overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden }  /* job-crafting only */
.ptask .px { position:absolute;right:7px;top:50%;transform:translateY(-50%);opacity:var(--opacity-hidden);color:var(--bright-white);cursor:pointer;font-size:var(--button-icon-xs) }  /* job-crafting only */
.ptask .px:hover { opacity:var(--opacity-visible) }  /* job-crafting only */
.qpop { position:absolute;z-index:60;width:300px;background:var(--bright-white);border:var(--stroke-thin) solid var(--dark-white);border-radius:var(--app-default-radius-md);box-shadow:0 8px 30px rgba(var(--black-rgb),.16);padding:var(--gap-md) var(--gap-lg);display:none }  /* job-crafting only */
.qpop.open { display:block }  /* job-crafting only */
.qpop h4 { font-size:var(--canvas-pt-md);font-weight:var(--font-weight-bold);margin-bottom:var(--app-default-top-bottom-margin-xxs);line-height:var(--default-line-height-x-small) }  /* job-crafting only */
.qpop p { font-size:var(--canvas-pt-xs);line-height:var(--default-line-height-small);margin-bottom:var(--app-default-top-bottom-margin-xxs) }  /* job-crafting only */
.qpop p:last-child { margin-bottom:0 }  /* job-crafting only */
.qpop .qpx { position:absolute;top:10px;right:10px;cursor:pointer;color:var(--light-charcoal);font-size:var(--button-icon-sm) }  /* job-crafting only */
.qpop .qpx:hover { color:var(--mid-charcoal) }  /* job-crafting only */
.uma-canvas-page-footer { display:flex;justify-content:space-between;align-items:center;padding-top:var(--gap-md);margin-top:var(--gap-md);border-top:var(--stroke-thick) solid var(--mid-white);font-size:var(--canvas-pt-xs);color:var(--lightest-charcoal) }
.platsheet .uma-canvas-page-footer { border-top:none;padding-top:0 }  /* job-crafting only */
.uma-canvas-page-footer>* { flex:1 }
.uma-canvas-page-footer>:nth-child(1) { text-align:left }
.uma-canvas-page-footer>:nth-child(2) { text-align:center }
.uma-canvas-page-footer>:nth-child(3) { text-align:right }
.uma-canvas-page-footer a { color:var(--orange);text-decoration:none;font-weight:var(--font-weight-semi-bold) }
.uma-canvas-postit-tray .th { font-size:var(--body-text-xs);color:var(--light-charcoal);margin-bottom:var(--gap-sm);display:flex;align-items:center;gap:var(--gap-xs) }
.tnotes { display:flex;flex-wrap:wrap;gap:var(--gap-xs);align-content:flex-start }  /* job-crafting only */
.tnote { width:var(--canvas-note-size-lg);aspect-ratio:1/1;flex:0 0 auto;overflow:hidden;background:var(--navy);color:var(--bright-white);border-radius:var(--app-default-radius-xs);padding:var(--gap-sm);font-size:var(--body-text-xs);font-weight:var(--font-weight-medium);line-height:var(--default-line-height-x-small);cursor:grab;user-select:none;outline:none;display:flex;align-items:flex-start;box-shadow:0 2px 5px rgba(var(--black-rgb),.12) }  /* job-crafting only */
.tnote.gone { display:none }  /* job-crafting only */
.tnote.blank { background:transparent;border:var(--canvas-dashed-border);color:var(--light-charcoal);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:var(--gap-xxs);box-shadow:none;text-align:center }  /* job-crafting only */
.tnote.blank:hover { border-color:var(--orange);color:var(--orange) }  /* job-crafting only */
.tnote.blank .addcircle { width:var(--canvas-add-circle);aspect-ratio:1/1;border-radius:var(--radius-circle);border:var(--stroke-thin) solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:var(--button-icon-xs) }  /* job-crafting only */
.ranksheet .rgridbody { flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-xl);min-height:0;margin-top:var(--app-default-top-bottom-margin-xxxl) }  /* job-crafting only */
.rzone { display:flex;flex-direction:column;min-height:0;border-top:4px solid currentColor;padding-top:var(--gap-xs) }  /* job-crafting only */
.rzone.rz-low { color:var(--red-dark) }  /* job-crafting only */
.rzone.rz-forced { color:#7a5a09 }  /* job-crafting only */
.rzone.rz-optimum { color:var(--dark-teal) }  /* job-crafting only */
.rzone.rz-growth { color:var(--bright-green) }  /* job-crafting only */
.rzhead { display:flex;flex-direction:column;gap:var(--gap-xxs);margin-bottom:var(--app-default-top-bottom-margin-lg) }  /* job-crafting only */
.rztitle { font-size:var(--canvas-pt-md);font-weight:var(--font-weight-bold);line-height:var(--default-line-height-x-small) }  /* job-crafting only */
.rzaction { font-size:var(--canvas-pt-xs);font-weight:var(--font-weight-semi-bold);opacity:.9 }  /* job-crafting only */
.rzguide { font-size:var(--canvas-pt-xs);font-weight:var(--font-weight-normal);opacity:.78;margin-top:var(--gap-xxs) }  /* job-crafting only */
.rrows { flex:1;min-height:0;display:flex;flex-direction:column;gap:0;overflow:hidden }  /* job-crafting only */
.rrow { display:flex;align-items:baseline;gap:var(--gap-xs);padding:var(--gap-xxs) var(--gap-xxs);border-bottom:var(--stroke-thin) solid var(--mid-white);font-size:var(--canvas-pt-xs);line-height:var(--default-line-height-x-small) }  /* job-crafting only */
.rrow::before { content:"";flex:0 0 auto;width:var(--canvas-bullet-dot-size);aspect-ratio:1/1;border-radius:var(--radius-circle);background:currentColor;transform:translateY(-1px) }  /* job-crafting only */
.rrow .rn { flex:1 }  /* job-crafting only */
.rempty { color:var(--lightest-charcoal);font-size:var(--canvas-pt-xs);padding:var(--gap-xxs) var(--gap-xxs);line-height:var(--default-line-height-small) }  /* job-crafting only */
.uma-canvas-wishlist-grid { align-self:flex-start;flex:0 0 458px;width:458px;min-height:458px;border:var(--canvas-dashed-border);border-radius:var(--app-default-radius-sm);padding:var(--gap-md);display:grid;grid-template-columns:repeat(4,96px);column-gap:var(--gap-md);row-gap:var(--gap-sm);align-content:flex-start;justify-content:flex-start;transition:border-color var(--transition-fast),background var(--transition-fast);position:relative }  /* job-crafting only */
.uma-canvas-wishlist-grid .uma-canvas-dropzone-hint { grid-column:1/-1;width:100%;margin:auto;color:var(--lightest-charcoal);font-size:var(--canvas-pt-xs);text-align:center }  /* job-crafting only */
.uma-canvas-wishlist-grid.over { background:var(--new-white) }
.uma-canvas-wishlist-grid.has .uma-canvas-dropzone-hint { display:none }
.wadd { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--button-size-xxl);height:var(--button-size-xxl);border-radius:var(--radius-circle);border:var(--stroke-hairline) solid var(--light-charcoal);background:transparent;color:var(--light-charcoal);font-size:var(--button-icon-xxl);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-base),border-color var(--transition-base),color var(--transition-base) }
.wadd:hover { background:var(--hover-overlay-light);color:var(--mid-charcoal);border-color:var(--mid-charcoal) }
.uma-canvas-wishlist-grid.has .wadd { display:none }
.uma-canvas-wishlist-item .pic { position:relative;width:var(--canvas-wcell-size);height:var(--canvas-wcell-size);border-radius:var(--app-default-radius-sm);display:flex;align-items:center;justify-content:center;color:var(--bright-white);font-size:var(--button-icon-xxl) }
.uma-canvas-wishlist-item-remove { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--button-size-md);height:var(--button-size-md);border-radius:var(--radius-circle);background:var(--tomato);color:var(--bright-white);display:flex;align-items:center;justify-content:center;font-size:var(--button-icon-sm);opacity:var(--opacity-hidden);cursor:pointer;transition:opacity var(--transition-fast) }
.uma-canvas-wishlist-item:hover .uma-canvas-wishlist-item-remove { opacity:var(--opacity-visible) }
.uma-canvas-wishlist-item .cap { font-size:var(--canvas-pt-xs);text-align:center;line-height:var(--default-line-height-x-small) }
.uma-canvas-cost-list { flex:1;display:flex;flex-direction:column;min-width:0;padding-left:var(--gap-xl) }
.uma-canvas-cost-list .rows { flex:1;min-height:0;display:flex;flex-direction:column;gap:0;overflow:hidden }
.uma-canvas-cost-row .wn { flex:1 }
.uma-canvas-cost-row .wp { font-weight:var(--font-weight-semi-bold);white-space:nowrap }
.uma-canvas-cost-row .wx { opacity:var(--opacity-hidden);color:var(--light-charcoal);cursor:pointer;font-size:var(--button-icon-xs);padding:var(--gap-sm);margin:calc(-1 * var(--gap-sm)) }
.uma-canvas-cost-row .wx:hover { opacity:var(--opacity-visible);color:var(--tomato) }  /* job-crafting only */
.uma-canvas-cost-value { outline:none;min-width:1ch;border-bottom:var(--stroke-thick) dashed transparent;cursor:text }
.uma-canvas-wishlist-empty { color:var(--lightest-charcoal);font-size:var(--canvas-pt-xs);padding:var(--gap-xs) var(--gap-xxs) }
.uma-canvas-cost-totals { margin-top:auto }
.uma-canvas-cost-subtotal { display:flex;justify-content:space-between;padding:var(--gap-xxs) var(--gap-xxs);font-size:var(--canvas-pt-xs);color:var(--light-charcoal);line-height:var(--default-line-height-x-small) }
.uma-canvas-cost-total { display:flex;justify-content:space-between;padding:var(--gap-xs) var(--gap-xxs) 0;font-size:var(--canvas-pt-sm);font-weight:var(--font-weight-bold);border-top:var(--stroke-thick) solid var(--dark-white);margin-top:var(--gap-xxs) }
.uma-canvas-tech-tray .uma-canvas-tray-clusters { display:flex;flex-direction:column;gap:var(--gap-lg);align-items:stretch }  /* job-crafting only */
.uma-jobcraft-page .uma-canvas-tech-tray .uma-canvas-tray-cluster {width:100%;display:flex;flex-direction:column;gap:var(--gap-sm)}  /* job-crafting only */
.uma-canvas-tech-tray .uma-canvas-tray-cluster .clh { font-size:var(--body-text-xs);font-weight:var(--font-weight-bold);color:var(--light-charcoal);margin-bottom:var(--gap-xxs) }  /* job-crafting only */
.uma-jobcraft-page .uma-canvas-tech-tray .uma-canvas-postit-grid {display:flex;flex-wrap:wrap;gap:var(--gap-xs);align-content:flex-start}  /* job-crafting only */
.wnote { width:var(--canvas-note-size-lg);aspect-ratio:1/1;flex:0 0 auto;overflow:hidden;border-radius:var(--app-default-radius-xs);padding:var(--gap-sm);font-size:var(--body-text-xs);font-weight:var(--font-weight-medium);line-height:var(--default-line-height-x-small);color:var(--bright-white);background:var(--navy);cursor:grab;user-select:none;outline:none;display:flex;align-items:flex-start;box-shadow:0 2px 5px rgba(var(--black-rgb),.12) }  /* job-crafting only */
.wnote.gone { display:none }  /* job-crafting only */
.wnote.blank { background:transparent !important;border:var(--canvas-dashed-border);color:var(--light-charcoal);align-items:center;justify-content:center;flex-direction:column;gap:var(--gap-xxs);cursor:pointer;box-shadow:none;text-align:center }  /* job-crafting only */
.wnote.blank .addcircle { width:var(--canvas-add-circle);aspect-ratio:1/1;border-radius:var(--radius-circle);border:var(--stroke-thin) solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:var(--button-icon-xs) }  /* job-crafting only */
.back:focus-visible:where(:not(.uma-input-pointer *)),.uma-canvas-zoom button:focus-visible:where(:not(.uma-input-pointer *)),.uma-canvas-download-button:focus-visible:where(:not(.uma-input-pointer *)),.uma-canvas-title-tile:focus-visible:where(:not(.uma-input-pointer *)),.uma-canvas-shortcuts:focus-visible:where(:not(.uma-input-pointer *)),.tnote:focus-visible:where(:not(.uma-input-pointer *)),.ptask:focus-visible:where(:not(.uma-input-pointer *)),.bin:focus-visible:where(:not(.uma-input-pointer *)),.uma-canvas-allergies-option:focus-visible:where(:not(.uma-input-pointer *)),.wnote:focus-visible:where(:not(.uma-input-pointer *)),.uma-canvas-cost-value:focus-visible:where(:not(.uma-input-pointer *)),.qlabel:focus-visible:where(:not(.uma-input-pointer *)),.theory summary:focus-visible:where(:not(.uma-input-pointer *)) { outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset) }  /* job-crafting only */
.uma-canvas-name-input:focus,.uma-canvas-name-input:focus-visible { outline:none }  /* job-crafting only */
.uma-canvas-creator-name:focus-within:where(:not(.uma-input-pointer *)),.uma-canvas-name-input:hover,.uma-canvas-name-input:focus-visible:where(:not(.uma-input-pointer *)),.titleline .uma-canvas-name-input:focus-visible:where(:not(.uma-input-pointer *)),.wp:hover .uma-canvas-cost-value,.uma-canvas-cost-value:focus-visible:where(:not(.uma-input-pointer *)) { border-bottom-color:var(--orange) }  /* job-crafting only */
.uma-canvas-identity-tag:hover .bin,.ptask:hover .px,.uma-canvas-cost-row:hover .wx { opacity:var(--opacity-high) }  /* job-crafting only */
.uma-canvas-viewport.pan,.ptask:active,.tnote:active,.wnote:active { cursor:grabbing }  /* job-crafting only */
.nav>*,.back { pointer-events:auto }  /* job-crafting, manual only */
.uma-canvas-nav>* { pointer-events:auto }  /* sensory only */
.back { pointer-events:auto }  /* sensory only */
.uma-canvas-title-tile { flex:0 0 var(--golden-ratio-large-percentage);background:var(--navy);border:var(--stroke-thin) solid var(--navy);border-radius:var(--app-default-radius-md);padding:var(--canvas-introtile-pad);padding-bottom:var(--app-default-top-bottom-margin-xxxl) }  /* sensory only */
.uma-canvas-title-tile .legal { font-weight:var(--font-weight-medium);background:rgba(var(--bright-white-rgb),.1);border-radius:var(--app-default-radius-sm);padding:var(--gap-md) var(--gap-regular);margin-bottom:0 }  /* manual, sensory only */
.uma-canvas-shortcuts { flex:1;background:var(--bright-white);border:var(--stroke-thin) solid var(--dark-white);border-radius:var(--app-default-radius-md);padding:var(--canvas-card-pad) }  /* sensory only */
.uma-canvas-instruction-cards { display:flex;gap:var(--gap-xl);width:var(--canvas-sheet-width);align-items:stretch }  /* sensory only */
.uma-canvas-instruction-card { flex:1;aspect-ratio:var(--carouselle-card-ratio-review);display:flex;flex-direction:column;background:var(--bright-white);border:var(--stroke-thin) solid var(--dark-white);border-radius:var(--app-default-radius-md);padding:var(--canvas-card-pad) }  /* sensory only */
.uma-canvas-instruction-card h2 { font-size:var(--heading-size-md);font-weight:var(--font-weight-semi-bold);color:var(--navy);margin-bottom:var(--app-default-top-bottom-margin-sm);line-height:var(--default-line-height-x-small) }  /* sensory only */
.uma-canvas-shortcuts-heading { display:flex;align-items:center;gap:var(--gap-xs);font-size:var(--heading-size-md);font-weight:var(--font-weight-semi-bold);line-height:var(--default-line-height-x-small);margin-bottom:var(--app-default-top-bottom-margin-xl) }  /* sensory only */
.uma-canvas-shortcuts dl { display:flex;flex-direction:column;gap:var(--gap-lg);margin:0 }  /* manual, sensory only */
.uma-canvas-viewport.pan { cursor:grabbing }  /* sensory only */
.uma-canvas-page,.uma-canvas-wishlist-page { position:relative;width:var(--canvas-sheet-width);height:var(--canvas-sheet-height);background:var(--bright-white);border:var(--stroke-thin) solid var(--dark-white);border-radius:0;box-shadow:var(--canvas-sheet-shadow);padding:var(--canvas-sheet-padding);display:flex;flex-direction:column }  /* sensory only */
.uma-canvas-page-title { display:flex;flex-direction:row;align-items:baseline;gap:var(--gap-regular);flex:1;flex-wrap:wrap }  /* sensory only */
.uma-canvas-page-header h2 { font-size:var(--canvas-pt-lg);font-weight:var(--font-weight-semi-bold);letter-spacing:var(--heading-letter-spacing-tight);line-height:var(--default-line-height-x-small);align-self:flex-start;margin-top:var(--app-default-top-bottom-margin-xxs);margin-bottom:0 }  /* sensory only */
.uma-canvas-allergies-dropdown { position:absolute;top:100%;left:0;z-index:50;margin-top:var(--gap-xxs);background:var(--bright-white);border:var(--stroke-thin) solid var(--dark-white);border-radius:var(--app-default-radius-md);padding:var(--gap-xxs);min-width:150px;max-height:240px;overflow:auto }  /* sensory only */
.uma-canvas-category-row { flex:1;display:flex;gap:var(--gap-md);min-height:0 }  /* manual, sensory only */
.uma-canvas-category { flex:1;display:flex;flex-direction:column;min-width:0 }  /* manual, sensory only */
.uma-canvas-category .bt { font-size:var(--canvas-pt-md);font-weight:var(--font-weight-bold);padding-bottom:var(--gap-xs);margin-bottom:var(--gap-sm);border-bottom:4px solid currentColor;line-height:var(--default-line-height-x-small);min-height:calc(2 * 1.4em + 6px);display:flex;flex-direction:column;justify-content:flex-end }  /* manual, sensory only */

/*
.uma-canvas-dropzone { flex:1;border:var(--canvas-dashed-border);border-radius:var(--app-default-radius-sm);padding:var(--app-default-top-bottom-margin-lg) var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-lg) var(--app-default-top-bottom-margin-xl);display:flex;flex-direction:column;min-height:0;transition:border-color var(--transition-fast),background var(--transition-fast) } */ /* manual, sensory only */


.uma-canvas-dropzone.over { background:var(--new-white) }  /* manual, sensory only */
.uma-canvas-dropzone .add { margin:auto;width:var(--button-size-xxl);height:var(--button-size-xxl);border-radius:var(--radius-circle);border:var(--stroke-hairline) solid var(--light-charcoal);background:transparent;color:var(--light-charcoal);font-size:var(--button-icon-xxl);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-base),border-color var(--transition-base),color var(--transition-base) }  /* manual, sensory only */
.uma-canvas-dropzone .add:hover { background:var(--hover-overlay-light);color:var(--mid-charcoal);border-color:var(--mid-charcoal) }  /* manual, sensory only */
.uma-canvas-dropzone.has .add { display:none }  /* manual, sensory only */
ul.list { list-style:none;display:none;flex-direction:column;gap:3px;overflow:hidden;flex:1;min-height:0;width:100% }  /* manual, sensory only */
.uma-canvas-dropzone.has ul.list { display:flex }  /* manual, sensory only */
ul.list li { position:relative;display:flex;align-items:flex-start;font-size:var(--bullet-text-size);line-height:var(--bullet-line-height);margin-left:var(--bullet-gap) }  /* manual, sensory only */
ul.list li::before { content:"\2022";position:absolute;left:0;top:0;/*top:calc((var(--bullet-text-size) * 1.33) - 1px);*/margin-left:calc(-1 * var(--bullet-gap));font-size:var(--bullet-text-size);line-height:var(--bullet-line-height);font-weight:var(--font-weight-bold) }  /* manual, sensory only */
ul.list li .t { flex:1;outline:none;min-height:12pt }  /* manual, sensory only */
.uma-canvas-dropzone[data-wide] ul.list { display:none;column-count:4;column-gap:var(--gap-lg);column-fill:auto;height:100% }  /* sensory only */
.uma-canvas-dropzone[data-wide].has ul.list { display:block }  /* sensory only */
.uma-canvas-dropzone[data-wide] ul.list li { break-inside:avoid;-webkit-column-break-inside:avoid }  /* sensory only */
.uma-canvas-dropzone[data-page="1"] ul.list li { break-inside:avoid }  /* manual, sensory only */
ul.list li .t:empty::before { content:"Type here…";color:var(--lightest-charcoal);pointer-events:none }  /* manual, sensory only */
ul.list li .t:focus:empty::before { content:"" }  /* manual, sensory only */
ul.list li .bin { position:absolute;right:2px;top:3px;opacity:var(--opacity-hidden);color:var(--light-charcoal);cursor:pointer;font-size:var(--button-icon-xs);padding:var(--gap-sm);margin:calc(-1 * var(--gap-sm)) }  /* manual, sensory only */
.full { font-size:var(--canvas-pt-xs);color:var(--tomato);text-align:center;padding-top:var(--gap-xxs);display:none }  /* manual, sensory only */
.uma-canvas-dropzone.full-on .full { display:block }  /* manual, sensory only */
.uma-canvas-wishlist-body { flex:1;display:flex;gap:var(--gap-xl);min-height:0;margin-top:var(--app-default-top-bottom-margin-xxs) }  /* manual, sensory only */
.uma-canvas-wishlist-grid { align-self:flex-start }  /* manual, sensory only */
.uma-canvas-wishlist-grid .uma-canvas-dropzone-hint { grid-column:1/-1;width:100% }  /* manual, sensory only */
.uma-canvas-wishlist-grid .uma-canvas-dropzone-hint { margin:auto;color:var(--lightest-charcoal);font-size:var(--canvas-pt-xs);text-align:center }  /* manual, sensory only */
.uma-canvas-wishlist-item .cap:empty::before,.uma-canvas-cost-row .wn:empty::before { content:attr(data-ph);color:var(--lightest-charcoal) }  /* manual, sensory only */
.uma-canvas-wishlist-grid { position:relative }  /* manual, sensory only */
.uma-canvas-wishlist-item { display:flex;flex-direction:column;align-items:center;gap:var(--gap-xs);width:var(--canvas-wcell-size) }  /* sensory only */
.uma-canvas-cost-list h3 { font-size:var(--canvas-pt-xs);font-weight:var(--font-weight-bold);margin-bottom:var(--gap-sm) }  /* manual, sensory only */
.uma-canvas-cost-row { display:flex;justify-content:space-between;gap:var(--gap-sm);align-items:center;padding:var(--gap-xxs) var(--gap-xxs);border-bottom:var(--stroke-thick) solid var(--mid-white);font-size:var(--canvas-pt-xs);line-height:var(--default-line-height-large) }  /* manual, sensory only */
.uma-canvas-postit-tray { width:var(--canvas-tray-width);background:var(--mid-white);border:var(--canvas-dashed-border);border-radius:var(--app-default-radius-md);padding:var(--gap-sm) var(--gap-md) }  /* manual, sensory only */
.uma-sensory-page .uma-canvas-tech-tray .uma-canvas-tray-cluster {flex:0 0 auto;width:max-content}  /* sensory only */
.uma-sensory-page .uma-canvas-tech-tray .uma-canvas-tray-cluster .uma-canvas-postit-grid {width:max-content}  /* sensory only */
.uma-sensory-page .uma-canvas-tech-tray .uma-canvas-postit-grid {display:grid;grid-auto-flow:column;grid-template-rows:repeat(5,var(--canvas-note-size));grid-auto-columns:var(--canvas-note-size);gap:var(--gap-xxs)}  /* sensory only */
.uma-canvas-tray-clusters { display:flex;gap:var(--gap-md) }  /* manual, sensory only */
.uma-canvas-tray-cluster { flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--gap-xs) }  /* manual, sensory only */
.uma-canvas-postit:active { cursor:grabbing }  /* sensory only */
.uma-canvas-postit.gone { display:none }  /* manual, sensory only */
.uma-canvas-postit.blank { background:transparent !important;border:var(--canvas-dashed-border);align-items:center;justify-content:center;cursor:pointer;width:var(--canvas-note-size);height:var(--canvas-note-size) }  /* sensory only */
.uma-canvas-postit.blank .addcircle { width:var(--button-size-xs);aspect-ratio:1/1;border-radius:var(--radius-circle);border:var(--stroke-hairline) solid var(--light-charcoal);color:var(--light-charcoal);display:flex;align-items:center;justify-content:center;font-size:var(--button-icon-sm);transition:background var(--transition-base),border-color var(--transition-base),color var(--transition-base) }  /* manual, sensory only */
.uma-canvas-postit.blank:hover .addcircle { background:var(--hover-overlay-light);color:var(--mid-charcoal);border-color:var(--mid-charcoal) }  /* manual, sensory only */
.uma-canvas-postit:focus-visible:where(:not(.uma-input-pointer *)),.uma-canvas-identity-tag:focus-visible:where(:not(.uma-input-pointer *)),.uma-canvas-tag-add:focus-visible:where(:not(.uma-input-pointer *)),.uma-canvas-dropzone .add:focus-visible:where(:not(.uma-input-pointer *)),.uma-canvas-wishlist-item-remove:focus-visible:where(:not(.uma-input-pointer *)),.back:focus-visible:where(:not(.uma-input-pointer *)),.uma-canvas-zoom button:focus-visible:where(:not(.uma-input-pointer *)),.uma-canvas-download-button:focus-visible:where(:not(.uma-input-pointer *)),.uma-canvas-title-tile:focus-visible:where(:not(.uma-input-pointer *)),.uma-canvas-shortcuts:focus-visible:where(:not(.uma-input-pointer *)),.uma-canvas-cost-value:focus-visible:where(:not(.uma-input-pointer *)),.bin:focus-visible:where(:not(.uma-input-pointer *)),.uma-canvas-allergies-option:focus-visible:where(:not(.uma-input-pointer *)) { outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset) }  /* manual, sensory only */
ul.list li .t:focus,ul.list li .t:focus-visible,.uma-canvas-name-input:focus,.uma-canvas-name-input:focus-visible { outline:none }  /* manual, sensory only */
.uma-canvas-creator-name:focus-within:where(:not(.uma-input-pointer *)),.uma-canvas-name-input:hover,.uma-canvas-name-input:focus-visible:where(:not(.uma-input-pointer *)),.wp:hover .uma-canvas-cost-value,.uma-canvas-cost-value:focus-visible:where(:not(.uma-input-pointer *)) { border-bottom-color:var(--orange) }  /* manual, sensory only */
.uma-canvas-identity-tag:hover .bin,ul.list li:hover .bin,.uma-canvas-cost-row:hover .wx { opacity:var(--opacity-high) }  /* manual, sensory only */
ul.list li .bin:hover,.uma-canvas-cost-row .wx:hover { opacity:var(--opacity-visible);color:var(--tomato) }  /* manual, sensory only */
.uma-canvas-shortcuts-heading { display:flex;align-items:center;gap:var(--gap-xs);font-size:var(--heading-size-md);font-weight:var(--font-weight-semi-bold);margin-bottom:var(--app-default-top-bottom-margin-xl) }  /* manual only */
.uma-canvas-page-header { display:flex;align-items:flex-end;gap:var(--gap-xxl);padding-bottom:var(--gap-md);margin-bottom:var(--gap-md);border-bottom:none }  /* manual only */
.uma-canvas-page-title .uma-canvas-name-input { display:block;width:100%;white-space:normal }  /* manual only */
.uma-canvas-dropzone[data-page="1"] ul.list { display:none;column-count:2;column-gap:var(--gap-lg);column-fill:auto;height:100% }  /* manual only */
.uma-canvas-dropzone[data-page="1"].has ul.list { display:block }  /* manual only */
.uma-canvas-wishlist-grid { flex:0 0 458px;width:458px;min-height:458px;border:var(--canvas-dashed-border);border-radius:var(--app-default-radius-sm);padding:var(--gap-md);display:grid;grid-template-columns:repeat(4,96px);column-gap:var(--gap-md);row-gap:var(--gap-sm);align-content:flex-start;justify-content:flex-start;transition:border-color var(--transition-fast),background var(--transition-fast) }  /* manual only */
.uma-canvas-tech-tray .uma-canvas-tray-clusters { flex-direction:row;flex-wrap:wrap;gap:var(--gap-sm);justify-content:flex-start;align-items:flex-start }  /* manual only */
.uma-manual-page .uma-canvas-tech-tray .uma-canvas-tray-cluster {flex:0 0 168px;width:168px}  /* manual only */
.uma-manual-page .uma-canvas-tech-tray .uma-canvas-postit-grid {grid-template-columns:repeat(2,var(--canvas-note-size))}  /* manual only */
.uma-canvas-postit-grid { display:grid;grid-template-columns:repeat(auto-fill,var(--canvas-note-size));gap:var(--gap-xs);justify-content:start }  /* manual only */
.uma-canvas-postit { overflow:hidden;flex:0 0 auto;width:var(--canvas-note-size);height:var(--canvas-note-size);aspect-ratio:1/1;border-radius:var(--app-default-radius-xs);padding:var(--gap-xs);font-size:var(--body-text-xs);font-weight:var(--font-weight-medium);line-height:var(--default-line-height-x-small);color:var(--bright-white);cursor:grab;user-select:none;outline:none;display:flex;align-items:flex-start }  /* manual only */
.uma-canvas-postit.blank { background:transparent !important;border:var(--canvas-dashed-border);align-items:center;justify-content:center;cursor:pointer;width:var(--canvas-note-size);aspect-ratio:1/1 }  /* manual only */
.uma-canvas-viewport.pan,.uma-canvas-postit:active { cursor:grabbing }  /* manual only */




/* =====================================================================
UMA.css additions — SENSORY CANVAS (this session)
[REPLACES] = swap the body of an existing rule.  [NEW] = add it.
Design values use existing UMA.css tokens (one print-bound exception noted).
===================================================================== */

/* [NEW] wishlist tile product image — contained inside the tile, small inset.
NOTE: padding is a hardcoded 4px ON PURPOSE — this tile prints to PDF, where
rem-based tokens can resolve unpredictably; a fixed px keeps print stable.
Do not tokenize this one. */
.uma-canvas-wishlist-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:4px; box-sizing:border-box; border-radius:var(--app-default-radius-sm); background:var(--bright-white); }

/* [REPLACES] wishlist delete state — full-tile red with centred bin */
.uma-canvas-wishlist-item-remove { position:absolute; inset:0; width:100%; height:100%; border-radius:var(--app-default-radius-sm); background:var(--tomato); color:var(--bright-white); display:flex; align-items:center; justify-content:center; font-size:var(--button-icon-xxl); opacity:var(--opacity-hidden); cursor:pointer; transition:opacity var(--transition-fast); z-index:2; }

/* [REPLACES] only show the delete state once the tile is "armed"
(pointer has left and returned) */
.uma-canvas-wishlist-item[data-armed="1"]:hover .uma-canvas-wishlist-item-remove { opacity:var(--opacity-visible); }

/* [REPLACES] dropzone — padding removed (was pushing bullets from top/left).
Do NOT alter --app-default-top-bottom-margin-* (shared elsewhere); just
drop the padding from THIS rule. */
.uma-canvas-dropzone { flex:1; border:var(--canvas-dashed-border); border-radius:var(--app-default-radius-sm); display:flex; flex-direction:column; min-height:0; transition:border-color var(--transition-fast), background var(--transition-fast); }




/* ---------- 3. RESPONSIVE + PRINT (append after the rules) ---------- */
@media (max-width:600px){
.uma-canvas-wrapper{left:0}
.uma-canvas-inner{padding:var(--inner-wrapper-margin-top-mobile) var(--default-left-right-mob-body-padding) 0}
}

/* job-crafting only */
@media print{
@page{size:A4 landscape;margin:0}
.uma-canvas-nav,.uma-canvas-zoom,.back,.uma-canvas-download-button,.uma-canvas-postit-tray,.uma-canvas-shortcuts,.qpop,.uma-canvas-dropzone .add,.add,.rempty,.wadd,.uma-canvas-wishlist-empty,.uma-canvas-dropzone-hint{display:none !important}

/*
.uma-canvas-unit{gap:0 !important;page-break-after:always;break-after:page}
.uma-canvas-unit:last-child{page-break-after:auto;break-after:auto}
*/


/* AFTER */

/*.uma-canvas-page,.uma-canvas-wishlist-page{page-break-before:always;break-before:page;page-break-after:auto;break-after:auto}
*/


/*.uma-canvas-column .uma-canvas-unit:first-of-type .uma-canvas-page:first-of-type{page-break-before:avoid;break-before:avoid}
*/

/*

.uma-canvas-page,.uma-canvas-wishlist-page{box-shadow:none !important;border:none !important;border-radius:0 !important;margin:0 auto !important;page-break-inside:avoid;break-inside:avoid}

*/


/* AFTER */

.quad{border-color:rgba(var(--black-rgb),.12) !important}
.ptask .px,.uma-canvas-cost-row .wx,.uma-canvas-wishlist-item-remove,.bin,.uma-canvas-tag-add{display:none !important}
.uma-canvas-name-input:empty::before{content:"" !important}
}

/* manual, sensory only */
@media print{
@page{size:A4 landscape;margin:0}
html,body{background:var(--pure-white) !important;height:auto !important;overflow:visible !important} /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
/* hide all editing/screen-only chrome */
.uma-canvas-nav,.uma-canvas-zoom,.back,.uma-canvas-download-button,.uma-canvas-postit-tray,.uma-canvas-shortcuts,.uma-canvas-dropzone .add,.add,.wadd,.uma-canvas-wishlist-empty,.uma-canvas-dropzone-hint{display:none !important}
/* hide the floating controls-layer copy entirely so only sheets print */
.uma-guide-controls-layer{display:none !important}
/* neutralise the fixed chrome wrappers so sheets can flow across printed pages */
.uma-canvas-wrapper{position:static !important;top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;display:block !important;height:auto !important;overflow:visible !important}
.uma-canvas-inner{position:static !important;display:block !important;height:auto !important;min-height:0 !important;overflow:visible !important;padding:0 !important}
/* only the sheets print: hide the intro unit entirely */
.uma-canvas-unit:has(.uma-canvas-title-row){display:none !important}
/* reset the pan/zoom canvas so sheets flow as pages */
.uma-canvas-viewport{position:static !important;overflow:visible !important}
.uma-canvas-stage{position:static !important;transform:none !important;top:0 !important;left:0 !important}


.uma-canvas-column{gap:0 !important;padding:0 !important}
.uma-canvas-wrapper,.uma-canvas-inner,.uma-canvas-viewport,.uma-canvas-stage,.uma-canvas-column{width:297mm !important;max-width:297mm !important;margin:0 !important;padding:0 !important;align-items:flex-start !important;left:0 !important;transform:none !important}
/*
.uma-canvas-unit{gap:0 !important;page-break-after:always;break-after:page}
.uma-canvas-unit:last-child{page-break-after:auto;break-after:auto}
*/
.uma-canvas-unit{gap:0 !important;page-break-after:auto;break-after:auto}
.uma-canvas-page,.uma-canvas-wishlist-page{page-break-before:always;break-before:page;page-break-after:auto;break-after:auto}
.uma-canvas-column .uma-canvas-unit:first-of-type .uma-canvas-page:first-of-type{page-break-before:avoid;break-before:avoid}

/* each sheet fills its own printed page, no screen shadow/border */

/*
.uma-canvas-page,.uma-canvas-wishlist-page{box-shadow:none !important;border:none !important;border-radius:0 !important;margin:0 auto !important;page-break-inside:avoid;break-inside:avoid}
*/
.uma-canvas-page,.uma-canvas-wishlist-page{box-shadow:none !important;border:none !important;border-radius:0 !important;margin:0 !important;width:297mm !important;max-width:297mm !important;height:calc(210mm - 1px) !important;max-height:calc(210mm - 1px) !important;overflow:hidden !important;page-break-inside:avoid;break-inside:avoid}

/* clean empty areas: no dashed borders, no add circles, no placeholders */
.uma-canvas-dropzone,.uma-canvas-wishlist-grid{border:none !important;background:transparent !important}
.uma-canvas-dropzone .add,.wadd,.uma-canvas-wishlist-grid .uma-canvas-dropzone-hint,.uma-canvas-wishlist-empty{display:none !important}
ul.list li .t:empty::before,.uma-canvas-name-input:empty::before,.uma-canvas-wishlist-item .cap:empty::before,.uma-canvas-cost-row .wn:empty::before{content:"" !important}
.t:empty,.uma-canvas-postit:has(>span:empty),.uma-canvas-postit.blank,.uma-canvas-tag-edit:empty{display:none !important}
/* hide all delete/edit affordances */
.bin,.wx,.uma-canvas-wishlist-item-remove,.full{display:none !important}
.uma-canvas-tag-add,.uma-canvas-allergies-dropdown{display:none !important}
/* hide the whole "I am" group if no neurotype was chosen */
.uma-canvas-neurotype-group:not(:has(.uma-canvas-neurotype-pills .uma-canvas-identity-tag:not(.uma-canvas-tag-add))){display:none !important}
/* keep filled content crisp */
*{-webkit-print-color-adjust:exact;print-color-adjust:exact} /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
}




/**********WEB CHROME********************/




/*************************SIGN UP FORM***********************/


.wrapper-for-all-sections { /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
    height: auto;
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);
}

@media (max-width: 600px) {
    .wrapper-for-all-sections { /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */
        width: 100%;
        margin-left: 0;
    }
}




.full-screen-inner-wrapper { /* used: auth */
width: 100%;
height: 100%;
      padding-left: var(--default-left-right-desk-body-padding);
        padding-right: var(--default-left-right-desk-body-padding);


}

 @media (max-width: 600px) {
  .full-screen-inner-wrapper { /* used: auth */
        padding-left: var(--default-left-right-mob-body-padding);
        padding-right: var(--default-left-right-mob-body-padding);

  }
 }




.small-centred-column-centred-text { /* used: auth */
    width: 100%;
    max-width: var(--max-content-width-golden-section-small);

    margin-left: auto; /*CENTRE*/
    margin-right: auto; /*CENTRE*/

    padding-top: var(--app-default-top-bottom-margin-xxxxxl); /*6rem*/
    padding-bottom: var(--app-default-top-bottom-margin-xxl);
    padding-left: 0;
    padding-right: 0;

    display: flex;
    flex-direction: column;
    text-align: center;
    box-sizing: border-box;
}

 @media (max-width: 900px) {

    .small-centred-column-centred-text { /* used: auth */
       padding-top: var(--app-default-top-bottom-margin-xxxxl); /*3rem*/
          padding-bottom: var(--app-default-top-bottom-margin-xxl);/*2.5rem*/

  }

 }


 @media (max-width: 600px) {

  .small-centred-column-centred-text { /* used: auth */
       padding-top: var(--app-default-top-bottom-margin-xxxl); /*3rem*/
          padding-bottom: var(--app-default-top-bottom-margin-xl); /*2rem*/

  }
  
}

 /*  
@media (max-width: 600px) {
    .small-centred-column-centred-text {
     margin-left: var(--default-left-right-mob-body-padding);
        margin-right: var(--default-left-right-mob-body-padding);
        width: calc(100% - 2 * var(--default-left-right-mob-body-padding));
        width: 100%;
    }*/



.small-centred-column-centred-text svg { /* used: auth */
    flex-grow: 0;
    width: var(--uma-md);
    height: var(--uma-md);
    align-self: center;
    margin-bottom: var(--app-default-top-bottom-margin-xxl);
    fill: var(--navy);
}

@media (min-width: 600px) {
    .small-centred-column-centred-text svg { /* used: auth */
        width: var(--uma-lg);
        height: var(--uma-lg);
    }
}

.small-centred-column-centred-text h1 { /* used: auth */
    margin-bottom: var(--app-default-top-bottom-margin-xxl);
}

.small-centred-column-centred-text h1 + p { /* used: auth */
    font-size: var(--body-text-sm);
    line-height: var(--default-line-height-small);
    margin-top: calc(-1 * var(--app-default-top-bottom-margin-lg));
    margin-bottom: var(--app-default-top-bottom-margin-xxl);
}





/*************************UMA WEB CHROME APP CHROME PROFILE UPGRADE PAGE FEEDBACK WIDGET****************/












/*************************************UMA WEBSITE CHROME INCLUDING FEEDBACK WIDGET********************************/

/* ============================================================
CHROME STYLES — add these to UMA.css
These selectors are not currently in UMA.css.
All invented tokens (--default-radius etc) have been
replaced with correct UMA.css tokens.
============================================================ */



/* Header inner wrapper */

/* Fixed header */

/* Primary nav */

/* Main header button-pill sizing */

/* Hamburger: hidden on desktop */

/* ── FOOTER ── */

/* ── FEEDBACK WIDGET TOKENS (not yet in UMA.css) ── */

/* ── FEEDBACK WIDGET CSS ── */

/*
.uma-chrome-feedback-close:hover { background: var(--navy); color: var(--bright-white); }*/

@media (max-width: 600px) { .uma-chrome-feedback-body { padding: 1.25rem; } }

/* Star rating icon size fix */

@media print {
.uma-chrome-feedback-tab, /* used: chrome, feedback-tabs, screenings-home, profile */
.uma-chrome-feedback-backdrop, /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-panel { display: none !important; } /* used: chrome, feedback-tabs, screenings-home */
}

/* ── FLYOUT TOKENS (not yet in UMA.css) ── */

/* No underlines anywhere in nav or flyout — ever */

@media (max-width: 600px) {
.uma-chrome-flyout-bottom-bar { /* used: chrome, screenings-home */
padding-left: var(--flyout-padding-left-mobile);
padding-bottom: var(--flyout-padding-bottom-mobile);
}
}


/* Below 900px: hamburger replaces nav */

/* Below 600px: centre logo, hide log in */

/* SVG logo size */



/* ============================================================
HEADER ISOLATED — UNIQUE PAGE-SPECIFIC STYLES
All rules in this file are absent from UMA.css.
UMA.css is Block 1 (already linked / inlined).
This is Block 2 for uma-header-isolated.html.
============================================================ */


/* ── :ROOT TOKENS NOT YET IN UMA.css ─────────────────────────
──────────────────────────────────────────────────────────── */
:root { /* used: screening-results-pages, screenings, auth */
--button-font-size: var(--body-text-sm); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--button-radius: var(--app-default-radius-md); /* used: screenings-home, onboarding, profile */
--button-transition-duration: 0.2s; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--button-transition-ease: ease; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */

--shadow-overlay: rgba(0, 0, 0, 0.2); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */

--feedback-panel-width: 400px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--feedback-panel-margin: 1.25rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--z-feedback-tab: 10000005; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--z-feedback-panel: 10000007; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

--uma-xxs:   30px;
--uma-xs:    40px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--uma-sm:    50px; /* used: chrome */
--uma-md:    60px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--uma-lg:    70px; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--uma-xl:    80px;
--uma-xxl:   100px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--uma-xxxl:  120px; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--uma-xxxxl: 150px;
--uma-flyout-logo-size: var(--uma-lg); /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--uma-logo-flyout-margin-bot: 0.9rem; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--uma-title-flyout-font-size: 3rem; /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
--flyout-pseudo-gap-adjustment: calc(var(--uma-flyout-logo-size) + var(--uma-logo-flyout-margin-bot) + var(--uma-title-flyout-font-size)); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--flyout-padding-left-desktop: 3rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--flyout-padding-left-mobile: 2rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--flyout-padding-right: 1.25rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--flyout-padding-bottom-desktop: 3rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--flyout-padding-bottom-mobile: 2rem; /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
--inverted-pill-dim-text: rgba(249, 249, 249, 0.6); /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
}


/* ── PUBLIC HEADER (.main-header) ────────────────────────────
This is the public-site header (not the app chrome header).
Selectors like .main-header, .primary-nav, .left-side, .right-side
are specific to this page and absent from UMA.css.
──────────────────────────────────────────────────────────── */
.box { /* used: learn-pages-homepage-legal */
padding: 0 var(--default-left-right-padding);
max-width: var(--max-body-content-width);
height: var(--fixed-header-height);
margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
}

.main-header { /* used: learn-pages-homepage-legal */
background-color: var(--card-default-background);
border-bottom: 1px solid #eaeaea;
position: fixed; top: 0; left: 0; right: 0;
z-index: 1000;
}
.main-header p { margin: 0; }

.right-side { display: flex; align-items: center; } /* used: learn-pages-homepage-legal */
.left-side { display: flex; justify-content: flex-start; align-items: center; } /* used: learn-pages-homepage-legal */

.login-buttons { display: flex; gap: 8px; } /* used: learn-pages-homepage-legal */


.main-header .button-pill { padding: 7px 30px; }

.left-side .hamburger { display: none; } /* used: chrome, screenings-home */

/* SVG logo size */
.small-svg { height: var(--uma-xs); width: var(--uma-xs); } /* used: chrome, screenings-home, learn-pages-homepage-legal */

/* No underlines in nav or flyout */
.primary-nav a,
.primary-nav a:hover,
.primary-nav a:focus,
.uma-chrome-flyout-nav-links a, /* used: chrome, screenings-home */
.uma-chrome-flyout-nav-links a:hover, /* used: chrome, screenings-home */
.uma-chrome-flyout-nav-links a:focus, /* used: chrome, screenings-home */
.uma-chrome-flyout-bottom-bar a, /* used: chrome, screenings-home */
.uma-chrome-flyout-bottom-bar a:hover, /* used: chrome, screenings-home */
.uma-chrome-flyout-bottom-bar a:focus { text-decoration: none !important; } /* used: chrome, screenings-home */

@media (max-width: 1000px) {
.left-side .hamburger { display: inline-block; cursor: pointer; font-size: 2.3rem; color: var(--navy) !important; } /* used: chrome, screenings-home */
.left-side .logo { margin-left: 0.75rem; } /* used: chrome, screenings-home, learn-pages-homepage-legal */
}
@media (max-width: 600px) {
.login-buttons .btn-secondary-navy-on-white { display: none; } /* used: chrome, screenings-home, onboarding, learn-pages-homepage-legal */
.left-side .logo { position: absolute; left: 50%; transform: translateX(calc(-50% - 1px)); } /* used: chrome, screenings-home, learn-pages-homepage-legal */
}


/* ── FOOTER ───────────────────────────────────────────────────
──────────────────────────────────────────────────────────── */
.footer-override { padding-top: 3rem; padding-bottom: 2rem; } /* used: chrome, learn-pages-homepage-legal */

.internal-footer { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100%; } /* used: screening-results-pages, chrome, learn-pages-homepage-legal */
.internal-footer p { text-align: center; } /* used: screening-results-pages, chrome, learn-pages-homepage-legal */

.footer-text-content { padding: 2rem; margin-top: 2rem; margin-bottom: 2rem; } /* used: screening-results-pages, chrome, learn-pages-homepage-legal */
.footer-copyright { margin: 0; } /* used: screening-results-pages, chrome, learn-pages-homepage-legal */
.footer-hyperlinks { margin-bottom: 2rem; } /* used: screening-results-pages, chrome, learn-pages-homepage-legal */
.footer-body-text { line-height: var(--default-line-height-small); } /* used: screening-results-pages, chrome, learn-pages-homepage-legal */

.content-box-stroked-mushroom { border: 0.5px solid var(--mushroom); background-color: transparent; border-radius: var(--app-default-radius-md); } /* used: chrome, learn-pages-homepage-legal */

.center-align { text-align: center; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* used: chrome, learn-pages-homepage-legal */

.inner-content-wrapper { width: 100%; max-width: var(--max-body-content-width); padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); } /* used: chrome, learn-pages-homepage-legal */
@media (max-width: 600px) {
.inner-content-wrapper { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); } /* used: chrome, learn-pages-homepage-legal */
}


/* ── FLYOUT PANE ──────────────────────────────────────────────
──────────────────────────────────────────────────────────── */
.uma-chrome-flyout-pane { /* used: chrome, screenings-home */
display: block; position: fixed; top: 0; left: 0;
z-index: 10000006; height: 100vh;
width: calc((var(--max-body-content-width) * var(--golden-ratio-small)) + var(--sidebar-width) + var(--default-left-right-desk-body-padding));
transform: translateX(calc(-1 * ((var(--max-body-content-width) * var(--golden-ratio-small)) + var(--sidebar-width) + var(--default-left-right-desk-body-padding))));
transition: transform 0.4s ease-in-out, visibility 0s linear 0.4s;
background-color: var(--navy); color: var(--white-text-default);
padding-top: 1.25rem; overflow: hidden; visibility: hidden;
}
.uma-chrome-flyout-pane.is-open { transform: translateX(0); visibility: visible; transition: transform 0.4s ease-in-out, visibility 0s; } /* used: chrome, screenings-home, onboarding, profile */
@media (max-width: 600px) {
.uma-chrome-flyout-pane { width: 100%; transform: translateX(-100%); overflow-y: auto; overflow-x: hidden; } /* used: chrome, screenings-home */
}

.uma-chrome-flyout-header { width: 100%; height: var(--fixed-header-height); display: flex; flex-direction: row; justify-content: flex-end; align-items: center; overflow-x: auto; position: absolute; left: 0; top: 0; } /* used: chrome, screenings-home */

.uma-chrome-flyout-nav-close-btn, /* used: chrome, screenings-home */
.uma-chrome-flyout-nav-back-btn { cursor: pointer; color: var(--white-text-default); margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; height: var(--button-size-sm); width: auto; background-color: transparent; border: none; font-size: var(--button-size-sm); } /* used: chrome, screenings-home */

.uma-chrome-flyout-logo { margin-bottom: var(--uma-logo-flyout-margin-bot); width: var(--uma-flyout-logo-size); height: var(--uma-flyout-logo-size); } /* used: chrome, screenings-home */

.uma-chrome-flyout-large-title { font-weight: var(--font-weight-medium); font-size: var(--uma-title-flyout-font-size); line-height: var(--default-line-height-single); } /* used: chrome, screenings-home */
.uma-chrome-flyout-large-title sup { font-weight: var(--font-weight-normal); font-size: var(--body-text-xs); margin-left: 2px; vertical-align: super; text-transform: uppercase; } /* used: chrome, screenings-home */


.uma-chrome-flyout-bottom-bar { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem var(--flyout-padding-right) var(--flyout-padding-bottom-desktop) var(--flyout-padding-left-desktop); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; box-sizing: border-box; } /* used: chrome, screenings-home */
.uma-chrome-flyout-bottom-bar .btn { height: 40px; padding: 7px 30px; font-size: 0.9rem; } /* used: chrome, screenings-home, onboarding, profile */
.uma-chrome-flyout-bottom-bar .btn-secondary-white-on-dark:hover { background: var(--bright-white); color: var(--navy); mix-blend-mode: normal; } /* used: chrome, screenings-home, onboarding, profile */
@media (max-width: 600px) { .uma-chrome-flyout-bottom-bar { padding-left: var(--flyout-padding-left-mobile); padding-bottom: var(--flyout-padding-bottom-mobile); } }

.uma-chrome-flyout-nav-links { list-style: none; padding: 0; margin-left: 0; margin-top: var(--app-default-top-bottom-margin-xxl) !important; margin-bottom: var(--app-default-top-bottom-margin-xxxxl) !important; } /* used: chrome, screenings-home */
.uma-chrome-flyout-nav-links li a { display: block; margin-bottom: var(--app-default-top-bottom-margin-md); text-decoration: none; color: var(--white-text-default); transition: color 0.3s ease; font-size: var(--body-text-xl); line-height: var(--default-line-height-single); } /* used: chrome, screenings-home */
.uma-chrome-flyout-nav-links li a:hover { color: var(--orange) !important; text-decoration: none !important; } /* used: chrome, screenings-home */

.uma-chrome-sliding-menu { display: flex; flex-direction: row; } /* used: chrome, screenings-home */
.uma-chrome-sliding-menu, .uma-chrome-flyout-main-menu { width: 100%; flex-shrink: 0; } /* used: chrome, screenings-home */

.uma-chrome-flyout-header, /* used: chrome, screenings-home */
.uma-chrome-flyout-logo-container, /* used: chrome, screenings-home */
.uma-chrome-flyout-main-menu { padding-left: var(--flyout-padding-left-desktop); padding-right: var(--flyout-padding-right); } /* used: chrome, screenings-home */
@media (max-width: 600px) {
.uma-chrome-flyout-header, .uma-chrome-flyout-logo-container, .uma-chrome-flyout-main-menu { padding-left: var(--flyout-padding-left-mobile); } /* used: chrome, screenings-home */
}


/* ── FEEDBACK WIDGET ──────────────────────────────────────────
──────────────────────────────────────────────────────────── */
.uma-chrome-feedback-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: var(--z-feedback-tab); background: var(--yellow); color: var(--white-text-default); border: none; padding: 1.25rem var(--app-default-top-bottom-margin-xxs); border-radius: var(--app-default-radius-md) 0 0 var(--app-default-radius-md); cursor: pointer; font-size: var(--button-font-size); font-weight: var(--font-weight-normal); writing-mode: vertical-rl; transform-origin: center; letter-spacing: 0.03em; box-shadow: -2px 0 8px var(--shadow-overlay); transition: background var(--button-transition-duration) var(--button-transition-ease), padding var(--button-transition-duration) var(--button-transition-ease); } /* used: chrome, feedback-tabs, screenings-home, profile */
.uma-chrome-feedback-tab:hover { padding-right: 0.75rem; } /* used: chrome, feedback-tabs, screenings-home, profile */

.uma-chrome-feedback-backdrop { display: none; } /* used: chrome, feedback-tabs, screenings-home */

.uma-chrome-feedback-panel { position: fixed; top: var(--feedback-panel-margin); right: var(--feedback-panel-margin); bottom: var(--feedback-panel-margin); width: var(--feedback-panel-width); z-index: var(--z-feedback-panel); background: var(--mid-white); border-radius: 10px; box-shadow: 0 8px 32px var(--shadow-overlay); display: flex; flex-direction: column; overflow: hidden; transform: translateX(calc(100% + var(--feedback-panel-margin))); visibility: hidden; transition: transform 0.4s ease-in-out, visibility 0s linear 0.4s; } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-panel.is-open { transform: translateX(0); visibility: visible; transition: transform 0.4s ease-in-out, visibility 0s; } /* used: chrome, feedback-tabs, screenings-home, onboarding, profile */
@media (max-width: 600px) {
.uma-chrome-feedback-panel { top: 0; right: 0; bottom: 0; left: 0; width: 100%; border-radius: 0; box-shadow: none; transform: translateX(100%); } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-panel.is-open { transform: translateX(0); } /* used: chrome, feedback-tabs, screenings-home, onboarding, profile */
}

.uma-chrome-feedback-header { background: var(--yellow); color: var(--navy); height: var(--fixed-header-height); padding: 0 1.5rem; display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; } /* used: chrome, feedback-tabs, screenings-home */
.feedback-widget-heading-h2 { font-size: var(--heading-size-sm); font-weight: var(--font-weight-normal); margin: 0; text-align: center; color: var(--navy); } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-close { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-circle); color: var(--navy); transition: background 0.2s ease, color 0.2s ease; } /* used: chrome, feedback-tabs, screenings-home */
/*.uma-chrome-feedback-close:hover { background: var(--navy); color: var(--bright-white); }*/ /* used: chrome, feedback-tabs, screenings-home */

.uma-chrome-feedback-body { padding: 1.5rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; position: relative; } /* used: chrome, feedback-tabs, screenings-home */
@media (max-width: 600px) { .uma-chrome-feedback-body { padding: 1.25rem; } }

.uma-chrome-feedback-tabs { display: flex; background: var(--hover-overlay-light); border-radius: 10px; padding: 4px; margin-bottom: var(--app-default-top-bottom-margin-xxl); position: relative; } /* used: screenings-home */
.uma-chrome-feedback-tab-btn { flex: 1; background: transparent; border: none; padding: 0.625rem 1rem; border-radius: 8px; cursor: pointer; font-size: var(--button-font-size); font-weight: var(--font-weight-normal); transition: background var(--button-transition-duration) var(--button-transition-ease), color var(--button-transition-duration) var(--button-transition-ease); z-index: 1; } /* used: screenings-home */
.uma-chrome-feedback-tab-btn:focus { outline: none; } /* used: screenings-home */
.uma-chrome-feedback-tab-btn.is-active { background: var(--navy); color: var(--bright-white); border-radius: 8px; } /* used: chrome, screenings-home, onboarding, profile */

.uma-chrome-feedback-panel-tab { display: none; } /* used: chrome, feedback-tabs, screenings-home, learn-pages-homepage-legal */
.uma-chrome-feedback-panel-tab.is-active { display: block; } /* used: chrome, feedback-tabs, screenings-home, onboarding, profile, learn-pages-homepage-legal */

.uma-chrome-feedback-field { margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: chrome, feedback-tabs, screenings-home, learn-pages-homepage-legal */
.uma-chrome-feedback-field label { display: flex; align-items: center; gap: 0.5rem; font-size: var(--body-text-xs); font-weight: var(--font-weight-medium); margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: chrome, feedback-tabs, screenings-home, learn-pages-homepage-legal */
.uma-chrome-feedback-field label .uma-chrome-feedback-emoji { font-size: var(--body-text-lg); line-height: var(--default-line-height-single); } /* used: chrome, feedback-tabs, screenings-home, learn-pages-homepage-legal */
.uma-chrome-feedback-field textarea { font-size: var(--body-text-xs); } /* used: chrome, feedback-tabs, screenings-home, learn-pages-homepage-legal */
.uma-chrome-feedback-field textarea:focus-visible:where(:not(.uma-input-pointer *)) { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: 2px; border-color: transparent; } /* used: chrome, feedback-tabs, screenings-home, learn-pages-homepage-legal */
.uma-chrome-feedback-field textarea:focus-visible:where(:not(.uma-input-pointer *)) { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: 2px; } /* used: chrome, feedback-tabs, screenings-home, learn-pages-homepage-legal */
.uma-chrome-feedback-field textarea::placeholder { color: var(--light-charcoal); opacity: 1; } /* used: chrome, feedback-tabs, screenings-home, learn-pages-homepage-legal */
.uma-chrome-feedback-field textarea:-webkit-autofill, /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-field textarea:-webkit-autofill:hover, /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-field textarea:-webkit-autofill:focus, /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-field textarea:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--bright-white) inset !important; -webkit-text-fill-color: var(--mid-charcoal) !important; caret-color: var(--mid-charcoal); transition: background-color 5000s ease-in-out 0s; } /* used: chrome, feedback-tabs, screenings-home, learn-pages-homepage-legal */

.uma-chrome-feedback-rating-block { margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: chrome, feedback-tabs, screenings-home, learn-pages-homepage-legal */
.uma-chrome-feedback-rating-summary { display: block; text-align: center; font-size: var(--body-text-lg); color: var(--navy); font-weight: var(--font-weight-normal); margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: chrome, feedback-tabs, screenings-home, learn-pages-homepage-legal */
.uma-chrome-feedback-rating-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; width: 100%; container-type: inline-size; } /* used: chrome, feedback-tabs, screenings-home, learn-pages-homepage-legal */
.uma-chrome-feedback-heart { background: transparent; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; position: relative; aspect-ratio: 1; width: 100%; overflow: visible; font-size: clamp(2rem, 14cqw, 4.5rem); } /* used: chrome, feedback-tabs, screenings-home, learn-pages-homepage-legal */
.uma-chrome-feedback-heart i { font-size: var(--button-icon-xxxxl); display: flex; align-items: center; justify-content: center; line-height: var(--default-line-height-single); color: var(--dark-white); transition: color 0.2s ease, transform 0.15s ease; } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-heart:hover i { color: var(--navy); transform: scale(1.05); } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-heart:hover > span { color: var(--bright-white); } /* used: chrome, feedback-tabs, screenings-home, learn-pages-homepage-legal */
.uma-chrome-feedback-heart.is-filled i { color: var(--yellow); } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-heart > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--body-text-sm); font-weight: var(--font-weight-bold); pointer-events: none; transition: color 0.2s ease; } /* used: chrome, feedback-tabs, screenings-home, learn-pages-homepage-legal */
.uma-chrome-feedback-heart.is-filled > span { color: var(--navy); } /* used: chrome, feedback-tabs, screenings-home, learn-pages-homepage-legal */

.uma-chrome-feedback-btn { width: 100%; gap: 0.5rem; margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-btn:last-child { margin-bottom: 0; } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-btn i { font-size: var(--button-icon-lg); } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-btn-primary:disabled { background: var(--hover-overlay-dark); color: var(--light-charcoal); border-color: var(--hover-overlay-dark); cursor: not-allowed; } /* used: chrome, feedback-tabs, screenings-home */

.uma-chrome-feedback-screenshot-preview { display: none; align-items: center; gap: 0.75rem; margin-bottom: var(--app-default-top-bottom-margin-lg); padding: 0.75rem; border-radius: var(--app-default-radius-md); background: var(--bright-white); } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-screenshot-preview.is-active { display: flex; } /* used: chrome, feedback-tabs, screenings-home, onboarding, profile */
.uma-chrome-feedback-screenshot-preview img { flex: 0 0 auto; width: 96px; height: 72px; object-fit: cover; border-radius: 4px; } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-screenshot-preview .uma-chrome-feedback-screenshot-filename { flex: 1; font-size: var(--body-text-xs); } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-screenshot-remove { background: transparent; border: none; color: var(--light-charcoal); cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-circle); flex-shrink: 0; font-size: var(--body-text-lg); } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-screenshot-remove:hover { background: var(--hover-overlay-light); color: var(--mid-charcoal); } /* used: chrome, feedback-tabs, screenings-home */

.uma-chrome-feedback-thanks { display: none; text-align: center; padding: var(--app-default-top-bottom-margin-lg); } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-thanks.is-active { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; inset: 0; } /* used: chrome, feedback-tabs, screenings-home, onboarding, profile */
.uma-chrome-feedback-thanks-icon { color: var(--bright-green); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-thanks-icon i { font-size: 3.5rem; } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-thanks h3 { font-size: var(--body-text-lg); font-weight: var(--font-weight-normal); margin-bottom: var(--app-default-top-bottom-margin-xxs); } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-thanks a { color: var(--navy); } /* used: chrome, feedback-tabs, screenings-home */
.uma-chrome-feedback-thanks-action { width: auto !important; min-width: 12rem; margin-top: var(--app-default-top-bottom-margin-lg); margin-bottom: 0 !important; text-decoration: none; } /* used: chrome, feedback-tabs, screenings-home */

@media print { .uma-chrome-feedback-tab, .uma-chrome-feedback-backdrop, .uma-chrome-feedback-panel { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
.uma-chrome-feedback-tab, .uma-chrome-feedback-backdrop, .uma-chrome-feedback-panel, .uma-chrome-feedback-heart { transition-duration: 0.15s; } /* used: chrome, feedback-tabs, screenings-home, profile, learn-pages-homepage-legal */
.uma-chrome-feedback-panel { transform: none !important; } /* used: chrome, feedback-tabs, screenings-home */
}


/***********************CALM MODE*************************************/
/* ============================================================
Uma app chrome — unique styles not in UMA.css
Add to UMA.css.
============================================================ */



body.calm-mode .uma-app-home-dot-canvas *:hover, /* used: chrome, screenings-home */
body.calm-mode .uma-app-home-start-btn:hover { transform: none !important; } /* used: chrome, screenings-home */


body.calm-mode .uma-app-home-animate-words .uma-app-home-word { opacity: 1 !important; animation: none !important; transform: none !important; filter: none !important; } /* used: chrome, screenings-home */


body.calm-mode .uma-app-home-animate-words { animation: calm-fade 0.6s ease-in-out both; } /* used: chrome, screenings-home */


body.calm-mode .uma-chrome-feedback-tab { background: var(--mustard); } /* used: chrome, feedback-tabs, screenings-home, profile */


body.calm-mode.detail-open .uma-chrome-all-content-wrapper { filter: none; } /* used: chrome, screenings-home, profile */

/*NEW*/
.uma-chrome-main-header { background: rgba(var(--bright-white-rgb), 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: var(--stroke-thin) solid #eaeaea; position: relative; z-index: 1000; } /* used: chrome, screenings-home */
.uma-chrome-main-header-right-side .btn-sm { padding-left: 1.1rem; padding-right: 1.1rem; } /* used: chrome, screenings-home */
.uma-chrome-header-heart { background: var(--yellow); color: var(--bright-white); border: none; padding: 0; aspect-ratio: 1/1; border-radius: 50%; } /* used: chrome */

body.calm-mode .uma-chrome-feedback-header { background: var(--mustard); } /* used: chrome, feedback-tabs, screenings-home */


body.calm-mode .uma-chrome-main-header { /* used: chrome, screenings-home */
background-color: var(--light-white);
transition: background-color var(--button-transition-duration) var(--button-transition-ease);
}


body.calm-mode .uma-app-home-dot-canvas *, /* used: chrome, screenings-home */
body.calm-mode .uma-app-home-start-btn { transition-duration: 0.5s !important; } /* used: chrome, screenings-home */


body.calm-mode [class*="Orange"], /* used: chrome, screenings-home */
body.calm-mode [class*="Orange"]:hover { /* used: chrome, screenings-home */
background-color: var(--orange-dark) !important;
transition: background-color var(--button-transition-duration) var(--button-transition-ease);
}


body.voice-intro-screen .uma-chrome-main-header .switch--voice { display: none; } /* used: chrome, screenings-home */

/*NEW*/
.switch input:focus { outline: none; } /* used: chrome, screenings-home, profile, auth */
.switch:focus-within { outline: none; } /* used: chrome, screenings-home, profile, auth */
.switch:has(input:focus:not(:focus-visible)) { outline: none !important; } /* used: chrome, screenings-home, profile, auth */
.switch--sm.switch--calm .switch-icon { font-size: var(--button-icon-lg); } /* used: chrome, screenings-home */
.uma-chrome-flyout-bottom-bar .switch--voice .switch-icon { font-size: var(--button-icon-lg); } /* used: chrome, screenings-home */



@keyframes calm-fade { from { opacity: 0; } to { opacity: 1; } }

.switch--calm input:checked ~ .switch-track .switch-icon, /* used: chrome, screenings-home, profile */
.switch--voice input:checked ~ .switch-track .switch-icon { left: 8px; } /* used: chrome, screenings-home, profile */

.switch.switch--calm input:focus-visible:where(:not(.uma-input-pointer *)) ~ .switch-track, /* used: chrome, screenings-home, profile */
.switch.switch--voice input:focus-visible:where(:not(.uma-input-pointer *)) ~ .switch-track { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); /* switch track width — no standard token */ } /* used: chrome, screenings-home, profile */


/******************************UMA APP CHROME INCLUDING UPGRADE MODAL*******************************/

.uma-chrome-wishlist-float-btn { /* used: chrome */
  position: fixed;
  bottom: var(--uma-xxl);
  right: 2.5rem;
  z-index: 1001;
  background: var(--yellow);
  color: var(--bright-white);
  border: none;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background var(--transition-base);
  width: var(--button-size-xl);
  height: var(--button-size-xl);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--button-icon-xxl);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.uma-chrome-wishlist-float-btn:hover { transform: scale(1.12); } /* used: chrome */
body.calm-mode .uma-chrome-wishlist-float-btn { background: var(--mustard); } /* used: chrome, screenings-home */
@media (max-width: 600px) {
  .uma-chrome-wishlist-float-btn { /* used: chrome */
    bottom: var(--uma-xxxl);
    right: var(--default-left-right-mob-body-padding);
    height: var(--button-size-lg);
    width: var(--button-size-lg);
  }
}
@media (max-width: 400px) {
  .uma-chrome-wishlist-float-btn { /* used: chrome */
    bottom: 140px;
    right: var(--default-left-right-mob-body-padding);
    height: var(--button-size-lg);
    width: var(--button-size-lg);
  }
}




/********MISSING CHROME********/


/* Missing chrome CSS rules to add to UMA.css */
/* Add these at the end of the chrome section */

#flyout-sub-menu-learn .uma-chrome-flyout-large-title {font-size: var(--heading-size-xl) !important;} /* used: chrome, screenings-home */
#flyout-sub-menu-learn .uma-chrome-flyout-nav-back-btn {display: block; margin-bottom: var(--app-default-top-bottom-margin-lg);} /* used: chrome, screenings-home */
.uma-chrome-beta-yellow-tag {background-color: var(--mustard);} /* used: chrome, screenings-home */
.uma-chrome-feedback-star-btn.is-filled .uma-chrome-feedback-star {color: var(--yellow);} /* used: chrome, screenings-home */
.uma-chrome-feedback-star-btn.is-filled > span {color: var(--navy);} /* used: chrome, screenings-home */
.uma-chrome-feedback-star-btn.is-filled i {color: var(--yellow);} /* used: chrome, screenings-home */
.uma-chrome-flyout-bottom-bar .switch {margin-left: auto; margin-right: 0.75rem;} /* used: chrome, screenings-home, profile */
.uma-chrome-flyout-bottom-bar .uma-chrome-initial-button {background-color: transparent !important; border: var(--stroke-hairline) solid transparent !important; color: var(--inverted-pill-dim-text) !important; padding-left: 0 !important; transition: border-color var(--button-transition-duration) var(--button-transition-ease), color var(--button-transition-duration) var(--button-transition-ease);} /* used: chrome, screenings-home */
.uma-chrome-flyout-bottom-bar .uma-chrome-initial-button .initial {background-color: var(--white-text-default) !important; color: var(--navy) !important; width: 40px !important; height: var(--button-size-md) !important; margin-right: 0.8rem;} /* used: chrome, screenings-home */
.uma-chrome-flyout-bottom-bar .uma-chrome-initial-button:hover {border-color: var(--white-text-default) !important; color: var(--white-text-default) !important;} /* used: chrome, screenings-home */
.uma-chrome-flyout-nav-links .ph-lock-key {position: relative; top: 1.5px;} /* used: chrome, screenings-home */
.uma-chrome-flyout-sub-menu-results {width: 100%; flex-shrink: 0; padding-left: var(--flyout-padding-left-desktop); padding-right: var(--flyout-padding-right);} /* used: chrome, screenings-home */
.uma-chrome-initial-button {flex-shrink: 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: auto !important; white-space: nowrap; padding-left: 0.45rem !important; transition: background-color var(--button-transition-duration) var(--button-transition-ease);} /* used: chrome, screenings-home */
.uma-chrome-initial-button:hover {background-color: var(--hover-overlay-light);} /* used: chrome, screenings-home */
.uma-chrome-main-header .logo .small-svg {width: var(--uma-xs); height: var(--uma-xs); transition: fill 0.3s ease;} /* used: chrome, screenings-home */
.uma-chrome-main-header .logo:hover .small-svg {fill: var(--navy-dark) !important;} /* used: chrome, screenings-home */
.uma-chrome-main-header p {margin: 0;} /* used: chrome, screenings-home */
.uma-chrome-main-header-left-side {display: flex; justify-content: flex-start; align-items: center;} /* used: chrome, screenings-home */
.uma-chrome-main-header-left-side .hamburger-btn {display: none;} /* used: chrome, screenings-home */
/* v18, 24 September 2026. The chrome header repair, carried over from the v16
   built in the launch pages conversation and flagged as outstanding in the
   v17 README.

   The two rules below were unconditional. In both chrome HTML files, which
   that conversation does have, they have always lived inside this breakpoint.
   Loose, the header logo centres itself at every width and lands to the right
   of the beta strapline on desktop.

   The hamburger-btn rule is restored with them. The line above sets
   display: none on it and nothing anywhere turned it back on, so on v17 the
   phone menu button never appears at all.

   The !important v17 carried on the font-size is not here. Inside the
   breakpoint the rule wins on its own, tested against both chrome files. */
@media (max-width: 600px) {
  .uma-chrome-main-header-left-side .hamburger-btn {margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; height: 35px; width: auto; background-color: transparent; border: none; cursor: pointer; color: var(--navy);} /* used: chrome, screenings-home */
  .uma-chrome-main-header-left-side .hamburger-btn i.hamburger {font-size: 32px; line-height: var(--default-line-height-single);} /* used: chrome, screenings-home */
  .uma-chrome-main-header-left-side .logo {position: absolute; left: 50%; transform: translateX(calc(-50% - 1px));} /* used: chrome, screenings-home */
}
.uma-chrome-main-header-right-side {display: flex; align-items: center;} /* used: chrome, screenings-home */
.uma-chrome-side-bar {width: var(--sidebar-width); height: 100%; position: fixed !important; left: 0; top: 0; z-index: 10000004; background-color: var(--navy); border: none; transition: background-color var(--transition-base) ease, opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, transform 0.4s ease-in-out;} /* used: chrome, screenings-home */
.uma-chrome-side-bar-burger {position: fixed !important; left: 0.8rem; top: 1rem; display: block !important; z-index: 10000005; color: var(--white-text-default); font-size: 2rem;} /* used: chrome, screenings-home */
.uma-chrome-side-bar.is-hidden {transform: translateX(calc(-1 * var(--sidebar-width))); opacity: 0; visibility: hidden;} /* used: chrome, screenings-home */
.uma-chrome-sidebar-account-shortcut {position: fixed; left: calc((var(--sidebar-width) - var(--button-size-md)) / 2); bottom: var(--flyout-padding-bottom-desktop); width: var(--button-size-md); height: var(--button-size-md); z-index: 10000005; display: flex; align-items: center; justify-content: center; background-color: transparent; border: none; cursor: pointer;} /* used: chrome, screenings-home */
.uma-chrome-sidebar-account-shortcut .initial {margin: 0; background-color: var(--white-text-default); color: var(--navy); width: 40px !important; height: 40px !important;} /* used: chrome, screenings-home */
.uma-chrome-sliding-menu.uma-chrome-submenu-closing {transform: translateX(0%); transition: transform 0.4s ease-in-out;} /* used: chrome, screenings-home */
.uma-chrome-sliding-menu.uma-chrome-submenu-opening {transform: translateX(-100%); transition: transform 0.4s ease-in-out;} /* used: chrome, screenings-home */
.uma-chrome-trial-pill-label-compact {display: none;} /* used: screenings-home */
body.calm-mode .uma-chrome-all-content-wrapper {filter: brightness(0.88) saturate(0.75) sepia(0.25); transition: filter 0.3s ease;} /* used: chrome, screenings-home, profile */
body.calm-mode .uma-chrome-beta-yellow-tag {background-color: var(--mustard);} /* used: chrome, screenings-home */
body.user-paid .uma-chrome-flyout-nav-links .ph-lock-key {display: none;} /* used: chrome, screenings-home */

#flyout-sub-menu-results .uma-chrome-flyout-large-title, /* used: chrome, screenings-home */
#flyout-sub-menu-canvases .uma-chrome-flyout-large-title, /* used: chrome, screenings-home */
#flyout-sub-menu-selfcare .uma-chrome-flyout-large-title, /* used: chrome, screenings-home */
#flyout-sub-menu-humansupport .uma-chrome-flyout-large-title, /* used: chrome, screenings-home */
#flyout-sub-menu-learn .uma-chrome-flyout-large-title { font-size: var(--heading-size-xl) !important; } /* used: chrome, screenings-home */
#flyout-sub-menu-results .uma-chrome-flyout-nav-back-btn, /* used: chrome, screenings-home */
#flyout-sub-menu-canvases .uma-chrome-flyout-nav-back-btn, /* used: chrome, screenings-home */
#flyout-sub-menu-selfcare .uma-chrome-flyout-nav-back-btn, /* used: chrome, screenings-home */
#flyout-sub-menu-humansupport .uma-chrome-flyout-nav-back-btn, /* used: chrome, screenings-home */
#flyout-sub-menu-learn .uma-chrome-flyout-nav-back-btn { display: block; margin-bottom: var(--app-default-top-bottom-margin-lg); } /* used: chrome, screenings-home */


/* ==========================================================================
   SCREENING RESULTS PAGES
   Added to the end of uma.css on 22 September 2026.

   Pages: ADHD, autism, CPTSD, masking and RSD profiles; ADHD, autism and
   CPTSD diagnostic results; hypermobility, MCAS and PoTS; health history;
   brain-body; trauma history; hero dots. Then the SOS panel.

   Each page's <html> carries its page classes, for example
   <html class="page-profile page-adhd-profile">. Every rule below is limited
   to the pages that use it with :where(.page-...), which adds no specificity,
   so no page's rules can reach another page or the rest of the app.
   ========================================================================== */

@page {size:A4 portrait;margin:0;}
@keyframes streamIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes brain-body-word-pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes health-history-word-pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes trauma-history-word-pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes breathe{0%{width:65%;height:46%;} /* used: screenings, learn-pages-homepage-legal */
33%{width:95%;height:72%;}
42%{width:95%;height:72%;}
100%{width:65%;height:46%;}}
@keyframes showIn{0%,32%{opacity:0;} /* used: screenings */
4%,30%{opacity:1;}
34%,100%{opacity:0;}}
@keyframes showOut{0%,32%{opacity:0;} /* used: screenings */
36%,98%{opacity:1;}
100%{opacity:0;}}
:root:where(.page-profile, .page-diagnostic, .page-brain-body, .page-health-history, .page-condition, .page-trauma-history){--motion-fade:0.45s;--motion-fade-ease:ease;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:root:where(.page-diagnostic, .page-health-history, .page-condition, .page-trauma-history){--press-release-duration:0.35s;--press-colour-duration:0.2s;--press-down-duration:0.08s;--press-release-ease:cubic-bezier(0.34, 1.56, 0.64, 1);--press-scale:0.94;} /* used: screening-results-pages */
:root:where(.page-diagnostic, .page-health-history, .page-condition){--navy-40:#151C2D;--navy-60:#0E131E;--navy-60-rgb:14,19,30;} /* used: screening-results-pages */
*:where(.page-profile, .page-hero-dots), :where(.page-profile, .page-hero-dots) *{margin:0;padding:0;box-sizing:border-box;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:root:where(.page-health-history, .page-condition, .page-trauma-history, .page-adhd-profile){--section-nav-edge-inset:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media print {
  *:where(.page-profile, .page-brain-body), :where(.page-profile, .page-brain-body) *{-webkit-print-color-adjust:exact;print-color-adjust:exact;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
}

html:where(.page-profile){scroll-behavior:smooth;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile) body{font-family:"Inter",system-ui,sans-serif;color:var(--mid-charcoal);background:var(--new-white);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile) .eyebrow{color:var(--light-charcoal);font-size:var(--body-text-xs);margin-bottom:var(--app-default-top-bottom-margin-xxs);} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .fixed-subheader-h1-title-wrapper{} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .profile-nav-links li a:hover{color:var(--orange);} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .profile-nav-links li a:active{color:var(--navy);} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .polar-key-item-off{opacity:var(--polar-key-off-opacity);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:root:where(.page-profile){--chart-tooltip-max-width:300px;--chart-tooltip-fade-duration:0.15s;--z-chart-tooltip:9999;--font-weight-bold:700;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:root:where(.page-adhd-profile, .page-autism-profile, .page-masking-profile, .page-rsd-profile){--heading-size-sm:1.2rem;--heading-size-md:1.7rem;--heading-size-lg:2rem;--heading-size-xs:1.12rem;--body-text-xs:.9rem;--body-text-xxs:.8rem;--heading-letter-spacing-tight:-0.02em;--default-line-height-single:1;--default-line-height-x-small:1.3;--default-line-height-large:1.6;--font-weight-extra-light:300;--font-weight-light:350;--font-weight-semi-bold:600;--gap-xs:0.5rem;--button-size-lg:50px;--stroke-thin:1px;--pure-white:#FFFFFF;--opacity-hidden:0;--opacity-visible:1;--transition-fast:.2s;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:root:where(.page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile){--section-nav-edge-inset:var(--default-left-right-desk-body-padding);--opacity-very-high:0.8;--light-white-rgb:250,248,247;--z-section-nav:999;} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) .button-row{display:inline-flex;align-items:center;flex-wrap:wrap;width:auto;height:auto;gap:var(--gap-regular);} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) .button-row-xtight{gap:var(--gap-xs);} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) .button-row-tight{gap:var(--gap-md);} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) .button-row-loose{gap:var(--gap-xxl);} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) .control-row{display:flex;align-items:center;width:100%;height:auto;gap:var(--gap-regular);} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) .control-row-left{justify-content:flex-start;} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) .control-row-right{justify-content:flex-end;} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) .control-row-between{justify-content:space-between;} /* used: screening-results-pages */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .adhd-autism-cptsd-profile-btn:focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile) .results-view-tab:focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset);} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .centred-card-carousel:focus, :where(.page-profile) .centred-card-carousel:focus-visible{outline:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:root:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile){--t-page-bg:var(--mid-white);--t-band:var(--mid-white);--t-band-alt:var(--new-white);--t-surface:var(--light-white);--t-card:var(--mid-white);--t-surface-hover:var(--mid-white);--t-selected-bg:var(--navy);--t-selected-text:var(--bright-white);--t-nav-frost:rgba(var(--light-white-rgb), var(--opacity-very-high));--t-emphasis:var(--navy);--t-emphasis-hover:var(--navy-dark);--t-page-text:var(--mid-charcoal);--t-text-strong:var(--dark-charcoal);--t-text-secondary:var(--light-charcoal);--t-text-muted:var(--lightest-charcoal);--t-divider:var(--dark-white);--t-border:var(--dark-white);--t-line-muted:var(--lightest-charcoal);--t-chart-track:var(--light-mushroom);--t-chart-grid:var(--lightest-charcoal);--t-header-bg:var(--light-white);--t-card-panel:var(--mid-white);--t-hero-bg:var(--mid-white);--t-nav-control:var(--lightest-charcoal);--t-nav-control-hover-bg:var(--hover-overlay-light);--t-nav-control-hover-icon:var(--mid-charcoal);--t-nav-control-hover-edge:var(--mid-charcoal);--t-box-edge:var(--mushroom);--t-tooltip-bg:rgba(25, 25, 25, 0.9);--t-tooltip-text:var(--pure-white);--t-switch-bg:var(--dark-white);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-diagnostic) .diagnostic-btn-secondary-navy-on-white{background:transparent;color:var(--navy);border:var(--stroke-hairline) solid var(--navy);transition:background 0.3s, border-color 0.3s, color 0.3s;} /* used: screening-results-pages */
:where(.page-diagnostic) .diagnostic-btn-secondary-navy-on-white:hover{background:var(--hover-overlay-dark);border-color:var(--navy-dark);color:var(--navy-dark);} /* used: screening-results-pages */
:where(.page-diagnostic) .diagnostic-content-box-stroked-mushroom{border:0.5px solid var(--mushroom);background-color:transparent;border-radius:var(--app-default-radius-md);} /* used: screening-results-pages */
:where(.page-diagnostic) .section-panel-light-white{width:100%;background-color:var(--t-band-soft);} /* used: screening-results-pages */
:where(.page-diagnostic) .section-panel-bright-blue{width:100%;background-color:var(--bright-blue);color:var(--light-white);} /* used: screening-results-pages */
:root:where(.page-diagnostic){--z-side-bar-placeholder:10000004;--severity-dot-size:1.1rem;--key-row-gap:0.5rem;} /* used: screening-results-pages */
:root:where(.page-diagnostic){--z-chrome:1001;--z-section-nav:999;--section-nav-edge-inset:var(--default-left-right-desk-body-padding);--opacity-very-high:0.8;--light-white-rgb:250,248,247;} /* used: screening-results-pages */
:where(.page-diagnostic) .temp-chrome.hidden{transform:translateY(-100%);} /* used: screenings-home */
:where(.page-diagnostic) .diagnostic-centred-card-carousel:focus, :where(.page-diagnostic) .diagnostic-centred-card-carousel:focus-visible{outline:none;} /* used: screening-results-pages */
:where(.page-diagnostic) .carousel-nav-btn:focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset);} /* used: chrome */
:where(.page-diagnostic) .explanation-card:focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset);}
:where(.page-diagnostic) .keep-with-next{break-after:avoid;}
:where(.page-diagnostic) .radar-graph-canvas:focus-visible:where(:not(.uma-input-pointer *)){outline:var(--stroke-thick) solid var(--t-emphasis);outline-offset:var(--app-default-top-bottom-margin-xxxxs);} /* used: learn-pages-homepage-legal */
:root:where(.page-diagnostic){--t-page-bg:var(--mid-white);--t-band-alt:var(--new-white);--t-surface:var(--light-white);--t-band-soft:var(--light-white);--t-card-soft:var(--light-white);--t-card-soft-rgb:250,248,247;--t-selected-bg:var(--navy);--t-selected-text:var(--bright-white);--t-nav-frost:rgba(var(--light-white-rgb), var(--opacity-very-high));--t-heading:var(--navy);--t-emphasis:var(--navy);--t-emphasis-hover:var(--navy-dark);--t-page-text:var(--mid-charcoal);--t-text-strong:var(--dark-charcoal);--t-text-secondary:var(--light-charcoal);--t-text-muted:var(--lightest-charcoal);--t-divider:var(--dark-white);--t-line-muted:var(--lightest-charcoal);--t-control-bg:var(--dark-white);--t-chart-grid:var(--lightest-charcoal);--t-header-bg:var(--light-white);--t-chart-band:var(--mid-white);--t-export-button-bg:var(--navy);--t-export-button-bg-hover:var(--navy-dark);--t-export-button-text:var(--bright-white);--t-export-button-text-hover:var(--bright-white);--t-export-button-edge:var(--navy);--t-switch-bg:var(--dark-white);--t-nav-control:var(--lightest-charcoal);--t-nav-control-hover-bg:var(--hover-overlay-light);--t-nav-control-hover-icon:var(--mid-charcoal);--t-nav-control-hover-edge:var(--mid-charcoal);--t-box-edge:var(--mushroom);--t-tooltip-bg:rgba(25, 25, 25, 0.9);--t-tooltip-text:var(--pure-white);--t-score-met:var(--bright-green);} /* used: screening-results-pages */
:root[data-theme="dark"]:where(.page-diagnostic){--bright-white:var(--mid-white);--bright-white-rgb:242,237,234;--rule-grey:rgba(var(--bright-white-rgb), 0.1);--t-page-bg:var(--navy-60);--t-band-alt:var(--navy-40);--t-surface:var(--navy);--t-band-soft:var(--navy-60);--t-card-soft:var(--navy);--t-card-soft-rgb:35,47,75;--t-selected-bg:var(--bright-white);--t-selected-text:var(--navy);--t-nav-frost:rgba(var(--navy-60-rgb), var(--opacity-very-high));--t-heading:var(--bright-white);--t-emphasis:var(--bright-white);--t-emphasis-hover:var(--bright-white);--t-page-text:var(--bright-white);--t-text-strong:var(--bright-white);--t-text-secondary:rgba(var(--bright-white-rgb), 0.7);--t-text-muted:rgba(var(--bright-white-rgb), 0.55);--t-divider:rgba(var(--bright-white-rgb), 0.1);--t-line-muted:rgba(var(--bright-white-rgb), 0.5);--t-control-bg:rgba(var(--bright-white-rgb), 0.2);--t-chart-grid:rgba(var(--bright-white-rgb), 0.2);--t-header-bg:var(--navy-60);--t-chart-band:var(--navy-40);--t-export-button-bg:transparent;--t-export-button-bg-hover:var(--bright-white);--t-export-button-text:var(--bright-white);--t-export-button-text-hover:var(--navy-60);--t-export-button-edge:var(--bright-white);--t-switch-bg:var(--navy);--t-nav-control:var(--bright-white);--t-nav-control-hover-bg:var(--bright-white);--t-nav-control-hover-icon:var(--navy-40);--t-nav-control-hover-edge:var(--bright-white);--t-box-edge:rgba(var(--bright-white-rgb), 0.2);--t-tooltip-bg:var(--bright-white);--t-tooltip-text:var(--navy);--t-score-met:var(--bright-white);}
:root:where(.page-condition){--accordion-open-max-height:4000px;--gap-xxs:0.4rem;--gap-xs:0.5rem;--gap-sm:0.6rem;--gap-md:0.8rem;--gap-regular:1rem;--gap-xl:1.5rem;--gap-xxl:2rem;--heading-size-xxl:2.75rem;--heading-size-xl:2.2rem;--heading-size-lg:2rem;--heading-size-md:1.7rem;--heading-size-sm:1.2rem;--heading-size-xs:1.12rem;--heading-letter-spacing-tight:-0.02em;--body-text-lg:1.12rem;--body-text-sm:1rem;--body-text-xs:.9rem;--default-line-height-single:1;--default-line-height-small:1.5;--default-line-height-large:1.6;--font-weight-light:350;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semi-bold:600;--button-size-xs:30px;--button-size-sm:35px;--button-size-md:40px;--button-size-lg:50px;--button-size-xl:60px;--button-size-xxl:70px;--button-icon-xs:0.8rem;--button-icon-sm:1.1rem;--button-icon-md:1.2rem;--button-icon-lg:1.4rem;--button-icon-xl:1.5rem;--button-icon-xxl:1.6rem;--app-default-top-bottom-margin-xxs:0.5rem;--app-default-top-bottom-margin-xs:.8rem;--app-default-top-bottom-margin-sm:1rem;--app-default-top-bottom-margin-lg:1.5rem;--app-default-top-bottom-margin-xl:2rem;--app-default-top-bottom-margin-xxl:2.5rem;--app-default-top-bottom-margin-xxxl:3rem;--app-default-top-bottom-margin-xxxxl:4rem;--btn-radius-full:999px;--btn-radius:10px;--radius-pill:999px;--radius-circle:50%;--btn-padding-x:2rem;--marker-size:2rem;--answer-button-height:var(--button-size-xxl);--stroke-hairline:0.5px;--stroke-thin:1px;--stroke-thick:2px;--focus-outline-width:var(--stroke-extra-thick);--focus-ring-offset:2px;--focus-outline-color:var(--orange);--opacity-very-high:0.8;--hover-overlay-dark:rgba(35, 47, 75, 0.08);--hover-overlay-light:rgba(0, 0, 0, 0.05);--pure-white:#FFFFFF;--bright-white:#F9F9F9;--new-white:#F6F3F1;--light-white:#FAF8F7;--mid-white:#F2EDEA;--dark-white:#DCD6D4;--white-text-default:var(--bright-white);--lightest-charcoal:#9C9894;--light-charcoal:#808080;--mid-charcoal:#333232;--dark-charcoal:#0E0F15;--bright-white-rgb:249,249,249;--light-white-rgb:250,248,247;--navy:#232F4B;--navy-dark:#192032;--bright-blue:#034A69;--dark-teal:#006570;--bright-green:#23683B;--moss-green:#104736;--orange:#EA7100;--orange-dark:#D36400;--mustard:#B08211;--tomato:#DE4D00;--red:#C34825;--light-mushroom:#D6C9B4;--app-default-radius-md:10px;--app-default-radius-lg:15px;--carouselle-card-width-medium:320px;--carouselle-card-width-mobile:310px;--transition-base:0.3s;--uma-disc-card-width:var(--carouselle-card-width-medium);--sidebar-width:0px;--fixed-header-height:60px;--max-body-content-width:1280px;--max-body-wrapper-width:calc(var(--max-body-content-width) - var(--sidebar-width));--inner-wrapper-margin-top-desktop:2.5rem;--inner-wrapper-margin-top-mobile:1.5rem;--default-left-right-mob-body-padding:2rem;--default-left-right-desk-body-padding:4rem;--golden-ratio:1.618;--golden-ratio-small:0.382;--golden-ratio-large:0.618;--golden-width-small:calc(var(--max-body-content-width) * var(--golden-ratio-small));--golden-width-large:calc(var(--max-body-content-width) * var(--golden-ratio-large));--max-content-width-golden-section-large:calc((var(--max-body-wrapper-width) - 2 * var(--default-left-right-desk-body-padding)) * var(--golden-ratio-large));--back-next-button-diameter:2.5rem;--section-title-font-size:var(--heading-size-xxl);--lozenge-padding-x:1.5rem;--switch-thumb-inset:4px;} /* used: screening-results-pages */
:where(.page-condition) body{background-color:var(--mid-white);font-family:"Inter", sans-serif;color:var(--mid-charcoal);margin:0;overscroll-behavior:none;scroll-behavior:smooth;} /* used: screening-results-pages */
:where(.page-condition) .condition-btn:focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset);}
:focus-visible:where(:not(.uma-input-pointer *)):where(.page-condition), :where(.page-condition) :focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:0;}
:root:where(.page-condition){--default-line-height-x-small:1.2;} /* used: screening-results-pages */
:root:where(.page-condition){--card-h2-pad-top:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages */
:root:where(.page-condition){--t-page-bg:var(--mid-white);--t-band:var(--mid-white);--t-band-alt:var(--new-white);--t-nav-frost:rgba(var(--light-white-rgb), var(--opacity-very-high));--t-heading:var(--navy);--t-emphasis:var(--navy);--t-emphasis-hover:var(--navy-dark);--t-page-text:var(--mid-charcoal);--t-text-strong:var(--dark-charcoal);--t-divider:var(--dark-white);--t-header-bg:var(--light-white);--t-nav-control:var(--lightest-charcoal);--t-nav-control-hover-bg:var(--hover-overlay-light);--t-nav-control-hover-icon:var(--mid-charcoal);--t-nav-control-hover-edge:var(--mid-charcoal);} /* used: screening-results-pages */
:root[data-theme="dark"]:where(.page-condition){--bright-white:var(--mid-white);--bright-white-rgb:242,237,234;--t-page-bg:var(--navy-60);--t-band:var(--navy-60);--t-band-alt:var(--navy-40);--t-nav-frost:rgba(var(--navy-60-rgb), var(--opacity-very-high));--t-heading:var(--bright-white);--t-emphasis:var(--bright-white);--t-emphasis-hover:var(--bright-white);--t-page-text:var(--bright-white);--t-text-strong:var(--bright-white);--t-divider:rgba(var(--bright-white-rgb), 0.1);--t-header-bg:var(--navy-60);--t-nav-control:var(--bright-white);--t-nav-control-hover-bg:var(--bright-white);--t-nav-control-hover-icon:var(--navy-40);--t-nav-control-hover-edge:var(--bright-white);}
:root:where(.page-adhd-profile, .page-autism-profile){--button-icon-xl:1.5rem;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:root:where(.page-adhd-profile, .page-autism-profile){--navy-40:#151C2D;--navy-60:#0E131E;--navy-60-rgb:14,19,30;--bright-white-rgb:249,249,249;--white-text-default:var(--bright-white);--accordion-open-max-height:4000px;--body-text-lg:1.12rem;--black-rgb:0,0,0;--opacity-very-low:0.05;--canvas-sheet-shadow:0 4px 22px rgba(var(--black-rgb), var(--opacity-very-low));--default-line-height-small:1.5;--golden-width-large:calc(var(--max-body-content-width) * var(--golden-ratio-large));} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-autism-profile, .page-cptsd-profile) .adhd-autism-cptsd-profile-btn{display:inline-flex;align-items:center;padding:0 1.5rem;border:none;border-radius:999px;background:transparent;font-family:inherit;font-size:1rem;font-weight:400;line-height:1;cursor:pointer;flex-shrink:0;} /* used: screening-results-pages */
:where(.page-autism-profile, .page-cptsd-profile) .btn-pill{border-radius:999px;justify-content:center;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .nd-profile-header-items{box-sizing:border-box;width:100%;max-width:var(--max-body-content-width);height:var(--subnav-row-height);display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */
:root:where(.page-masking-profile, .page-rsd-profile){--bright-white:#F9F9F9;--new-white:#F6F3F1;--light-white:#FAF8F7;--mid-white:#F2EDEA;--lightest-charcoal:#9C9894;--light-charcoal:#808080;--mid-charcoal:#333232;--dark-charcoal:#0E0F15;--dark-teal:#006570;--orange:#EA7100;--orange-dark:#D36400;--red:#C34825;--dark-sage-green:#565205;--bright-teal:#009691;--bright-green:#23683B;--bright-blue:#034A69;--yellow:#EAB409;--mustard:#B08211;--tomato:#DE4D00;--navy:#232F4B;--moss-green:#104736;--light-sage-green:#808029;--light-mushroom:#D6C9B4;--mushroom:#9F9280;--default-radius:10px;--dark-white:#DCD6D4;--font-weight-medium:500;--gap-xl:1.5rem;--gap-xxs:0.4rem;--polar-chart-max-width-mob:320px;--button-size-xs:30px;--button-size-md:40px;--default-left-right-desk-body-padding:4rem;--default-left-right-mob-body-padding:2rem;--max-body-content-width:1280px;--app-default-top-bottom-margin-sm:1rem;--sidebar-width:60px;--max-body-wrapper-width:calc(var(--max-body-content-width) - var(--sidebar-width));--app-default-top-bottom-margin-xl:2rem;--app-default-top-bottom-margin-xxl:2.5rem;--app-default-top-bottom-margin-xxxl:3rem;--app-default-top-bottom-margin-xxxxl:4rem;--default-row-gap:var(--app-default-top-bottom-margin-sm);--gap-sm:0.6rem;--stroke-hairline:0.5px;--radius-pill:999px;--button-icon-md:1.2rem;--hover-overlay-light:rgba(0,0,0,0.05);--focus-outline-color:var(--orange);--focus-outline-width:var(--stroke-extra-thick);--focus-ring-offset:2px;--button-transition-duration:0.2s;--button-transition-ease:ease;--default-card-left-right-padding:2rem;--app-default-top-bottom-margin-xxs:0.5rem;--app-default-top-bottom-margin-lg:1.5rem;--radius-circle:50%;--transition-base:0.3s;--carouselle-card-xs:300px;--carouselle-card-width-mobile:310px;--carouselle-card-lg:340px;--carouselle-card-xl:360px;--carouselle-card-xxl:380px;--severity-dot-size:1.1rem;--body-text-sm:1rem;--app-default-top-bottom-margin-md:1.3rem;--app-default-radius-sm:8px;--app-default-radius-md:10px;--button-icon-lg:1.4rem;--gap-xxl:2rem;--gap-regular:1rem;--gap-md:0.8rem;--app-default-top-bottom-margin-xs:.8rem;--button-icon-xl:1.5rem;} /* used: screening-results-pages */
:root:where(.page-masking-profile, .page-rsd-profile){--hero-title-size:2.1rem;--section-headline-size:1.8rem;--caption-text-sm:0.85rem;--body-text-md:0.95rem;--app-default-top-bottom-margin-s:0.75rem;--default-line-height-compact:1.4;--default-line-height-medium:1.55;--max-hero-width:1200px;--hero-min-height:80vh;--hero-text-column-width:30%;--hero-chart-max-width:600px;--polar-chart-max-width-desk:450px;--polar-chart-max-width-mob:320px;--polar-chart-max-width-stacked:460px;--polar-stack-column-max-width:460px;--polar-text-stack-padding-top:4rem;--polar-text-stack-padding-top-mob:3rem;--polar-chart-top-offset:calc(var(--heading-size-md) * var(--default-line-height-x-small) + var(--app-default-top-bottom-margin-sm));--sev-dot-offset:calc((var(--heading-size-sm) * var(--default-line-height-x-small) - var(--severity-dot-size)) / 2);--sev-dot-offset-mob:calc((var(--heading-size-xs) * var(--default-line-height-x-small) - var(--severity-dot-size)) / 2);--key-row-gap:0.5rem;--polar-key-swatch-offset:calc((var(--body-text-sm) * var(--default-line-height-small) - var(--severity-dot-size)) / 2);--polar-key-off-opacity:0.4;--golden-ratio-large-percentage:61.8%;--golden-ratio-small-percentage:38.2%;--golden-ratio-large:0.618;--max-content-width-golden-section-large:calc((var(--max-body-wrapper-width) - 2 * var(--default-left-right-desk-body-padding)) * var(--golden-ratio-large));--score-group-min-width:320px;--carouselle-card-xxs:280px;--button-padding-horizontal-xl:2.8rem;--button-letter-spacing:0.015em;--severity-dot-size:1.1rem;--severity-bar-height:6px;--radius-sm:3px;--donut-diameter-ratio:60%;--donut-centre-gap:0.15rem;--radius-pill-explore:100px;--opacity-dimmed:0.3;--transition-card:0.35s;--transition-fade:0.6s;--transition-bar-fill:1.2s;--ease-card:cubic-bezier(0.4, 0, 0.2, 1);--z-hero-animation:0;--z-hero-content:1;--z-card-face:1;--z-card-mask:2;--z-card-back:3;--z-chrome:1001;--z-side-bar-placeholder:10000004;--z-skip-link:9999;--fixed-chrome-stack-height:calc(var(--fixed-header-height) + var(--subnav-row-height));} /* used: screening-results-pages */
:root:where(.page-masking-profile, .page-rsd-profile){--navy-40:#151C2D;--navy-60:#0E131E;--navy-60-rgb:14,19,30;--bright-white-rgb:249,249,249;--white-text-default:var(--bright-white);--navy-dark:#192032;--default-line-height-small:1.5;--font-weight-normal:400;} /* used: screening-results-pages */
:root:where(.page-masking-profile, .page-rsd-profile){--t-page-bg:var(--mid-white);--t-band:var(--mid-white);--t-band-alt:var(--new-white);--t-surface:var(--light-white);--t-card:var(--mid-white);--t-selected-bg:var(--navy);--t-selected-text:var(--bright-white);--t-nav-frost:rgba(var(--light-white-rgb), var(--opacity-very-high));--t-emphasis:var(--navy);--t-page-text:var(--mid-charcoal);--t-text-strong:var(--dark-charcoal);--t-text-secondary:var(--light-charcoal);--t-text-muted:var(--lightest-charcoal);--t-divider:var(--dark-white);--t-border:var(--dark-white);--t-line-muted:var(--lightest-charcoal);--t-chart-track:var(--light-mushroom);--t-chart-grid:var(--lightest-charcoal);--t-header-bg:var(--light-white);--t-card-panel:var(--mid-white);--t-hero-bg:var(--mid-white);--t-nav-control:var(--lightest-charcoal);--t-nav-control-hover-bg:var(--hover-overlay-light);--t-nav-control-hover-icon:var(--mid-charcoal);--t-nav-control-hover-edge:var(--mid-charcoal);--t-box-edge:var(--mushroom);--t-tooltip-bg:rgba(25, 25, 25, 0.9);--t-tooltip-text:var(--pure-white);--t-switch-bg:var(--dark-white);} /* used: screening-results-pages */
:root[data-theme="dark"]:where(.page-masking-profile, .page-rsd-profile){--bright-white:var(--mid-white);--bright-white-rgb:242,237,234;--t-page-bg:var(--navy-60);--t-band:var(--navy-60);--t-band-alt:var(--navy-40);--t-surface:var(--navy);--t-card:var(--navy);--t-selected-bg:var(--bright-white);--t-selected-text:var(--navy);--t-nav-frost:rgba(var(--navy-60-rgb), var(--opacity-very-high));--t-emphasis:var(--bright-white);--t-page-text:var(--bright-white);--t-text-strong:var(--bright-white);--t-text-secondary:rgba(var(--bright-white-rgb), 0.7);--t-text-muted:rgba(var(--bright-white-rgb), 0.55);--t-divider:rgba(var(--bright-white-rgb), 0.1);--t-border:rgba(var(--bright-white-rgb), 0.2);--t-line-muted:rgba(var(--bright-white-rgb), 0.5);--t-chart-track:rgba(var(--bright-white-rgb), 0.1);--t-chart-grid:rgba(var(--bright-white-rgb), 0.2);--t-header-bg:var(--navy-60);--t-card-panel:var(--navy-dark);--t-hero-bg:var(--navy-40);--t-nav-control:var(--bright-white);--t-nav-control-hover-bg:var(--bright-white);--t-nav-control-hover-icon:var(--navy-40);--t-nav-control-hover-edge:var(--bright-white);--t-box-edge:rgba(var(--bright-white-rgb), 0.2);--t-tooltip-bg:var(--bright-white);--t-tooltip-text:var(--navy);--t-switch-bg:var(--navy);} /* used: screening-results-pages */

@media print {
  :root[data-theme]:where(.page-masking-profile, .page-rsd-profile){--bright-white:#F9F9F9;--bright-white-rgb:249,249,249;--t-page-bg:var(--mid-white);--t-band:var(--mid-white);--t-band-alt:var(--new-white);--t-surface:var(--light-white);--t-card:var(--mid-white);--t-selected-bg:var(--navy);--t-selected-text:var(--bright-white);--t-nav-frost:rgba(var(--light-white-rgb), var(--opacity-very-high));--t-emphasis:var(--navy);--t-page-text:var(--mid-charcoal);--t-text-strong:var(--dark-charcoal);--t-text-secondary:var(--light-charcoal);--t-text-muted:var(--lightest-charcoal);--t-divider:var(--dark-white);--t-border:var(--dark-white);--t-line-muted:var(--lightest-charcoal);--t-chart-track:var(--light-mushroom);--t-chart-grid:var(--lightest-charcoal);--t-card-panel:var(--mid-white);--t-hero-bg:var(--mid-white);--t-nav-control:var(--lightest-charcoal);--t-nav-control-hover-bg:var(--hover-overlay-light);--t-nav-control-hover-icon:var(--mid-charcoal);--t-nav-control-hover-edge:var(--mid-charcoal);--t-box-edge:var(--mushroom);} /* used: screening-results-pages */
}

:where(.page-brain-body, .page-health-history) .brain-bubbles > g text{pointer-events:none;} /* used: screening-results-pages */
:root:where(.page-brain-body, .page-trauma-history){--z-side-bar-placeholder:10000004;} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .filter-pill.c-navy{--theme:var(--navy);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .filter-pill.c-bright-blue{--theme:var(--bright-blue);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .filter-pill.c-dark-teal{--theme:var(--dark-teal);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .filter-pill.c-moss-green{--theme:var(--moss-green);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .filter-pill.c-bright-green{--theme:var(--bright-green);} /* used: screening-results-pages */
:where(.page-hypermobility, .page-mcas) .intro-column{width:100%;height:auto;max-width:var(--golden-width-small);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */
:root:where(.page-mcas, .page-pots){--sidebar-width:60px;--subnav-row-height:60px;--link-line-height:4px;--card-h2-height:2.4rem;--card-h2-margin-bottom:0rem;--card-carousel-pad-top:2rem;--card-carousel-pad-bottom:2rem;--card-nav-height:40px;--card-nav-margin-top:0rem;--card-nav-margin-bottom:2rem;--cond-card-max-width:455px;--cond-card-max-width-md:360px;--cond-card-max-width-mob:340px;--cond-card-max-width-xs:310px;--below-carousel-height:300px;--card-row-veil:rgba(0,0,0,0.12);--app-default-top-bottom-margin-s:0.75rem;--superscript-size:0.4em;--heading-size-md-alt:1.5rem;--z-sticky-cards:10;--z-chrome:1001;--z-section-nav:999;--light-white-rgb:250,248,247;--z-side-bar-placeholder:10000004;} /* used: screening-results-pages */
:root:where(.page-adhd-profile){--bright-white:#F9F9F9;--new-white:#F6F3F1;--light-white:#FAF8F7;--mid-white:#F2EDEA;--lightest-charcoal:#9C9894;--light-charcoal:#808080;--mid-charcoal:#333232;--dark-charcoal:#0E0F15;--dark-teal:#006570;--orange:#EA7100;--orange-dark:#D36400;--red:#C34825;--dark-sage-green:#565205;--bright-teal:#009691;--bright-green:#23683B;--bright-blue:#034A69;--yellow:#EAB409;--mustard:#B08211;--tomato:#DE4D00;--navy:#232F4B;--moss-green:#104736;--light-sage-green:#808029;--light-mushroom:#D6C9B4;--mushroom:#9F9280;--default-radius:10px;--dark-white:#DCD6D4;--font-weight-normal:400;--font-weight-medium:500;--gap-xl:1.5rem;--gap-xxs:0.4rem;--button-size-xs:30px;--button-size-md:40px;--default-left-right-desk-body-padding:4rem;--default-left-right-mob-body-padding:2rem;--max-body-content-width:1280px;--app-default-top-bottom-margin-sm:1rem;--sidebar-width:60px;--max-body-wrapper-width:calc(var(--max-body-content-width) - var(--sidebar-width));--app-default-top-bottom-margin-xl:2rem;--app-default-top-bottom-margin-xxl:2.5rem;--app-default-top-bottom-margin-xxxl:3rem;--app-default-top-bottom-margin-xxxxl:4rem;--default-row-gap:var(--app-default-top-bottom-margin-sm);--gap-sm:0.6rem;--stroke-hairline:0.5px;--radius-pill:999px;--button-icon-md:1.2rem;--hover-overlay-light:rgba(0,0,0,0.05);--focus-outline-color:var(--orange);--focus-outline-width:var(--stroke-extra-thick);--focus-ring-offset:2px;--button-transition-duration:0.2s;--button-transition-ease:ease;--default-card-left-right-padding:2rem;--app-default-top-bottom-margin-xxs:0.5rem;--app-default-top-bottom-margin-lg:1.5rem;--radius-circle:50%;--transition-base:0.3s;--carouselle-card-xs:300px;--carouselle-card-width-mobile:310px;--carouselle-card-lg:340px;--carouselle-card-xl:360px;--carouselle-card-xxl:380px;--body-text-sm:1rem;--app-default-top-bottom-margin-md:1.3rem;--app-default-radius-sm:8px;--app-default-radius-md:10px;--button-icon-lg:1.4rem;--gap-xxl:2rem;--gap-regular:1rem;--gap-md:0.8rem;--app-default-top-bottom-margin-xs:.8rem;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile) .adhd-autism-cptsd-profile-btn{display:inline-flex;align-items:center;padding:0 1.5rem;border:none;border-radius:999px;background:transparent;font-family:inherit;font-size:1rem;font-weight:400;line-height:1;cursor:pointer;flex-shrink:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile) .btn-pill{border-radius:999px;justify-content:center;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:root:where(.page-adhd-profile){--hero-title-size:2.1rem;--app-default-top-bottom-margin-s:0.75rem;--section-headline-size:1.8rem;--caption-text-sm:0.85rem;--body-text-md:0.95rem;--default-line-height-compact:1.4;--default-line-height-medium:1.55;--max-hero-width:1200px;--hero-min-height:80vh;--hero-text-column-width:30%;--hero-chart-max-width:600px;--polar-chart-max-width-desk:450px;--polar-chart-max-width-stacked:460px;--polar-text-stack-padding-top:4rem;--polar-text-stack-padding-top-mob:3rem;--polar-chart-top-offset:calc(var(--heading-size-md) * var(--default-line-height-x-small) + var(--app-default-top-bottom-margin-sm));--md-radius:0;--navy-dark:#192032;--hover-overlay-dark:rgba(35, 47, 75, 0.08);--btn-padding-x:2rem;--button-icon-xs:0.8rem;--sev-dot-offset:calc((var(--heading-size-sm) * var(--default-line-height-x-small) - var(--severity-dot-size)) / 2);--sev-dot-offset-mob:calc((var(--heading-size-xs) * var(--default-line-height-x-small) - var(--severity-dot-size)) / 2);--key-row-gap:0.5rem;--polar-key-swatch-offset:calc((var(--body-text-sm) * var(--default-line-height-small) - var(--severity-dot-size)) / 2);--polar-key-off-opacity:0.4;--polar-chart-max-width-mob:320px;--polar-stack-column-max-width:460px;--golden-ratio-large-percentage:61.8%;--golden-ratio-small-percentage:38.2%;--max-content-width-golden-section-large:calc((var(--max-body-wrapper-width) - 2 * var(--default-left-right-desk-body-padding)) * var(--golden-ratio-large));--golden-ratio-large:0.618;--score-group-min-width:320px;--carouselle-card-xxs:280px;--button-padding-horizontal-xl:2.8rem;--button-letter-spacing:0.015em;--severity-dot-size:1.1rem;--severity-bar-height:6px;--radius-sm:3px;--donut-diameter-ratio:60%;--donut-centre-gap:0.15rem;--radius-pill-explore:100px;--opacity-dimmed:0.3;--opacity-very-high:0.8;--light-white-rgb:250,248,247;--transition-card:0.35s;--transition-fade:0.6s;--transition-bar-fill:1.2s;--ease-card:cubic-bezier(0.4, 0, 0.2, 1);--z-hero-animation:0;--z-hero-content:1;--z-card-face:1;--z-card-mask:2;--z-card-back:3;--z-section-nav:999;--z-chrome:1001;--z-side-bar-placeholder:10000004;--fixed-chrome-stack-height:calc(var(--fixed-header-height) + var(--subnav-row-height));} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:root:where(.page-autism-profile){--bright-white:#F9F9F9;--new-white:#F6F3F1;--light-white:#FAF8F7;--mid-white:#F2EDEA;--lightest-charcoal:#9C9894;--light-charcoal:#808080;--mid-charcoal:#333232;--dark-charcoal:#0E0F15;--dark-teal:#006570;--orange:#EA7100;--orange-dark:#D36400;--red:#C34825;--dark-sage-green:#565205;--bright-teal:#009691;--bright-green:#23683B;--bright-blue:#034A69;--yellow:#EAB409;--mustard:#B08211;--tomato:#DE4D00;--navy:#232F4B;--moss-green:#104736;--light-sage-green:#808029;--light-mushroom:#D6C9B4;--mushroom:#9F9280;--default-radius:10px;--dark-white:#DCD6D4;--font-weight-normal:400;--font-weight-medium:500;--gap-xl:1.5rem;--gap-xxs:0.4rem;--polar-chart-max-width-mob:320px;--button-size-xs:30px;--button-size-md:40px;--default-left-right-desk-body-padding:4rem;--default-left-right-mob-body-padding:2rem;--max-body-content-width:1280px;--app-default-top-bottom-margin-sm:1rem;--sidebar-width:60px;--max-body-wrapper-width:calc(var(--max-body-content-width) - var(--sidebar-width));--app-default-top-bottom-margin-xl:2rem;--app-default-top-bottom-margin-xxl:2.5rem;--app-default-top-bottom-margin-xxxl:3rem;--app-default-top-bottom-margin-xxxxl:4rem;--default-row-gap:var(--app-default-top-bottom-margin-sm);--gap-sm:0.6rem;--stroke-hairline:0.5px;--radius-pill:999px;--button-icon-md:1.2rem;--hover-overlay-light:rgba(0,0,0,0.05);--focus-outline-color:var(--orange);--focus-outline-width:var(--stroke-extra-thick);--focus-ring-offset:2px;--button-transition-duration:0.2s;--button-transition-ease:ease;--default-card-left-right-padding:2rem;--app-default-top-bottom-margin-xxs:0.5rem;--app-default-top-bottom-margin-lg:1.5rem;--radius-circle:50%;--transition-base:0.3s;--carouselle-card-xs:300px;--carouselle-card-width-mobile:310px;--carouselle-card-lg:340px;--carouselle-card-xl:360px;--carouselle-card-xxl:380px;--severity-dot-size:1.1rem;--body-text-sm:1rem;--app-default-top-bottom-margin-md:1.3rem;--app-default-radius-sm:8px;--app-default-radius-md:10px;--button-icon-lg:1.4rem;--gap-xxl:2rem;--gap-regular:1rem;--gap-md:0.8rem;--app-default-top-bottom-margin-xs:.8rem;} /* used: screening-results-pages */
:root:where(.page-autism-profile){--hero-title-size:2.1rem;--section-headline-size:1.8rem;--caption-text-sm:0.85rem;--body-text-md:0.95rem;--app-default-top-bottom-margin-s:0.75rem;--default-line-height-compact:1.4;--default-line-height-medium:1.55;--max-hero-width:1200px;--hero-min-height:80vh;--hero-text-column-width:30%;--hero-chart-max-width:600px;--polar-chart-max-width-desk:450px;--polar-chart-max-width-stacked:460px;--polar-stack-column-max-width:460px;--polar-text-stack-padding-top:4rem;--polar-text-stack-padding-top-mob:3rem;--polar-chart-top-offset:calc(var(--heading-size-md) * var(--default-line-height-x-small) + var(--app-default-top-bottom-margin-sm));--md-radius:0;--navy-dark:#192032;--hover-overlay-dark:rgba(35, 47, 75, 0.08);--btn-padding-x:2rem;--button-icon-xs:0.8rem;--sev-dot-offset:calc((var(--heading-size-sm) * var(--default-line-height-x-small) - var(--severity-dot-size)) / 2);--sev-dot-offset-mob:calc((var(--heading-size-xs) * var(--default-line-height-x-small) - var(--severity-dot-size)) / 2);--key-row-gap:0.5rem;--polar-key-swatch-offset:calc((var(--body-text-sm) * var(--default-line-height-small) - var(--severity-dot-size)) / 2);--polar-key-off-opacity:0.4;--golden-ratio-large-percentage:61.8%;--golden-ratio-small-percentage:38.2%;--golden-ratio-large:0.618;--max-content-width-golden-section-large:calc((var(--max-body-wrapper-width) - 2 * var(--default-left-right-desk-body-padding)) * var(--golden-ratio-large));--score-group-min-width:320px;--carouselle-card-xxs:280px;--button-padding-horizontal-xl:2.8rem;--button-letter-spacing:0.015em;--severity-dot-size:1.1rem;--severity-bar-height:6px;--radius-sm:3px;--donut-diameter-ratio:60%;--donut-centre-gap:0.15rem;--radius-pill-explore:100px;--opacity-dimmed:0.3;--transition-card:0.35s;--transition-fade:0.6s;--transition-bar-fill:1.2s;--ease-card:cubic-bezier(0.4, 0, 0.2, 1);--z-hero-animation:0;--z-hero-content:1;--z-card-face:1;--z-card-mask:2;--z-card-back:3;--z-chrome:1001;--z-side-bar-placeholder:10000004;--fixed-chrome-stack-height:calc(var(--fixed-header-height) + var(--subnav-row-height));} /* used: screening-results-pages */
:root:where(.page-cptsd-profile){--bright-white:#F9F9F9;--new-white:#F6F3F1;--light-white:#FAF8F7;--mid-white:#F2EDEA;--lightest-charcoal:#9C9894;--light-charcoal:#808080;--mid-charcoal:#333232;--dark-charcoal:#0E0F15;--navy:#232F4B;--navy-dark:#192032;--bright-blue:#034A69;--bright-teal:#009691;--dark-teal:#006570;--bright-green:#23683B;--moss-green:#104736;--light-sage-green:#808029;--dark-sage-green:#565205;--orange:#EA7100;--orange-dark:#D36400;--yellow:#EAB409;--mustard:#B08211;--tomato:#DE4D00;--red:#C34825;--light-mushroom:#D6C9B4;--mushroom:#9F9280;--default-radius:10px;--dark-white:#DCD6D4;--font-weight-normal:400;--font-weight-medium:500;--gap-xl:1.5rem;--gap-xxs:0.4rem;--polar-chart-max-width-mob:420px;--button-size-xs:30px;--button-size-md:40px;--default-left-right-desk-body-padding:4rem;--default-left-right-mob-body-padding:2rem;--max-body-content-width:1280px;--app-default-top-bottom-margin-sm:1rem;--sidebar-width:60px;--max-body-wrapper-width:calc(var(--max-body-content-width) - var(--sidebar-width));--app-default-top-bottom-margin-xl:2rem;--app-default-top-bottom-margin-xxl:2.5rem;--app-default-top-bottom-margin-xxxl:3rem;--app-default-top-bottom-margin-xxxxl:4rem;--default-row-gap:var(--app-default-top-bottom-margin-sm);--gap-sm:0.6rem;--stroke-hairline:0.5px;--radius-pill:999px;--button-icon-md:1.2rem;--hover-overlay-light:rgba(0,0,0,0.05);--focus-outline-color:var(--orange);--focus-outline-width:var(--stroke-extra-thick);--focus-ring-offset:2px;--button-transition-duration:0.2s;--button-transition-ease:ease;--default-card-left-right-padding:2rem;--app-default-top-bottom-margin-xxs:0.5rem;--app-default-top-bottom-margin-lg:1.5rem;--radius-circle:50%;--transition-base:0.3s;--carouselle-card-xs:300px;--carouselle-card-width-mobile:310px;--carouselle-card-lg:340px;--carouselle-card-xl:360px;--carouselle-card-xxl:380px;--severity-dot-size:1.1rem;--gap-regular:1rem;--gap-md:0.8rem;--app-default-top-bottom-margin-xs:.8rem;--app-default-top-bottom-margin-md:1.3rem;--app-default-radius-sm:8px;--app-default-radius-md:10px;--button-icon-lg:1.4rem;--gap-xxl:2rem;--button-icon-xl:1.5rem;} /* used: screening-results-pages */
:root:where(.page-cptsd-profile){--heading-size-sm:1.2rem;--heading-size-md:1.7rem;--heading-size-lg:2rem;--heading-size-xl:2.2rem;--heading-size-xs:1.12rem;--body-text-lg:1.12rem;--body-text-xs:.9rem;--body-text-xxs:.8rem;--heading-letter-spacing-tight:-0.02em;--default-line-height-single:1;--default-line-height-x-small:1.3;--default-line-height-large:1.6;--font-weight-light:350;--font-weight-semi-bold:600;--gap-xs:0.5rem;--gap-sm:0.6rem;--button-size-lg:50px;--stroke-thin:1px;--pure-white:#FFFFFF;--opacity-hidden:0;--opacity-visible:1;--transition-fast:.2s;} /* used: screening-results-pages */
:root:where(.page-cptsd-profile){--caption-text-sm:0.85rem;--body-text-md:0.95rem;--app-default-top-bottom-margin-s:0.75rem;--max-hero-width:1200px;--hero-min-height:80vh;--hero-text-column-width:30%;--hero-chart-max-width:600px;--polar-chart-max-width-desk:450px;--polar-chart-max-width-mob:320px;--polar-chart-max-width-stacked:460px;--polar-stack-column-max-width:460px;--polar-text-stack-padding-top:4rem;--polar-text-stack-padding-top-mob:3rem;--polar-chart-top-offset:calc(var(--heading-size-md) * var(--default-line-height-x-small) + var(--app-default-top-bottom-margin-sm));--md-radius:0;--navy-dark:#192032;--hover-overlay-dark:rgba(35, 47, 75, 0.08);--btn-padding-x:2rem;--button-icon-xs:0.8rem;--sev-dot-offset:calc((var(--heading-size-sm) * var(--default-line-height-x-small) - var(--severity-dot-size)) / 2);--sev-dot-offset-mob:calc((var(--heading-size-xs) * var(--default-line-height-x-small) - var(--severity-dot-size)) / 2);--key-row-gap:0.5rem;--polar-key-swatch-offset:calc((var(--body-text-sm) * var(--default-line-height-small) - var(--severity-dot-size)) / 2);--polar-key-off-opacity:0.4;--golden-ratio-large-percentage:61.8%;--golden-ratio-small-percentage:38.2%;--golden-ratio-large:0.618;--max-content-width-golden-section-large:calc((var(--max-body-wrapper-width) - 2 * var(--default-left-right-desk-body-padding)) * var(--golden-ratio-large));--score-group-min-width:320px;--carouselle-card-xxs:280px;--button-padding-horizontal-xl:2.8rem;--button-letter-spacing:0.015em;--severity-dot-size:1.1rem;--severity-bar-height:6px;--radius-sm:3px;--donut-diameter-ratio:60%;--donut-centre-gap:0.15rem;--radius-pill-explore:100px;--opacity-dimmed:0.3;--transition-card:0.35s;--transition-fade:0.6s;--transition-bar-fill:1.2s;--ease-card:cubic-bezier(0.4, 0, 0.2, 1);--z-hero-animation:0;--z-hero-content:1;--z-card-face:1;--z-card-mask:2;--z-card-back:3;--z-chrome:1001;--z-side-bar-placeholder:10000004;--z-skip-link:9999;--fixed-chrome-stack-height:calc(var(--fixed-header-height) + var(--subnav-row-height));} /* used: screening-results-pages */
:root:where(.page-cptsd-profile){--navy-40:#151C2D;--navy-60:#0E131E;--navy-60-rgb:14,19,30;--bright-white-rgb:249,249,249;--white-text-default:var(--bright-white);--body-text-sm:1rem;--black-rgb:0,0,0;--opacity-very-low:0.05;--canvas-sheet-shadow:0 4px 22px rgba(var(--black-rgb), var(--opacity-very-low));--default-line-height-small:1.5;} /* used: screening-results-pages */
:root[data-theme="dark"]:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile){--bright-white:var(--mid-white);--bright-white-rgb:242,237,234;--t-page-bg:var(--navy-60);--t-band:var(--navy-60);--t-band-alt:var(--navy-40);--t-surface:var(--navy);--t-card:var(--navy);--t-surface-hover:var(--navy-dark);--t-selected-bg:var(--bright-white);--t-selected-text:var(--navy);--t-nav-frost:rgba(var(--navy-60-rgb), var(--opacity-very-high));--t-emphasis:var(--bright-white);--t-emphasis-hover:var(--bright-white);--t-page-text:var(--bright-white);--t-text-strong:var(--bright-white);--t-text-secondary:rgba(var(--bright-white-rgb), 0.7);--t-text-muted:rgba(var(--bright-white-rgb), 0.55);--t-divider:rgba(var(--bright-white-rgb), 0.1);--t-border:rgba(var(--bright-white-rgb), 0.2);--t-line-muted:rgba(var(--bright-white-rgb), 0.5);--t-chart-track:rgba(var(--bright-white-rgb), 0.1);--t-chart-grid:rgba(var(--bright-white-rgb), 0.2);--t-header-bg:var(--navy-60);--t-card-panel:var(--navy-dark);--t-hero-bg:var(--navy-40);--t-nav-control:var(--bright-white);--t-nav-control-hover-bg:var(--bright-white);--t-nav-control-hover-icon:var(--navy-40);--t-nav-control-hover-edge:var(--bright-white);--t-box-edge:rgba(var(--bright-white-rgb), 0.2);--t-tooltip-bg:var(--bright-white);--t-tooltip-text:var(--navy);--t-switch-bg:var(--navy);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media print {
  :root[data-theme]:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile){--bright-white:#F9F9F9;--bright-white-rgb:249,249,249;--t-page-bg:var(--mid-white);--t-band:var(--mid-white);--t-band-alt:var(--new-white);--t-surface:var(--light-white);--t-card:var(--mid-white);--t-surface-hover:var(--mid-white);--t-selected-bg:var(--navy);--t-selected-text:var(--bright-white);--t-nav-frost:rgba(var(--light-white-rgb), var(--opacity-very-high));--t-emphasis:var(--navy);--t-emphasis-hover:var(--navy-dark);--t-page-text:var(--mid-charcoal);--t-text-strong:var(--dark-charcoal);--t-text-secondary:var(--light-charcoal);--t-text-muted:var(--lightest-charcoal);--t-divider:var(--dark-white);--t-border:var(--dark-white);--t-line-muted:var(--lightest-charcoal);--t-chart-track:var(--light-mushroom);--t-chart-grid:var(--lightest-charcoal);--t-card-panel:var(--mid-white);--t-hero-bg:var(--mid-white);--t-nav-control:var(--lightest-charcoal);--t-nav-control-hover-bg:var(--hover-overlay-light);--t-nav-control-hover-icon:var(--mid-charcoal);--t-nav-control-hover-edge:var(--mid-charcoal);--t-box-edge:var(--mushroom);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

*:where(.page-brain-body), :where(.page-brain-body) *{box-sizing:border-box;} /* used: screening-results-pages */
html:where(.page-brain-body), :where(.page-brain-body) body{margin:0;padding:0;background:var(--t-band-alt);font-family:"Inter",system-ui,sans-serif;color:var(--t-page-text);} /* used: screening-results-pages */
:where(.page-brain-body) body{min-height:100vh;overflow-x:hidden;} /* used: screening-results-pages */
:where(.page-brain-body) .bg{position:fixed;inset:0;background:var(--t-band-alt);z-index:-1;} /* used: screening-results-pages */
:where(.page-brain-body) .split{display:flex;flex-direction:row;gap:2rem;align-items:stretch;min-height:80vh;} /* used: screening-results-pages */
:where(.page-brain-body) .left{flex:0 0 max-content;display:flex;flex-direction:column;justify-content:center;opacity:0;animation:fadeIn 0.6s ease 0.3s both;} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-hero-title{white-space:nowrap;} /* used: screening-results-pages */
:where(.page-brain-body) .right{flex:1 1 auto;position:relative;aspect-ratio:1/1;} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-hero-title{font-size:2.1rem;font-weight:var(--font-weight-extra-light);line-height:1.3;letter-spacing:-0.02em;color:var(--t-page-text);margin:0;} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-hero-title{text-align:left;margin:0;} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-hero-text-mobile{display:none;text-align:left;margin:0 0 2.5rem;} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-hero-title-mobile{font-size:2.1rem;font-weight:300;line-height:1.3;letter-spacing:-0.02em;color:var(--t-page-text);margin:0;} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-explore-btn svg{flex-shrink:0;}
:root:where(.page-brain-body){--subnav-row-height:60px;--link-line-height:4px;} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-temp-chrome-hidden{transform:translateY(-100%);} /* used: screening-results-pages */
:root:where(.page-brain-body){--z-section-nav:999;--section-nav-edge-inset:var(--default-left-right-desk-body-padding);--light-white-rgb:250,248,247;} /* used: screening-results-pages */

@media (min-width:1280px) {
  :root:where(.page-profile, .page-diagnostic, .page-brain-body, .page-health-history, .page-condition, .page-trauma-history){--section-nav-edge-inset:calc(((100vw - var(--sidebar-width) - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:600px) {
  :root:where(.page-profile, .page-diagnostic, .page-brain-body, .page-health-history, .page-condition, .page-trauma-history){--section-nav-edge-inset:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:root:where(.page-brain-body){--app-default-top-bottom-margin-xxxl:3rem;--app-default-top-bottom-margin-xxxxl:4rem;} /* used: screening-results-pages */
:root:where(.page-brain-body){--body-text-md:1rem;} /* used: screening-results-pages */
:root:where(.page-brain-body){--navy-40:#151C2D;--navy-60:#0E131E;--navy-60-rgb:14,19,30;--hover-overlay-light:rgba(0, 0, 0, 0.05);--light-mushroom:#D6C9B4;--navy-dark:#192032;--white-text-default:var(--bright-white);--body-text-sm:1rem;--body-text-xs:.9rem;--default-line-height-single:1;--focus-outline-color:var(--orange);--focus-ring-offset:2px;--font-weight-extra-light:300;--font-weight-normal:400;--heading-size-sm:1.2rem;--orange-dark:#D36400;--stroke-thin:1px;--transition-base:0.3s;} /* used: screening-results-pages */
:root:where(.page-brain-body){--t-band:var(--mid-white);--t-band-alt:var(--new-white);--t-surface:var(--light-white);--t-surface-hover:var(--mid-white);--t-nav-frost:rgba(var(--light-white-rgb), var(--opacity-very-high));--t-heading:var(--navy);--t-emphasis:var(--navy);--t-page-text:var(--mid-charcoal);--t-text-secondary:var(--light-charcoal);--t-divider:var(--dark-white);--t-border:var(--dark-white);--t-line-muted:var(--lightest-charcoal);--t-header-bg:var(--light-white);} /* used: screening-results-pages */
:root:where(.page-brain-body){--focus-outline-width:2.5px;} /* used: screening-results-pages */
:root:where(.page-health-history){--gap-xxs:0.4rem;--gap-xs:0.5rem;--gap-sm:0.6rem;--gap-md:0.8rem;--gap-regular:1rem;--gap-xl:1.5rem;--gap-xxl:2rem;--default-gap:var(--gap-regular);--heading-size-xl:2.2rem;--heading-size-lg:2rem;--heading-size-md:1.7rem;--heading-size-sm:1.2rem;--heading-size-xs:1.12rem;--heading-letter-spacing-tight:-0.02em;--body-text-lg:1.12rem;--body-text-sm:1rem;--body-text-xs:.9rem;--default-line-height-single:1;--default-line-height-small:1.5;--default-line-height-large:1.6;--font-weight-light:350;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semi-bold:600;--button-size-xs:30px;--button-size-sm:35px;--button-size-md:40px;--button-size-lg:50px;--button-size-xl:60px;--button-size-xxl:70px;--button-icon-xs:0.8rem;--button-icon-sm:1.1rem;--button-icon-md:1.2rem;--button-icon-lg:1.4rem;--button-icon-xl:1.5rem;--button-icon-xxl:1.6rem;--app-default-top-bottom-margin-xxs:0.5rem;--app-default-top-bottom-margin-xs:.8rem;--app-default-top-bottom-margin-sm:1rem;--app-default-top-bottom-margin-lg:1.5rem;--app-default-top-bottom-margin-xl:2rem;--app-default-top-bottom-margin-xxl:2.5rem;--app-default-top-bottom-margin-xxxl:3rem;--app-default-top-bottom-margin-xxxxl:4rem;--btn-radius-full:999px;--btn-radius:10px;--radius-pill:999px;--radius-circle:50%;--btn-padding-x:2rem;--marker-size:2rem;--answer-button-height:var(--button-size-xxl);--stroke-hairline:0.5px;--stroke-thin:1px;--focus-ring-offset:2px;--focus-outline-color:var(--orange);--opacity-very-low:0.05;--opacity-very-high:0.8;--navy-rgb:35,47,75;--pure-white:#FFFFFF;--bright-white:#F9F9F9;--new-white:#F6F3F1;--light-white:#FAF8F7;--mid-white:#F2EDEA;--dark-white:#DCD6D4;--white-text-default:var(--bright-white);--lightest-charcoal:#9C9894;--light-charcoal:#808080;--mid-charcoal:#333232;--dark-charcoal:#0E0F15;--bright-white-rgb:249,249,249;--black-rgb:0,0,0;--light-white-rgb:250,248,247;--navy:#232F4B;--navy-dark:#192032;--bright-blue:#034A69;--dark-teal:#006570;--bright-teal:#009691;--bright-green:#23683B;--moss-green:#104736;--light-sage-green:#808029;--dark-sage-green:#565205;--orange:#EA7100;--orange-dark:#D36400;--yellow:#EAB409;--mustard:#B08211;--tomato:#DE4D00;--red:#C34825;--light-mushroom:#D6C9B4;--app-default-radius-xs:4px;--app-default-radius-md:10px;--app-default-radius-lg:15px;--carouselle-card-width-medium:320px;--carouselle-card-width-mobile:310px;--transition-base:0.3s;--opacity-hidden:0;--uma-disc-card-width:var(--carouselle-card-width-medium);--sidebar-width:0px;--fixed-header-height:60px;--max-body-content-width:1280px;--max-body-wrapper-width:calc(var(--max-body-content-width) - var(--sidebar-width));--inner-wrapper-margin-top-desktop:2.5rem;--default-left-right-mob-body-padding:2rem;--default-left-right-desk-body-padding:4rem;--golden-ratio:1.618;--golden-ratio-small:0.382;--golden-ratio-large:0.618;--golden-ratio-small-percentage:38.2%;--golden-width-small:calc(var(--max-body-content-width) * var(--golden-ratio-small));--back-next-button-diameter:2.5rem;--lozenge-padding-x:1.5rem;--switch-thumb-inset:4px;--button-transition-ease:ease;} /* used: screening-results-pages */
:root:where(.page-brain-body, .page-health-history, .page-trauma-history){--orange:#EA7100;--yellow:#EAB409;--red:#C34825;--bright-blue:#034A69;--light-sage-green:#808029;--dark-sage-green:#565205;--bright-green:#23683B;--moss-green:#104736;--dark-teal:#006570;--mustard:#B08211;--bright-teal:#009691;--navy:#232F4B;--tomato:#DE4D00;--bright-white:#F9F9F9;--light-white:#FAF8F7;--new-white:#F6F3F1;--mid-white:#F2EDEA;--lightest-charcoal:#9C9894;--light-charcoal:#808080;--mid-charcoal:#333232;--dark-charcoal:#0E0F15;--cat-autism:var(--dark-teal);--cat-adhd:var(--orange);--cat-cptsd:var(--red);--cat-depanx:var(--light-sage-green);--cat-bodyaware:var(--bright-teal);--cat-rejection:var(--bright-green);--cat-masking:var(--bright-blue);--canvas-text:#ffffff;--max-body-content-width:1280px;--sidebar-width:60px;--max-body-wrapper-width:calc(var(--max-body-content-width) - var(--sidebar-width));--default-left-right-desk-body-padding:4rem;--default-left-right-mob-body-padding:2rem;} /* used: screening-results-pages */
:root:where(.page-brain-body){--fixed-header-height:60px;--button-size-xs:30px;--font-weight-medium:500;--gap-xl:1.5rem;--gap-xxs:0.4rem;--app-default-top-bottom-margin-sm:1rem;--max-body-content-width:1280px;} /* used: screening-results-pages */
:root:where(.page-profile, .page-brain-body){--subnav-row-height:60px;--link-line-height:4px;--fixed-header-height:60px;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:root:where(.page-brain-body){--radius-pill:999px;--btn-padding-x:2rem;--gap-sm:0.6rem;--gap-xs:0.5rem;--button-size-lg:50px;--button-icon-md:1.2rem;--app-default-radius-md:10px;--stroke-hairline:0.5px;--dark-white:#DCD6D4;--transition-fast:.2s;--default-line-height-x-small:1.3;--black-rgb:0,0,0;--opacity-very-low:0.05;--opacity-very-high:0.8;--canvas-sheet-shadow:0 4px 22px rgba(var(--black-rgb), var(--opacity-very-low));--body-text-lg:1.12rem;--font-weight-medium:500;--bright-white-rgb:249,249,249;} /* used: screening-results-pages */
:root[data-theme="dark"]:where(.page-brain-body){--bright-white:var(--mid-white);--bright-white-rgb:242,237,234;--t-band:var(--navy-60);--t-band-alt:var(--navy-40);--t-surface:var(--navy);--t-surface-hover:var(--navy-dark);--t-nav-frost:rgba(var(--navy-60-rgb), var(--opacity-very-high));--t-heading:var(--bright-white);--t-emphasis:var(--bright-white);--t-page-text:var(--bright-white);--t-text-secondary:rgba(var(--bright-white-rgb), 0.7);--t-group-heading:var(--bright-white);--t-divider:rgba(var(--bright-white-rgb), 0.1);--t-border:rgba(var(--bright-white-rgb), 0.2);--t-line-muted:rgba(var(--bright-white-rgb), 0.5);--t-header-bg:var(--navy-60);}

@media print {
  :root[data-theme]:where(.page-brain-body){--bright-white:#F9F9F9;--bright-white-rgb:249,249,249;--t-band:var(--mid-white);--t-band-alt:var(--new-white);--t-surface:var(--light-white);--t-surface-hover:var(--mid-white);--t-nav-frost:rgba(var(--light-white-rgb), var(--opacity-very-high));--t-heading:var(--navy);--t-emphasis:var(--navy);--t-page-text:var(--mid-charcoal);--t-text-secondary:var(--light-charcoal);--t-divider:var(--dark-white);--t-border:var(--dark-white);--t-line-muted:var(--lightest-charcoal);--t-group-heading:initial;} /* used: screening-results-pages */
}

:where(.page-health-history) body{background-color:var(--mid-white);font-family:"Inter", sans-serif;color:var(--mid-charcoal);margin:0;overscroll-behavior:none;scroll-behavior:smooth;} /* used: screening-results-pages */
:where(.page-health-history, .page-condition)::selection, :where(.page-health-history, .page-condition) ::selection{background-color:var(--orange);color:var(--white-text-default);} /* used: screening-results-pages */
:where(.page-condition) a{color:var(--orange);text-decoration:none;transition:text-decoration-color 0.4s ease, color 0.4s ease;} /* used: screening-results-pages */
:where(.page-health-history) a{color:var(--orange);text-decoration:none;transition:text-decoration-color 0.4s ease, color 0.4s ease;} /* used: screening-results-pages */
:where(.page-health-history) .intro-column{width:100%;height:auto;max-width:var(--golden-width-small);padding-right:var(--default-left-right-desk-body-padding);}
:where(.page-health-history) .health-history-btn:focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset);}
:root:where(.page-health-history){--hover-overlay-light:rgba(var(--black-rgb), var(--opacity-very-low));--focus-outline-width:2.5px;--button-transition-duration:0.3s;--default-line-height-x-small:1.2;--hover-overlay-dark:rgba(var(--navy-rgb), 0.08);--section-title-font-size:2.75rem;} /* used: screening-results-pages */
:root:where(.page-health-history){--subnav-row-height:60px;--link-line-height:4px;--default-left-right-desk-body-padding:4rem;--default-left-right-mob-body-padding:2rem;--button-size-xs:30px;--gap-xl:1.5rem;--gap-xxs:0.4rem;--ui-chrome-total:calc(var(--subnav-row-height) + 3rem + 30px + 2rem);} /* used: screening-results-pages */
:root:where(.page-health-history){--sidebar-width:60px;--card-h2-pad-top:var(--app-default-top-bottom-margin-sm);--card-pills-pad-top:1.5rem;--card-pills-height:40px;--card-pills-pad-bottom:0rem;--card-carousel-pad-top:2rem;--card-carousel-pad-bottom:2rem;--card-nav-height:40px;--card-nav-margin-top:0rem;--card-nav-margin-bottom:2rem;--cond-card-max-width:455px;--cond-card-max-width-md:360px;--cond-card-max-width-mob:340px;--cond-card-max-width-xs:310px;} /* used: screening-results-pages */
:root:where(.page-health-history){--lung-stage-max-width-mob:320px;} /* used: screening-results-pages */
:root:where(.page-health-history){--health-cards-peek:calc(var(--card-pills-pad-top) + var(--card-pills-height) + var(--card-pills-pad-bottom));--lung-stage-min-height-mob:200px;} /* used: screening-results-pages */
:root:where(.page-health-history){--z-side-bar-placeholder:10000004;--z-chrome:1001;--z-section-nav:999;--z-sticky-cards:10;--light-white-rgb:250,248,247;} /* used: screening-results-pages */

@media (max-width:760px) {
  :root:where(.page-health-history){--health-hero-chrome:calc(var(--fixed-header-height) + var(--subnav-row-height) + var(--stroke-thin) + var(--app-default-top-bottom-margin-xl) + var(--app-default-top-bottom-margin-xxl) + var(--app-default-top-bottom-margin-xxl) + var(--health-cards-peek));} /* used: screening-results-pages */
  :root:where(.page-health-history){--health-cards-peek:calc(var(--app-default-top-bottom-margin-xxxl) + var(--app-default-top-bottom-margin-sm) + (var(--heading-size-lg) * var(--default-line-height-x-small)) + var(--card-pills-pad-top) + var(--card-pills-height) + var(--card-pills-pad-bottom));} /* used: screening-results-pages */
}

:root:where(.page-health-history){--t-canvas:var(--light-white);--t-band:var(--mid-white);--t-band-alt:var(--new-white);--t-surface:var(--light-white);--t-surface-hover:var(--mid-white);--t-nav-frost:rgba(var(--light-white-rgb), var(--opacity-very-high));--t-heading:var(--navy);--t-emphasis:var(--navy);--t-emphasis-hover:var(--navy-dark);--t-page-text:var(--mid-charcoal);--t-text-strong:var(--dark-charcoal);--t-text-secondary:var(--light-charcoal);--t-divider:var(--dark-white);--t-border:var(--dark-white);--t-line-muted:var(--lightest-charcoal);--t-header-bg:var(--light-white);--t-nav-control:var(--lightest-charcoal);--t-nav-control-hover-bg:var(--hover-overlay-light);--t-nav-control-hover-icon:var(--mid-charcoal);--t-nav-control-hover-edge:var(--mid-charcoal);} /* used: screening-results-pages */
:root[data-theme="dark"]:where(.page-health-history){--bright-white:var(--mid-white);--bright-white-rgb:242,237,234;--t-canvas:var(--navy-60);--t-band:var(--navy-60);--t-band-alt:var(--navy-40);--t-surface:var(--navy);--t-surface-hover:var(--navy-dark);--t-nav-frost:rgba(var(--navy-60-rgb), var(--opacity-very-high));--t-heading:var(--bright-white);--t-emphasis:var(--bright-white);--t-emphasis-hover:var(--bright-white);--t-page-text:var(--bright-white);--t-text-strong:var(--bright-white);--t-text-secondary:rgba(var(--bright-white-rgb), 0.7);--t-divider:rgba(var(--bright-white-rgb), 0.1);--t-border:rgba(var(--bright-white-rgb), 0.2);--t-line-muted:rgba(var(--bright-white-rgb), 0.5);--t-header-bg:var(--navy-60);--t-nav-control:var(--bright-white);--t-nav-control-hover-bg:var(--bright-white);--t-nav-control-hover-icon:var(--navy-40);--t-nav-control-hover-edge:var(--bright-white);}
:root:where(.page-health-history){--transition-fast:.2s;--canvas-sheet-shadow:0 4px 22px rgba(var(--black-rgb), var(--opacity-very-low));} /* used: screening-results-pages */
:root:where(.page-health-history){--body-text-md:1rem;} /* used: screening-results-pages */
:root:where(.page-hypermobility){--sidebar-width:60px;--subnav-row-height:60px;--link-line-height:4px;--card-h2-height:2.4rem;--card-h2-margin-bottom:0rem;--card-carousel-pad-top:2rem;--card-carousel-pad-bottom:2rem;--card-nav-height:40px;--card-nav-margin-top:0rem;--card-nav-margin-bottom:2rem;--superscript-size:0.4em;--cond-card-max-width:455px;--cond-card-max-width-md:360px;--cond-card-max-width-mob:340px;--cond-card-max-width-xs:310px;--below-carousel-height:300px;--card-row-veil:rgba(0,0,0,0.12);--app-default-top-bottom-margin-s:0.75rem;--heading-size-md-alt:1.5rem;--z-sticky-cards:10;--z-chrome:1001;--z-section-nav:999;--light-white-rgb:250,248,247;--z-side-bar-placeholder:10000004;} /* used: screening-results-pages */

@media (max-width:600px) {
  :root:where(.page-condition){--card-h2-height:6rem;--card-carousel-pad-bottom:2.5rem;} /* used: screening-results-pages */
}

:where(.page-pots) .intro-column{width:100%;height:auto;max-width:var(--golden-width-small);} /* used: screening-results-pages */
:where(.page-health-history, .page-condition, .page-trauma-history, .page-adhd-profile) .btn-xs{height:var(--button-size-xs);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-health-history, .page-condition, .page-trauma-history) .btn-sm{height:var(--button-size-sm);} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-condition, .page-trauma-history) .btn-md{height:var(--button-size-md);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-health-history, .page-condition, .page-trauma-history) .btn-lg{height:var(--button-size-lg);} /* used: screening-results-pages, chrome, screenings-home, profile */
:where(.page-health-history, .page-condition, .page-trauma-history) .btn-xl{height:var(--button-size-xl);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-health-history, .page-condition, .page-trauma-history) .btn-xxl{height:var(--button-size-xxl);} /* used: screening-results-pages */

@media (max-width: 600px) {
  :where(.page-health-history, .page-condition) .intro-column{max-width:100%;padding-right:0;} /* used: screening-results-pages */
}

:where(.page-adhd-profile) .nd-profile-header-items{box-sizing:border-box;width:100%;max-width:var(--max-body-content-width);height:var(--subnav-row-height);display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .fixed-subheader-title{font-weight:var(--font-weight-medium);text-wrap:pretty;margin:0;padding:0;line-height:var(--default-line-height-single);font-size:1.3em;} /* used: chrome, screenings-home, onboarding, profile */

@media (max-width: 900px) {
  :where(.page-adhd-profile) .fixed-subheader-h1-title-wrapper{display:none;} /* used: chrome, screenings-home, onboarding, profile */
}

@media (min-width: 900px) {
  :where(.page-adhd-profile) .get-report-btn{position:fixed;bottom:50px;right:var(--default-left-right-desk-body-padding);z-index:2147483000;height:var(--button-size-md);width:max-content;display:inline-flex;white-space:nowrap;flex-shrink:0;} /* used: chrome, screenings-home, onboarding, profile */
}

:where(.page-profile) .profile-nav-links{list-style:none;padding:0;margin-left:0;margin-top:0;margin-bottom:0;height:max-content;display:flex;justify-content:flex-end;align-items:baseline;white-space:nowrap;width:auto;text-align:center;font-size:var(--subnav-link-font-size);} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .profile-nav-links li{font-size:var(--subnav-link-item-font-size);} /* used: chrome, screenings-home, onboarding, profile */

@media (max-width:600px) {
  :where(.page-profile) .profile-nav-links li{font-size:var(--subnav-link-item-font-size-mobile);} /* used: chrome, screenings-home, onboarding, profile */
}

:where(.page-profile) .profile-nav-links a{display:block;position:relative;cursor:pointer;text-decoration:none;color:var(--mid-charcoal);line-height:var(--default-line-height-single);padding-top:calc((var(--subnav-row-height) - 1em) / 2 + var(--link-line-height));padding-bottom:calc((var(--subnav-row-height) - 1em) / 2 - var(--link-line-height));transition:color 0.3s ease;padding-left:var(--gap-xl);padding-right:var(--gap-xl);} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .profile-nav-links a::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:var(--link-line-height);background-color:transparent;transition:background-color 0.3s ease;display:block;} /* used: screening-results-pages */
:where(.page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .profile-nav-links a.active::after{background-color:var(--navy);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .profile-nav-links{width:100%;height:auto;align-items:baseline;justify-content:flex-start;text-align:center;padding:0;gap:0;} /* used: screening-results-pages */
}

@media (max-width:900px) {
  :where(.page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .subnav-links{display:flex;flex-direction:row;align-items:baseline;width:100%;overflow-x:scroll;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;overflow-y:hidden;} /* used: screening-results-pages */
  :where(.page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .subnav-links::-webkit-scrollbar{display:none;} /* used: screening-results-pages */
  :where(.page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .profile-nav-links{min-width:max-content;justify-content:flex-start;overflow-y:visible;} /* used: screening-results-pages */
}

@media (min-width:600px) {
  :where(.page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .subnav-links{padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */
}

@media (max-width:600px) {
  :where(.page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .subnav-links{padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-autism-profile, .page-cptsd-profile) .mob-button-text, :where(.page-autism-profile, .page-cptsd-profile) .desktop-button-text{white-space:nowrap;display:inline-flex;} /* used: screening-results-pages */

@media (min-width:900px) {
  :where(.page-autism-profile, .page-cptsd-profile) .mob-button-text{display:none;} /* used: screening-results-pages */
  :where(.page-autism-profile, .page-cptsd-profile) .desktop-button-text{display:inline;} /* used: screening-results-pages */
}

@media (max-width:900px) {
  :where(.page-autism-profile, .page-cptsd-profile) .desktop-button-text{display:none;} /* used: screening-results-pages */
  :where(.page-autism-profile, .page-cptsd-profile) .mob-button-text{display:inline;} /* used: screening-results-pages */
}

:root:where(.page-trauma-history){--gap-xxs:0.4rem;--gap-xs:0.5rem;--gap-sm:0.6rem;--gap-regular:1rem;--gap-xl:1.5rem;--default-gap:var(--gap-regular);--heading-size-xl:2.2rem;--heading-size-lg:2rem;--heading-size-md:1.7rem;--heading-size-sm:1.2rem;--heading-letter-spacing-tight:-0.02em;--body-text-sm:1rem;--body-text-xs:.9rem;--default-line-height-single:1;--default-line-height-small:1.5;--default-line-height-large:1.6;--font-weight-light:350;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semi-bold:600;--button-size-sm:35px;--button-size-md:40px;--button-size-lg:50px;--button-size-xl:60px;--button-size-xxl:70px;--button-icon-xs:0.8rem;--button-icon-sm:1.1rem;--button-icon-md:1.2rem;--button-icon-lg:1.4rem;--button-icon-xl:1.5rem;--button-icon-xxl:1.6rem;--app-default-top-bottom-margin-xxs:0.5rem;--app-default-top-bottom-margin-xs:.8rem;--app-default-top-bottom-margin-sm:1rem;--app-default-top-bottom-margin-lg:1.5rem;--app-default-top-bottom-margin-xl:2rem;--app-default-top-bottom-margin-xxl:2.5rem;--app-default-top-bottom-margin-xxxl:3rem;--app-default-top-bottom-margin-xxxxl:4rem;--btn-radius-full:999px;--btn-radius:10px;--radius-pill:999px;--radius-circle:50%;--btn-padding-x:2rem;--marker-size:2rem;--stroke-hairline:0.5px;--stroke-thin:1px;--focus-ring-offset:2px;--focus-outline-color:var(--orange);--opacity-hidden:0;--opacity-very-low:0.05;--opacity-very-high:0.8;--navy-rgb:35,47,75;--bright-white-rgb:249,249,249;--black-rgb:0,0,0;--light-white-rgb:250,248,247;--pure-white:#FFFFFF;--dark-white:#DCD6D4;--white-text-default:var(--bright-white);--navy-dark:#192032;--orange-dark:#D36400;--app-default-radius-md:10px;--app-default-radius-lg:15px;--lozenge-padding-x:1.5rem;--transition-base:0.3s;--button-transition-ease:ease;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-btn{display:inline-flex;align-items:center;padding:0 1.5rem;border:none;border-radius:var(--app-default-radius-md);background:transparent;font-family:inherit;font-size:1rem;font-weight:400;line-height:1;cursor:pointer;flex-shrink:0;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-btn:focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset);}
:where(.page-trauma-history) .trauma-history-btn-pill{border-radius:var(--btn-radius-full);padding-left:var(--btn-padding-x);padding-right:var(--btn-padding-x);justify-content:center;} /* used: screening-results-pages */
:root:where(.page-trauma-history){--hover-overlay-light:rgba(var(--black-rgb), var(--opacity-very-low));--focus-outline-width:2.5px;--button-transition-duration:0.3s;--default-line-height-x-small:1.2;--hover-overlay-dark:rgba(var(--navy-rgb), 0.08);} /* used: screening-results-pages */
*:where(.page-trauma-history), :where(.page-trauma-history) *{box-sizing:border-box;} /* used: screening-results-pages */
:root:where(.page-trauma-history){--subnav-row-height:60px;--link-line-height:4px;--sidebar-width:0px;--default-left-right-desk-body-padding:4rem;--default-left-right-mob-body-padding:2rem;--button-size-xs:30px;--gap-xl:1.5rem;--gap-xxs:0.4rem;} /* used: screening-results-pages */
:root:where(.page-trauma-history){--breath-stage-max-width:450px;--breath-label-font-size:1.25rem;--sidebar-width:60px;} /* used: screening-results-pages */
:root:where(.page-trauma-history){--card-pills-pad-top:1.5rem;--card-pills-height:40px;--card-pills-pad-bottom:0rem;--card-carousel-pad-top:2rem;--card-carousel-pad-bottom:2rem;--card-nav-margin-top:0rem;--card-nav-margin-bottom:2rem;--cond-card-max-width:455px;--cond-card-max-width-md:360px;--cond-card-max-width-mob:340px;--cond-card-max-width-xs:310px;} /* used: screening-results-pages */

@media (max-width:600px) {
  :root:where(.page-health-history, .page-trauma-history){--card-carousel-pad-bottom:2.5rem;} /* used: screening-results-pages */
}

:root:where(.page-health-history, .page-trauma-history){--card-pills-pad-bottom:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages */
:where(.page-trauma-history) .filter-pill.c-red{--theme:var(--red);}
:root:where(.page-trauma-history){--fixed-header-height:60px;--z-chrome:1001;--z-section-nav:999;--z-sticky-cards:10;--z-skip-link:9999;--light-white-rgb:250,248,247;} /* used: screening-results-pages */
:root:where(.page-trauma-history){--breath-stage-min-height-mob:200px;--trauma-cards-peek:calc(var(--card-pills-pad-top) + var(--card-pills-height) + var(--card-pills-pad-bottom));} /* used: screening-results-pages */

@media (max-width:760px) {
  :root:where(.page-trauma-history){--trauma-hero-chrome:calc(var(--fixed-header-height) + var(--subnav-row-height) + var(--stroke-thin) + var(--app-default-top-bottom-margin-xl) + var(--app-default-top-bottom-margin-xl) + var(--trauma-cards-peek));} /* used: screening-results-pages */
  :root:where(.page-trauma-history){--trauma-cards-peek:calc(var(--app-default-top-bottom-margin-xxxl) + var(--app-default-top-bottom-margin-sm) + (var(--heading-size-lg) * var(--default-line-height-x-small)) + var(--card-pills-pad-top) + var(--card-pills-height) + var(--card-pills-pad-bottom));} /* used: screening-results-pages */
}

@media (max-width:600px) {
  :root:where(.page-trauma-history){--trauma-cards-peek:calc(var(--app-default-top-bottom-margin-xl) + var(--app-default-top-bottom-margin-sm) + (var(--heading-size-lg) * var(--default-line-height-x-small)) + var(--card-pills-pad-top) + var(--card-pills-height) + var(--card-pills-pad-bottom));} /* used: screening-results-pages */
}

:root:where(.page-trauma-history){--breath-cycle-duration:9s;} /* used: screening-results-pages */
:root:where(.page-trauma-history){--navy-40:#151C2D;--navy-60:#0E131E;--navy-60-rgb:14,19,30;--light-mushroom:#D6C9B4;} /* used: screening-results-pages */
:root:where(.page-trauma-history){--t-canvas:var(--light-white);--t-band:var(--mid-white);--t-band-alt:var(--new-white);--t-nav-frost:rgba(var(--light-white-rgb), var(--opacity-very-high));--t-heading:var(--navy);--t-emphasis:var(--navy);--t-emphasis-hover:var(--navy-dark);--t-page-text:var(--mid-charcoal);--t-text-strong:var(--dark-charcoal);--t-text-secondary:var(--light-charcoal);--t-divider:var(--dark-white);--t-line-muted:var(--lightest-charcoal);--t-header-bg:var(--light-white);--t-breath-ink:var(--dark-teal);--t-nav-control:var(--lightest-charcoal);--t-nav-control-hover-bg:var(--hover-overlay-light);--t-nav-control-hover-icon:var(--mid-charcoal);--t-nav-control-hover-edge:var(--mid-charcoal);} /* used: screening-results-pages */
:root[data-theme="dark"]:where(.page-trauma-history){--bright-white:var(--mid-white);--bright-white-rgb:242,237,234;--t-canvas:var(--navy-60);--t-band:var(--navy-60);--t-band-alt:var(--navy-40);--t-nav-frost:rgba(var(--navy-60-rgb), var(--opacity-very-high));--t-heading:var(--bright-white);--t-emphasis:var(--bright-white);--t-emphasis-hover:var(--bright-white);--t-page-text:var(--bright-white);--t-text-strong:var(--bright-white);--t-text-secondary:rgba(var(--bright-white-rgb), 0.7);--t-divider:rgba(var(--bright-white-rgb), 0.1);--t-line-muted:rgba(var(--bright-white-rgb), 0.5);--t-header-bg:var(--navy-60);--t-breath-ink:var(--bright-white);--t-nav-control:var(--bright-white);--t-nav-control-hover-bg:var(--bright-white);--t-nav-control-hover-icon:var(--navy-40);--t-nav-control-hover-edge:var(--bright-white);}
:root:where(.page-trauma-history){--golden-width-small:488.96px;} /* used: screening-results-pages */
html:where(.page-hero-dots), :where(.page-hero-dots) body{width:100%;height:100%;overflow:hidden;background:var(--t-page-bg);font-family:"Inter",system-ui,-apple-system,sans-serif;color:var(--t-page-text);} /* used: screening-results-pages */
:where(.page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .fixed-sub-nav-wrapper{position:relative;display:flex;align-items:flex-end;width:calc(100vw - var(--sidebar-width));height:var(--subnav-row-height);background-color:var(--light-white);} /* used: screening-results-pages */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .profile-skip-link{position:absolute;top:-2.5rem;left:0;background:#000;color:#fff;padding:.5rem;z-index:9999;text-decoration:none;} /* used: screening-results-pages */
:where(.page-autism-profile) .skip-link{position:absolute;top:-2.5rem;left:0;background:#000;color:#fff;padding:.5rem;z-index:9999;text-decoration:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-autism-profile) .skip-link:focus{top:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .wrapper-for-all-sections{height:auto;width:calc(100% - var(--sidebar-width));margin-left:var(--sidebar-width);} /* used: screening-results-pages */
:where(.page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .wrapper-below-fixed-bars{margin-top:calc(var(--fixed-header-height) + var(--subnav-row-height));} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .wrapper-for-all-sections{width:100%;margin-left:0;} /* used: screening-results-pages */
}

:where(.page-health-history, .page-condition) a:hover{text-decoration:underline;text-underline-offset:7px;color:var(--orange);} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) .eyebrow{color:var(--light-charcoal);font-size:var(--body-text-xs);margin-bottom:var(--app-default-top-bottom-margin-xxs);} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-condition) h1, :where(.page-health-history, .page-condition) h2, :where(.page-health-history, .page-condition) h3, :where(.page-health-history, .page-condition) h4, :where(.page-health-history, .page-condition) h5, :where(.page-health-history, .page-condition) h6{line-height:var(--default-line-height-single);text-wrap:pretty;margin-top:0;margin-bottom:var(--app-default-top-bottom-margin-sm);font-weight:var(--font-weight-light);} /* used: screening-results-pages */
:where(.page-health-history) h1{font-size:var(--heading-size-xl);color:var(--navy);letter-spacing:var(--heading-letter-spacing-tight);} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) h2{font-size:var(--heading-size-lg);} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) h3{font-size:var(--heading-size-md);} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) h4{font-size:var(--heading-size-sm);} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) h5{font-size:var(--heading-size-xs);} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) p{font-size:var(--body-text-sm);line-height:var(--default-line-height-large);margin-bottom:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) p:last-of-type{margin-bottom:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
:where(.page-condition) p:has(+ h1), :where(.page-condition) p:has(+ h2), :where(.page-condition) p:has(+ h3), :where(.page-condition) p:has(+ h4), :where(.page-condition) p:has(+ h5), :where(.page-condition) p:has(+ h6), :where(.page-condition) p:has(+ .condition-btn), :where(.page-condition) p:has(+ button){margin-bottom:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
:where(.page-condition) .condition-btn{display:inline-flex;align-items:center;padding:0 1.5rem;border:none;border-radius:var(--app-default-radius-md);background:transparent;font-family:inherit;font-size:1rem;font-weight:400;line-height:1;cursor:pointer;flex-shrink:0;} /* used: screening-results-pages */
:where(.page-condition) .condition-btn-pill{border-radius:var(--btn-radius-full);padding-left:var(--btn-padding-x);padding-right:var(--btn-padding-x);justify-content:center;} /* used: screening-results-pages */
:where(.page-health-history) p:has(+ h1), :where(.page-health-history) p:has(+ h2), :where(.page-health-history) p:has(+ h3), :where(.page-health-history) p:has(+ h4), :where(.page-health-history) p:has(+ h5), :where(.page-health-history) p:has(+ h6), :where(.page-health-history) p:has(+ .health-history-btn), :where(.page-health-history) p:has(+ button){margin-bottom:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
:where(.page-health-history) .health-history-btn{display:inline-flex;align-items:center;padding:0 1.5rem;border:none;border-radius:var(--app-default-radius-md);background:transparent;font-family:inherit;font-size:1rem;font-weight:400;line-height:1;cursor:pointer;flex-shrink:0;} /* used: screening-results-pages */
:where(.page-health-history, .page-condition, .page-trauma-history) .btn-xs i{font-size:var(--button-icon-xs);} /* used: screening-results-pages, chrome, onboarding */
:where(.page-health-history, .page-condition, .page-trauma-history) .btn-sm i{font-size:var(--button-icon-sm);} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-condition, .page-trauma-history) .btn-md i{font-size:var(--button-icon-md);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-health-history, .page-condition, .page-trauma-history) .btn-lg i{font-size:var(--button-icon-lg);} /* used: screening-results-pages, chrome, screenings-home, profile */
:where(.page-health-history, .page-condition, .page-trauma-history) .btn-xl i{font-size:var(--button-icon-xl);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-health-history, .page-condition, .page-trauma-history) .btn-xxl i{font-size:var(--button-icon-xxl);} /* used: screening-results-pages */
:where(.page-health-history, .page-condition, .page-trauma-history) .btn-primary-orange{background:var(--orange);color:var(--bright-white);transition:background 0.3s;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-health-history, .page-condition, .page-trauma-history, .page-adhd-profile) .btn-primary-orange:hover{background:var(--orange-dark);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-health-history, .page-condition) .btn-primary-navy{background:var(--navy);color:var(--bright-white);transition:background 0.3s;} /* used: screening-results-pages, chrome, screenings-home, onboarding */
:where(.page-health-history, .page-condition) .btn-primary-navy:hover{background:var(--navy-dark);} /* used: screening-results-pages, chrome, screenings-home, onboarding */
:where(.page-condition) .btn-primary-white-on-dark{background:var(--bright-white);color:var(--navy);transition:background 0.3s, color 0.3s;} /* used: chrome */
:where(.page-condition) .btn-primary-white-on-dark:hover{background:var(--bright-white);color:var(--navy-dark);} /* used: chrome */
:where(.page-adhd-profile) .profile-nav-links a::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:var(--link-line-height);background-color:transparent;transition:background-color 0.3s ease;display:block;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile) .profile-nav-links a.active::after{background-color:var(--navy);} /* used: chrome, screenings-home, onboarding, profile */

@media (max-width: 600px) {
  :where(.page-adhd-profile) .profile-nav-links{width:100%;height:auto;align-items:baseline;justify-content:flex-start;text-align:center;padding-left:0;padding-right:0;gap:0;} /* used: chrome, screenings-home, onboarding, profile */
}

@media (max-width: 900px) {
  :where(.page-adhd-profile) .nd-profile-header-items{width:100%;overflow-y:hidden;padding-left:0;padding-right:0;} /* used: chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile) .fixed-sub-nav-wrapper{overflow-y:hidden;} /* used: chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile) .subnav-links{display:flex;flex-direction:row;align-items:baseline;width:100%;overflow-x:scroll;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;overflow-y:hidden;} /* used: chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile) .subnav-links::-webkit-scrollbar{display:none;} /* used: chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile) .profile-nav-links{min-width:max-content;justify-content:flex-start;overflow-y:visible;} /* used: chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile) .get-report-btn{position:relative;flex-shrink:0;height:var(--button-size-xs);font-weight:var(--font-weight-medium);font-size:1em;margin-left:var(--gap-xl);padding-left:var(--app-default-top-bottom-margin-sm);padding-right:var(--app-default-top-bottom-margin-sm);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-xxs);} /* used: chrome, screenings-home, onboarding, profile */
}

@media (min-width: 600px) {
  :where(.page-adhd-profile) .subnav-links{padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);} /* used: chrome, screenings-home, onboarding, profile */
}

@media (max-width: 600px) {
  :where(.page-adhd-profile) .subnav-links{padding-right:var(--default-left-right-mob-body-padding);} /* used: chrome, screenings-home, onboarding, profile */
}

:where(.page-adhd-profile) .mob-button-text, :where(.page-adhd-profile) .desktop-button-text{white-space:nowrap;display:inline-flex;} /* used: chrome, screenings-home, onboarding, profile */

@media (min-width: 900px) {
  :where(.page-adhd-profile) .mob-button-text{display:none;} /* used: chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile) .desktop-button-text{display:inline;} /* used: chrome, screenings-home, onboarding, profile */
}

@media (max-width: 900px) {
  :where(.page-adhd-profile) .desktop-button-text{display:none;} /* used: chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile) .mob-button-text{display:inline;} /* used: chrome, screenings-home, onboarding, profile */
}

:where(.page-adhd-profile) .fixed-sub-nav-wrapper{position:relative;display:flex;align-items:flex-end;width:calc(100vw - var(--sidebar-width));height:var(--subnav-row-height);background-color:var(--light-white);} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-health-history) .health-history-btn-pill{border-radius:var(--btn-radius-full);padding-left:var(--btn-padding-x);padding-right:var(--btn-padding-x);justify-content:center;} /* used: screening-results-pages */
:where(.page-health-history, .page-condition, .page-trauma-history) .btn-rectangle{border-radius:var(--btn-radius);padding-left:var(--btn-padding-x);padding-right:var(--btn-padding-x);} /* used: screening-results-pages, chrome, screenings-home, profile */
:where(.page-health-history, .page-condition) .btn-square{border-radius:var(--btn-radius);aspect-ratio:1 / 1;flex-shrink:0;padding:0;justify-content:center;} /* used: screening-results-pages */
:where(.page-condition) .btn-circular{border-radius:var(--radius-pill);aspect-ratio:1 / 1;flex-shrink:0;padding:0;justify-content:center;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-condition) .condition-btn-secondary-navy-on-white{background:transparent;color:var(--navy);border:var(--stroke-hairline) solid var(--navy);transition:background 0.3s, border-color 0.3s, color 0.3s;} /* used: screening-results-pages */
:where(.page-condition) .condition-btn-secondary-navy-on-white:hover{background:var(--hover-overlay-dark);border-color:var(--navy-dark);color:var(--navy-dark);} /* used: screening-results-pages */
:where(.page-condition) .btn-secondary-white-on-dark{background:transparent;color:var(--bright-white);border:var(--stroke-hairline) solid var(--bright-white);transition:background 0.3s;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-condition) .btn-secondary-white-on-dark:hover{mix-blend-mode:normal;color:inherit;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-condition) .uma-chrome-all-content-wrapper{width:calc(100% - var(--sidebar-width));margin-left:var(--sidebar-width);border-top:var(--stroke-hairline) solid transparent;height:auto;display:flex;flex-direction:column;box-sizing:border-box;} /* used: chrome, screenings-home, profile */
*:where(.page-health-history, .page-condition), :where(.page-health-history, .page-condition) *, :where(.page-health-history, .page-condition)::before, :where(.page-health-history, .page-condition) *::before, :where(.page-health-history, .page-condition)::after, :where(.page-health-history, .page-condition) *::after{box-sizing:border-box;} /* used: screening-results-pages */
:where(.page-condition) .uma-chrome-inner-content-wrapper{width:100%;max-width:var(--max-body-wrapper-width);padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);margin-top:var(--inner-wrapper-margin-top-desktop);} /* used: chrome, screenings-home, profile */

@media (max-width: 600px) {
  :where(.page-condition) .uma-chrome-all-content-wrapper{margin-left:0;width:100%;} /* used: chrome, screenings-home, profile */
  :where(.page-condition) .uma-chrome-inner-content-wrapper{max-width:100%;padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);margin-top:var(--inner-wrapper-margin-top-mobile);} /* used: chrome, screenings-home, profile */
}

:where(.page-condition) .add-on-press-animation{transition:transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, background 0.2s ease;} /* used: screenings-home */
:where(.page-condition) .add-on-press-animation:active{transform:scale(0.94);transition-duration:0.08s, 0.08s, 0.08s;} /* used: screenings-home */
:where(.page-health-history) .health-history-btn-circular{border-radius:var(--btn-radius-full);aspect-ratio:1 / 1;flex-shrink:0;padding:0;justify-content:center;} /* used: screening-results-pages */
:where(.page-health-history) .health-history-btn-primary-white-on-dark{background:var(--light-white);color:var(--navy);transition:background 0.3s, color 0.3s;} /* used: screening-results-pages */
:where(.page-health-history) .health-history-btn-primary-white-on-dark:hover{background:var(--dark-white);color:var(--navy-dark);} /* used: screening-results-pages */
:where(.page-health-history) .health-history-btn-secondary-navy-on-white{background:transparent;color:var(--navy);border:var(--stroke-hairline) solid var(--navy);transition:background 0.3s, border-color 0.3s, color 0.3s;} /* used: screening-results-pages */
:where(.page-health-history) .health-history-btn-secondary-navy-on-white:hover{background:var(--hover-overlay-dark);border-color:var(--navy-dark);color:var(--navy-dark);} /* used: screening-results-pages */
:where(.page-health-history) .health-history-btn-secondary-white-on-dark{background:transparent;color:var(--bright-white);border:var(--stroke-hairline) solid var(--bright-white);transition:background 0.3s;} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) .footnote{font-size:var(--body-text-xs);color:var(--light-charcoal);} /* used: screening-results-pages */
:where(.page-health-history) .health-history-btn-secondary-white-on-dark:hover{background:rgba(var(--bright-white-rgb), var(--opacity-very-low));} /* used: screening-results-pages */
:focus-visible:where(:not(.uma-input-pointer *)):where(.page-health-history), :where(.page-health-history) :focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:3px;border-radius:var(--app-default-radius-xs);}
:where(.page-health-history) .health-history-add-on-press-animation{transition:transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, background 0.2s ease;} /* used: screening-results-pages */
*:where(.page-health-history), :where(.page-health-history) *{box-sizing:border-box;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-btn-circular{border-radius:var(--btn-radius-full);aspect-ratio:1 / 1;flex-shrink:0;padding:0;justify-content:center;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-btn-secondary-navy-on-white{background:transparent;color:var(--navy);border:var(--stroke-hairline) solid var(--navy);transition:background 0.3s, border-color 0.3s, color 0.3s;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-btn-secondary-navy-on-white:hover{background:var(--hover-overlay-dark);border-color:var(--navy-dark);color:var(--navy-dark);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-btn-secondary-white-on-dark{background:transparent;color:var(--bright-white);border:var(--stroke-hairline) solid var(--bright-white);transition:background 0.3s;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-btn-secondary-white-on-dark:hover{background:rgba(var(--bright-white-rgb), var(--opacity-very-low));} /* used: screening-results-pages */
:where(.page-health-history, .page-condition, .page-adhd-profile) .skip-link{position:absolute;top:-2.5rem;left:0;background:#000;color:#fff;padding:.5rem;z-index:9999;text-decoration:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-health-history, .page-condition, .page-trauma-history) .lozenge-wrapper:hover{z-index:100000;} /* used: screening-results-pages */
:where(.page-condition) .condition-references-button:hover, :where(.page-condition) .references-button-toggle-hover:hover{color:var(--orange);} /* used: screening-results-pages */
:where(.page-condition) .override-text-on-dark{color:var(--white-text-default);} /* used: screening-results-pages */
:where(.page-health-history) .page-bg-new-white{background:var(--t-band-alt);} /* used: screening-results-pages */
:where(.page-health-history, .page-condition, .page-adhd-profile) .skip-link:focus{top:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
[data-motion="still"]:where(.page-health-history, .page-condition), :where(.page-health-history, .page-condition) [data-motion="still"]{scroll-behavior:auto !important;} /* used: screening-results-pages */
[data-motion="still"]:where(.page-condition) .section-nav-scroller, :where(.page-condition) [data-motion="still"] .section-nav-scroller, [data-motion="still"]:where(.page-condition) .condition-centred-card-carousel, :where(.page-condition) [data-motion="still"] .condition-centred-card-carousel{scroll-behavior:auto;} /* used: chrome */
[data-motion="still"]:where(.page-health-history) .section-nav-scroller, :where(.page-health-history) [data-motion="still"] .section-nav-scroller, [data-motion="still"]:where(.page-health-history) .health-history-centred-card-carousel, :where(.page-health-history) [data-motion="still"] .health-history-centred-card-carousel, [data-motion="still"]:where(.page-health-history) .filter-bar, :where(.page-health-history) [data-motion="still"] .filter-bar{scroll-behavior:auto;} /* used: chrome */
:where(.page-diagnostic, .page-brain-body) .section-nav-bar-cards-active{transform:translateY(-100%);} /* used: screening-results-pages, chrome */
:where(.page-condition, .page-trauma-history) .lozenge-wrapper{position:relative;display:block;width:100%;max-width:var(--golden-width-small);} /* used: screening-results-pages */
:where(.page-condition, .page-trauma-history) .lozenge{width:100%;position:relative;padding-right:3.5rem;padding-left:calc((var(--button-size-xl) - var(--marker-size)) / 2);justify-content:flex-start;text-align:left;height:auto;min-height:var(--button-size-xl);line-height:var(--default-line-height-large);padding-top:0.8rem;padding-bottom:0.8rem;} /* used: screening-results-pages */
:where(.page-condition) .reference-italics{font-style:italic;} /* used: screening-results-pages */
:where(.page-condition) .reference-link{word-break:break-all;overflow-wrap:break-word;display:inline-block;max-width:100%;} /* used: screening-results-pages */
:where(.page-condition) .references-content.open{max-height:var(--accordion-open-max-height);padding-top:var(--app-default-top-bottom-margin-sm);padding-bottom:var(--app-default-top-bottom-margin-lg);padding-right:0;padding-left:0;} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-condition) .references-content.open, :where(.page-condition) .references-content{padding-left:0;} /* used: screening-results-pages */
  :where(.page-condition) .condition-references-button{padding-right:0;padding-left:0;} /* used: screening-results-pages */
}

html:has(body.health-history-page):where(.page-condition){height:auto;} /* used: screening-results-pages */
:where(.page-condition) body.health-history-page{height:auto;} /* used: screening-results-pages */
:where(.page-condition) .health-history-page{display:flex;flex-direction:column;min-height:100%;background:var(--t-band-alt);} /* used: screening-results-pages */
:where(.page-condition) .override-below-carousel-hidden{display:none;} /* used: screening-results-pages */
:where(.page-condition) .section-heading-at-sub-size{font-size:var(--heading-size-md);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-delete-list-item-btn{position:absolute;right:calc(1rem - 40px);width:auto;height:auto;border-radius:var(--radius-circle);border:none;display:inline-flex;align-items:center;justify-content:center;padding:.3rem;} /* used: screening-results-pages */
html:where(.page-trauma-history), :where(.page-trauma-history) body{margin:0;padding:0;background:var(--t-canvas);font-family:"Inter",system-ui,sans-serif;color:var(--t-page-text);} /* used: screening-results-pages */
:where(.page-trauma-history) body{min-height:100vh;overflow-x:hidden;} /* used: screening-results-pages */
:where(.page-trauma-history) .bg{position:fixed;inset:0;background:var(--t-canvas);z-index:-1;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-wrapper-for-all-sections{width:calc(100% - var(--sidebar-width));margin-left:var(--sidebar-width);margin-top:114px;border-top:0.1px solid transparent;height:auto;display:flex;flex-direction:column;box-sizing:border-box;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-section-centred-without-carousel{width:100%;max-width:var(--max-body-wrapper-width);margin-left:auto;margin-right:auto;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);padding-top:3rem;padding-bottom:4rem;} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-trauma-history) .trauma-history-wrapper-for-all-sections{width:100%;margin-left:0;} /* used: screening-results-pages */
  :where(.page-trauma-history) .trauma-history-section-centred-without-carousel{margin-left:0;margin-right:0;max-width:100%;padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-trauma-history) .trauma-history-split{display:flex;flex-direction:row;gap:var(--app-default-top-bottom-margin-xl);align-items:stretch;min-height:80vh;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-left{flex:0 0 30%;display:flex;flex-direction:column;justify-content:center;opacity:var(--opacity-hidden);animation:fadeIn 0.6s ease 0.3s both;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-right{flex:1 1 auto;position:relative;aspect-ratio:1/1;} /* used: screening-results-pages */
:where(.page-brain-body, .page-trauma-history) .brain-stage{position:absolute;inset:0;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-explore-btn svg{flex-shrink:0;} /* used: screening-results-pages */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .profile-hero-band{position:relative;overflow:hidden;} /* used: screening-results-pages */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .profile-hero-animation-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:var(--z-hero-animation);} /* used: screening-results-pages */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .hero{display:flex;flex-direction:column;gap:var(--app-default-top-bottom-margin-xl);align-items:center;justify-content:flex-end;min-height:var(--hero-min-height);max-width:var(--max-hero-width);margin:0 auto;padding:var(--app-default-top-bottom-margin-xl) var(--default-left-right-desk-body-padding);position:relative;z-index:var(--z-hero-content);pointer-events:none;} /* used: screening-results-pages */
:where(.page-cptsd-profile) .cptsd-profile-hero-title{font-size:var(--heading-size-xl);font-weight:var(--font-weight-light);line-height:var(--default-line-height-x-small);letter-spacing:var(--heading-letter-spacing-tight);color:var(--t-page-text);margin:0;} /* used: screening-results-pages */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .hero-left{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--gap-xs);pointer-events:auto;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .masking-rsd-profile-mobile-explore{pointer-events:auto;} /* used: screening-results-pages */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .hero-right{display:none;} /* used: screening-results-pages */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .hero-chart{display:block;width:100%;height:100%;touch-action:pan-y;} /* used: screening-results-pages */
:where(.page-condition) .reference-links-label{line-height:var(--default-line-height-small);} /* used: screening-results-pages */
:where(.page-condition) .override-sup-small{font-size:var(--superscript-size);font-weight:var(--font-weight-normal);} /* used: screening-results-pages */
:where(.page-condition) .temp-chrome-hidden{transform:translateY(-100%);} /* used: screening-results-pages */
:where(.page-diagnostic) .content-box{border-radius:var(--default-radius);} /* used: screening-results-pages, chrome */
[data-motion="still"]:where(.page-condition) *, :where(.page-condition) [data-motion="still"] *, [data-motion="still"]:where(.page-condition) *::before, :where(.page-condition) [data-motion="still"] *::before, [data-motion="still"]:where(.page-condition) *::after, :where(.page-condition) [data-motion="still"] *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-property:opacity !important;transition-duration:var(--motion-fade) !important;transition-timing-function:var(--motion-fade-ease) !important;}
[data-motion="still"]:where(.page-condition) .temp-chrome, :where(.page-condition) [data-motion="still"] .temp-chrome, [data-motion="still"]:where(.page-condition) .section-nav-bar, :where(.page-condition) [data-motion="still"] .section-nav-bar{transition-property:transform, top !important;transition-duration:var(--transition-base) !important;transition-timing-function:ease !important;} /* used: chrome */

@media (prefers-reduced-motion:reduce) {
  html:not([data-motion]):where(.page-condition) *, html:not([data-motion]):where(.page-condition) *::before, html:not([data-motion]):where(.page-condition) *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
}

:where(.page-diagnostic) .side-bar-placeholder{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:var(--navy);z-index:var(--z-side-bar-placeholder);} /* used: screening-results-pages */
:where(.page-diagnostic) .temp-chrome{position:fixed;top:0;left:0;width:100%;height:var(--fixed-header-height);background:var(--t-header-bg);z-index:var(--z-chrome);transition:transform var(--transition-base) ease;border-bottom:var(--stroke-thin) solid var(--t-divider);} /* used: screening-results-pages */

@media (max-width: 600px) {
  :where(.page-diagnostic) .side-bar-placeholder{display:none;} /* used: screening-results-pages */
}

:where(.page-diagnostic) .section-nav-bar{position:fixed;top:var(--fixed-header-height);left:0;z-index:var(--z-section-nav);display:flex;align-items:flex-end;width:100%;height:var(--subnav-row-height);background:var(--t-nav-frost);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:var(--stroke-thin) solid var(--t-divider);transition:transform var(--transition-base) ease, top var(--transition-base) ease;overflow:hidden;box-sizing:border-box;} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .section-nav-bar-chrome-hidden{top:0;} /* used: screening-results-pages, chrome */

@media (min-width:601px) {
  :where(.page-diagnostic) .section-nav-bar{left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));} /* used: screening-results-pages, chrome */
}

:where(.page-diagnostic) .section-nav-row{box-sizing:border-box;width:100%;height:var(--subnav-row-height);display:flex;flex-direction:row;align-items:baseline;padding-left:var(--section-nav-edge-inset);padding-right:0;} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .section-nav-title-wrapper{flex:0 0 auto;} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .section-nav-title{font-weight:var(--font-weight-medium);text-wrap:pretty;margin:0;padding:0;line-height:var(--default-line-height-single);font-size:var(--heading-size-sm);} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .section-nav-scroller{flex:1 1 auto;min-width:0;display:flex;flex-direction:row;align-items:baseline;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--section-nav-edge-inset);scroll-padding-right:var(--section-nav-edge-inset);} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .section-nav-scroller::-webkit-scrollbar{display:none;} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .section-nav-list{list-style:none;padding:0;margin:0 0 0 auto;height:max-content;display:flex;flex-direction:row;align-items:baseline;justify-content:flex-start;white-space:nowrap;width:auto;text-align:center;font-size:var(--body-text-sm);} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .section-centred-without-carousel h2{text-wrap:pretty;max-width:var(--golden-width-large);} /* used: screening-results-pages */
:where(.page-diagnostic) .section-nav-item{font-size:var(--body-text-xs);} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .section-nav-link{display:block;position:relative;cursor:pointer;text-decoration:none;color:var(--t-page-text);line-height:var(--default-line-height-single);padding-top:calc((var(--subnav-row-height) - 1em) / 2 + var(--link-line-height));padding-bottom:calc((var(--subnav-row-height) - 1em) / 2 - var(--link-line-height));padding-left:var(--gap-xl);padding-right:var(--gap-xl);transition:color var(--transition-base) ease;} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .section-nav-link::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:var(--link-line-height);background-color:transparent;transition:background-color var(--transition-base) ease;display:block;} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .section-nav-link-active::after{background-color:var(--t-emphasis);} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .section-nav-link:hover{color:var(--orange);text-decoration:none;} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .section-nav-link:hover::after{background-color:transparent;} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .section-nav-link-active:hover{color:var(--t-page-text);} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .section-nav-link-active:hover::after{background-color:var(--t-emphasis);} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .section-nav-link:active{color:var(--t-emphasis);} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .section-panel-bright-blue{background-color:var(--bright-blue);color:var(--panel-text-white);} /* used: screening-results-pages */
:where(.page-diagnostic) .section-panel-bright-blue a{color:var(--panel-text-white);} /* used: screening-results-pages */
:where(.page-diagnostic) .section-panel-dark-red{background-color:var(--red-dark);color:var(--panel-text-white);} /* used: screening-results-pages */
:where(.page-diagnostic) .section-panel-dark-red a{color:var(--panel-text-white);} /* used: screening-results-pages */
:where(.page-diagnostic) .section-panel-dark-red strong{color:var(--panel-text-white);} /* used: screening-results-pages */
:where(.page-diagnostic) .section-nav-action{position:relative;flex:0 0 auto;height:var(--button-size-xs);font-weight:var(--font-weight-normal);font-size:var(--body-text-sm);margin-left:var(--gap-xl);padding-left:var(--app-default-top-bottom-margin-sm);padding-right:var(--app-default-top-bottom-margin-sm);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-xxs);} /* used: screening-results-pages */

@media (max-width:900px) {
  :where(.page-diagnostic) .section-nav-title-wrapper{display:none;} /* used: screening-results-pages, chrome */
  :where(.page-diagnostic) .section-nav-row{padding-left:0;} /* used: screening-results-pages, chrome */
  :where(.page-diagnostic) .section-nav-scroller{padding-left:var(--section-nav-edge-inset);} /* used: screening-results-pages, chrome */
  :where(.page-diagnostic) .section-nav-list{min-width:max-content;margin-left:0;} /* used: screening-results-pages, chrome */
}

:where(.page-diagnostic) .wrapper-below-fixed-bars{margin-top:calc(var(--fixed-header-height) + var(--subnav-row-height));} /* used: screening-results-pages */
:where(.page-diagnostic) .section-centred-without-carousel{height:auto;width:100%;max-width:var(--max-body-wrapper-width);margin-left:auto;margin-right:auto;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);padding-top:var(--app-default-top-bottom-margin-xxxxl);padding-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */

@media (max-width: 600px) {
  :where(.page-diagnostic) .diagnostic-section-full-bleed-with-carousel, :where(.page-diagnostic) .section-centred-without-carousel{margin-left:0;margin-right:0;width:100%;max-width:100%;padding-top:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */
  :where(.page-diagnostic) .section-centred-without-carousel{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-diagnostic) .default-card-paragraph-text:first-child{margin-top:0;}
:where(.page-diagnostic) .default-card-paragraph-text:last-child{margin-bottom:0;}

@media (min-width: 1280px) {
  :where(.page-diagnostic) .diagnostic-centred-card-carousel{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));scroll-padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));scroll-padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages */
}

@media (max-width: 600px) {
  :where(.page-diagnostic) .diagnostic-centred-card-carousel{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);scroll-padding-left:var(--default-left-right-mob-body-padding);scroll-padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-diagnostic) .carousel-nav-btn{display:inline-flex;align-items:center;justify-content:center;border:var(--stroke-hairline) solid var(--t-nav-control);background:transparent;cursor:pointer;flex-shrink:0;border-radius:var(--radius-pill);aspect-ratio:1 / 1;padding:0;height:var(--button-size-md);color:var(--t-nav-control);transition:background var(--button-transition-duration) var(--button-transition-ease), border-color var(--button-transition-duration) var(--button-transition-ease), color var(--button-transition-duration) var(--button-transition-ease), opacity var(--button-transition-duration) var(--button-transition-ease);} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .carousel-nav-btn:hover{background:var(--t-nav-control-hover-bg);color:var(--t-nav-control-hover-icon);border-color:var(--t-nav-control-hover-edge);} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .diagnostic-carousel-nav-btn-disabled{opacity:var(--opacity-low);pointer-events:none;cursor:default;} /* used: screening-results-pages, chrome */

@media (pointer: coarse) {
  :where(.page-diagnostic) .centred-card-carousel-controls{display:none;} /* used: screening-results-pages */
  :where(.page-diagnostic) .diagnostic-centred-card-carousel{padding-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */
}

:where(.page-diagnostic) .centred-card-carousel-controls{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:var(--gap-sm);height:auto;width:auto;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);padding-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */

@media (max-width: 600px) {
  :where(.page-diagnostic) .centred-card-carousel-controls{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

@media (min-width: 1280px) {
  :where(.page-diagnostic) .centred-card-carousel-controls{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages */
}

:where(.page-diagnostic) .portrait-tile-single-row{flex:0 0 var(--carouselle-card-width-mobile);width:var(--carouselle-card-width-mobile);min-width:var(--carouselle-card-width-mobile);max-width:var(--carouselle-card-width-mobile);aspect-ratio:9/16;display:flex;flex-direction:column;background-color:var(--t-card-soft);border-radius:var(--app-default-radius-lg);overflow:hidden;padding:var(--app-default-top-bottom-margin-xl);margin-left:auto;margin-right:auto;} /* used: screening-results-pages */

@media (min-width: 450px) {
  :where(.page-diagnostic) .portrait-tile-single-row{flex:0 0 var(--carouselle-card-lg);width:var(--carouselle-card-lg);min-width:var(--carouselle-card-lg);max-width:var(--carouselle-card-lg);} /* used: screening-results-pages */
}

@media (min-width: 600px) {
  :where(.page-diagnostic) .portrait-tile-single-row{flex:0 0 var(--carouselle-card-xl);width:var(--carouselle-card-xl);min-width:var(--carouselle-card-xl);max-width:var(--carouselle-card-xl);} /* used: screening-results-pages */
}

@media (min-width: 900px) {
  :where(.page-diagnostic) .portrait-tile-single-row{flex:0 0 var(--carouselle-card-xxl);width:var(--carouselle-card-xxl);min-width:var(--carouselle-card-xxl);max-width:var(--carouselle-card-xxl);} /* used: screening-results-pages */
}

:where(.page-diagnostic) .radar-graph-controls{display:flex;gap:var(--default-gap);justify-content:center;align-items:center;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-controls-button-childhood{color:var(--t-text-secondary);} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-controls-button-adulthood{color:var(--t-text-secondary);} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-controls-button-childhood.is-active{color:var(--yellow);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-controls-button-adulthood.is-active{color:var(--orange);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-diagnostic) .explanation-card.is-scrolled-to-bottom .explanation-card-fade{opacity:var(--opacity-hidden);}

@media (max-width:600px) {
  :where(.page-diagnostic) .section-nav-item{font-size:var(--body-text-sm);} /* used: screening-results-pages, chrome */
}

:where(.page-diagnostic) .default-card-paragraph-text{line-height:var(--default-line-height-large);font-size:var(--body-text-sm);} /* used: screening-results-pages */
:where(.page-diagnostic) .carousel-nav-btn i{font-size:var(--button-icon-md);} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .radar-graph-controls-button{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--body-text-xs);padding:var(--app-default-top-bottom-margin-xxs) 0;display:inline-flex;align-items:center;gap:var(--app-default-top-bottom-margin-xxs);} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-controls-button::before{content:"";display:inline-block;width:var(--app-default-top-bottom-margin-sm);height:var(--app-default-top-bottom-margin-sm);border-radius:50%;flex-shrink:0;transition:background-color 0.3s ease;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-controls-button-childhood::before{border:2px solid var(--yellow);background:transparent;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-controls-button-adulthood::before{border:2px solid var(--orange);background:transparent;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-controls-button-childhood.is-active::before{background:var(--yellow);border-color:var(--yellow);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-controls-button-adulthood.is-active::before{background:var(--orange);border-color:var(--orange);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-diagnostic) .portrait-tile-single-row.radar-graph-card{padding:0;overflow:visible;} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-card{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;text-align:center;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-card-heading, :where(.page-diagnostic) .radar-graph-controls, :where(.page-diagnostic) .radar-graph-area, :where(.page-diagnostic) .radar-graph-score-panel{width:100%;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-tab-toggle{display:flex;flex-shrink:0;border-radius:var(--app-default-radius-sm);overflow:hidden;position:absolute;top:var(--app-default-top-bottom-margin-lg);right:var(--app-default-top-bottom-margin-lg);z-index:2;height:var(--button-size-md);} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-tab{background-color:var(--t-control-bg);border:none;cursor:pointer;font-family:inherit;font-size:var(--body-text-sm);font-weight:var(--font-weight-medium);padding:0 var(--app-default-top-bottom-margin-md);min-height:0;color:var(--t-emphasis);transition:background-color 0.2s ease, color 0.2s ease;} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-tab.is-active{background-color:var(--t-selected-bg);color:var(--t-selected-text);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-diagnostic) .portrait-tile-single-row .info-card-heading{margin-top:0;color:var(--t-page-text);} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-card-heading{font-size:var(--card-title-sm);font-weight:var(--font-weight-light);margin:0 0 var(--app-default-top-bottom-margin-sm) 0;text-align:center;padding:0 var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages, learn-pages-homepage-legal */

@media (min-width: 901px) {
  :where(.page-diagnostic) .radar-graph-card-heading{font-size:var(--card-title-lg);} /* used: screening-results-pages, learn-pages-homepage-legal */
}

:where(.page-diagnostic) .radar-graph-controls{margin-bottom:var(--app-default-top-bottom-margin-xxs);} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-area{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-card .visually-hidden-list{overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-card .swipeable-graphs-wrapper.radar-graph-area{align-self:stretch;width:100%;max-width:100%;margin:0;overflow:visible;flex:0 0 auto;min-height:0;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-card .radar-swipeable-tile{flex:0 0 auto;min-height:0;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-canvas{width:calc(100% - var(--canvas-inset-total));max-width:none;height:auto;aspect-ratio:1 / 1;margin:0 auto;display:block;flex-grow:1;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-score-panel{background:var(--t-band-alt);border-radius:var(--app-default-radius-sm);padding:0 var(--app-default-top-bottom-margin-md);margin:var(--app-default-top-bottom-margin-xxl) var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-xl);align-self:stretch;width:auto;} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-score-panel-reduced-top-margin{margin-top:var(--app-default-top-bottom-margin-lg);} /* used: screening-results-pages */

@media (max-width: 899px) {
  :where(.page-diagnostic) .radar-graph-score-panel{margin-bottom:var(--app-default-top-bottom-margin-lg);} /* used: screening-results-pages */
}

:where(.page-diagnostic) .radar-graph-score-row{display:flex;align-items:center;gap:var(--app-default-top-bottom-margin-xxxs);cursor:pointer;height:var(--button-size-lg);padding:0;} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-score-rule{height:0;border-top:var(--stroke-thin) solid var(--t-divider);margin-left:calc(-1 * var(--app-default-top-bottom-margin-md));margin-right:calc(-1 * var(--app-default-top-bottom-margin-md));} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-score-letter{font-weight:var(--font-weight-medium);font-size:var(--body-text-sm);color:var(--t-page-text);min-width:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-score-icon{display:flex;align-items:center;font-size:var(--button-icon-md);} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-score-icon-met{color:var(--bright-green);} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-score-icon-not-met{color:var(--tomato);} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-score-list{display:flex;gap:var(--app-default-top-bottom-margin-lg);margin-left:auto;} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-score{display:flex;flex-direction:row;align-items:baseline;gap:var(--app-default-top-bottom-margin-xxs);min-width:var(--radar-graph-score-width);} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-score-label{font-size:var(--body-text-sm);color:var(--t-text-secondary);line-height:var(--default-line-height-single);} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-score-value{font-size:var(--body-text-sm);font-weight:var(--font-weight-semi-bold);color:var(--t-page-text);line-height:var(--default-line-height-single);} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-score-value-not-met{color:var(--tomato);} /* used: screening-results-pages */
:where(.page-diagnostic) .diagnostic-section-full-bleed-with-carousel{height:auto;width:100%;padding-top:var(--app-default-top-bottom-margin-xxxxl);} /* used: screening-results-pages */

@media (max-width: 600px) {
  :where(.page-diagnostic) .diagnostic-section-full-bleed-with-carousel{width:100%;max-width:100%;padding-top:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */
}

:where(.page-diagnostic) .diagnostic-centred-card-carousel{-ms-overflow-style:none;scrollbar-width:none;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);scroll-padding-left:var(--default-left-right-desk-body-padding);scroll-padding-right:var(--default-left-right-desk-body-padding);width:100%;max-width:100%;display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:var(--default-row-gap);scroll-behavior:smooth;padding-top:var(--app-default-top-bottom-margin-sm);padding-bottom:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
:where(.page-diagnostic) .diagnostic-centred-card-carousel::-webkit-scrollbar{display:none;} /* used: screening-results-pages */

@media (min-width: 1280px) {
  :where(.page-diagnostic) .diagnostic-centred-card-carousel{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages */
}

@media (max-width: 600px) {
  :where(.page-diagnostic) .diagnostic-centred-card-carousel{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-diagnostic) .portrait-tile-single-row{aspect-ratio:9 / 16;display:flex;flex-direction:column;background-color:var(--t-card-soft);border-radius:var(--app-default-radius-lg);overflow:hidden;padding:var(--app-default-top-bottom-margin-xl);position:relative;} /* used: screening-results-pages */
:where(.page-diagnostic) .diagnostic-centred-card-carousel > .portrait-tile-single-row{flex:0 0 auto;scroll-snap-align:start;margin:0;} /* used: screening-results-pages */
:where(.page-diagnostic) .diagnostic-severity-key-list{list-style:none;padding:0;margin:0 0 var(--app-default-top-bottom-margin-xl) 0;flex:1;} /* used: screening-results-pages */
:where(.page-diagnostic) .diagnostic-severity-key-item{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--key-row-gap) / 2) 0;font-size:var(--body-text-sm);line-height:var(--default-line-height-small);color:var(--t-page-text);} /* used: screening-results-pages */
:where(.page-diagnostic) .diagnostic-severity-key-item:last-child{border-bottom:none;} /* used: screening-results-pages */
:where(.page-diagnostic) .diagnostic-severity-key-label{flex:1;} /* used: screening-results-pages */
:where(.page-diagnostic) .diagnostic-severity-key-dot{margin-right:var(--app-default-top-bottom-margin-xs);display:inline-block;width:var(--severity-dot-size);height:var(--severity-dot-size);border-radius:var(--radius-circle);flex-shrink:0;} /* used: screening-results-pages */
:where(.page-diagnostic) .severity-key-dot-not-met{background:var(--tomato);} /* used: screening-results-pages */
:where(.page-diagnostic) .severity-key-dot-met{background:var(--bright-green);} /* used: screening-results-pages */
:where(.page-diagnostic) .severity-key-dot-borderline{background:var(--orange);} /* used: screening-results-pages */
:where(.page-diagnostic) .severity-key-value{text-align:right;color:var(--t-text-secondary);font-size:var(--body-text-xs);} /* used: screening-results-pages */
:where(.page-diagnostic) .explanation-card{overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;padding:var(--app-default-top-bottom-margin-xl);scroll-padding-block-end:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */

@media (min-width: 900px) {
  :where(.page-diagnostic) .explanation-card{padding:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
}

:where(.page-diagnostic) .explanation-card-fade{position:sticky;bottom:calc(-1 * var(--app-default-top-bottom-margin-xxxl));left:0;right:0;height:calc(var(--app-default-top-bottom-margin-xxxxxl) + var(--app-default-top-bottom-margin-xxxl));margin-left:calc(-1 * var(--app-default-top-bottom-margin-xxxl));margin-right:calc(-1 * var(--app-default-top-bottom-margin-xxxl));background:linear-gradient(to bottom, rgba(var(--t-card-soft-rgb), 0) 0%, rgba(var(--t-card-soft-rgb), 0.08) 40%, rgba(var(--t-card-soft-rgb), 0.30) 62%, rgba(var(--t-card-soft-rgb), 0.70) calc(100% - var(--app-default-top-bottom-margin-xxl)), var(--t-card-soft) calc(100% - var(--app-default-top-bottom-margin-lg)), var(--t-card-soft) 100%);pointer-events:none;flex-shrink:0;margin-top:calc(-1 * var(--app-default-top-bottom-margin-xxxxxl));transition:opacity 0.2s ease;} /* used: screening-results-pages */
:where(.page-diagnostic) .diagnostic-reference-links{display:flex;flex-direction:column;gap:var(--app-default-top-bottom-margin-sm);margin-top:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */

@media (min-width: 900px) {
  :where(.page-diagnostic) .diagnostic-reference-links{margin-left:calc(var(--app-default-top-bottom-margin-xl) - var(--app-default-top-bottom-margin-xxxl));margin-right:calc(var(--app-default-top-bottom-margin-xl) - var(--app-default-top-bottom-margin-xxxl));} /* used: screening-results-pages */
}

:where(.page-diagnostic) .diagnostic-reference-links-button{align-self:stretch;gap:var(--app-default-top-bottom-margin-sm);height:auto;min-height:var(--button-size-lg);} /* used: screening-results-pages */
:where(.page-diagnostic) .reference-links-label{line-height:var(--default-line-height-small);} /* used: screening-results-pages */

@media (max-width: 600px) {
  :where(.page-diagnostic) .diagnostic-reference-links-button{min-height:var(--button-size-md);} /* used: screening-results-pages */
}

@media (pointer: coarse) {
  :where(.page-diagnostic) .hide-download-on-mob{display:none;} /* used: screening-results-pages */
}

:where(.page-diagnostic) .section-heading-items{margin-bottom:var(--default-whitespace-below-section-headings);} /* used: screening-results-pages */
:where(.page-diagnostic) .centre-section-heading-items{width:100%;display:flex;flex-direction:column;align-items:center;} /* used: screening-results-pages */
:where(.page-diagnostic) .centre-section-heading-items p, :where(.page-diagnostic) .centre-section-heading-items h2{text-align:center;} /* used: screening-results-pages */
:where(.page-diagnostic) .panel-introduction-text{text-wrap:pretty;font-size:var(--heading-size-sm);line-height:var(--default-line-height-large);width:100%;max-width:var(--golden-width-large);} /* used: screening-results-pages */
:where(.page-diagnostic) .panel-introduction-text:last-of-type{margin-bottom:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
:where(.page-diagnostic) .preparing-text-columns{width:100%;max-width:var(--max-body-wrapper-width);column-count:3;column-gap:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */

@media (max-width: 950px) {
  :where(.page-diagnostic) .preparing-text-columns{column-count:2;} /* used: screening-results-pages */
}

@media (max-width: 750px) {
  :where(.page-diagnostic) .preparing-text-columns{column-count:1;} /* used: screening-results-pages */
}

:where(.page-diagnostic) .pros-cons-panel{display:flex;flex-direction:row;gap:var(--app-default-top-bottom-margin-xxxxl);} /* used: screening-results-pages */
:where(.page-diagnostic) .pros-cons-column-left, :where(.page-diagnostic) .pros-cons-column-right{flex:1;aspect-ratio:1 / 1;height:auto;} /* used: screening-results-pages */

@media (max-width: 750px) {
  :where(.page-diagnostic) .pros-cons-panel{flex-direction:column;gap:var(--app-default-top-bottom-margin-xxxxl);} /* used: screening-results-pages */
  :where(.page-diagnostic) .pros-cons-column-left, :where(.page-diagnostic) .pros-cons-column-right{width:100%;aspect-ratio:1 / 1;padding-right:0;} /* used: screening-results-pages */
}

:where(.page-diagnostic) .pros-cons-list{margin-left:var(--app-default-top-bottom-margin-lg);padding-left:0;padding-right:var(--app-default-top-bottom-margin-xl);list-style-position:outside;font-size:var(--body-text-lg);line-height:var(--default-line-height-small);margin-top:var(--app-default-top-bottom-margin-xxxl);margin-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */

@media (max-width: 600px) {
  :where(.page-diagnostic) .pros-cons-list{padding-right:0;} /* used: screening-results-pages */
}

:where(.page-diagnostic) .pros-cons-list-item{padding-left:var(--app-default-top-bottom-margin-xxs);} /* used: screening-results-pages */
:where(.page-diagnostic) .table-action-buttons{width:100%;justify-content:flex-start;display:flex;flex-direction:row;gap:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages */

@media (max-width: 600px) {
  :where(.page-diagnostic) .table-action-buttons{flex-direction:column;justify-content:center;gap:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages */
}

:where(.page-diagnostic) .symptom-present-icon, :where(.page-diagnostic) .symptom-absent-icon{font-size:var(--heading-size-lg);} /* used: screening-results-pages */
:where(.page-diagnostic) .symptom-present-icon{color:var(--bright-green);} /* used: screening-results-pages */
:where(.page-diagnostic) .symptom-absent-icon{color:var(--tomato);} /* used: screening-results-pages */
:where(.page-diagnostic) .table-introduction-text{margin-bottom:var(--app-default-top-bottom-margin-xl);font-size:var(--body-text-lg);} /* used: screening-results-pages */
:where(.page-diagnostic) .table-filter{margin-bottom:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
:where(.page-diagnostic) .criteria-table{width:100%;height:auto;margin-bottom:var(--app-default-top-bottom-margin-xxxxxl);border-collapse:collapse;} /* used: screening-results-pages */
:where(.page-diagnostic) .criteria-table thead th{vertical-align:bottom;text-align:left;line-height:var(--default-line-height-small);color:var(--t-emphasis);padding-bottom:var(--app-default-top-bottom-margin-sm);border-bottom:4px solid var(--t-emphasis);} /* used: screening-results-pages */
:where(.page-diagnostic) .criteria-table-heading{font-size:var(--body-text-xxxl);margin-bottom:0;line-height:var(--default-line-height-small);font-weight:var(--font-weight-normal);padding-right:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-diagnostic) .criteria-table-heading{font-size:var(--body-text-xxl);} /* used: screening-results-pages */
}

:where(.page-diagnostic) .criteria-table-column-childhood{width:calc((var(--golden-ratio-small-percentage) / 2) - 1rem);} /* used: screening-results-pages */
:where(.page-diagnostic) .criteria-table-column-criteria{width:var(--golden-ratio-large-percentage);} /* used: screening-results-pages */
:where(.page-diagnostic) .criteria-table tr td{vertical-align:top;padding-top:var(--app-default-top-bottom-margin-sm);padding-bottom:var(--app-default-top-bottom-margin-sm);border-bottom:1px solid var(--rule-grey);} /* used: screening-results-pages */
:where(.page-diagnostic) .criteria-table tbody tr:first-child td{padding-top:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
:where(.page-diagnostic) .criteria-table tr:last-child td{border-bottom:none;} /* used: screening-results-pages */
:where(.page-diagnostic) .criteria-table tbody td:first-child{text-align:left;padding-right:var(--app-default-top-bottom-margin-xxxxxl);text-wrap:pretty;font-size:var(--body-text-sm);line-height:var(--default-line-height-large);} /* used: screening-results-pages */
:where(.page-diagnostic) .table-data-text{text-wrap:pretty;font-size:var(--body-text-sm);line-height:var(--default-line-height-large);} /* used: screening-results-pages */
:where(.page-diagnostic) .table-data-text-list{list-style-type:lower-roman;font-size:var(--body-text-sm);line-height:var(--default-line-height-large);margin-left:0;padding-left:0;} /* used: screening-results-pages */
:where(.page-diagnostic) .table-data-text-list{font-size:var(--body-text-sm);line-height:var(--default-line-height-large);margin-left:0;padding-left:var(--app-default-top-bottom-margin-lg);list-style-position:outside;} /* used: screening-results-pages */
:where(.page-diagnostic) .table-data-text-list li{font-size:var(--body-text-sm);line-height:var(--default-line-height-large);margin-bottom:var(--app-default-top-bottom-margin-xs);text-wrap:pretty;} /* used: screening-results-pages */
:where(.page-diagnostic) .table-data-text-list li:last-child{margin-bottom:0;} /* used: screening-results-pages */
:where(.page-diagnostic) .table-list-title{font-weight:var(--font-weight-semi-bold);margin-top:var(--app-default-top-bottom-margin-lg);margin-bottom:var(--app-default-top-bottom-margin-xxs);} /* used: screening-results-pages */
:where(.page-diagnostic) .criteria-table-additional tbody td:first-child{display:block;width:100%;padding-right:var(--app-default-top-bottom-margin-xxxxxl);box-sizing:border-box;font-size:var(--body-text-sm);line-height:var(--default-line-height-large);} /* used: screening-results-pages */
:where(.page-diagnostic) .criteria-table-tick-column tbody td:first-child{padding-right:calc(var(--app-default-top-bottom-margin-xxxxxl) + var(--table-tick-col-width));} /* used: screening-results-pages */

@media (max-width: 600px) {
  :where(.page-diagnostic) .criteria-table-column-criteria, :where(.page-diagnostic) .criteria-table-column-childhood{width:auto;} /* used: screening-results-pages */
  :where(.page-diagnostic) .criteria-table tbody td:first-child, :where(.page-diagnostic) .criteria-table-additional tbody td:first-child{padding-right:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */
  :where(.page-diagnostic) .criteria-table-tick-column tbody td:first-child{padding-right:calc(var(--app-default-top-bottom-margin-xxxl) + var(--table-tick-col-width));} /* used: screening-results-pages */
  :where(.page-diagnostic) .hide-download-on-mob{display:none;} /* used: screening-results-pages */
}

:where(.page-diagnostic) .summary-text-content-wrapper{width:100%;text-align:left;margin:0;} /* used: screening-results-pages */
:where(.page-diagnostic) .summary-h1-header, :where(.page-diagnostic) .panel-h2-heading{text-wrap:pretty;width:100%;max-width:var(--golden-width-large);margin-top:0;margin-bottom:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
:where(.page-diagnostic) .section-footnote{width:100%;max-width:var(--golden-width-large);} /* used: screening-results-pages */
:where(.page-diagnostic) .information-text, :where(.page-diagnostic) .section-footnote{font-size:var(--body-text-lg);line-height:var(--default-line-height-large);} /* used: screening-results-pages */
:where(.page-diagnostic) .information-text-golden-large{max-width:var(--max-content-width-golden-section-large);} /* used: screening-results-pages */
:where(.page-diagnostic) .pill-filter-bar-wrapper{max-width:100%;width:auto;height:auto;overflow-x:visible;z-index:800;display:flex;} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .table-filter{justify-content:center;} /* used: screening-results-pages */
:where(.page-diagnostic) .pill-filter-bar{background-color:var(--t-switch-bg);height:var(--pill-filter-height);border-radius:calc(var(--pill-filter-height) / 2);display:inline-flex;width:max-content;padding-left:var(--filter-bar-left-right-padding);padding-right:var(--filter-bar-left-right-padding);align-items:center;position:relative;justify-content:center;z-index:800;transform:translateZ(0);will-change:transform;max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .pill-filter-bar::-webkit-scrollbar{display:none;} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .pill-filter-item{color:var(--t-text-strong);font-size:var(--body-text-xs);text-decoration:none;height:var(--pill-filter-selected-height);line-height:var(--pill-filter-selected-height);border-radius:calc(var(--pill-filter-selected-height) / 2);position:relative;display:flex;align-items:center;justify-content:center;z-index:802;transform:translateZ(0);will-change:transform;cursor:pointer;padding:0 var(--nav-link-padding-horizontal);transition:color 0.3s;white-space:nowrap;} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .pill-filter-item.selected{color:var(--t-selected-text);text-decoration:none;} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .pill-filter-item:not(.selected):hover{color:var(--orange);text-decoration:none;cursor:pointer;} /* used: screening-results-pages, chrome */
:where(.page-diagnostic) .selected-pill-in-filter{align-items:center;position:absolute;left:0;height:var(--pill-filter-selected-height);background-color:var(--t-selected-bg);line-height:var(--pill-filter-selected-height);border-radius:calc(var(--pill-filter-selected-height) / 2);transition:left 0.3s ease, width 0.3s ease;z-index:801;transform:translateZ(0);will-change:transform;} /* used: screening-results-pages */
:where(.page-diagnostic) .swipeable-graphs-wrapper{-ms-overflow-style:none;scrollbar-width:none;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .swipeable-graphs-wrapper::-webkit-scrollbar{display:none;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .swipeable-graphs-wrapper{display:flex;flex-direction:row;gap:0;width:var(--golden-width-small);max-width:var(--golden-width-small);height:auto;overflow-y:hidden;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;margin-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-swipeable-tile{scroll-snap-align:start;width:100%;max-width:100%;flex-shrink:0;display:flex;flex-direction:column;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph{display:block;aspect-ratio:1 / 1;flex-shrink:0;width:100%;max-width:100%;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .visually-hidden-list{height:var(--stroke-thin);width:var(--stroke-thin);position:absolute;bottom:0;left:0;} /* used: screening-results-pages, learn-pages-homepage-legal */

@media (max-width: 600px) {
  :where(.page-diagnostic) .swipeable-graphs-wrapper{width:100%;max-width:100%;} /* used: screening-results-pages, learn-pages-homepage-legal */
}

:where(.page-diagnostic) .summary-text-centred-wrapper{width:100%;max-width:var(--max-body-wrapper-width);margin-left:auto;margin-right:auto;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */

@media (max-width: 600px) {
  :where(.page-diagnostic) .summary-text-centred-wrapper{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-diagnostic) .pros-cons-list-item{margin-bottom:var(--app-default-top-bottom-margin-md);line-height:var(--default-line-height-small);font-size:var(--body-text-sm);} /* used: screening-results-pages */
:where(.page-diagnostic) .pros-cons-list-item::marker{font-size:var(--body-text-sm);} /* used: screening-results-pages */
:where(.page-diagnostic) .pros-cons-panel{gap:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
:where(.page-diagnostic) .pros-cons-column-left, :where(.page-diagnostic) .pros-cons-column-right{aspect-ratio:auto;} /* used: screening-results-pages */
:where(.page-diagnostic) .pros-cons-panel .pros-cons-column-heading{max-width:none;} /* used: screening-results-pages */
:where(.page-diagnostic) .portrait-tile-single-row.radar-graph-card{overflow:visible;} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-canvas{aspect-ratio:1 / 1;width:calc(100% - var(--canvas-inset-total));max-width:none;margin:0 auto;display:block;flex-shrink:0;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .triangle-canvas{width:calc((100% - var(--canvas-inset-total)) * 1.1547);height:calc((100% - var(--canvas-inset-total)) * 1.1547);aspect-ratio:1 / 1;margin-bottom:calc(((100% - var(--canvas-inset-total)) * 0.866) - ((100% - var(--canvas-inset-total)) * 1.1547));} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-card .swipeable-graphs-wrapper{width:100%;max-width:100%;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .radar-graph-card .radar-swipeable-tile{width:100%;max-width:100%;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .diagnostic-centred-card-carousel{overflow:visible;overflow-x:auto;} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-score-letter-met{color:var(--bright-green);} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-score-letter-not-met{color:var(--tomato);} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-score-value-met{color:var(--t-score-met);} /* used: screening-results-pages */
:where(.page-diagnostic) .criteria-table-additional{width:100%;} /* used: screening-results-pages */
:where(.page-diagnostic) .criteria-table-heading, :where(.page-diagnostic) .info-card-heading{font-size:var(--body-text-xxxl);} /* used: screening-results-pages */

@media (max-width: 900px) {
  :where(.page-diagnostic) .criteria-table-heading, :where(.page-diagnostic) .info-card-heading{font-size:var(--card-title-sm);} /* used: screening-results-pages */
}

@media (max-width: 600px) {
  :where(.page-diagnostic) .criteria-table-heading, :where(.page-diagnostic) .info-card-heading{font-size:var(--body-text-xl);} /* used: screening-results-pages */
}

:where(.page-diagnostic) .criteria-table-two-column .criteria-table-column-criteria{width:100%;} /* used: screening-results-pages */
:where(.page-diagnostic) .criteria-table-column-current{width:var(--table-tick-col-width);white-space:nowrap;text-align:right;} /* used: screening-results-pages */
:where(.page-diagnostic) .criteria-table-cell-text{display:block;max-width:var(--max-content-width-golden-section-large);} /* used: screening-results-pages */
:where(.page-diagnostic) .criteria-table-cell-text-wide{max-width:none;} /* used: screening-results-pages */
:where(.page-diagnostic) .pros-cons-list-item{color:rgba(var(--panel-text-white-rgb), var(--opacity-very-high));} /* used: screening-results-pages */
:where(.page-diagnostic) .pros-cons-list-item::marker{color:var(--panel-text-white);} /* used: screening-results-pages */
:where(.page-diagnostic) .section-footnote{color:rgba(var(--panel-text-white-rgb), var(--opacity-very-high));} /* used: screening-results-pages */
:where(.page-diagnostic) .panel-text-emphasis{color:var(--panel-text-white);} /* used: screening-results-pages */
:where(.page-diagnostic) .chart-tooltip-row{display:flex;align-items:flex-start;gap:var(--gap-xs);} /* used: learn-pages-homepage-legal */

@media (max-width: 600px) {
  :where(.page-diagnostic) .criteria-table-a-wrapper, :where(.page-diagnostic) .criteria-table-b-wrapper, :where(.page-diagnostic) .criteria-table-c-wrapper{overflow-x:auto;} /* used: screening-results-pages */
}

@media (prefers-reduced-motion: reduce) {
  :where(.page-diagnostic) .diagnostic-centred-card-carousel{scroll-behavior:auto;} /* used: screening-results-pages */
  :where(.page-diagnostic) .swipeable-graphs-wrapper{scroll-behavior:auto;} /* used: screening-results-pages, learn-pages-homepage-legal */
}

:where(.page-diagnostic) .chart-tooltip{position:fixed;max-width:var(--chart-tooltip-max-width);padding:var(--app-default-top-bottom-margin-sm);border-radius:var(--app-default-radius-sm);background:var(--t-tooltip-bg);color:var(--t-tooltip-text);font-family:inherit;pointer-events:none;z-index:var(--z-chart-tooltip);opacity:0;transition:opacity var(--chart-tooltip-fade-duration) var(--button-transition-ease);} /* used: learn-pages-homepage-legal */
:where(.page-diagnostic) .chart-tooltip-title{font-size:var(--body-text-sm);font-weight:var(--font-weight-bold);margin-bottom:var(--gap-xxs);} /* used: learn-pages-homepage-legal */
:where(.page-diagnostic) .chart-tooltip-swatch{display:inline-block;flex-shrink:0;width:var(--chart-tooltip-swatch-size, 0.75rem);height:var(--chart-tooltip-swatch-size, 0.75rem);margin-top:var(--app-default-top-bottom-margin-xxxxs);border-radius:var(--chart-tooltip-swatch-radius, 2px);background:var(--chart-tooltip-swatch-colour, var(--t-line-muted));} /* used: learn-pages-homepage-legal */
:where(.page-diagnostic) .chart-tooltip-text{font-size:var(--body-text-xs);} /* used: learn-pages-homepage-legal */

@media (max-width: 900px) {
  :where(.page-diagnostic) .radar-graph-score-letter, :where(.page-diagnostic) .radar-graph-score-label, :where(.page-diagnostic) .radar-graph-score-value{font-size:var(--body-text-xs);} /* used: screening-results-pages */
}

:where(.page-diagnostic) .summary-h1-header, :where(.page-diagnostic) .panel-h2-heading, :where(.page-diagnostic) .pros-cons-column-heading, :where(.page-diagnostic) .radar-graph-card-heading, :where(.page-diagnostic) .info-card-heading{line-height:var(--default-line-height-x-small);} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-diagnostic) .table-introduction-text{margin-top:0;} /* used: screening-results-pages */
:where(.page-diagnostic) .summary-h1-header, :where(.page-diagnostic) .table-heading{margin-bottom:var(--app-default-top-bottom-margin-lg);} /* used: screening-results-pages */
:where(.page-diagnostic) .pros-cons-panel .pros-cons-column-heading{margin-bottom:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
:where(.page-diagnostic) .pros-cons-list{margin-top:0;} /* used: screening-results-pages */
:where(.page-diagnostic) .preparing-section-text:first-child{margin-top:0;} /* used: screening-results-pages */

@media (prefers-reduced-motion: reduce) {
  :where(.page-diagnostic) .carousel-nav-btn{transition:none;} /* used: screening-results-pages, chrome */
  :where(.page-diagnostic) .radar-graph-controls-button::before{transition:none;} /* used: screening-results-pages, learn-pages-homepage-legal */
  :where(.page-diagnostic) .radar-graph-tab{transition:none;} /* used: screening-results-pages */
  :where(.page-diagnostic) .explanation-card-fade{transition:none;} /* used: screening-results-pages */
  :where(.page-diagnostic) .pill-filter-item{transition:none;} /* used: screening-results-pages, chrome */
  :where(.page-diagnostic) .selected-pill-in-filter{transition:none;} /* used: screening-results-pages */
  :where(.page-diagnostic) .chart-tooltip{transition:none;} /* used: learn-pages-homepage-legal */
}

:where(.page-diagnostic) .section-footnote{font-size:var(--body-text-sm);line-height:var(--default-line-height-large);} /* used: screening-results-pages */
:where(.page-diagnostic) .preparing-section-text{font-size:var(--body-text-sm);line-height:var(--default-line-height-large);color:rgba(var(--panel-text-white-rgb), var(--opacity-very-high));} /* used: screening-results-pages */
:where(.page-diagnostic) .column-label-short{display:none;} /* used: screening-results-pages */

@media (max-width: 600px) {
  :where(.page-diagnostic) .column-label-full{display:none;} /* used: screening-results-pages */
  :where(.page-diagnostic) .column-label-short{display:inline;} /* used: screening-results-pages */
  :where(.page-diagnostic) .radar-graph-card-heading{font-size:var(--body-text-xl);} /* used: screening-results-pages, learn-pages-homepage-legal */
}

:where(.page-diagnostic) .radar-graph-card-heading-long{display:inline;} /* used: screening-results-pages */
:where(.page-diagnostic) .radar-graph-card-heading-short{display:none;} /* used: screening-results-pages */

@media (max-width: 900px) {
  :where(.page-diagnostic) .radar-graph-card-heading-long{display:none;} /* used: screening-results-pages */
  :where(.page-diagnostic) .radar-graph-card-heading-short{display:inline;} /* used: screening-results-pages */
}

:where(.page-diagnostic) .radar-graph-canvas-diamond{margin-bottom:calc(var(--app-default-top-bottom-margin-lg) * -1);} /* used: screening-results-pages */
:where(.page-diagnostic) .section-footnote{line-height:var(--default-line-height-small);} /* used: screening-results-pages */
[data-motion="still"]:where(.page-diagnostic) *, :where(.page-diagnostic) [data-motion="still"] *, [data-motion="still"]:where(.page-diagnostic) *::before, :where(.page-diagnostic) [data-motion="still"] *::before, [data-motion="still"]:where(.page-diagnostic) *::after, :where(.page-diagnostic) [data-motion="still"] *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-property:opacity !important;transition-duration:var(--motion-fade) !important;transition-timing-function:var(--motion-fade-ease) !important;scroll-behavior:auto !important;}
:where(.page-diagnostic) body{background-color:var(--t-page-bg);color:var(--t-page-text);} /* used: screening-results-pages */
:where(.page-diagnostic) .diagnostic-section-full-bleed-with-carousel{background-color:var(--t-chart-band);} /* used: screening-results-pages */
:where(.page-diagnostic) .diagnostic-content-box-stroked-mushroom{border-color:var(--t-box-edge);} /* used: screening-results-pages */
:where(.page-diagnostic) .table-export-button{background:var(--t-export-button-bg);color:var(--t-export-button-text);box-shadow:inset 0 0 0 var(--stroke-hairline) var(--t-export-button-edge);} /* used: screening-results-pages */
:where(.page-diagnostic) .table-export-button:hover{background:var(--t-export-button-bg-hover);color:var(--t-export-button-text-hover);} /* used: screening-results-pages */
:where(.page-diagnostic) h1{color:var(--t-heading);} /* used: screening-results-pages */
:where(.page-adhd-diagnostic, .page-autism-diagnostic) .criteria-table-heading-column{font-size:var(--card-title-sm);} /* used: screening-results-pages */

@media (max-width: 600px) {
  :where(.page-adhd-diagnostic, .page-autism-diagnostic) .criteria-table-heading-column{font-size:var(--body-text-xl);} /* used: screening-results-pages */
}

[data-motion="still"]:where(.page-diagnostic), :where(.page-diagnostic) [data-motion="still"]{scroll-behavior:auto !important;}
[data-motion="still"]:where(.page-diagnostic) .temp-chrome, :where(.page-diagnostic) [data-motion="still"] .temp-chrome, [data-motion="still"]:where(.page-diagnostic) .section-nav-bar, :where(.page-diagnostic) [data-motion="still"] .section-nav-bar{transition-property:transform, top !important;transition-duration:var(--transition-base) !important;transition-timing-function:ease !important;} /* used: chrome */
:where(.page-diagnostic) .references-button{background-color:transparent;font-weight:var(--font-weight-semi-bold);padding-top:var(--app-default-top-bottom-margin-sm);padding-bottom:var(--app-default-top-bottom-margin-sm);padding-right:0;padding-left:0;width:100%;text-align:left;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--dark-charcoal);transition:background-color 0.3s ease, color 0.3s ease;}
:where(.page-diagnostic) .diagnostic-btn-secondary-navy-on-white{color:var(--t-emphasis);border-color:var(--t-emphasis);} /* used: screening-results-pages */
:where(.page-diagnostic) .diagnostic-btn-secondary-navy-on-white:hover{color:var(--t-emphasis-hover);border-color:var(--t-emphasis-hover);} /* used: screening-results-pages */
:where(.page-condition) .section-nav-bar-cards-active{transform:translateY(-100%);} /* used: screening-results-pages, chrome */
:where(.page-condition) .filter-pill.active{color:var(--white-text-default);background:var(--theme);border-color:var(--theme);}
:where(.page-condition) .carousel:focus{outline:none;}
:where(.page-condition) .cond-card.c-mustard{background:var(--mustard);--theme:var(--mustard);} /* used: screening-results-pages */
:where(.page-condition) .cond-card.c-orange-dark{background:var(--orange-dark);--theme:var(--orange-dark);} /* used: screening-results-pages */
:where(.page-condition) .cond-card :focus-visible:where(:not(.uma-input-pointer *)){outline-color:var(--white-text-default);}
:where(.page-condition) .section-full-bleed-with-carousel{height:auto;width:100%;padding-top:var(--app-default-top-bottom-margin-xxxxl);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-condition) .section-full-bleed-with-carousel{margin-left:0;margin-right:0;width:100%;max-width:100%;padding-top:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */
}

:where(.page-condition) .override-section-heading-spacing{margin-top:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
:where(.page-condition) .condition-reference-links{display:flex;flex-direction:row;gap:var(--app-default-top-bottom-margin-sm);margin-top:var(--app-default-top-bottom-margin-xl);margin-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */
:where(.page-condition) .condition-reference-links-button{flex:1 1 0;min-width:0;gap:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages */

@media (max-width:700px) {
  :where(.page-condition) .condition-reference-links{flex-direction:column;} /* used: screening-results-pages */
  :where(.page-condition) .condition-reference-links-button{flex:0 0 auto;width:100%;} /* used: screening-results-pages */
}

:where(.page-condition) .override-list-item-spacing{margin-bottom:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages */
:where(.page-condition) .condition-centred-card-carousel{display:flex;gap:var(--app-default-top-bottom-margin-lg);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding-top:var(--card-carousel-pad-top);padding-bottom:var(--card-carousel-pad-bottom);padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);scroll-padding-left:var(--default-left-right-desk-body-padding);scroll-padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */

@media (min-width:1280px) {
  :where(.page-condition) .condition-centred-card-carousel{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));scroll-padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));scroll-padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages */
}

@media (max-width:600px) {
  :where(.page-condition) .condition-centred-card-carousel{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);scroll-padding-left:var(--default-left-right-mob-body-padding);scroll-padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-condition) .carousel{display:flex;gap:var(--app-default-top-bottom-margin-lg);overflow-x:auto;padding:var(--card-carousel-pad-top) 0 var(--card-carousel-pad-bottom);scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;}
:where(.page-condition) .condition-centred-card-carousel::-webkit-scrollbar{display:none;} /* used: screening-results-pages */
:where(.page-condition) .cond-card{border-radius:var(--app-default-radius-lg);padding:var(--app-default-top-bottom-margin-xl);display:flex;flex-direction:column;scroll-snap-align:start;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;position:relative;width:100%;max-width:var(--cond-card-max-width);height:auto;max-height:none;flex:0 0 auto;aspect-ratio:7/10;} /* used: screening-results-pages */
:where(.page-condition) .cond-card-scroll{scrollbar-width:none;-ms-overflow-style:none;} /* used: screening-results-pages */

@media (max-width:900px) {
  :where(.page-condition) .cond-card{max-width:var(--cond-card-max-width-md);aspect-ratio:9/16;} /* used: screening-results-pages */
}

@media (max-width:599px) {
  :where(.page-condition) .cond-card{max-width:var(--cond-card-max-width-mob);aspect-ratio:9/16;} /* used: screening-results-pages */
}

@media (max-width:449px) {
  :where(.page-condition) .cond-card{max-width:var(--cond-card-max-width-xs);aspect-ratio:9/16;} /* used: screening-results-pages */
}

:where(.page-condition) .cond-card::-webkit-scrollbar{display:none;} /* used: screening-results-pages */
:where(.page-condition) .cond-card-scroll::-webkit-scrollbar{display:none;} /* used: screening-results-pages */
:where(.page-condition) .cond-card-title{color:var(--white-text-default);margin-bottom:var(--app-default-top-bottom-margin-xl);line-height:var(--default-line-height-small);flex:0 0 auto;} /* used: screening-results-pages */
:where(.page-condition) .cond-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--gap-xs);} /* used: screening-results-pages */
:where(.page-condition) .override-label-flex{flex:1 1 auto;} /* used: screening-results-pages */
:where(.page-condition) .cond-card.c-red{background:var(--red);--theme:var(--red);} /* used: screening-results-pages */
:where(.page-condition) .below-carousel-box{height:var(--below-carousel-height);background:none;} /* used: screening-results-pages */
:where(.page-condition) .cond-item.lozenge{padding-left:var(--lozenge-padding-x);font-size:var(--body-text-sm);background:var(--card-row-veil);border:none;cursor:default;} /* used: screening-results-pages */
:where(.page-condition) .cond-item.lozenge:hover{background:var(--card-row-veil);} /* used: screening-results-pages */
:where(.page-condition) .condition-carousel-nav-btn{border:var(--stroke-hairline) solid var(--t-nav-control);color:var(--t-nav-control);transition:background var(--transition-base),border-color var(--transition-base),color var(--transition-base);} /* used: screening-results-pages */
:where(.page-condition) .condition-carousel-nav-btn:hover{background:var(--t-nav-control-hover-bg);color:var(--t-nav-control-hover-icon);border-color:var(--t-nav-control-hover-edge);} /* used: screening-results-pages */
:where(.page-condition) .condition-centred-card-carousel-controls{display:flex;flex-direction:row;gap:var(--gap-sm);height:auto;width:auto;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-condition) .condition-centred-card-carousel-controls{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-condition) .carousel-nav{display:flex;align-items:center;justify-content:flex-start;gap:var(--app-default-top-bottom-margin-s);margin-top:0;margin-bottom:var(--app-default-top-bottom-margin-xl);padding-left:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-condition) .carousel-nav{padding-left:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

@media (pointer:coarse) {
  :where(.page-condition) .carousel-nav{display:none;} /* used: screening-results-pages */
}

@media (max-width:600px) {
  :where(.page-condition) .carousel-nav{display:none;} /* used: screening-results-pages */
}

@media (pointer:fine) {
  :where(.page-condition) .carousel-nav{display:flex;} /* used: screening-results-pages */
}

:where(.page-condition) .condition-toggle-icon{font-size:var(--heading-size-md-alt);line-height:var(--default-line-height-single);transition:transform var(--transition-base) ease;display:flex;align-items:center;} /* used: screening-results-pages */
:where(.page-condition) .condition-override-left-right-padding{padding-left:0;padding-right:0;font-size:var(--heading-size-sm);} /* used: screening-results-pages */
:where(.page-condition) .override-references-spacing{margin-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */
:where(.page-condition) .references-item-divider-above{border-top:var(--stroke-thin) solid var(--t-divider);border-bottom:0;} /* used: screening-results-pages */
:where(.page-condition, .page-autism-profile) .references-wrapper{width:100%;max-width:var(--golden-width-large);margin:0 auto;text-align:left;} /* used: screening-results-pages */
:where(.page-condition) .reference-text{font-size:var(--body-text-sm);} /* used: screening-results-pages */
:where(.page-condition) .condition-references-button{background-color:transparent;font-weight:var(--font-weight-semi-bold);padding-top:var(--app-default-top-bottom-margin-sm);padding-bottom:var(--app-default-top-bottom-margin-sm);padding-right:0;padding-left:0;width:100%;text-align:left;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--t-text-strong);transition:background-color var(--transition-base) ease, color var(--transition-base) ease;} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-condition) .cond-item.lozenge{font-size:var(--body-text-xs);} /* used: screening-results-pages */
}

:where(.page-condition) .references-content{text-align:left;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;max-height:0;overflow:hidden;transition:max-height 0.4s ease-out, padding 0.4s ease-out;} /* used: screening-results-pages */
:where(.page-condition) .condition-section-centred-without-carousel{height:auto;width:100%;max-width:var(--max-body-wrapper-width);margin-left:auto;margin-right:auto;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);padding-top:var(--app-default-top-bottom-margin-xxxxl);padding-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-condition) .condition-section-centred-without-carousel{margin-left:0;margin-right:0;width:100%;max-width:100%;padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);padding-top:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */
}

:where(.page-condition) .intro-column-full-measure{flex:0 0 auto;max-width:var(--max-content-width-golden-section-large);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */

@media (max-width:900px) {
  :where(.page-condition) .intro-column-full-measure{padding-right:0;} /* used: screening-results-pages */
}

@media (max-width:600px) {
  :where(.page-condition) .intro-column-full-measure{max-width:none;} /* used: screening-results-pages */
}

:where(.page-health-history, .page-condition, .page-adhd-profile) .wrapper-for-all-sections{height:auto;width:calc(100% - var(--sidebar-width));margin-left:var(--sidebar-width);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (max-width:600px) {
  :where(.page-health-history, .page-condition) .wrapper-for-all-sections{width:100%;margin-left:0;} /* used: screening-results-pages */
}

:where(.page-health-history) .lozenge-wrapper{position:relative;display:block;width:100%;max-width:var(--golden-width-small);} /* used: screening-results-pages */
:where(.page-health-history) .lozenge{width:100%;position:relative;padding-right:3.5rem;padding-left:calc((var(--button-size-xl) - var(--marker-size)) / 2);justify-content:flex-start;text-align:left;height:auto;min-height:var(--button-size-xl);line-height:var(--default-line-height-large);padding-top:0.8rem;padding-bottom:0.8rem;} /* used: screening-results-pages */
:where(.page-health-history) .health-history-delete-list-item-btn{position:absolute;right:calc(1rem - 40px);width:auto;height:auto;border-radius:var(--radius-circle);border:none;display:inline-flex;align-items:center;justify-content:center;padding:.3rem;} /* used: screening-results-pages */
:where(.page-health-history) .lozenge-custom-added:has(.health-history-delete-list-item-btn:hover) .lozenge{border-color:var(--tomato);background:var(--tomato);color:var(--bright-white);} /* used: screening-results-pages */
html:where(.page-health-history), :where(.page-health-history) body{margin:0;padding:0;background:var(--t-canvas);} /* used: screening-results-pages */
:where(.page-health-history) body{min-height:100vh;} /* used: screening-results-pages */
:where(.page-health-history) .health-history-split{display:flex;flex-direction:row;gap:var(--app-default-top-bottom-margin-xl);align-items:stretch;min-height:80vh;padding:var(--app-default-top-bottom-margin-xxxxl) var(--default-left-right-desk-body-padding) 6rem;} /* used: screening-results-pages */
:where(.page-health-history) .health-history-left{flex:0 0 var(--golden-ratio-small-percentage);display:flex;flex-direction:column;justify-content:center;opacity:var(--opacity-hidden);animation:fadeIn 0.6s ease 0.3s both;} /* used: screening-results-pages */
:where(.page-brain-body, .page-health-history, .page-trauma-history) .word{display:inline;} /* used: screening-results-pages */
:where(.page-health-history) .health-history-right{flex:1 1 auto;position:relative;} /* used: screening-results-pages */
:where(.page-health-history) .health-history-explore-btn{display:inline-flex;align-items:center;gap:var(--app-default-top-bottom-margin-xxs);width:fit-content;padding:0 2.8rem;height:var(--button-size-lg);background:var(--orange);border:none;border-radius:var(--radius-pill);color:var(--white-text-default);text-decoration:none;font-size:var(--body-text-sm);font-weight:var(--font-weight-medium);letter-spacing:0.015em;font-family:inherit;cursor:pointer;transition:background var(--transition-base) ease;margin-top:var(--app-default-top-bottom-margin-sm);outline:none;-webkit-appearance:none;appearance:none;} /* used: screening-results-pages */
:where(.page-health-history) .health-history-explore-btn:focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset);}
:where(.page-health-history) .health-history-explore-btn:hover{background:var(--orange-dark);} /* used: screening-results-pages */
:where(.page-health-history) .health-history-explore-btn svg{flex-shrink:0;} /* used: screening-results-pages */
:where(.page-health-history) .health-history-brain-stage{position:relative;width:100%;aspect-ratio:1/1;} /* used: screening-results-pages */
:where(.page-health-history) .health-history-brain-stage svg.canvas{width:100%;height:100%;} /* used: screening-results-pages */
:where(.page-health-history) .carousel:focus{outline:none;}
:where(.page-trauma-history) .trauma-history-explore-btn{display:inline-flex;align-items:center;gap:var(--app-default-top-bottom-margin-xxs);width:fit-content;padding:0 2.8rem;height:var(--button-size-lg);background:var(--orange);border:none;border-radius:var(--radius-pill);color:var(--white-text-default);text-decoration:none;font-size:var(--body-text-sm);font-weight:var(--font-weight-medium);letter-spacing:0.015em;font-family:inherit;cursor:pointer;transition:background var(--transition-base) ease;margin-top:var(--app-default-top-bottom-margin-sm);outline:none;-webkit-appearance:none;appearance:none;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-explore-btn:focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset);}
:where(.page-health-history, .page-trauma-history) .cond-card :focus-visible:where(:not(.uma-input-pointer *)){outline-color:var(--white-text-default);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-explore-btn:hover{background:var(--orange-dark);} /* used: screening-results-pages */

@media (max-width: 600px) {
  :where(.page-condition) .side-bar-placeholder{display:none;} /* used: screening-results-pages */
}

:where(.page-condition) .sticky-cards-container{position:sticky;top:0;z-index:var(--z-sticky-cards);background:var(--t-band);} /* used: screening-results-pages */
:where(.page-condition) .temp-chrome{position:fixed;top:0;left:0;width:100%;height:var(--fixed-header-height);background:var(--t-header-bg);z-index:var(--z-chrome);transition:transform var(--transition-base) ease;border-bottom:var(--stroke-thin) solid var(--t-divider);} /* used: screening-results-pages */
:where(.page-condition) .cond-item.lozenge{border-radius:var(--app-default-radius-lg);} /* used: screening-results-pages */
:where(.page-condition) .side-bar-placeholder{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:var(--navy);z-index:var(--z-side-bar-placeholder);} /* used: screening-results-pages */
:where(.page-condition) .section-nav-bar{position:fixed;top:var(--fixed-header-height);left:0;z-index:var(--z-section-nav);display:flex;align-items:flex-end;width:100%;height:var(--subnav-row-height);background:var(--t-nav-frost);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:var(--stroke-thin) solid var(--t-divider);transition:transform var(--transition-base) ease, top var(--transition-base) ease;overflow:hidden;box-sizing:border-box;} /* used: screening-results-pages, chrome */
:where(.page-condition) .section-nav-bar-chrome-hidden{top:0;} /* used: screening-results-pages, chrome */

@media (min-width:601px) {
  :where(.page-condition) .section-nav-bar{left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));} /* used: screening-results-pages, chrome */
}

:where(.page-condition) .section-nav-row{box-sizing:border-box;width:100%;height:var(--subnav-row-height);display:flex;flex-direction:row;align-items:baseline;padding-left:var(--section-nav-edge-inset);padding-right:0;} /* used: screening-results-pages, chrome */
:where(.page-condition) .section-nav-title-wrapper{flex:0 0 auto;} /* used: screening-results-pages, chrome */
:where(.page-condition) .section-nav-title{font-weight:var(--font-weight-medium);text-wrap:pretty;margin:0;padding:0;line-height:var(--default-line-height-single);font-size:var(--heading-size-sm);} /* used: screening-results-pages, chrome */
:where(.page-condition) .section-nav-scroller{flex:1 1 auto;min-width:0;display:flex;flex-direction:row;align-items:baseline;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--section-nav-edge-inset);scroll-padding-right:var(--section-nav-edge-inset);} /* used: screening-results-pages, chrome */
:where(.page-condition) .section-nav-scroller::-webkit-scrollbar{display:none;} /* used: screening-results-pages, chrome */
:where(.page-condition) .section-nav-list{list-style:none;padding:0;margin:0 0 0 auto;height:max-content;display:flex;flex-direction:row;align-items:baseline;justify-content:flex-start;white-space:nowrap;width:auto;text-align:center;font-size:var(--body-text-sm);} /* used: screening-results-pages, chrome */
:where(.page-condition) .section-nav-item{font-size:var(--body-text-xs);} /* used: screening-results-pages, chrome */
:where(.page-condition) .section-nav-link{display:block;position:relative;cursor:pointer;text-decoration:none;color:var(--t-page-text);line-height:var(--default-line-height-single);padding-top:calc((var(--subnav-row-height) - 1em) / 2 + var(--link-line-height));padding-bottom:calc((var(--subnav-row-height) - 1em) / 2 - var(--link-line-height));padding-left:var(--gap-xl);padding-right:var(--gap-xl);transition:color var(--transition-base) ease;} /* used: screening-results-pages, chrome */
:where(.page-condition) .section-nav-link::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:var(--link-line-height);background-color:transparent;transition:background-color var(--transition-base) ease;display:block;} /* used: screening-results-pages, chrome */
:where(.page-condition) .section-nav-link-active::after{background-color:var(--t-emphasis);} /* used: screening-results-pages, chrome */
:where(.page-condition) .section-nav-link:hover{color:var(--orange);text-decoration:none;} /* used: screening-results-pages, chrome */
:where(.page-condition) .section-nav-link:hover::after{background-color:transparent;} /* used: screening-results-pages, chrome */
:where(.page-condition) .section-nav-link-active:hover{color:var(--t-page-text);} /* used: screening-results-pages, chrome */
:where(.page-condition) .section-nav-link-active:hover::after{background-color:var(--t-emphasis);} /* used: screening-results-pages, chrome */
:where(.page-condition) .section-nav-link:active{color:var(--t-emphasis);} /* used: screening-results-pages, chrome */
:where(.page-condition) .section-nav-action{position:relative;flex:0 0 auto;height:var(--button-size-xs);font-weight:var(--font-weight-normal);font-size:var(--body-text-sm);margin-left:var(--gap-xl);padding-left:var(--app-default-top-bottom-margin-sm);padding-right:var(--app-default-top-bottom-margin-sm);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-xxs);} /* used: screening-results-pages */

@media (max-width:900px) {
  :where(.page-condition) .section-nav-title-wrapper{display:none;} /* used: screening-results-pages, chrome */
  :where(.page-condition) .section-nav-row{padding-left:0;} /* used: screening-results-pages, chrome */
  :where(.page-condition) .section-nav-scroller{padding-left:var(--section-nav-edge-inset);} /* used: screening-results-pages, chrome */
  :where(.page-condition) .section-nav-list{min-width:max-content;margin-left:0;} /* used: screening-results-pages, chrome */
}

@media (max-width:600px) {
  :where(.page-condition) .section-nav-item{font-size:var(--body-text-sm);} /* used: screening-results-pages, chrome */
}

:where(.page-condition) .hero-title{font-size:var(--heading-size-xl);font-weight:var(--font-weight-light);line-height:var(--default-line-height-small);letter-spacing:var(--heading-letter-spacing-tight);color:var(--t-heading);margin-bottom:var(--app-default-top-bottom-margin-xs);} /* used: screening-results-pages */
:where(.page-condition) .scroll-stop-section{min-height:200vh;background:var(--t-band);} /* used: screening-results-pages */
:where(.page-condition) h2.cards-band-title{margin:0;padding-top:var(--app-default-top-bottom-margin-sm);padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);font-size:var(--heading-size-lg);font-weight:var(--font-weight-light);line-height:var(--default-line-height-x-small);color:var(--t-page-text);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-condition) h2.cards-band-title{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

@media (min-width:1280px) {
  :where(.page-condition) h2.cards-band-title{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages */
  :where(.page-condition) .carousel-nav{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages */
}

:where(.page-condition) .page-intro-text{font-size:var(--body-text-sm);font-weight:var(--font-weight-normal);line-height:var(--default-line-height-large);color:var(--t-page-text);max-width:var(--golden-width-small);margin-top:0;margin-bottom:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
:where(.page-condition) body{background-color:var(--t-page-bg);color:var(--t-page-text);} /* used: screening-results-pages */
:where(.page-condition, .page-adhd-profile) .wrapper-below-fixed-bars{margin-top:calc(var(--fixed-header-height) + var(--subnav-row-height));} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-condition) h1{font-size:var(--heading-size-xl);color:var(--navy);letter-spacing:var(--heading-letter-spacing-tight);} /* used: screening-results-pages */
:where(.page-condition) .condition-btn-secondary-navy-on-white{color:var(--t-emphasis);border-color:var(--t-emphasis);} /* used: screening-results-pages */
:where(.page-condition) .condition-btn-secondary-navy-on-white:hover{color:var(--t-emphasis-hover);border-color:var(--t-emphasis-hover);} /* used: screening-results-pages */
:where(.page-condition) .scroll-stop-section{padding-top:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */
:where(.page-condition) .condition-section-centred-without-carousel{padding-top:var(--app-default-top-bottom-margin-xxxxl);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-condition) .scroll-stop-section{padding-top:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
  :where(.page-condition) .condition-section-centred-without-carousel{padding-top:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
}

@media (min-width: 601px) {
  :where(.page-condition) .scroll-stop-section{padding-top:0;} /* used: screening-results-pages */
  :where(.page-condition) h2.cards-band-title{padding-top:calc(var(--app-default-top-bottom-margin-xxxl) + var(--app-default-top-bottom-margin-sm));} /* used: screening-results-pages */
}

:where(.page-masking-profile, .page-rsd-profile) .profile-hero-title{font-size:var(--hero-title-size);font-weight:var(--font-weight-extra-light);line-height:var(--default-line-height-x-small);letter-spacing:var(--heading-letter-spacing-tight);color:var(--t-page-text);margin:0;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .hero-text-mobile{display:none;text-align:left;margin-bottom:var(--app-default-top-bottom-margin-lg);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .hero-title-mobile{font-size:var(--hero-title-size);font-weight:var(--font-weight-extra-light);line-height:var(--default-line-height-x-small);color:var(--t-page-text);margin:0;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .masking-rsd-profile-explore-btn{display:inline-flex;align-items:center;gap:var(--gap-xs);width:fit-content;padding:0 var(--button-padding-horizontal-xl);height:var(--button-size-lg);background:var(--orange);border:none;border-radius:var(--radius-pill-explore);color:var(--pure-white);text-decoration:none;font-size:var(--body-text-sm);font-weight:var(--font-weight-normal);letter-spacing:var(--button-letter-spacing);font-family:inherit;cursor:pointer;transition:background var(--transition-base) ease;margin-top:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .masking-rsd-profile-explore-btn:hover{background:var(--orange-dark);} /* used: screening-results-pages */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-panel-bright-white{background:var(--t-band);} /* used: screening-results-pages */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-panel-new-white{background:var(--t-band-alt);} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-explore-btn{display:inline-flex;align-items:center;gap:0.5rem;width:fit-content;padding:0 2.8rem;height:50px;background:var(--orange);border:none;border-radius:100px;color:#fff;text-decoration:none;font-size:1rem;font-weight:500;letter-spacing:0.015em;font-family:inherit;cursor:pointer;transition:background 0.3s ease;margin-top:1rem;}
:where(.page-brain-body, .page-health-history, .page-trauma-history) .mobile-only{display:none;} /* used: screening-results-pages */
:where(.page-brain-body, .page-health-history, .page-trauma-history) .desktop-only{display:inline-flex;} /* used: screening-results-pages */
:where(.page-brain-body, .page-health-history) .brain-bubbles > g{cursor:pointer;} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-explore-btn:hover{background:var(--orange-dark);}
:where(.page-brain-body) .controls{display:flex;flex-direction:column;gap:1.25rem;border-top:1px solid var(--mid-white);padding-top:1.5rem;max-width:34ch;}
:where(.page-brain-body) input[type=range]{width:100%;}
:where(.page-brain-body, .page-trauma-history) .brain-stage svg.canvas{position:absolute;inset:0;width:100%;height:100%;} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .svg-probe{position:absolute;width:1px;height:1px;opacity:var(--opacity-hidden);pointer-events:none;left:-9999px;} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-svg-probe{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:-9999px;} /* used: screening-results-pages */
:where(.page-brain-body, .page-health-history, .page-trauma-history) .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .stack{padding-top:0;min-width:0;--accent:var(--t-line-muted);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .stack h3{font-size:var(--body-text-sm);font-weight:var(--font-weight-semi-bold);color:var(--accent);margin:0 0 var(--app-default-top-bottom-margin-xs);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .stack.is-neutral h3{color:var(--t-page-text);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .stack .rule{height:3px;width:100%;background:var(--accent);margin-bottom:var(--app-default-top-bottom-margin-xs);border-radius:2px;} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .stack ul{list-style:none;padding:0;margin:0;} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .stack li{font-size:var(--body-text-xs);line-height:var(--default-line-height-small);color:var(--t-page-text);margin-bottom:var(--app-default-top-bottom-margin-xxs);display:flex;align-items:baseline;justify-content:space-between;gap:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .stack li .text{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .stack li .pc{flex:0 0 auto;color:var(--t-text-secondary);font-variant-numeric:tabular-nums;} /* used: screening-results-pages */
:where(.page-brain-body) .breakdown{margin-top:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2.5rem 2rem;padding-right:4rem;} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-stack{padding-top:0;min-width:0;--accent:var(--t-line-muted);} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-stack h2{font-size:.95rem;font-weight:600;color:var(--t-group-heading, var(--accent));margin:0 0 .75rem;} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-stack.is-neutral h2{color:var(--t-page-text);} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-stack .rule{height:3px;width:100%;background:var(--accent);margin-bottom:.85rem;border-radius:2px;} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-stack ul{list-style:none;padding:0;margin:0;} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-stack li{font-size:.9rem;line-height:1.4;color:var(--t-page-text);margin-bottom:.5rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-stack li .text{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* used: screening-results-pages */
:where(.page-brain-body) .brain-body-stack li .pc{flex:0 0 auto;color:var(--t-text-secondary);font-variant-numeric:tabular-nums;} /* used: screening-results-pages */

@media (max-width:760px) {
  :where(.page-brain-body) .split{flex-direction:column;min-height:0;gap:1rem;} /* used: screening-results-pages */
  :where(.page-brain-body) .left, :where(.page-brain-body) .right{flex:initial;width:100%;} /* used: screening-results-pages */
  :where(.page-brain-body) .left{align-items:center;text-align:center;} /* used: screening-results-pages */
  :where(.page-brain-body) .brain-body-hero-title{display:none;} /* used: screening-results-pages */
  :where(.page-brain-body) .brain-body-hero-text-mobile{display:block;} /* used: screening-results-pages */
  :where(.page-brain-body, .page-health-history, .page-trauma-history) .desktop-only{display:none;} /* used: screening-results-pages */
  :where(.page-brain-body) .right{aspect-ratio:1/1;width:min(calc(100% - 4rem), 60dvh);max-width:none;margin:0 auto;} /* used: screening-results-pages */
}

:where(.page-brain-body) .brain-body-temp-chrome{position:fixed;top:0;left:0;width:100%;height:var(--fixed-header-height);background:var(--t-header-bg);z-index:1001;transition:transform 0.3s ease;border-bottom:1px solid var(--t-divider);} /* used: screening-results-pages */

@media (max-width:760px) {
  :where(.page-health-history) .health-history-left, :where(.page-health-history) .health-history-right{flex:initial;width:100%;} /* used: screening-results-pages */
}

@media (max-width:600px) {
  :where(.page-health-history) .health-history-right{max-height:60dvh;max-width:calc(100% - 4rem);margin:0 auto;} /* used: screening-results-pages */
  :where(.page-health-history) .health-history-right .health-history-brain-stage, :where(.page-health-history) .health-history-right .health-history-brain-stage svg{max-height:inherit;} /* used: screening-results-pages */
  :where(.page-health-history) .mobile-only{margin-top:0.5rem;margin-bottom:1.5rem;} /* used: screening-results-pages */
}

@media (max-width:1024px) {
  :where(.page-health-history) .health-history-split{min-height:auto;} /* used: screening-results-pages */
}

:where(.page-health-history) body{background:var(--t-band-alt);} /* used: screening-results-pages */
:where(.page-health-history) .override-add-prompt-spacing{margin-top:var(--app-default-top-bottom-margin-xs);} /* used: screening-results-pages */

@media (max-width:760px) {
  :where(.page-trauma-history) .trauma-history-wrapper-for-all-sections{margin-top:2rem;} /* used: screening-results-pages */
  :where(.page-trauma-history) .trauma-history-section-centred-without-carousel{padding-top:1rem;padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
  :where(.page-trauma-history) .trauma-history-split{flex-direction:column;min-height:0;gap:1rem;} /* used: screening-results-pages */
  :where(.page-brain-body, .page-health-history, .page-trauma-history) .breakdown{grid-template-columns:1fr;gap:2rem;padding-right:0;} /* used: screening-results-pages */
}

:where(.page-brain-body) .skip-link{position:absolute;top:-2.5rem;left:0;background:#000;color:#fff;padding:.5rem;z-index:9999;text-decoration:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body) .skip-link:focus{top:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (max-width:760px) {
  :where(.page-trauma-history) .trauma-history-left, :where(.page-trauma-history) .trauma-history-right{flex:initial;width:100%;} /* used: screening-results-pages */
  :where(.page-trauma-history) .trauma-history-left{align-items:center;text-align:center;} /* used: screening-results-pages */
  :where(.page-brain-body, .page-health-history, .page-trauma-history) .mobile-only{display:inline-flex;align-self:center;} /* used: screening-results-pages */
}

:where(.page-health-history) .health-history-page{display:flex;flex-direction:column;min-height:100%;background:var(--t-band-alt);}

@media (max-width:760px) {
  :where(.page-trauma-history) .trauma-history-right{aspect-ratio:1/1;width:auto;max-width:none;margin:0 calc(-1 * var(--default-left-right-mob-body-padding));} /* used: screening-results-pages */
}

:where(.page-trauma-history) .trauma-history-wrapper-for-all-sections{width:calc(100% - var(--sidebar-width));} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-trauma-history) .trauma-history-wrapper-for-all-sections{width:100%;} /* used: screening-results-pages */
}

:where(.page-trauma-history) .trauma-history-left{justify-content:center;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .explore-btn-icon{flex-shrink:0;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .polar-split{display:flex;flex-direction:row;gap:0;align-items:flex-start;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .polar-text{flex:0 0 var(--golden-ratio-large-percentage);max-width:var(--max-content-width-golden-section-large);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .polar-title{font-size:var(--heading-size-md);font-weight:var(--font-weight-light);line-height:var(--default-line-height-x-small);color:var(--t-page-text);margin:0 0 var(--app-default-top-bottom-margin-sm);text-wrap:pretty;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .polar-chart-wrap{flex:0 0 var(--golden-ratio-small-percentage);max-width:var(--polar-chart-max-width-desk);width:auto;height:auto;padding:0;padding-top:var(--polar-chart-top-offset);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .polar-chart-box{position:relative;width:100%;aspect-ratio:1 / 1;padding:0;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .polar-chart{position:absolute;inset:0;width:100%;height:100%;display:block;padding:0;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .polar-key{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;row-gap:var(--key-row-gap);width:100%;margin:var(--app-default-top-bottom-margin-sm) 0 0;padding:0;list-style:none;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .polar-key-item{display:flex;align-items:flex-start;gap:var(--gap-xxs);font-size:var(--body-text-sm);line-height:var(--default-line-height-small);color:var(--t-text-secondary);background:transparent;border:none;padding:0;margin:0;font-family:inherit;text-align:left;cursor:pointer;transition:opacity var(--transition-base) ease;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .polar-key-item:hover{color:var(--orange);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .polar-key-item-off .polar-key-label{text-decoration:line-through;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .polar-key-swatch{flex:0 0 auto;width:var(--severity-dot-size);height:var(--severity-dot-size);border-radius:var(--radius-circle);margin-top:var(--polar-key-swatch-offset);} /* used: screening-results-pages */

@media (max-width:900px) {
  :where(.page-masking-profile, .page-rsd-profile) .polar-split{flex-direction:column;gap:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .polar-text{order:2;flex:0 0 auto;max-width:none;padding-right:0;padding-top:var(--polar-text-stack-padding-top);} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .polar-chart-wrap{order:1;flex:0 0 auto;max-width:var(--polar-stack-column-max-width);min-height:auto;width:100%;height:auto;padding-top:0;margin-left:0;margin-right:0;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .polar-chart-box{width:100%;max-width:var(--polar-chart-max-width-stacked);margin-left:0;margin-right:auto;aspect-ratio:1 / 1;} /* used: screening-results-pages */
}

@media (max-width:700px) {
  :where(.page-masking-profile, .page-rsd-profile) .polar-chart-wrap{max-width:none;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .polar-chart-box{margin-left:auto;margin-right:auto;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .hero-text-mobile{text-align:center;} /* used: screening-results-pages */
}

:where(.page-masking-profile, .page-rsd-profile) .section-headline{font-size:var(--section-headline-size);font-weight:var(--font-weight-extra-light);line-height:var(--default-line-height-x-small);color:var(--t-page-text);margin:0 0 var(--app-default-top-bottom-margin-xxs);text-align:center;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .section-full-bleed-with-carousel{height:auto;width:100%;padding-top:var(--app-default-top-bottom-margin-xxxxl);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .results-view-heading, :where(.page-masking-profile, .page-rsd-profile) .section-subheading-text{padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */

@media (min-width:1280px) {
  :where(.page-masking-profile, .page-rsd-profile) .results-view-heading, :where(.page-masking-profile, .page-rsd-profile) .section-subheading-text{margin-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));padding-left:0;padding-right:0;} /* used: screening-results-pages */
}

@media (max-width:600px) {
  :where(.page-masking-profile, .page-rsd-profile) .results-view-heading, :where(.page-masking-profile, .page-rsd-profile) .section-subheading-text{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-masking-profile, .page-rsd-profile) .results-view-intro{padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */

@media (min-width:1280px) {
  :where(.page-masking-profile, .page-rsd-profile) .results-view-intro{margin-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));margin-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));padding-left:0;padding-right:0;} /* used: screening-results-pages */
}

@media (max-width:600px) {
  :where(.page-masking-profile, .page-rsd-profile) .results-view-intro{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-masking-profile, .page-rsd-profile) .results-view-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap-xxl);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .results-view-heading{text-align:left;margin-left:0;margin-right:0;padding-left:0;padding-right:0;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .results-view-tab-toggle{display:flex;flex-shrink:0;position:relative;top:calc(var(--button-size-md) / -2);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .results-view-tab{background-color:var(--t-switch-bg);border:none;border-radius:0;cursor:pointer;font-family:inherit;font-size:var(--body-text-sm);font-weight:var(--font-weight-medium);padding:0 var(--app-default-top-bottom-margin-md);height:var(--button-size-md);min-height:0;color:var(--t-emphasis);display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--transition-fast) ease, color var(--transition-fast) ease;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .results-view-tab-donut{border-top-left-radius:var(--app-default-radius-sm);border-bottom-left-radius:var(--app-default-radius-sm);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .results-view-tab-bar{border-top-right-radius:var(--app-default-radius-sm);border-bottom-right-radius:var(--app-default-radius-sm);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .results-view-tab i{font-size:var(--button-icon-lg);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .results-view-tab.is-active{background-color:var(--t-selected-bg);color:var(--t-selected-text);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-masking-profile, .page-rsd-profile) .results-view.is-hidden{display:none;} /* used: screening-results-pages, chrome, screenings-home */
:where(.page-masking-profile, .page-rsd-profile) .results-view-bar-inner{width:100%;max-width:var(--max-body-wrapper-width);margin-left:auto;margin-right:auto;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-masking-profile, .page-rsd-profile) .results-view-bar-inner{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-masking-profile, .page-rsd-profile) .centred-card-carousel{-ms-overflow-style:none;scrollbar-width:none;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);scroll-padding-left:var(--default-left-right-desk-body-padding);scroll-padding-right:var(--default-left-right-desk-body-padding);width:100%;max-width:100%;display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:var(--default-row-gap);scroll-behavior:smooth;padding-top:var(--app-default-top-bottom-margin-sm);padding-bottom:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .centred-card-carousel::-webkit-scrollbar{display:none;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .donut-grid:focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset);border-radius:var(--default-radius);} /* used: screening-results-pages */

@media (min-width:1280px) {
  :where(.page-masking-profile, .page-rsd-profile) .centred-card-carousel{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));scroll-padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));scroll-padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages */
}

@media (max-width:600px) {
  :where(.page-masking-profile, .page-rsd-profile) .centred-card-carousel{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);scroll-padding-left:var(--default-left-right-mob-body-padding);scroll-padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-masking-profile, .page-rsd-profile) .centred-card-carousel-controls{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:var(--gap-sm);height:auto;width:auto;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);padding-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-masking-profile, .page-rsd-profile) .centred-card-carousel-controls{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

@media (min-width:1280px) {
  :where(.page-masking-profile, .page-rsd-profile) .centred-card-carousel-controls{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages */
}

@media (pointer:coarse) {
  :where(.page-masking-profile, .page-rsd-profile) .centred-card-carousel-controls{display:none;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .centred-card-carousel{padding-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */
}

:where(.page-masking-profile, .page-rsd-profile) .carousel-nav-btn{display:inline-flex;align-items:center;justify-content:center;border:var(--stroke-hairline) solid var(--t-nav-control);background:transparent;cursor:pointer;flex-shrink:0;border-radius:var(--radius-pill);aspect-ratio:1 / 1;padding:0;height:var(--button-size-md);color:var(--t-nav-control);transition:background var(--button-transition-duration) var(--button-transition-ease), border-color var(--button-transition-duration) var(--button-transition-ease), color var(--button-transition-duration) var(--button-transition-ease), opacity var(--button-transition-duration) var(--button-transition-ease);} /* used: screening-results-pages, chrome */
:where(.page-masking-profile, .page-rsd-profile) .carousel-nav-btn:hover{background:var(--t-nav-control-hover-bg);color:var(--t-nav-control-hover-icon);border-color:var(--t-nav-control-hover-edge);} /* used: screening-results-pages, chrome */
:where(.page-masking-profile, .page-rsd-profile) .carousel-nav-btn:focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset);} /* used: screening-results-pages, chrome */
:where(.page-masking-profile, .page-rsd-profile) .carousel-nav-btn i{font-size:var(--button-icon-md);} /* used: screening-results-pages, chrome */
:where(.page-masking-profile, .page-rsd-profile) .carousel-nav-btn-disabled{opacity:var(--opacity-dimmed);pointer-events:none;cursor:default;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .donut-card{position:relative;flex:0 0 var(--carouselle-card-width-mobile);width:var(--carouselle-card-width-mobile);min-width:var(--carouselle-card-width-mobile);max-width:var(--carouselle-card-width-mobile);scroll-snap-align:center;background:var(--t-card);border-radius:var(--default-radius);overflow:hidden;display:flex;flex-direction:column;aspect-ratio:9 / 16;opacity:var(--opacity-visible);transition:transform var(--transition-card) var(--ease-card);transform-origin:center center;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .donut-wrap, :where(.page-masking-profile, .page-rsd-profile) .donut-pct, :where(.page-masking-profile, .page-rsd-profile) .donut-sev{opacity:var(--opacity-hidden);transition:opacity var(--transition-fade) ease;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .donut-card.is-visible .donut-wrap, :where(.page-masking-profile, .page-rsd-profile) .donut-card.is-visible .donut-pct, :where(.page-masking-profile, .page-rsd-profile) .donut-card.is-visible .donut-sev{opacity:var(--opacity-visible);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-masking-profile, .page-rsd-profile) .donut-card:has(.flippable-9-16-card-info-btn:hover){transform:scale(1.015);} /* used: screening-results-pages */

@media (min-width:450px) {
  :where(.page-masking-profile, .page-rsd-profile) .donut-card{flex:0 0 var(--carouselle-card-lg);width:var(--carouselle-card-lg);min-width:var(--carouselle-card-lg);max-width:var(--carouselle-card-lg);} /* used: screening-results-pages */
}

@media (min-width:600px) {
  :where(.page-masking-profile, .page-rsd-profile) .donut-card{flex:0 0 var(--carouselle-card-xl);width:var(--carouselle-card-xl);min-width:var(--carouselle-card-xl);max-width:var(--carouselle-card-xl);} /* used: screening-results-pages */
}

@media (min-width:900px) {
  :where(.page-masking-profile, .page-rsd-profile) .donut-card{flex:0 0 var(--carouselle-card-xxl);width:var(--carouselle-card-xxl);min-width:var(--carouselle-card-xxl);max-width:var(--carouselle-card-xxl);} /* used: screening-results-pages */
}

:where(.page-masking-profile, .page-rsd-profile) .flippable-9-16-card-back{position:absolute;top:0;left:0;right:0;bottom:0;z-index:var(--z-card-back);background:var(--t-card);border-radius:0;padding:var(--default-card-left-right-padding);padding-top:var(--app-default-top-bottom-margin-xl);display:none;flex-direction:column;overflow-y:auto;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .flippable-9-16-card-back.is-open{display:flex;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-masking-profile, .page-rsd-profile) .donut-card:has(.flippable-9-16-card-back.is-open){background-color:var(--t-card);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-masking-profile, .page-rsd-profile) .flippable-9-16-card-back > *{margin-top:0;margin-bottom:0;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .flippable-9-16-card-close{position:absolute;top:var(--app-default-top-bottom-margin-lg);right:var(--app-default-top-bottom-margin-lg);width:var(--button-size-md);height:var(--button-size-md);opacity:var(--opacity-visible);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .flippable-9-16-card-info-btn{position:absolute;bottom:var(--app-default-top-bottom-margin-lg);right:var(--app-default-top-bottom-margin-lg);z-index:var(--z-card-mask);opacity:var(--opacity-visible);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .donut-card-well{flex:0 0 auto;aspect-ratio:1 / 1;background:var(--t-surface);display:flex;align-items:center;justify-content:center;padding:0;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .donut-card-panel{flex:1 1 auto;min-height:0;background:var(--t-card-panel);color:var(--t-page-text);padding:var(--default-card-left-right-padding);display:flex;flex-direction:column;gap:var(--app-default-top-bottom-margin-xxs);justify-content:flex-start;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .donut-card-heading{display:flex;justify-content:space-between;align-items:baseline;gap:var(--gap-regular);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .donut-wrap{position:relative;width:var(--donut-diameter-ratio);height:auto;aspect-ratio:1 / 1;flex-shrink:0;display:flex;align-items:center;justify-content:center;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .donut-chart{cursor:pointer;z-index:var(--z-card-mask);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .donut-centre{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--donut-centre-gap);text-align:center;pointer-events:none;z-index:var(--z-card-face);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .donut-pct{font-size:var(--heading-size-lg);font-weight:var(--font-weight-normal);line-height:var(--default-line-height-single);color:var(--t-page-text);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .donut-sev{font-size:var(--caption-text-sm);font-weight:var(--font-weight-normal);color:var(--t-text-secondary);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .severity-key-list{list-style:none;padding:0;margin:var(--app-default-top-bottom-margin-lg) 0 0;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .severity-key-item{font-size:var(--body-text-sm);line-height:var(--default-line-height-small);color:var(--t-page-text);margin-bottom:var(--key-row-gap);display:flex;align-items:center;justify-content:space-between;gap:var(--gap-md);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .severity-key-percent{color:var(--t-text-secondary);font-variant-numeric:tabular-nums;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .severity-key-dot{flex:0 0 var(--severity-dot-size);width:var(--severity-dot-size);height:var(--severity-dot-size);border-radius:var(--radius-circle);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .severity-key-dot-low{background:var(--yellow);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .severity-key-dot-moderate{background:var(--mustard);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .severity-key-dot-high{background:var(--orange);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .severity-key-dot-very-high{background:var(--tomato);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .severity-key-dot-super-high{background:var(--red);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .severity-key-label{flex:1 1 auto;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .donut-card-key{background:var(--t-surface);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .donut-card-panel-full{flex:1 1 auto;justify-content:flex-start;background:var(--t-surface);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .score-breakdown{margin-top:var(--app-default-top-bottom-margin-xxxl);display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--score-group-min-width),1fr));gap:var(--app-default-top-bottom-margin-xxl) var(--app-default-top-bottom-margin-xl);padding-bottom:var(--app-default-top-bottom-margin-xxxxl);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .score-group{min-width:0;--score-group-accent:var(--t-line-muted);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .score-group-heading{display:flex;justify-content:space-between;align-items:baseline;gap:var(--app-default-top-bottom-margin-sm);margin:0 0 var(--app-default-top-bottom-margin-s);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .score-group-title{font-size:var(--body-text-md);font-weight:var(--font-weight-normal);color:var(--t-page-text);margin:0;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .score-group-title-key{margin-bottom:var(--app-default-top-bottom-margin-lg);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .score-group-list{list-style:none;padding:0;margin:0;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .score-group-item{font-size:var(--body-text-xs);line-height:var(--default-line-height-compact);color:var(--t-page-text);margin-bottom:var(--app-default-top-bottom-margin-xxs);display:flex;gap:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .score-item-label{flex:1 1 auto;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .score-item-percent{flex:0 0 auto;font-size:var(--body-text-md);color:var(--t-page-text);font-variant-numeric:tabular-nums;text-align:right;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .key-dot{flex:0 0 var(--severity-dot-size);width:var(--severity-dot-size);height:var(--severity-dot-size);border-radius:var(--radius-circle);align-self:center;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .key-dot-low{background:var(--yellow);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .key-dot-moderate{background:var(--mustard);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .key-dot-high{background:var(--orange);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .key-dot-very-high{background:var(--tomato);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .key-dot-super-high{background:var(--red);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .score-bar-track{flex:1 1 auto;height:var(--severity-bar-height);background:var(--t-chart-track);border-radius:var(--radius-sm);align-self:center;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .score-bar-fill{width:0;height:100%;border-radius:var(--radius-sm);background:var(--score-group-accent);transition:width var(--transition-bar-fill) ease-out;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .score-group-desc{font-size:var(--caption-text-sm);line-height:var(--default-line-height-medium);color:var(--t-text-secondary);margin-top:var(--app-default-top-bottom-margin-xxs);} /* used: screening-results-pages */

@media (max-width:900px) {
  :where(.page-masking-profile, .page-rsd-profile) .hero{flex-direction:column;padding:var(--default-left-right-mob-body-padding);min-height:var(--hero-min-height);gap:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .eyebrow, :where(.page-masking-profile, .page-rsd-profile) .profile-hero-title{display:none;} /* used: screening-results-pages, chrome */
  :where(.page-masking-profile, .page-rsd-profile) .hero-left{align-items:center;text-align:center;order:2;margin-top:calc(-1 * var(--default-left-right-desk-body-padding));position:relative;z-index:var(--z-card-mask);} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .hero-right{width:100%;max-width:none;order:1;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .desktop-explore{display:none;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .masking-rsd-profile-mobile-explore{display:inline-flex;align-self:center;order:3;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .hero-text-mobile{display:block;} /* used: screening-results-pages */
}

@media (max-width:760px) {
  :where(.page-masking-profile, .page-rsd-profile) .score-breakdown{grid-template-columns:1fr;padding-right:0;} /* used: screening-results-pages */
}

@media (max-width:700px) {
  :where(.page-masking-profile, .page-rsd-profile) .hero{aspect-ratio:1 / 1;min-height:0;padding:var(--default-left-right-mob-body-padding);padding-bottom:calc(var(--default-left-right-mob-body-padding) + var(--button-size-md) + var(--gap-xxl));position:relative;align-items:center;justify-content:center;gap:0;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .hero-left{display:none;} /* used: screening-results-pages */
}

@media (min-width:901px) {
  :where(.page-masking-profile, .page-rsd-profile) .masking-rsd-profile-mobile-explore{display:none;} /* used: screening-results-pages */
}

@media (max-width:700px) {
  :where(.page-masking-profile, .page-rsd-profile) .hero-right{flex:0 1 auto;height:100%;width:auto;max-width:100%;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .masking-rsd-profile-mobile-explore{position:absolute;bottom:var(--default-left-right-mob-body-padding);left:50%;transform:translateX(-50%);margin-top:0;width:max-content;max-width:calc(100% - (2 * var(--default-left-right-mob-body-padding)));} /* used: screening-results-pages */
}

@media (max-width:600px) {
  :where(.page-masking-profile, .page-rsd-profile) .polar-chart-box{max-width:var(--polar-chart-max-width-mob);} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .polar-text{padding-top:var(--polar-text-stack-padding-top-mob);} /* used: screening-results-pages */
}

:where(.page-masking-profile, .page-rsd-profile) .section-centred-without-carousel{height:auto;width:100%;max-width:var(--max-body-wrapper-width);margin-left:auto;margin-right:auto;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);padding-top:var(--app-default-top-bottom-margin-xxxxl);padding-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-masking-profile, .page-rsd-profile) .section-centred-without-carousel{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);padding-top:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */
}

:where(.page-masking-profile, .page-rsd-profile) .temp-chrome{position:fixed;top:0;left:0;width:100%;height:var(--fixed-header-height);background:var(--t-header-bg);z-index:var(--z-chrome);transition:transform var(--transition-base) ease;border-bottom:var(--stroke-thin) solid var(--t-divider);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .temp-chrome-hidden{transform:translateY(-100%);} /* used: screening-results-pages */
[data-motion="still"]:where(.page-masking-profile, .page-rsd-profile) .hero-chart, :where(.page-masking-profile, .page-rsd-profile) [data-motion="still"] .hero-chart{opacity:0;} /* used: screening-results-pages */
[data-motion="still"]:where(.page-masking-profile, .page-rsd-profile) .hero-chart.is-settled, :where(.page-masking-profile, .page-rsd-profile) [data-motion="still"] .hero-chart.is-settled{opacity:1;} /* used: screening-results-pages */
[data-motion="still"]:where(.page-masking-profile, .page-rsd-profile) .donut-wrap, :where(.page-masking-profile, .page-rsd-profile) [data-motion="still"] .donut-wrap, [data-motion="still"]:where(.page-masking-profile, .page-rsd-profile) .donut-pct, :where(.page-masking-profile, .page-rsd-profile) [data-motion="still"] .donut-pct, [data-motion="still"]:where(.page-masking-profile, .page-rsd-profile) .donut-sev, :where(.page-masking-profile, .page-rsd-profile) [data-motion="still"] .donut-sev{opacity:var(--opacity-visible);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .section-nav-bar-cards-active{transform:translateY(-100%);} /* used: screening-results-pages, chrome */
:where(.page-masking-profile, .page-rsd-profile) a{color:var(--orange);text-decoration:none;transition:text-decoration-color 0.4s ease,color 0.4s ease;} /* used: screening-results-pages */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-bar{position:fixed;top:var(--fixed-header-height);left:0;z-index:var(--z-section-nav);display:flex;align-items:flex-end;width:100%;height:var(--subnav-row-height);background:var(--t-nav-frost);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:var(--stroke-thin) solid var(--t-divider);transition:transform var(--transition-base) ease, top var(--transition-base) ease;overflow:hidden;box-sizing:border-box;} /* used: screening-results-pages, chrome */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-bar-chrome-hidden{top:0;} /* used: screening-results-pages, chrome */

@media (min-width:601px) {
  :where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-bar{left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));} /* used: screening-results-pages, chrome */
}

:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-row{box-sizing:border-box;width:100%;height:var(--subnav-row-height);display:flex;flex-direction:row;align-items:baseline;padding-left:var(--section-nav-edge-inset);padding-right:0;} /* used: screening-results-pages, chrome */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-title-wrapper{flex:0 0 auto;} /* used: screening-results-pages, chrome */
:where(.page-masking-profile, .page-rsd-profile) a:hover{text-decoration:underline;text-underline-offset:7px;color:var(--orange);} /* used: screening-results-pages */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-title{font-weight:var(--font-weight-medium);text-wrap:pretty;margin:0;padding:0;line-height:var(--default-line-height-single);font-size:var(--heading-size-sm);} /* used: screening-results-pages, chrome */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-scroller{flex:1 1 auto;min-width:0;display:flex;flex-direction:row;align-items:baseline;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--section-nav-edge-inset);scroll-padding-right:var(--section-nav-edge-inset);} /* used: screening-results-pages, chrome */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-scroller::-webkit-scrollbar{display:none;} /* used: screening-results-pages, chrome */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-list{list-style:none;padding:0;margin:0 0 0 auto;height:max-content;display:flex;flex-direction:row;align-items:baseline;justify-content:flex-start;white-space:nowrap;width:auto;text-align:center;font-size:var(--body-text-sm);} /* used: screening-results-pages, chrome */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-item{font-size:var(--body-text-xs);} /* used: screening-results-pages, chrome */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-link{display:block;position:relative;cursor:pointer;text-decoration:none;color:var(--t-page-text);line-height:var(--default-line-height-single);padding-top:calc((var(--subnav-row-height) - 1em) / 2 + var(--link-line-height));padding-bottom:calc((var(--subnav-row-height) - 1em) / 2 - var(--link-line-height));padding-left:var(--gap-xl);padding-right:var(--gap-xl);transition:color var(--transition-base) ease;} /* used: screening-results-pages, chrome */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-link::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:var(--link-line-height);background-color:transparent;transition:background-color var(--transition-base) ease;display:block;} /* used: screening-results-pages, chrome */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-link-active::after{background-color:var(--t-emphasis);} /* used: screening-results-pages, chrome */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-link:hover{color:var(--orange);text-decoration:none;} /* used: screening-results-pages, chrome */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-link:hover::after{background-color:transparent;} /* used: screening-results-pages, chrome */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-link-active:hover{color:var(--t-page-text);} /* used: screening-results-pages, chrome */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-link-active:hover::after{background-color:var(--t-emphasis);} /* used: screening-results-pages, chrome */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-link:active{color:var(--t-emphasis);} /* used: screening-results-pages, chrome */
:where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-action{position:relative;flex:0 0 auto;height:var(--button-size-xs);font-weight:var(--font-weight-normal);font-size:var(--body-text-sm);margin-left:var(--gap-xl);padding-left:var(--app-default-top-bottom-margin-sm);padding-right:var(--app-default-top-bottom-margin-sm);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-xxs);} /* used: screening-results-pages */

@media (max-width:900px) {
  :where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-title-wrapper{display:none;} /* used: screening-results-pages, chrome */
  :where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-list{min-width:max-content;margin-left:0;} /* used: screening-results-pages, chrome */
}

:where(.page-brain-body) .wrapper-for-all-sections{height:auto;width:calc(100% - var(--sidebar-width));margin-left:var(--sidebar-width);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-item{font-size:var(--body-text-sm);} /* used: screening-results-pages, chrome */
}

[data-motion="still"]:where(.page-brain-body, .page-masking-profile, .page-rsd-profile), :where(.page-brain-body, .page-masking-profile, .page-rsd-profile) [data-motion="still"]{scroll-behavior:auto !important;} /* used: screening-results-pages */
[data-motion="still"]:where(.page-brain-body) .section-nav-scroller, :where(.page-brain-body) [data-motion="still"] .section-nav-scroller{scroll-behavior:auto;} /* used: chrome */
:where(.page-masking-profile, .page-rsd-profile) .sev-dot, :where(.page-masking-profile, .page-rsd-profile) .key-dot, :where(.page-masking-profile, .page-rsd-profile) .severity-key-dot{flex:0 0 var(--severity-dot-size);width:var(--severity-dot-size);height:var(--severity-dot-size);border-radius:var(--radius-circle);align-self:center;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .profile-skip-link{position:absolute;top:calc(-1 * var(--app-default-top-bottom-margin-xxl));left:0;background:var(--dark-charcoal);color:var(--pure-white);padding:var(--app-default-top-bottom-margin-xxs);z-index:var(--z-skip-link);text-decoration:none;} /* used: screening-results-pages */

@media (max-width:900px) {
  :where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-row{padding-left:0;} /* used: screening-results-pages, chrome */
  :where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-scroller{padding-left:var(--section-nav-edge-inset);} /* used: screening-results-pages, chrome */
}

:where(.page-masking-profile, .page-rsd-profile) .donut-card-name{font-size:var(--heading-size-sm);font-weight:var(--font-weight-medium);line-height:var(--default-line-height-x-small);color:var(--t-page-text);margin:0;text-align:left;text-wrap:pretty;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .donut-card-desc{font-size:var(--body-text-sm);font-weight:var(--font-weight-normal);line-height:var(--default-line-height-large);color:var(--t-text-secondary);margin:0;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .sev-dot{background:var(--card-severity-colour,var(--t-line-muted));} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .sev-dot{align-self:flex-start;margin-top:var(--sev-dot-offset);} /* used: screening-results-pages */

@media (max-width:900px) {
  :where(.page-masking-profile, .page-rsd-profile) .sev-dot{margin-top:var(--sev-dot-offset-mob);} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .donut-card-name{font-size:var(--heading-size-xs);} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .donut-card-desc{font-size:var(--body-text-xs);line-height:var(--default-line-height-small);} /* used: screening-results-pages */
}

@media (max-width:600px) {
  :where(.page-masking-profile, .page-rsd-profile) .donut-card-desc{font-size:var(--body-text-xxs);} /* used: screening-results-pages */
}

:where(.page-masking-profile, .page-rsd-profile) .polar-body-text{font-size:var(--body-text-sm);line-height:var(--default-line-height-large);color:var(--t-page-text);margin:0;text-wrap:pretty;font-weight:var(--font-weight-normal);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .polar-body-text+.polar-body-text{margin-top:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .polar-body-list{padding-left:var(--app-default-top-bottom-margin-lg);list-style-position:outside;margin-top:var(--app-default-top-bottom-margin-xs);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .polar-body-list li{padding-left:var(--gap-xs);margin-bottom:var(--gap-xxs);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-masking-profile, .page-rsd-profile) .polar-body-text{font-size:var(--body-text-xs);} /* used: screening-results-pages */
}

:where(.page-masking-profile, .page-rsd-profile) .profile-skip-link:focus{top:0;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .profile-references-wrapper{width:100%;max-width:var(--golden-width-large,791px);text-align:left;margin-top:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .profile-references-item{border-top:var(--stroke-thin) solid var(--t-border);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .profile-references-button{background-color:transparent;font-weight:var(--font-weight-semi-bold);padding-top:var(--app-default-top-bottom-margin-sm);padding-bottom:var(--app-default-top-bottom-margin-sm);padding-right:0;padding-left:0;width:100%;text-align:left;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--t-text-strong);transition:background-color 0.3s ease,color 0.3s ease;font-size:1.2rem;font-family:inherit;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .explore-btn-locked{cursor:default;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .references-content{text-align:left;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;max-height:0;overflow:hidden;transition:max-height 0.4s ease-out, padding 0.4s ease-out;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .internal-footer p{text-align:center;} /* used: screening-results-pages, chrome */
:where(.page-masking-profile, .page-rsd-profile) .profile-content-box-stroked-mushroom{border:0.5px solid var(--mushroom);background-color:transparent;border-radius:var(--app-default-radius-md);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .content-box{border-radius:var(--default-radius);} /* used: screening-results-pages, chrome */
:where(.page-masking-profile, .page-rsd-profile) .profile-content-box-stroked-mushroom{border-color:var(--t-box-edge);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .profile-references-button:hover{color:var(--orange);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .references-content.open{max-height:var(--accordion-open-max-height);padding-top:var(--app-default-top-bottom-margin-sm);padding-bottom:var(--app-default-top-bottom-margin-lg);padding-right:0;padding-left:0;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .profile-override-left-right-padding{padding-left:0;padding-right:0;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .footer-override{padding-top:3rem;padding-bottom:2rem;} /* used: screening-results-pages, chrome */
:where(.page-masking-profile, .page-rsd-profile) .toggle-icon{font-size:var(--button-icon-xl);line-height:var(--default-line-height-single);transition:transform 0.3s ease;display:flex;align-items:center;} /* used: screening-results-pages */
[data-motion="still"]:where(.page-health-history, .page-masking-profile, .page-rsd-profile) *, :where(.page-health-history, .page-masking-profile, .page-rsd-profile) [data-motion="still"] *, [data-motion="still"]:where(.page-health-history, .page-masking-profile, .page-rsd-profile) *::before, :where(.page-health-history, .page-masking-profile, .page-rsd-profile) [data-motion="still"] *::before, [data-motion="still"]:where(.page-health-history, .page-masking-profile, .page-rsd-profile) *::after, :where(.page-health-history, .page-masking-profile, .page-rsd-profile) [data-motion="still"] *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-property:opacity !important;transition-duration:var(--motion-fade) !important;transition-timing-function:var(--motion-fade-ease) !important;} /* used: screening-results-pages */
[data-motion="still"]:where(.page-health-history) .health-history-left, :where(.page-health-history) [data-motion="still"] .health-history-left{animation-duration:var(--motion-fade) !important;}
[data-motion="still"]:where(.page-health-history) .health-history-add-on-press-animation, :where(.page-health-history) [data-motion="still"] .health-history-add-on-press-animation{transition-property:transform, background-color, background !important;transition-duration:var(--press-release-duration), var(--press-colour-duration), var(--press-colour-duration) !important;transition-timing-function:var(--press-release-ease), ease, ease !important;}
[data-motion="still"]:where(.page-health-history) .health-history-add-on-press-animation:active, :where(.page-health-history) [data-motion="still"] .health-history-add-on-press-animation:active{transform:scale(var(--press-scale));transition-duration:var(--press-down-duration), var(--press-down-duration), var(--press-down-duration) !important;}
:where(.page-masking-profile, .page-rsd-profile) .reference-link{word-break:break-all;overflow-wrap:break-word;display:inline-block;max-width:100%;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .internal-footer{display:flex;flex-direction:column;align-items:center;width:100%;max-width:100%;} /* used: screening-results-pages, chrome */
:where(.page-trauma-history, .page-masking-profile, .page-rsd-profile) .side-bar-placeholder{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:var(--navy);z-index:var(--z-side-bar-placeholder);} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .explore-btn-locked:hover{background:var(--orange);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-right{flex:0 0 auto;width:min(100%, var(--breath-stage-max-width));aspect-ratio:1 / 1;align-self:center;} /* used: screening-results-pages */

@media (max-width: 600px) {
  :where(.page-trauma-history, .page-masking-profile, .page-rsd-profile) .side-bar-placeholder{display:none;} /* used: screening-results-pages */
}

:where(.page-masking-profile, .page-rsd-profile) .explore-btn-lock-icon{display:none;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .explore-btn-locked .explore-btn-lock-icon{display:inline-flex;} /* used: screening-results-pages */
:where(.page-masking-profile, .page-rsd-profile) .explore-btn-locked .explore-btn-download-icon{display:none;} /* used: screening-results-pages */
:where(.page-trauma-history) .breathing-stage{position:absolute;inset:0;margin:auto;width:100%;max-width:var(--breath-stage-max-width);aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;} /* used: screening-results-pages */
:where(.page-trauma-history) .breathing-rect{width:65%;height:46%;border:var(--stroke-thin) solid var(--t-breath-ink);border-radius:var(--app-default-radius-lg);animation:breathe 9s ease-in-out infinite;position:relative;color:var(--t-breath-ink);font-weight:var(--font-weight-medium);font-size:var(--body-text-sm);text-align:center;} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .cond-card{width:100%;max-width:var(--cond-card-max-width);height:auto;max-height:none;flex:0 0 auto;aspect-ratio:7/10;} /* used: screening-results-pages */

@media (max-width:900px) {
  :where(.page-health-history, .page-trauma-history) .cond-card{max-width:var(--cond-card-max-width-md);aspect-ratio:9/16;} /* used: screening-results-pages */
}

@media (max-width:599px) {
  :where(.page-health-history, .page-trauma-history) .cond-card{max-width:var(--cond-card-max-width-mob);aspect-ratio:9/16;} /* used: screening-results-pages */
}

@media (max-width:449px) {
  :where(.page-health-history, .page-trauma-history) .cond-card{max-width:var(--cond-card-max-width-xs);aspect-ratio:9/16;} /* used: screening-results-pages */
}

:where(.page-trauma-history) .breathing-label{white-space:nowrap;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);font-size:var(--breath-label-font-size);} /* used: screening-results-pages */
:where(.page-trauma-history) .breathing-label-fades-in{animation:showIn 9s ease-in-out infinite;} /* used: screening-results-pages */
:where(.page-trauma-history) .breathing-label-fades-out{animation:showOut 9s ease-in-out infinite;} /* used: screening-results-pages */
:where(.page-trauma-history) .lozenge-custom-added:has(.trauma-history-delete-list-item-btn:hover) .lozenge{border-color:var(--tomato);background:var(--tomato);color:var(--bright-white);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .sticky-cards-container{position:sticky;top:0;z-index:var(--z-sticky-cards);background:var(--t-band);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-filter-bar{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:var(--gap-xs);scrollbar-width:none;-ms-overflow-style:none;padding-top:1.5rem;padding-bottom:0;background:none;scroll-behavior:smooth;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-filter-bar::-webkit-scrollbar{display:none;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-filter-bar > *{flex:0 0 auto;} /* used: screening-results-pages */
[data-motion="still"]:where(.page-masking-profile, .page-rsd-profile) .score-bar-fill, :where(.page-masking-profile, .page-rsd-profile) [data-motion="still"] .score-bar-fill{transition-property:width !important;transition-duration:var(--transition-bar-fill) !important;transition-timing-function:ease-out !important;} /* used: screening-results-pages */
[data-motion="still"]:where(.page-health-history, .page-masking-profile, .page-rsd-profile) .temp-chrome, :where(.page-health-history, .page-masking-profile, .page-rsd-profile) [data-motion="still"] .temp-chrome, [data-motion="still"]:where(.page-health-history, .page-masking-profile, .page-rsd-profile) .section-nav-bar, :where(.page-health-history, .page-masking-profile, .page-rsd-profile) [data-motion="still"] .section-nav-bar{transition-property:transform, top !important;transition-duration:var(--transition-base) !important;transition-timing-function:ease !important;} /* used: screening-results-pages, chrome */

@media (prefers-reduced-motion:reduce) {
  html:not([data-motion]):where(.page-health-history, .page-masking-profile, .page-rsd-profile) *, html:not([data-motion]):where(.page-health-history, .page-masking-profile, .page-rsd-profile) *::before, html:not([data-motion]):where(.page-health-history, .page-masking-profile, .page-rsd-profile) *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;} /* used: screening-results-pages */
}

:where(.page-health-history, .page-trauma-history) .filter-pill{white-space:nowrap;transition:background var(--button-transition-duration) var(--button-transition-ease), color var(--button-transition-duration) var(--button-transition-ease);} /* used: screening-results-pages */
:where(.page-health-history) .filter-bar{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:var(--gap-xs);scrollbar-width:none;-ms-overflow-style:none;padding-top:1.5rem;padding-bottom:0;background:none;scroll-behavior:smooth;} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .filter-pill.active{color:var(--white-text-default);background:var(--theme);border-color:var(--theme);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .cond-card.c-navy{background:var(--navy);--theme:var(--navy);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .cond-card.c-bright-blue{background:var(--bright-blue);--theme:var(--bright-blue);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .cond-card.c-dark-teal{background:var(--dark-teal);--theme:var(--dark-teal);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .cond-card.c-moss-green{background:var(--moss-green);--theme:var(--moss-green);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .cond-card.c-bright-green{background:var(--bright-green);--theme:var(--bright-green);} /* used: screening-results-pages */
:where(.page-health-history) .filter-bar::-webkit-scrollbar{display:none;} /* used: screening-results-pages */
:where(.page-health-history) .filter-bar > *{flex:0 0 auto;} /* used: screening-results-pages */
:where(.page-health-history) .stat-pill{gap:var(--app-default-top-bottom-margin-xxs);} /* used: screening-results-pages */
:where(.page-health-history) .carousel{display:flex;gap:var(--app-default-top-bottom-margin-lg);overflow-x:auto;padding:var(--card-carousel-pad-top) 0 var(--card-carousel-pad-bottom);scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;}
:where(.page-health-history) .carousel::-webkit-scrollbar{display:none;}
:where(.page-health-history, .page-trauma-history) .cond-card{border-radius:var(--app-default-radius-lg);padding:var(--app-default-top-bottom-margin-xl);display:flex;flex-direction:column;scroll-snap-align:start;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;position:relative;} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .cond-card::-webkit-scrollbar{display:none;} /* used: screening-results-pages */
:where(.page-health-history) .cond-card-title{color:var(--white-text-default);margin-bottom:var(--app-default-top-bottom-margin-xl);line-height:var(--default-line-height-small);flex:0 0 auto;} /* used: screening-results-pages */
:where(.page-trauma-history) .cond-card.c-red{background:var(--red);--theme:var(--red);}
:where(.page-trauma-history) .trauma-history-cond-card-title{color:var(--white-text-default);margin-bottom:var(--app-default-top-bottom-margin-xl);line-height:var(--default-line-height-small);flex:0 0 auto;font-size:var(--heading-size-md);font-weight:var(--font-weight-light);text-wrap:pretty;margin-top:0;} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .cond-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--gap-xs);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .override-label-flex{flex:1 1 auto;} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .add-row{display:flex;justify-content:center;margin-top:var(--app-default-top-bottom-margin-lg);margin-bottom:0;} /* used: screening-results-pages */
:where(.page-health-history) .health-history-cond-item.lozenge{padding-left:var(--lozenge-padding-x);font-size:var(--body-text-sm);} /* used: screening-results-pages */
:where(.page-health-history) .health-history-delete-list-item-btn.del{right:var(--app-default-top-bottom-margin-xxs);top:50%;transform:translateY(-50%);width:var(--button-size-md);height:var(--button-size-md);background:transparent;cursor:pointer;color:var(--white-text-default);font-size:var(--button-icon-md);opacity:0;visibility:hidden;transition:opacity .2s ease, visibility .2s ease;} /* used: screening-results-pages */

@media (max-width:760px) {
  :where(.page-health-history) .health-history-right{max-width:var(--lung-stage-max-width-mob);margin-left:auto;margin-right:auto;} /* used: screening-results-pages */
}

:where(.page-trauma-history) .trauma-history-cond-item.lozenge{padding-left:var(--lozenge-padding-x);font-size:var(--body-text-sm);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-delete-list-item-btn.del{right:var(--app-default-top-bottom-margin-xxs);top:50%;transform:translateY(-50%);width:var(--button-size-md);height:var(--button-size-md);background:transparent;cursor:pointer;color:var(--white-text-default);font-size:var(--button-icon-md);opacity:0;visibility:hidden;transition:opacity .2s ease, visibility .2s ease;} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .lozenge-wrapper:hover .del, :where(.page-health-history, .page-trauma-history) .lozenge-wrapper:focus-within .del{opacity:1;visibility:visible;} /* used: screening-results-pages */

@media (max-width:640px) {
  :where(.page-health-history) .health-history-delete-list-item-btn.del{opacity:1;visibility:visible;} /* used: screening-results-pages */
  :where(.page-trauma-history) .trauma-history-delete-list-item-btn.del{opacity:1;visibility:visible;} /* used: screening-results-pages */
}

:where(.page-trauma-history) .trauma-history-btn-primary-white-on-dark{background:var(--light-white);color:var(--navy);transition:background 0.3s, color 0.3s;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-btn-primary-white-on-dark:hover{background:var(--dark-white);color:var(--navy-dark);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .add-btn{color:var(--theme);transition:background var(--button-transition-duration) var(--button-transition-ease), color var(--button-transition-duration) var(--button-transition-ease), transform 0.35s cubic-bezier(0.34,1.56,0.64,1);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .add-btn:hover{background:var(--bright-white);color:var(--theme);border-color:var(--white-text-default);} /* used: screening-results-pages */
:where(.page-health-history) .health-history-add-on-press-animation:active{transform:scale(var(--press-scale));transition-duration:var(--press-down-duration), var(--press-down-duration), var(--press-down-duration);} /* used: screening-results-pages */
:where(.page-health-history) .add-select{display:none;width:100%;padding:0 var(--default-gap);-webkit-appearance:none;appearance:none;border:none;outline:none;background:transparent;color:var(--white-text-default);font-family:inherit;font-size:var(--body-text-sm);cursor:pointer;} /* used: screening-results-pages */
:where(.page-health-history) .add-select:focus{outline:none;box-shadow:none;} /* used: screening-results-pages */
:where(.page-health-history) .health-history-cond-item.lozenge{border-radius:var(--app-default-radius-lg);} /* used: screening-results-pages */
:where(.page-health-history) .filter-bar{padding-bottom:var(--card-pills-pad-bottom);} /* used: screening-results-pages */
:where(.page-health-history) .health-history-force-full-width-carouselle-by-default-100vw{width:100%;margin-left:0;margin-right:0;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);scroll-padding-left:var(--default-left-right-desk-body-padding);scroll-padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-health-history) .health-history-force-full-width-carouselle-by-default-100vw{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);scroll-padding-left:var(--default-left-right-mob-body-padding);scroll-padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-health-history) .health-history-force-full-width-carouselle-by-default-100vw > *:last-child{scroll-snap-align:end;margin-right:var(--default-left-right-desk-body-padding);}

@media (max-width:600px) {
  :where(.page-health-history) .health-history-force-full-width-carouselle-by-default-100vw > *:last-child{margin-right:var(--default-left-right-mob-body-padding);}
}

:where(.page-health-history) .section-full-bleed-with-carousel{height:auto;width:100%;padding-top:var(--app-default-top-bottom-margin-xxxxl);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-health-history) .section-full-bleed-with-carousel{margin-left:0;margin-right:0;width:100%;max-width:100%;padding-top:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */
}

:where(.page-health-history) .scroll-stop-section{min-height:200vh;background:var(--t-band);} /* used: screening-results-pages */
:where(.page-health-history) .health-history-carousel-nav-btn{border:var(--stroke-hairline) solid var(--t-nav-control);color:var(--t-nav-control);transition:background var(--transition-base),border-color var(--transition-base),color var(--transition-base);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-add-on-press-animation:active{transform:scale(var(--press-scale));transition-duration:var(--press-down-duration), var(--press-down-duration), var(--press-down-duration);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-add-select{display:none;width:100%;padding:0 var(--default-gap);-webkit-appearance:none;appearance:none;border:none;background:transparent;color:var(--white-text-default);font-family:inherit;font-size:var(--body-text-sm);cursor:pointer;} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .add-row.open .add-btn{display:none;} /* used: screening-results-pages */
:where(.page-health-history) .add-row.open .add-select{display:block;}
:where(.page-trauma-history) .add-row.open .trauma-history-add-select{display:block;}
:where(.page-health-history, .page-trauma-history) .add-row.full{display:none;} /* used: screening-results-pages */
:where(.page-health-history) .hh-mobile-intro{display:none;background:var(--t-band);padding:3rem var(--default-left-right-desk-body-padding) 1.5rem;} /* used: screening-results-pages */

@media (max-width:760px) {
  :where(.page-health-history) .health-history-left h1, :where(.page-health-history) .health-history-left .page-intro-text, :where(.page-health-history) .health-history-left .add-prompt-text{display:none;} /* used: screening-results-pages */
}

@media (max-width:600px) {
  :where(.page-health-history) .hh-mobile-intro{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-health-history) .scroll-stop-section h1, :where(.page-health-history) .scroll-stop-section h2{margin-left:var(--default-left-right-desk-body-padding);margin-right:var(--default-left-right-desk-body-padding);padding-top:var(--card-h2-pad-top);} /* used: screening-results-pages */
:where(.page-health-history) .hh-mobile-intro h1{margin-left:0;margin-right:0;padding-top:0;}

@media (max-width:600px) {
  :where(.page-health-history) .scroll-stop-section h1, :where(.page-health-history) .scroll-stop-section h2{margin-left:var(--default-left-right-mob-body-padding);margin-right:var(--default-left-right-mob-body-padding);line-height:var(--default-line-height-small);} /* used: screening-results-pages */
  :where(.page-health-history) .hh-mobile-intro h1{margin-left:0;margin-right:0;}
}

:where(.page-health-history) .health-history-centred-card-carousel{display:flex;gap:var(--app-default-top-bottom-margin-lg);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding-top:var(--card-carousel-pad-top);padding-bottom:var(--card-carousel-pad-bottom);padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);scroll-padding-left:var(--default-left-right-desk-body-padding);scroll-padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */
:where(.page-health-history) .health-history-centred-card-carousel::-webkit-scrollbar{display:none;} /* used: screening-results-pages */

@media (min-width:1280px) {
  :where(.page-health-history) .health-history-centred-card-carousel{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));scroll-padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));scroll-padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages */
}

@media (max-width:600px) {
  :where(.page-health-history) .health-history-centred-card-carousel{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);scroll-padding-left:var(--default-left-right-mob-body-padding);scroll-padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-health-history) .health-history-carousel-nav-btn:hover{background:var(--t-nav-control-hover-bg);color:var(--t-nav-control-hover-icon);border-color:var(--t-nav-control-hover-edge);} /* used: screening-results-pages */
:where(.page-health-history) .health-history-centred-card-carousel-controls{display:flex;flex-direction:row;gap:var(--gap-sm);height:auto;width:auto;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-health-history) .health-history-centred-card-carousel-controls{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-health-history) .health-history-carousel-nav{display:flex;align-items:center;justify-content:flex-start;gap:var(--app-default-top-bottom-margin-xs);margin-top:0;margin-bottom:var(--app-default-top-bottom-margin-xl);padding-left:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-health-history) .health-history-carousel-nav{padding-left:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
  :where(.page-health-history) .health-history-carousel-nav{display:none;} /* used: screening-results-pages */
}

@media (pointer:coarse) {
  :where(.page-health-history) .health-history-carousel-nav{display:none;} /* used: screening-results-pages */
}

@media (pointer:fine) {
  :where(.page-health-history) .health-history-carousel-nav{display:flex;} /* used: screening-results-pages */
}

@media (max-width:760px) {
  :where(.page-health-history) .health-history-left{align-items:center;text-align:center;} /* used: screening-results-pages */
}

@media (max-width:600px) {
  :where(.page-health-history) .health-history-cond-item.lozenge{font-size:var(--body-text-xs);} /* used: screening-results-pages */
}

:where(.page-trauma-history) .age-row{display:flex;justify-content:center;margin-top:var(--app-default-top-bottom-margin-lg);margin-bottom:0;flex:0 0 auto;position:relative;} /* used: screening-results-pages */
:where(.page-trauma-history) .age-select{width:100%;padding:0 var(--default-gap);-webkit-appearance:none;appearance:none;background:transparent;color:var(--bright-white);font-family:inherit;font-size:var(--body-text-sm);cursor:pointer;} /* used: screening-results-pages */
:where(.page-trauma-history) .age-select option{color:var(--mid-charcoal);} /* used: screening-results-pages */
:where(.page-trauma-history) .age-select-caret{position:absolute;right:var(--default-gap);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--bright-white);font-size:var(--button-icon-md);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-centred-card-carousel{display:flex;gap:var(--app-default-top-bottom-margin-lg);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding-top:var(--card-carousel-pad-top);padding-bottom:var(--card-carousel-pad-bottom);padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);scroll-padding-left:var(--default-left-right-desk-body-padding);scroll-padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-centred-card-carousel::-webkit-scrollbar{display:none;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-centred-card-carousel-controls{display:flex;flex-direction:row;gap:var(--gap-sm);height:auto;width:auto;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-carousel-nav{display:flex;align-items:center;justify-content:flex-start;gap:var(--app-default-top-bottom-margin-xs);margin-top:var(--card-nav-margin-top);margin-bottom:var(--card-nav-margin-bottom);padding-left:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-carousel-nav-btn{border:var(--stroke-hairline) solid var(--t-nav-control);color:var(--t-nav-control);transition:background var(--transition-base),border-color var(--transition-base),color var(--transition-base);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-carousel-nav-btn:hover{background:var(--t-nav-control-hover-bg);color:var(--t-nav-control-hover-icon);border-color:var(--t-nav-control-hover-edge);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-trauma-history) .trauma-history-centred-card-carousel{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);scroll-padding-left:var(--default-left-right-mob-body-padding);scroll-padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
  :where(.page-trauma-history) .trauma-history-carousel-nav{padding-left:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-trauma-history) .trauma-history-filter-bar{padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-trauma-history) .trauma-history-filter-bar{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

:where(.page-trauma-history) body{background:var(--t-band-alt);} /* used: screening-results-pages */
:where(.page-trauma-history) .bg{background:var(--t-band-alt);} /* used: screening-results-pages */
:where(.page-trauma-history) body{overflow-x:clip;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-skip-link{position:absolute;top:calc(-1 * var(--app-default-top-bottom-margin-xxl));left:0;background:var(--dark-charcoal);color:var(--pure-white);padding:var(--app-default-top-bottom-margin-xxs);z-index:var(--z-skip-link);text-decoration:none;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-skip-link:focus{top:0;} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-section-centred-without-carousel{padding-top:var(--app-default-top-bottom-margin-xxxxl);} /* used: screening-results-pages */
:where(.page-trauma-history) .filter-pill.c-light-sage-green{--theme:var(--light-sage-green);}
:where(.page-trauma-history) .filter-pill.c-dark-sage-green{--theme:var(--dark-sage-green);}
:where(.page-brain-body, .page-trauma-history) .wrapper-below-fixed-bars{margin-top:calc(var(--fixed-header-height) + var(--subnav-row-height));} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-brain-body, .page-adhd-profile) .wrapper-for-all-sections{width:100%;margin-left:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-adhd-profile) .references-wrapper{width:100%;max-width:var(--golden-width-large);margin:0 auto;text-align:left;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .references-item{border-bottom:var(--stroke-thin) solid var(--dark-white);text-align:left;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .adhd-autism-profile-references-button{background-color:transparent;font-weight:var(--font-weight-semi-bold);padding-top:var(--app-default-top-bottom-margin-sm);padding-bottom:var(--app-default-top-bottom-margin-sm);padding-right:0;padding-left:0;width:100%;text-align:left;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--dark-charcoal);transition:background-color 0.3s ease, color 0.3s ease;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .adhd-autism-profile-references-button:hover, :where(.page-adhd-profile, .page-autism-profile) .references-button-toggle-hover:hover{color:var(--orange);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body) .brain-body-section-centred-without-carousel{height:auto;width:100%;max-width:var(--max-body-wrapper-width);margin-left:auto;margin-right:auto;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);padding-top:var(--app-default-top-bottom-margin-xxxxl);padding-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-brain-body) .brain-body-section-centred-without-carousel{margin-left:0;margin-right:0;width:100%;max-width:100%;padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);padding-top:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */
}

:where(.page-adhd-profile, .page-autism-profile) .references-content{text-align:left;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;max-height:0;overflow:hidden;transition:max-height 0.4s ease-out, padding 0.4s ease-out;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .references-content.open{max-height:var(--accordion-open-max-height);padding-top:var(--app-default-top-bottom-margin-sm);padding-bottom:var(--app-default-top-bottom-margin-lg);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .toggle-icon{font-size:var(--button-icon-xl);line-height:var(--default-line-height-single);transition:transform 0.3s ease;display:flex;align-items:center;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .reference-text{font-size:var(--body-text-sm);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) a{color:var(--orange);text-decoration:none;transition:text-decoration-color 0.4s ease, color 0.4s ease, text-decoration 0.4s ease;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) a:hover{text-decoration:underline;text-underline-offset:7px;color:var(--orange);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .profile-hero-band{position:relative;overflow:hidden;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .profile-hero-animation-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:var(--z-hero-animation);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .hero{display:flex;flex-direction:column;gap:var(--app-default-top-bottom-margin-xl);align-items:center;justify-content:flex-end;min-height:var(--hero-min-height);max-width:var(--max-hero-width);margin:0 auto;padding:var(--app-default-top-bottom-margin-xl) var(--default-left-right-desk-body-padding);position:relative;z-index:var(--z-hero-content);pointer-events:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .hero-left{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--gap-xs);pointer-events:auto;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .mobile-explore{pointer-events:auto;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .hero-right{display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .hero-chart{display:block;width:100%;height:100%;touch-action:pan-y;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .profile-hero-title{font-size:var(--hero-title-size);font-weight:var(--font-weight-extra-light);line-height:var(--default-line-height-x-small);letter-spacing:var(--heading-letter-spacing-tight);color:var(--t-page-text);margin:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .hero-text-mobile{display:none;text-align:left;margin-bottom:var(--app-default-top-bottom-margin-lg);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .hero-title-mobile{font-size:var(--hero-title-size);font-weight:var(--font-weight-extra-light);line-height:var(--default-line-height-x-small);color:var(--t-page-text);margin:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .explore-btn{display:inline-flex;align-items:center;gap:var(--gap-xs);width:fit-content;white-space:nowrap;flex-shrink:0;padding:0 var(--button-padding-horizontal-xl);height:var(--button-size-lg);background:var(--orange);border:none;border-radius:var(--radius-pill-explore);color:var(--pure-white);text-decoration:none;font-size:var(--body-text-sm);font-weight:var(--font-weight-normal);letter-spacing:var(--button-letter-spacing);font-family:inherit;cursor:pointer;transition:background var(--transition-base) ease;margin-top:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .explore-btn:hover{background:var(--orange-dark);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .explore-btn-icon{flex-shrink:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .section-panel-bright-white{background:var(--t-band);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .section-panel-new-white{background:var(--t-band-alt);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .polar-key-item-off .polar-key-label{text-decoration:line-through;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-cptsd-profile) .hero-text-mobile{display:none;text-align:left;margin-bottom:var(--app-default-top-bottom-margin-lg);} /* used: screening-results-pages */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .polar-split{display:flex;flex-direction:row;gap:0;align-items:flex-start;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .polar-text{flex:0 0 var(--golden-ratio-large-percentage);max-width:var(--max-content-width-golden-section-large);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-cptsd-profile) .cptsd-profile-hero-title-mobile{font-size:var(--heading-size-xl);font-weight:var(--font-weight-light);line-height:var(--default-line-height-x-small);color:var(--t-page-text);margin:0;} /* used: screening-results-pages */
:where(.page-cptsd-profile) .cptsd-profile-section-headline{font-size:var(--heading-size-md);font-weight:var(--font-weight-light);line-height:var(--default-line-height-x-small);color:var(--t-page-text);margin:0 0 var(--app-default-top-bottom-margin-xxs);text-align:center;} /* used: screening-results-pages */
:where(.page-cptsd-profile) .section-subtitle{font-size:var(--body-text-lg);line-height:var(--default-line-height-small);color:var(--t-text-secondary);text-align:center;margin:0;} /* used: screening-results-pages */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .polar-title{font-size:var(--heading-size-md);font-weight:var(--font-weight-light);line-height:var(--default-line-height-x-small);color:var(--t-page-text);margin:0 0 var(--app-default-top-bottom-margin-sm);text-wrap:pretty;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-cptsd-profile) .cptsd-profile-polar-text{flex:0 0 var(--golden-ratio-large-percentage);max-width:var(--max-content-width-golden-section-large);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .polar-chart-wrap{flex:0 0 var(--golden-ratio-small-percentage);max-width:var(--polar-chart-max-width-desk);width:auto;height:auto;padding:0;padding-top:var(--polar-chart-top-offset);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .polar-chart-box{position:relative;width:100%;aspect-ratio:1 / 1;padding:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .polar-chart{position:absolute;inset:0;width:100%;height:100%;display:block;padding:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .polar-key{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;row-gap:var(--key-row-gap);width:100%;margin:var(--app-default-top-bottom-margin-sm) 0 0;padding:0;list-style:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .polar-key-item{display:flex;align-items:flex-start;gap:var(--gap-xxs);font-size:var(--body-text-sm);line-height:var(--default-line-height-small);color:var(--t-text-secondary);background:transparent;border:none;padding:0;margin:0;font-family:inherit;text-align:left;cursor:pointer;transition:opacity var(--transition-base) ease;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .polar-key-item:hover{color:var(--orange);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .polar-key-swatch{flex:0 0 auto;width:var(--severity-dot-size);height:var(--severity-dot-size);border-radius:var(--radius-circle);margin-top:var(--polar-key-swatch-offset);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .adhd-autism-cptsd-profile-btn{display:inline-flex;align-items:center;padding:0 1.5rem;border:none;border-radius:var(--md-radius);background:transparent;font-family:inherit;font-size:var(--body-text-sm);font-weight:var(--font-weight-normal);line-height:var(--default-line-height-single);cursor:pointer;flex-shrink:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .btn-pill{border-radius:var(--radius-pill);padding-left:var(--btn-padding-x);padding-right:var(--btn-padding-x);justify-content:center;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .btn-md{height:var(--button-size-md);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .btn-md i{font-size:var(--button-icon-md);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .btn-xs{height:var(--button-size-xs);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .btn-xs i{font-size:var(--button-icon-xs);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .btn-primary-orange{background:var(--orange);color:var(--bright-white);transition:background 0.3s;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .btn-primary-orange:hover{background:var(--orange-dark);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .btn-primary-navy{background:var(--navy);color:var(--bright-white);transition:background 0.3s;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .btn-primary-navy:hover{background:var(--navy-dark);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .profile-btn-secondary-navy-on-white{background:transparent;color:var(--t-emphasis);border:var(--stroke-hairline) solid var(--t-emphasis);transition:background var(--transition-base), border-color var(--transition-base), color var(--transition-base);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .profile-btn-secondary-navy-on-white:hover{background:var(--hover-overlay-dark);border-color:var(--t-emphasis-hover);color:var(--t-emphasis-hover);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .reference-links{display:flex;flex-direction:row;gap:var(--app-default-top-bottom-margin-sm);margin-top:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .reference-links-button{flex:1 1 0;min-width:0;gap:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .reference-links-label{line-height:var(--default-line-height-small);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

@media (max-width:1100px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .reference-links{flex-direction:column;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .reference-links-button{flex:0 0 auto;width:100%;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
}

@media (max-width:900px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .reference-links{flex-direction:row;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .reference-links-button{flex:1 1 0;width:auto;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
}

@media (max-width:700px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .reference-links{flex-direction:column;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .reference-links-button{flex:0 0 auto;width:100%;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
}

@media (max-width:900px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .polar-split{flex-direction:column;gap:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap-xxl);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (max-width:900px) {
  :where(.page-adhd-profile, .page-autism-profile) .polar-text{order:2;flex:0 0 auto;max-width:none;padding-right:0;padding-top:var(--polar-text-stack-padding-top);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .polar-chart-wrap{order:1;flex:0 0 auto;max-width:var(--polar-stack-column-max-width);min-height:auto;width:100%;height:auto;padding-top:0;margin-left:0;margin-right:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .polar-chart-box{width:100%;max-width:var(--polar-chart-max-width-stacked);margin-left:0;margin-right:auto;aspect-ratio:1 / 1;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:700px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .polar-chart-box{margin-left:auto;margin-right:auto;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:900px) {
  :where(.page-cptsd-profile) .cptsd-profile-polar-text{order:2;text-align:left;flex:0 0 auto;max-width:none;padding-right:0;padding-top:var(--polar-text-stack-padding-top);} /* used: screening-results-pages */
}

@media (max-width:700px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .polar-chart-wrap{max-width:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .hero-text-mobile{text-align:center;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .section-full-bleed-with-carousel{height:auto;width:100%;padding-top:var(--app-default-top-bottom-margin-xxxxl);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view-heading, :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .section-subheading-text{padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view-tab-toggle{display:flex;flex-shrink:0;position:relative;top:calc(var(--button-size-md) / -2);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .section-headline{font-size:var(--section-headline-size);font-weight:var(--font-weight-extra-light);line-height:var(--default-line-height-x-small);color:var(--t-page-text);margin:0 0 var(--app-default-top-bottom-margin-xxs);text-align:center;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (min-width:1280px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view-heading, :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .section-subheading-text{margin-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));padding-left:0;padding-right:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:600px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view-heading, :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .section-subheading-text{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view-intro{padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (min-width:1280px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view-intro{margin-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));margin-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));padding-left:0;padding-right:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:600px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view-intro{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-cptsd-profile) .results-view-subtitle{text-align:left;} /* used: screening-results-pages */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view-heading{text-align:left;margin-left:0;margin-right:0;padding-left:0;padding-right:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view-tab{background-color:var(--t-switch-bg);border:none;border-radius:0;cursor:pointer;font-family:inherit;font-size:var(--body-text-sm);font-weight:var(--font-weight-medium);padding:0 var(--app-default-top-bottom-margin-md);height:var(--button-size-md);min-height:0;color:var(--t-emphasis);display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--transition-fast) ease, color var(--transition-fast) ease;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view-tab-donut{border-top-left-radius:var(--app-default-radius-sm);border-bottom-left-radius:var(--app-default-radius-sm);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view-tab-bar{border-top-right-radius:var(--app-default-radius-sm);border-bottom-right-radius:var(--app-default-radius-sm);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view-tab i{font-size:var(--button-icon-lg);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view-tab.is-active{background-color:var(--t-selected-bg);color:var(--t-selected-text);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view.is-hidden{display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view-bar-inner{width:100%;max-width:var(--max-body-wrapper-width);margin-left:auto;margin-right:auto;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (max-width:600px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .results-view-bar-inner{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .centred-card-carousel{-ms-overflow-style:none;scrollbar-width:none;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);scroll-padding-left:var(--default-left-right-desk-body-padding);scroll-padding-right:var(--default-left-right-desk-body-padding);width:100%;max-width:100%;display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:var(--default-row-gap);scroll-behavior:smooth;padding-top:var(--app-default-top-bottom-margin-sm);padding-bottom:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .centred-card-carousel::-webkit-scrollbar{display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-grid:focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset);border-radius:var(--default-radius);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (min-width:1280px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .centred-card-carousel{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));scroll-padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));scroll-padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:600px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .centred-card-carousel{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);scroll-padding-left:var(--default-left-right-mob-body-padding);scroll-padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .centred-card-carousel-controls{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:var(--gap-sm);height:auto;width:auto;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);padding-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (max-width:600px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .centred-card-carousel-controls{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (min-width:1280px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .centred-card-carousel-controls{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (pointer:coarse) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .centred-card-carousel-controls{display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .centred-card-carousel{padding-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .carousel-nav-btn{display:inline-flex;align-items:center;justify-content:center;border:var(--stroke-hairline) solid var(--t-nav-control);background:transparent;cursor:pointer;flex-shrink:0;border-radius:var(--radius-pill);aspect-ratio:1 / 1;padding:0;height:var(--button-size-md);color:var(--t-nav-control);transition:background var(--button-transition-duration) var(--button-transition-ease), border-color var(--button-transition-duration) var(--button-transition-ease), color var(--button-transition-duration) var(--button-transition-ease), opacity var(--button-transition-duration) var(--button-transition-ease);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .carousel-nav-btn:hover{background:var(--t-nav-control-hover-bg);color:var(--t-nav-control-hover-icon);border-color:var(--t-nav-control-hover-edge);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .carousel-nav-btn:focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .carousel-nav-btn i{font-size:var(--button-icon-md);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .carousel-nav-btn-disabled{opacity:var(--opacity-dimmed);pointer-events:none;cursor:default;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-card{position:relative;flex:0 0 var(--carouselle-card-width-mobile);width:var(--carouselle-card-width-mobile);min-width:var(--carouselle-card-width-mobile);max-width:var(--carouselle-card-width-mobile);scroll-snap-align:center;background:var(--t-card);border-radius:var(--default-radius);overflow:hidden;display:flex;flex-direction:column;aspect-ratio:9 / 16;opacity:var(--opacity-visible);transition:transform var(--transition-card) var(--ease-card);transform-origin:center center;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-wrap, :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-pct, :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-sev{opacity:var(--opacity-hidden);transition:opacity var(--transition-fade) ease;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-card.is-visible .donut-wrap, :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-card.is-visible .donut-pct, :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-card.is-visible .donut-sev{opacity:var(--opacity-visible);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-card:has(.flippable-9-16-card-info-btn:hover){transform:scale(1.015);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (min-width:450px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-card{flex:0 0 var(--carouselle-card-lg);width:var(--carouselle-card-lg);min-width:var(--carouselle-card-lg);max-width:var(--carouselle-card-lg);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (min-width:600px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-card{flex:0 0 var(--carouselle-card-xl);width:var(--carouselle-card-xl);min-width:var(--carouselle-card-xl);max-width:var(--carouselle-card-xl);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (min-width:900px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-card{flex:0 0 var(--carouselle-card-xxl);width:var(--carouselle-card-xxl);min-width:var(--carouselle-card-xxl);max-width:var(--carouselle-card-xxl);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .flippable-9-16-card-back{position:absolute;top:0;left:0;right:0;bottom:0;z-index:var(--z-card-back);background:var(--t-card);border-radius:0;padding:var(--default-card-left-right-padding);padding-top:var(--app-default-top-bottom-margin-xl);display:none;flex-direction:column;overflow-y:auto;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .flippable-9-16-card-back.is-open{display:flex;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-card:has(.flippable-9-16-card-back.is-open){background-color:var(--t-card);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .flippable-9-16-card-back > *{margin-top:0;margin-bottom:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .flippable-9-16-card-close{position:absolute;top:var(--app-default-top-bottom-margin-lg);right:var(--app-default-top-bottom-margin-lg);width:var(--button-size-md);height:var(--button-size-md);opacity:var(--opacity-visible);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .flippable-9-16-card-info-btn{position:absolute;bottom:var(--app-default-top-bottom-margin-lg);right:var(--app-default-top-bottom-margin-lg);z-index:var(--z-card-mask);opacity:var(--opacity-visible);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-card-well{flex:0 0 auto;aspect-ratio:1 / 1;background:var(--t-surface);display:flex;align-items:center;justify-content:center;padding:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-card-panel{flex:1 1 auto;min-height:0;background:var(--t-card-panel);color:var(--t-page-text);padding:var(--default-card-left-right-padding);display:flex;flex-direction:column;gap:var(--app-default-top-bottom-margin-xxs);justify-content:flex-start;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-card-heading{display:flex;justify-content:space-between;align-items:baseline;gap:var(--gap-regular);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-wrap{position:relative;width:var(--donut-diameter-ratio);height:auto;aspect-ratio:1 / 1;flex-shrink:0;display:flex;align-items:center;justify-content:center;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-chart{cursor:pointer;z-index:var(--z-card-mask);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-pct{font-size:var(--heading-size-lg);font-weight:var(--font-weight-normal);line-height:var(--default-line-height-single);color:var(--t-page-text);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-sev{font-size:var(--caption-text-sm);font-weight:var(--font-weight-normal);color:var(--t-text-secondary);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .severity-key-list{list-style:none;padding:0;margin:var(--app-default-top-bottom-margin-lg) 0 0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .severity-key-dot-low{background:var(--yellow);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .severity-key-dot-moderate{background:var(--mustard);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .severity-key-dot-high{background:var(--orange);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .severity-key-dot-very-high{background:var(--tomato);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .severity-key-dot-super-high{background:var(--red);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-card-key{background:var(--t-surface);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .score-group{min-width:0;--score-group-accent:var(--t-line-muted);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
[data-motion="still"]:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .hero-chart, :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) [data-motion="still"] .hero-chart{opacity:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
[data-motion="still"]:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .hero-chart.is-settled, :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) [data-motion="still"] .hero-chart.is-settled{opacity:1;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
[data-motion="still"]:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-wrap, :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) [data-motion="still"] .donut-wrap, [data-motion="still"]:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-pct, :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) [data-motion="still"] .donut-pct, [data-motion="still"]:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-sev, :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) [data-motion="still"] .donut-sev{opacity:var(--opacity-visible);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .donut-centre{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--donut-centre-gap);text-align:center;pointer-events:none;z-index:var(--z-card-face);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-cptsd-profile) .donut-centre{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--z-card-face);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--donut-centre-gap);}
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .severity-key-item{font-size:var(--body-text-sm);line-height:var(--default-line-height-small);color:var(--t-page-text);margin-bottom:var(--key-row-gap);display:flex;align-items:center;justify-content:space-between;gap:var(--gap-md);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .severity-key-percent{color:var(--t-text-secondary);font-variant-numeric:tabular-nums;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .severity-key-dot{flex:0 0 var(--severity-dot-size);width:var(--severity-dot-size);height:var(--severity-dot-size);border-radius:var(--radius-circle);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .severity-key-label{flex:1 1 auto;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .donut-card-panel-full{flex:1 1 auto;justify-content:flex-start;background:var(--t-surface);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .score-breakdown{margin-top:var(--app-default-top-bottom-margin-xxxl);display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--score-group-min-width),1fr));gap:var(--app-default-top-bottom-margin-xxl) var(--app-default-top-bottom-margin-xl);padding-bottom:var(--app-default-top-bottom-margin-xxxxl);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .score-group-heading{display:flex;justify-content:space-between;align-items:baseline;gap:var(--app-default-top-bottom-margin-sm);margin:0 0 var(--app-default-top-bottom-margin-s);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .score-group-title{font-size:var(--body-text-md);font-weight:var(--font-weight-normal);color:var(--t-page-text);margin:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .score-group-title-key{margin-bottom:var(--app-default-top-bottom-margin-lg);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .score-group-list{list-style:none;padding:0;margin:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .score-group-item{font-size:var(--body-text-xs);line-height:var(--default-line-height-compact);color:var(--t-page-text);margin-bottom:var(--app-default-top-bottom-margin-xxs);display:flex;gap:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .score-item-label{flex:1 1 auto;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .score-item-percent{flex:0 0 auto;font-size:var(--body-text-md);color:var(--t-page-text);font-variant-numeric:tabular-nums;text-align:right;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .key-dot{flex:0 0 var(--severity-dot-size);width:var(--severity-dot-size);height:var(--severity-dot-size);border-radius:var(--radius-circle);align-self:center;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .key-dot-low{background:var(--yellow);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .key-dot-moderate{background:var(--mustard);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .key-dot-high{background:var(--orange);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .key-dot-very-high{background:var(--tomato);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .key-dot-super-high{background:var(--red);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .score-bar-track{flex:1 1 auto;height:var(--severity-bar-height);background:var(--t-chart-track);border-radius:var(--radius-sm);align-self:center;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .score-bar-fill{width:0;height:100%;border-radius:var(--radius-sm);background:var(--score-group-accent);transition:width var(--transition-bar-fill) ease-out;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .score-group-desc{font-size:var(--caption-text-sm);line-height:var(--default-line-height-medium);color:var(--t-text-secondary);margin-top:var(--app-default-top-bottom-margin-xxs);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (max-width:900px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .hero{flex-direction:column;padding:var(--default-left-right-mob-body-padding);min-height:var(--hero-min-height);gap:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .hero-left{align-items:center;text-align:center;order:2;margin-top:calc(-1 * var(--default-left-right-desk-body-padding));position:relative;z-index:var(--z-card-mask);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .hero-right{width:100%;max-width:none;order:1;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:760px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .score-breakdown{grid-template-columns:1fr;padding-right:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:700px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .hero-right{flex:0 1 auto;height:100%;width:auto;max-width:100%;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:600px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .explore-btn{height:var(--button-size-md);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:900px) {
  :where(.page-adhd-profile, .page-autism-profile) .eyebrow, :where(.page-adhd-profile, .page-autism-profile) .profile-hero-title{display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:600px) {
  :where(.page-adhd-profile, .page-autism-profile) .polar-chart-box{max-width:var(--polar-chart-max-width-mob);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:900px) {
  :where(.page-cptsd-profile) .eyebrow, :where(.page-cptsd-profile) .cptsd-profile-hero-title{display:none;} /* used: screening-results-pages, chrome */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .desktop-explore{display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .mobile-explore{display:inline-flex;align-self:center;order:3;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .hero-text-mobile{display:block;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:700px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .hero{aspect-ratio:1 / 1;min-height:0;padding:var(--default-left-right-mob-body-padding);padding-bottom:calc(var(--default-left-right-mob-body-padding) + var(--button-size-md) + var(--gap-xxl));position:relative;align-items:center;justify-content:center;gap:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .hero-left{display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .mobile-explore{position:absolute;bottom:var(--default-left-right-mob-body-padding);left:50%;transform:translateX(-50%);margin-top:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-health-history, .page-trauma-history, .page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .temp-chrome-hidden{transform:translateY(-100%);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (min-width:901px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .mobile-explore{display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:600px) {
  :where(.page-adhd-profile, .page-autism-profile) .polar-text{padding-top:var(--polar-text-stack-padding-top-mob);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-cptsd-profile) .polar-chart-wrap{max-width:var(--polar-chart-max-width-mob);margin-left:auto;margin-right:auto;} /* used: screening-results-pages */
  :where(.page-cptsd-profile) .cptsd-profile-polar-text{padding-top:var(--polar-text-stack-padding-top-mob);} /* used: screening-results-pages */
}

:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .section-centred-without-carousel{height:auto;width:100%;max-width:var(--max-body-wrapper-width);margin-left:auto;margin-right:auto;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);padding-top:var(--app-default-top-bottom-margin-xxxxl);padding-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-health-history, .page-trauma-history, .page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .temp-chrome{position:fixed;top:0;left:0;width:100%;height:var(--fixed-header-height);background:var(--t-header-bg);z-index:var(--z-chrome);transition:transform var(--transition-base) ease;border-bottom:var(--stroke-thin) solid var(--t-divider);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (max-width:600px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .section-centred-without-carousel{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);padding-top:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-cptsd-profile) a{color:var(--orange);text-decoration:none;transition:text-decoration-color 0.4s ease,color 0.4s ease;} /* used: screening-results-pages */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .section-nav-bar{position:fixed;top:var(--fixed-header-height);left:0;z-index:var(--z-section-nav);display:flex;align-items:flex-end;width:100%;height:var(--subnav-row-height);background:var(--t-nav-frost);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:var(--stroke-thin) solid var(--t-divider);transition:transform var(--transition-base) ease, top var(--transition-base) ease;overflow:hidden;box-sizing:border-box;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history) .scroll-stop-section{min-height:200vh;background:var(--t-band);padding-top:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-cond-item.lozenge{border-radius:var(--app-default-radius-lg);} /* used: screening-results-pages */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .section-nav-bar-chrome-hidden{top:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

@media (min-width:601px) {
  :where(.page-trauma-history, .page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .section-nav-bar{left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-trauma-history) .sticky-cards-container{top:0;} /* used: screening-results-pages */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .section-nav-row{box-sizing:border-box;width:100%;height:var(--subnav-row-height);display:flex;flex-direction:row;align-items:baseline;padding-left:var(--section-nav-edge-inset);padding-right:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .section-nav-title-wrapper{flex:0 0 auto;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-title{font-weight:var(--font-weight-medium);text-wrap:pretty;margin:0;padding:0;line-height:var(--default-line-height-single);font-size:var(--heading-size-sm);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-scroller{flex:1 1 auto;min-width:0;display:flex;flex-direction:row;align-items:baseline;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--section-nav-edge-inset);scroll-padding-right:var(--section-nav-edge-inset);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-scroller::-webkit-scrollbar{display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-list{list-style:none;padding:0;margin:0 0 0 auto;height:max-content;display:flex;flex-direction:row;align-items:baseline;justify-content:flex-start;white-space:nowrap;width:auto;text-align:center;font-size:var(--body-text-sm);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-item{font-size:var(--body-text-xs);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-link{display:block;position:relative;cursor:pointer;text-decoration:none;color:var(--t-page-text);line-height:var(--default-line-height-single);padding-top:calc((var(--subnav-row-height) - 1em) / 2 + var(--link-line-height));padding-bottom:calc((var(--subnav-row-height) - 1em) / 2 - var(--link-line-height));padding-left:var(--gap-xl);padding-right:var(--gap-xl);transition:color var(--transition-base) ease;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-link::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:var(--link-line-height);background-color:transparent;transition:background-color var(--transition-base) ease;display:block;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-link-active::after{background-color:var(--t-emphasis);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-link:hover{color:var(--orange);text-decoration:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-link:hover::after{background-color:transparent;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-link-active:hover{color:var(--t-page-text);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-link-active:hover::after{background-color:var(--t-emphasis);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history) .cond-card.c-light-sage-green{background:var(--light-sage-green);--theme:var(--light-sage-green);}
:where(.page-trauma-history) .cond-card.c-dark-sage-green{background:var(--dark-sage-green);--theme:var(--dark-sage-green);}
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-link:active{color:var(--t-emphasis);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) a:hover{text-decoration:underline;text-underline-offset:7px;color:var(--orange);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-action{position:relative;flex:0 0 auto;height:var(--button-size-xs);font-weight:var(--font-weight-normal);font-size:var(--body-text-sm);margin-left:var(--gap-xl);padding-left:var(--app-default-top-bottom-margin-sm);padding-right:var(--app-default-top-bottom-margin-sm);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-xxs);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (max-width:760px) {
  :where(.page-trauma-history) .trauma-history-left{flex:0 0 auto;} /* used: screening-results-pages */
}

@media (max-width:900px) {
  :where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-title-wrapper{display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-trauma-history) .trauma-history-explore-btn{display:none;} /* used: screening-results-pages */

@media (max-width:900px) {
  :where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-row{padding-left:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-scroller{padding-left:var(--section-nav-edge-inset);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:760px) {
  :where(.page-trauma-history) .trauma-history-section-centred-without-carousel{padding-top:var(--app-default-top-bottom-margin-sm);padding-bottom:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
}

:where(.page-trauma-history) .trauma-history-filter-bar{padding-bottom:var(--card-pills-pad-bottom);} /* used: screening-results-pages */

@media (max-width:760px) {
  :where(.page-trauma-history) .trauma-history-section-centred-without-carousel{padding-top:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
}

@media (max-width:900px) {
  :where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-list{min-width:max-content;margin-left:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:760px) {
  :where(.page-trauma-history) .trauma-history-split{min-height:calc(100vh - var(--trauma-hero-chrome));height:auto;gap:0;} /* used: screening-results-pages */
}

@media (max-width:600px) {
  :where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-item{font-size:var(--body-text-sm);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-trauma-history) .trauma-history-cond-item.lozenge{font-size:var(--body-text-xs);} /* used: screening-results-pages */
}

[data-motion="still"]:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) *, :where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) [data-motion="still"] *, [data-motion="still"]:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) *::before, :where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) [data-motion="still"] *::before, [data-motion="still"]:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) *::after, :where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) [data-motion="still"] *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-property:opacity !important;transition-duration:var(--motion-fade) !important;transition-timing-function:var(--motion-fade-ease) !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
[data-motion="still"]:where(.page-trauma-history) .trauma-history-left, :where(.page-trauma-history) [data-motion="still"] .trauma-history-left{animation-duration:var(--motion-fade) !important;}
[data-motion="still"]:where(.page-trauma-history) .breathing-rect, :where(.page-trauma-history) [data-motion="still"] .breathing-rect, [data-motion="still"]:where(.page-trauma-history) .breathing-label-fades-in, :where(.page-trauma-history) [data-motion="still"] .breathing-label-fades-in, [data-motion="still"]:where(.page-trauma-history) .breathing-label-fades-out, :where(.page-trauma-history) [data-motion="still"] .breathing-label-fades-out{animation-duration:var(--breath-cycle-duration) !important;animation-iteration-count:infinite !important;}
[data-motion="still"]:where(.page-trauma-history) .trauma-history-add-on-press-animation, :where(.page-trauma-history) [data-motion="still"] .trauma-history-add-on-press-animation{transition-property:transform, background-color, background !important;transition-duration:var(--press-release-duration), var(--press-colour-duration), var(--press-colour-duration) !important;transition-timing-function:var(--press-release-ease), ease, ease !important;}
:where(.page-trauma-history, .page-autism-profile, .page-cptsd-profile) .section-nav-bar-cards-active{transform:translateY(-100%);} /* used: screening-results-pages, chrome, learn-pages-homepage-legal */
:where(.page-trauma-history) .trauma-history-delete-list-item-btn.del{top:var(--app-default-top-bottom-margin-xxs);transform:none;} /* used: screening-results-pages */
[data-motion="still"]:where(.page-trauma-history) .trauma-history-add-on-press-animation:active, :where(.page-trauma-history) [data-motion="still"] .trauma-history-add-on-press-animation:active{transform:scale(var(--press-scale));transition-duration:var(--press-down-duration), var(--press-down-duration), var(--press-down-duration) !important;}
:where(.page-adhd-profile, .page-autism-profile) .donut-card-name{font-size:var(--heading-size-sm);font-weight:var(--font-weight-medium);line-height:var(--default-line-height-x-small);color:var(--t-page-text);margin:0;text-align:left;text-wrap:pretty;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile) .donut-card-desc{font-size:var(--body-text-sm);font-weight:var(--font-weight-normal);line-height:var(--default-line-height-large);color:var(--t-text-secondary);margin:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .sev-dot, :where(.page-adhd-profile, .page-autism-profile) .key-dot, :where(.page-adhd-profile, .page-autism-profile) .severity-key-dot{flex:0 0 var(--severity-dot-size);width:var(--severity-dot-size);height:var(--severity-dot-size);border-radius:var(--radius-circle);align-self:center;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile) .adhd-autism-profile-references-item-divider-above{border-top:var(--stroke-thin) solid var(--t-border);border-bottom:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .sev-dot{background:var(--card-severity-colour,var(--t-line-muted));} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile) .sev-dot{align-self:flex-start;margin-top:var(--sev-dot-offset);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */

@media (max-width:900px) {
  :where(.page-adhd-profile, .page-autism-profile) .sev-dot{margin-top:var(--sev-dot-offset-mob);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
  :where(.page-adhd-profile, .page-autism-profile) .donut-card-name{font-size:var(--heading-size-xs);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
  :where(.page-adhd-profile, .page-autism-profile) .donut-card-desc{font-size:var(--body-text-xs);line-height:var(--default-line-height-small);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:600px) {
  :where(.page-adhd-profile, .page-autism-profile) .donut-card-desc{font-size:var(--body-text-xxs);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-adhd-profile, .page-autism-profile) .polar-body-text{font-size:var(--body-text-sm);line-height:var(--default-line-height-large);color:var(--t-page-text);margin:0;text-wrap:pretty;font-weight:var(--font-weight-normal);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile) .polar-body-text+.polar-body-text{margin-top:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile) .polar-body-list{padding-left:var(--app-default-top-bottom-margin-lg);list-style-position:outside;margin-top:var(--app-default-top-bottom-margin-xs);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile) .polar-body-list li{padding-left:var(--gap-xs);margin-bottom:var(--gap-xxs);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile) .references-wrapper-spaced{margin-top:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (max-width:600px) {
  :where(.page-adhd-profile, .page-autism-profile) .polar-body-text{font-size:var(--body-text-xs);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
}

:where(.page-adhd-profile, .page-autism-profile) .references-button-large-label{font-size:var(--heading-size-sm);font-family:inherit;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .reference-text-spaced{line-height:var(--default-line-height-large);margin-bottom:var(--app-default-top-bottom-margin-xxs);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .reference-italics{font-style:italic;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .reference-link{word-break:break-all;overflow-wrap:break-word;display:inline-block;max-width:100%;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .override-references-spacing{margin-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .profile-override-left-right-padding{padding-left:0;padding-right:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .footer-override{padding-top:3rem;padding-bottom:2rem;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .internal-footer{display:flex;flex-direction:column;align-items:center;width:100%;max-width:100%;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (max-width: 600px) {
  :where(.page-health-history, .page-adhd-profile, .page-autism-profile) .side-bar-placeholder{display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:760px) {
  :where(.page-health-history) .hh-mobile-intro{display:none;} /* used: screening-results-pages */
  :where(.page-health-history) .health-history-left h1, :where(.page-health-history) .health-history-left .page-intro-text{display:block;} /* used: screening-results-pages */
}

:where(.page-adhd-profile, .page-autism-profile) .internal-footer p{text-align:center;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .footer-text-content{padding:2rem;margin-top:2rem;margin-bottom:2rem;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .footer-copyright{margin:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .footer-hyperlinks{margin-bottom:2rem;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .footer-body-text-spaced{margin-bottom:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .profile-content-box-stroked-mushroom{border:0.5px solid var(--mushroom);background-color:transparent;border-radius:var(--app-default-radius-md);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-health-history, .page-adhd-profile, .page-autism-profile) .side-bar-placeholder{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:var(--navy);z-index:var(--z-side-bar-placeholder);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (max-width:760px) {
  :where(.page-health-history) .health-history-split{flex-direction:column;height:calc(100vh - var(--health-hero-chrome));min-height:0;gap:0;padding:0;} /* used: screening-results-pages */
  :where(.page-health-history) .health-history-right{order:2;flex:0 1 auto;min-height:var(--lung-stage-min-height-mob);max-height:100%;width:min(100%, var(--lung-stage-max-width-mob));aspect-ratio:1 / 1;height:auto;margin:auto;max-width:min(100%, var(--lung-stage-max-width-mob));} /* used: screening-results-pages */
  :where(.page-health-history) .health-history-explore-btn.mobile-only{order:3;flex:0 0 auto;margin-top:0;align-self:center;} /* used: screening-results-pages */
  :where(.page-health-history, .page-trauma-history) .hero-title{margin-bottom:var(--app-default-top-bottom-margin-lg);} /* used: screening-results-pages */
  :where(.page-health-history, .page-trauma-history) p.page-intro-text{margin-bottom:0;} /* used: screening-results-pages */
}

:where(.page-health-history) .health-history-section-centred-without-carousel{width:100%;max-width:var(--max-body-wrapper-width);margin-left:auto;margin-right:auto;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);padding-top:var(--app-default-top-bottom-margin-xxxxl);padding-bottom:var(--app-default-top-bottom-margin-xxxxl);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-health-history) .health-history-section-centred-without-carousel{margin-left:0;margin-right:0;width:100%;max-width:100%;padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);padding-top:var(--app-default-top-bottom-margin-xl);padding-bottom:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
}

:where(.page-health-history) .health-history-split{padding:0;} /* used: screening-results-pages */
:where(.page-health-history) .health-history-delete-list-item-btn.del{top:var(--app-default-top-bottom-margin-xxs);transform:none;} /* used: screening-results-pages */
:where(.page-health-history) .section-nav-bar{position:fixed;top:var(--fixed-header-height);left:0;z-index:var(--z-section-nav);display:flex;align-items:flex-end;width:100%;height:var(--subnav-row-height);background:var(--t-nav-frost);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:var(--stroke-thin) solid var(--t-divider);transition:transform var(--transition-base) ease, top var(--transition-base) ease;overflow:hidden;box-sizing:border-box;} /* used: screening-results-pages, chrome */
:where(.page-health-history) .section-nav-bar-chrome-hidden{top:0;} /* used: screening-results-pages, chrome */

@media (min-width:601px) {
  :where(.page-health-history) .section-nav-bar{left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));} /* used: screening-results-pages, chrome */
}

:where(.page-health-history) .section-nav-row{box-sizing:border-box;width:100%;height:var(--subnav-row-height);display:flex;flex-direction:row;align-items:baseline;padding-left:var(--section-nav-edge-inset);padding-right:0;} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-cptsd-profile) .section-nav-title{font-weight:var(--font-weight-medium);text-wrap:pretty;margin:0;padding:0;line-height:var(--default-line-height-single);font-size:var(--heading-size-sm);} /* used: screening-results-pages, chrome */
:where(.page-health-history) .section-nav-title-wrapper{flex:0 0 auto;} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-cptsd-profile) .section-nav-scroller{flex:1 1 auto;min-width:0;display:flex;flex-direction:row;align-items:baseline;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--section-nav-edge-inset);scroll-padding-right:var(--section-nav-edge-inset);} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-cptsd-profile) .section-nav-scroller::-webkit-scrollbar{display:none;} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-cptsd-profile) .section-nav-list{list-style:none;padding:0;margin:0 0 0 auto;height:max-content;display:flex;flex-direction:row;align-items:baseline;justify-content:flex-start;white-space:nowrap;width:auto;text-align:center;font-size:var(--body-text-sm);} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-cptsd-profile) .section-nav-item{font-size:var(--body-text-xs);} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-cptsd-profile) .section-nav-link{display:block;position:relative;cursor:pointer;text-decoration:none;color:var(--t-page-text);line-height:var(--default-line-height-single);padding-top:calc((var(--subnav-row-height) - 1em) / 2 + var(--link-line-height));padding-bottom:calc((var(--subnav-row-height) - 1em) / 2 - var(--link-line-height));padding-left:var(--gap-xl);padding-right:var(--gap-xl);transition:color var(--transition-base) ease;} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-cptsd-profile) .section-nav-link::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:var(--link-line-height);background-color:transparent;transition:background-color var(--transition-base) ease;display:block;} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-cptsd-profile) .section-nav-link-active::after{background-color:var(--t-emphasis);} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-cptsd-profile) .section-nav-link:hover{color:var(--orange);text-decoration:none;} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-cptsd-profile) .section-nav-link:hover::after{background-color:transparent;} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-cptsd-profile) .section-nav-link-active:hover{color:var(--t-page-text);} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-cptsd-profile) .section-nav-link-active:hover::after{background-color:var(--t-emphasis);} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-cptsd-profile) .section-nav-link:active{color:var(--t-emphasis);} /* used: screening-results-pages, chrome */
:where(.page-health-history, .page-cptsd-profile) .section-nav-action{position:relative;flex:0 0 auto;height:var(--button-size-xs);font-weight:var(--font-weight-normal);font-size:var(--body-text-sm);margin-left:var(--gap-xl);padding-left:var(--app-default-top-bottom-margin-sm);padding-right:var(--app-default-top-bottom-margin-sm);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-xxs);} /* used: screening-results-pages */

@media (max-width:900px) {
  :where(.page-health-history, .page-cptsd-profile) .section-nav-title-wrapper{display:none;} /* used: screening-results-pages, chrome */
  :where(.page-health-history, .page-cptsd-profile) .section-nav-list{min-width:max-content;margin-left:0;} /* used: screening-results-pages, chrome */
}

@media (max-width:600px) {
  :where(.page-health-history, .page-cptsd-profile) .section-nav-item{font-size:var(--body-text-sm);} /* used: screening-results-pages, chrome */
}

:where(.page-cptsd-profile) .sev-dot, :where(.page-cptsd-profile) .key-dot, :where(.page-cptsd-profile) .severity-key-dot{flex:0 0 var(--severity-dot-size);width:var(--severity-dot-size);height:var(--severity-dot-size);border-radius:var(--radius-circle);align-self:center;}
:where(.page-health-history) .section-nav-bar-cards-active{transform:translateY(-100%);} /* used: screening-results-pages, chrome */
:where(.page-cptsd-profile) .profile-skip-link{position:absolute;top:calc(-1 * var(--app-default-top-bottom-margin-xxl));left:0;background:var(--dark-charcoal);color:var(--pure-white);padding:var(--app-default-top-bottom-margin-xxs);z-index:var(--z-skip-link);text-decoration:none;} /* used: screening-results-pages */

@media (max-width:900px) {
  :where(.page-health-history, .page-cptsd-profile) .section-nav-row{padding-left:0;} /* used: screening-results-pages, chrome */
  :where(.page-health-history, .page-cptsd-profile) .section-nav-scroller{padding-left:var(--section-nav-edge-inset);} /* used: screening-results-pages, chrome */
}

:where(.page-cptsd-profile) .donut-card-name{font-size:var(--heading-size-sm);font-weight:var(--font-weight-medium);line-height:var(--default-line-height-x-small);color:var(--t-page-text);margin:0;text-align:left;text-wrap:pretty;}
:where(.page-cptsd-profile) .donut-card-desc{font-size:var(--body-text-sm);font-weight:var(--font-weight-normal);line-height:var(--default-line-height-large);color:var(--t-text-secondary);margin:0;}
:where(.page-cptsd-profile) .sev-dot{background:var(--card-severity-colour,var(--t-line-muted));}
:where(.page-cptsd-profile) .sev-dot{align-self:flex-start;margin-top:var(--sev-dot-offset);}

@media (max-width:900px) {
  :where(.page-cptsd-profile) .sev-dot{margin-top:var(--sev-dot-offset-mob);}
  :where(.page-cptsd-profile) .donut-card-name{font-size:var(--heading-size-xs);}
  :where(.page-cptsd-profile) .donut-card-desc{font-size:var(--body-text-xs);line-height:var(--default-line-height-small);}
}

@media (max-width:600px) {
  :where(.page-cptsd-profile) .donut-card-desc{font-size:var(--body-text-xxs);}
}

:where(.page-cptsd-profile) .polar-body-text{font-size:var(--body-text-sm);line-height:var(--default-line-height-large);color:var(--t-page-text);margin:0;text-wrap:pretty;font-weight:var(--font-weight-normal);} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-cptsd-profile) .polar-body-text+.polar-body-text{margin-top:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-cptsd-profile) .polar-body-list{padding-left:var(--app-default-top-bottom-margin-lg);list-style-position:outside;margin-top:var(--app-default-top-bottom-margin-xs);} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-cptsd-profile) .polar-body-list li{padding-left:var(--gap-xs);margin-bottom:var(--gap-xxs);} /* used: screening-results-pages, learn-pages-homepage-legal */

@media (max-width:600px) {
  :where(.page-cptsd-profile) .polar-body-text{font-size:var(--body-text-xs);} /* used: screening-results-pages, learn-pages-homepage-legal */
}

:where(.page-cptsd-profile) .profile-skip-link:focus{top:0;} /* used: screening-results-pages */
:where(.page-cptsd-profile) .profile-references-wrapper{width:100%;max-width:var(--golden-width-large,791px);text-align:left;margin-top:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
:where(.page-cptsd-profile) .profile-references-item{border-top:var(--stroke-thin) solid var(--t-border);} /* used: screening-results-pages */
:where(.page-cptsd-profile) .profile-references-button{background-color:transparent;font-weight:var(--font-weight-semi-bold);padding-top:var(--app-default-top-bottom-margin-sm);padding-bottom:var(--app-default-top-bottom-margin-sm);padding-right:0;padding-left:0;width:100%;text-align:left;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--t-text-strong);transition:background-color 0.3s ease,color 0.3s ease;font-size:1.2rem;font-family:inherit;} /* used: screening-results-pages */
:where(.page-cptsd-profile) .references-content{text-align:left;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;max-height:0;overflow:hidden;transition:max-height 0.4s ease-out, padding 0.4s ease-out;} /* used: screening-results-pages */
:where(.page-cptsd-profile) .internal-footer p{text-align:center;} /* used: screening-results-pages, chrome */
:where(.page-cptsd-profile) .profile-content-box-stroked-mushroom{border:0.5px solid var(--mushroom);background-color:transparent;border-radius:var(--app-default-radius-md);} /* used: screening-results-pages */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .content-box{border-radius:var(--default-radius);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-cptsd-profile) .profile-references-button:hover{color:var(--orange);} /* used: screening-results-pages */
:where(.page-cptsd-profile) .references-content.open{max-height:var(--accordion-open-max-height);padding-top:var(--app-default-top-bottom-margin-sm);padding-bottom:var(--app-default-top-bottom-margin-lg);padding-right:0;padding-left:0;}
:where(.page-cptsd-profile) .profile-override-left-right-padding{padding-left:0;padding-right:0;} /* used: screening-results-pages */
:where(.page-cptsd-profile) .footer-override{padding-top:3rem;padding-bottom:2rem;} /* used: chrome */
:where(.page-cptsd-profile) .toggle-icon{font-size:var(--button-icon-xl);line-height:var(--default-line-height-single);transition:transform 0.3s ease;display:flex;align-items:center;} /* used: screening-results-pages */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .profile-reference-text{font-size:var(--body-text-sm);line-height:var(--default-line-height-large);margin-bottom:0.5rem;} /* used: screening-results-pages */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .reference-italics{font-style:italic;} /* used: screening-results-pages */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .override-references-spacing{margin-bottom:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .footer-text-content{padding:2rem;margin-top:2rem;margin-bottom:2rem;} /* used: screening-results-pages, chrome */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .footer-copyright{margin:0;} /* used: screening-results-pages, chrome */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .footer-hyperlinks{margin-bottom:2rem;} /* used: screening-results-pages, chrome */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .profile-footer-body-text{line-height:var(--default-line-height-small);margin-bottom:1rem;} /* used: screening-results-pages */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .footnote-text{line-height:var(--default-line-height-small);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-cptsd-profile) .reference-link{word-break:break-all;overflow-wrap:break-word;display:inline-block;max-width:100%;} /* used: screening-results-pages */
:where(.page-cptsd-profile) .internal-footer{display:flex;flex-direction:column;align-items:center;width:100%;max-width:100%;} /* used: screening-results-pages, chrome */
:where(.page-health-history) h2.cards-band-title{margin:0;padding-top:var(--app-default-top-bottom-margin-sm);padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);font-size:var(--heading-size-lg);font-weight:var(--font-weight-light);line-height:var(--default-line-height-x-small);color:var(--t-page-text);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-health-history) h2.cards-band-title{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

@media (min-width:1280px) {
  :where(.page-health-history) h2.cards-band-title{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages */
  :where(.page-health-history) .health-history-force-full-width-carouselle-by-default-100vw{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));scroll-padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));scroll-padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages */
  :where(.page-health-history) .health-history-carousel-nav{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages */
}

:where(.page-health-history) .health-history-explore-btn{display:none;} /* used: screening-results-pages */
:where(.page-health-history) .scroll-stop-section{padding-top:var(--app-default-top-bottom-margin-xxxl);} /* used: screening-results-pages */

@media (max-width:760px) {
  :where(.page-trauma-history) .trauma-history-right{flex:0 0 auto;min-height:var(--breath-stage-min-height-mob);width:min(100%, var(--breath-stage-max-width));max-height:none;aspect-ratio:1 / 1;height:auto;margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;} /* used: screening-results-pages */
  :where(.page-trauma-history) .trauma-history-explore-btn{flex:0 0 auto;margin-top:0;} /* used: screening-results-pages */
}

:where(.page-trauma-history) .cards-band-title{margin:0;padding-top:var(--app-default-top-bottom-margin-sm);padding-left:var(--default-left-right-desk-body-padding);padding-right:var(--default-left-right-desk-body-padding);font-size:var(--heading-size-lg);font-weight:var(--font-weight-light);line-height:var(--default-line-height-x-small);color:var(--t-page-text);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .hero-title{margin-bottom:var(--app-default-top-bottom-margin-xs);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .hero-title{font-size:var(--heading-size-xl);font-weight:var(--font-weight-light);line-height:var(--default-line-height-small);letter-spacing:var(--heading-letter-spacing-tight);color:var(--t-heading);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .page-intro-text{font-size:var(--body-text-sm);font-weight:var(--font-weight-normal);line-height:var(--default-line-height-large);color:var(--t-page-text);max-width:var(--golden-width-small);margin-top:0;margin-bottom:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
:where(.page-health-history, .page-trauma-history) .hero-title{margin-top:var(--app-default-top-bottom-margin-xxl);} /* used: screening-results-pages */
:where(.page-health-history) .wrapper-below-fixed-bars{margin-top:calc(var(--fixed-header-height) + var(--subnav-row-height));} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-health-history, .page-trauma-history) .hero-title{margin-top:var(--app-default-top-bottom-margin-lg);} /* used: screening-results-pages */
}

:where(.page-health-history) body{color:var(--t-page-text);} /* used: screening-results-pages */
:where(.page-health-history) h1{color:var(--t-heading);} /* used: screening-results-pages */
:where(.page-health-history) .health-history-btn-secondary-navy-on-white{color:var(--t-emphasis);border-color:var(--t-emphasis);} /* used: screening-results-pages */
:where(.page-health-history) .health-history-btn-secondary-navy-on-white:hover{color:var(--t-emphasis-hover);border-color:var(--t-emphasis-hover);} /* used: screening-results-pages */

@media (max-width:600px) {
  :where(.page-trauma-history) .cards-band-title{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: screening-results-pages */
}

@media (min-width:1280px) {
  :where(.page-trauma-history) .trauma-history-centred-card-carousel{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));scroll-padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));scroll-padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages */
}

[data-motion="still"]:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile, .page-cptsd-profile), :where(.page-trauma-history, .page-adhd-profile, .page-autism-profile, .page-cptsd-profile) [data-motion="still"]{scroll-behavior:auto !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (min-width:1280px) {
  :where(.page-trauma-history) .cards-band-title{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages */
  :where(.page-trauma-history) .trauma-history-filter-bar{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));padding-right:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages */
  :where(.page-trauma-history) .trauma-history-carousel-nav{padding-left:calc(((100% - var(--max-body-wrapper-width))/2) + var(--default-left-right-desk-body-padding));} /* used: screening-results-pages */
}

@media (max-width:600px) {
  :where(.page-health-history, .page-trauma-history) .scroll-stop-section{padding-top:var(--app-default-top-bottom-margin-xl);} /* used: screening-results-pages */
}

[data-motion="still"]:where(.page-trauma-history) .section-nav-scroller, :where(.page-trauma-history) [data-motion="still"] .section-nav-scroller, [data-motion="still"]:where(.page-trauma-history) .trauma-history-centred-card-carousel, :where(.page-trauma-history) [data-motion="still"] .trauma-history-centred-card-carousel, [data-motion="still"]:where(.page-trauma-history) .trauma-history-filter-bar, :where(.page-trauma-history) [data-motion="still"] .trauma-history-filter-bar{scroll-behavior:auto;} /* used: chrome */
:where(.page-trauma-history) h1{color:var(--t-heading);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-btn-secondary-navy-on-white{color:var(--t-emphasis);border-color:var(--t-emphasis);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-btn-secondary-navy-on-white:hover{color:var(--t-emphasis-hover);border-color:var(--t-emphasis-hover);} /* used: screening-results-pages */
:where(.page-trauma-history) .trauma-history-split{min-height:0;} /* used: screening-results-pages */

@media (min-width:761px) {
  :where(.page-trauma-history) .trauma-history-section-centred-without-carousel{padding-bottom:var(--app-default-top-bottom-margin-xxxxl);} /* used: screening-results-pages */
}

@media (min-width: 601px) {
  :where(.page-health-history, .page-trauma-history) .scroll-stop-section{padding-top:0;} /* used: screening-results-pages */
  :where(.page-health-history) h2.cards-band-title{padding-top:calc(var(--app-default-top-bottom-margin-xxxl) + var(--app-default-top-bottom-margin-sm));} /* used: screening-results-pages */
}

@media (min-width:761px) {
  :where(.page-trauma-history) .hero-title{margin-top:0;} /* used: screening-results-pages */
}

@media (min-width: 601px) {
  :where(.page-trauma-history) .cards-band-title{padding-top:calc(var(--app-default-top-bottom-margin-xxxl) + var(--app-default-top-bottom-margin-sm));} /* used: screening-results-pages */
}

:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .drawer-split-pill{position:relative;display:flex;width:100%;border-radius:var(--radius-pill);overflow:visible;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
[data-motion="still"]:where(.page-adhd-profile, .page-autism-profile) .score-bar-fill, :where(.page-adhd-profile, .page-autism-profile) [data-motion="still"] .score-bar-fill{transition-property:width !important;transition-duration:var(--transition-bar-fill) !important;transition-timing-function:ease-out !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
[data-motion="still"]:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .temp-chrome, :where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) [data-motion="still"] .temp-chrome, [data-motion="still"]:where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-bar, :where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) [data-motion="still"] .section-nav-bar{transition-property:transform, top !important;transition-duration:var(--transition-base) !important;transition-timing-function:ease !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (prefers-reduced-motion:reduce) {
  html:not([data-motion]):where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) *, html:not([data-motion]):where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) *::before, html:not([data-motion]):where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  html:not([data-motion]):where(.page-adhd-profile, .page-autism-profile, .page-masking-profile, .page-rsd-profile) .donut-wrap, html:not([data-motion]):where(.page-adhd-profile, .page-autism-profile, .page-masking-profile, .page-rsd-profile) .donut-pct, html:not([data-motion]):where(.page-adhd-profile, .page-autism-profile, .page-masking-profile, .page-rsd-profile) .donut-sev{opacity:var(--opacity-visible);transition:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .drawer-split-pill-main{flex:1;padding:0 var(--btn-padding-x);border:none;cursor:pointer;display:flex;align-items:center;justify-content:flex-start;gap:var(--gap-sm);line-height:var(--default-line-height-x-small);border-radius:var(--radius-pill) 0 0 var(--radius-pill);transition:background var(--transition-fast) ease;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .drawer-split-pill-label{flex:1;display:flex;align-items:center;justify-content:flex-start;gap:0;overflow:hidden;font-size:inherit;text-align:left;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .drawer-split-pill-label-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:inherit;text-align:left;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .drawer-split-pill-arrow{flex-shrink:0;padding:0;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:0 var(--radius-pill) var(--radius-pill) 0;transition:background var(--transition-fast) ease;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-health-history) .drawer-split-pill-arrow i{font-size:var(--button-icon-md);line-height:1;display:block;} /* used: screening-results-pages, chrome */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .drawer-split-pill-menu-item span{flex:1 1 auto;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .drawer-split-pill-arrow-icon{font-size:var(--button-icon-md);line-height:1;display:block;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .drawer-split-pill-menu{position:absolute;top:calc(100% + var(--gap-xs));left:0;right:0;background:var(--t-surface);border:var(--stroke-hairline) solid var(--t-border);border-radius:var(--app-default-radius-md);box-shadow:var(--canvas-sheet-shadow);z-index:20;overflow:hidden;display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .drawer-split-pill-menu.is-open{display:block;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .drawer-split-pill-menu-item{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-sm);width:100%;min-height:var(--button-size-lg);padding:0 var(--btn-padding-x);border:none;background:transparent;color:var(--t-emphasis);cursor:pointer;text-align:left;transition:background 0.15s ease;font-size:var(--body-text-md);font-family:inherit;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
[data-motion="still"]:where(.page-brain-body, .page-cptsd-profile) *, :where(.page-brain-body, .page-cptsd-profile) [data-motion="still"] *, [data-motion="still"]:where(.page-brain-body, .page-cptsd-profile) *::before, :where(.page-brain-body, .page-cptsd-profile) [data-motion="still"] *::before, [data-motion="still"]:where(.page-brain-body, .page-cptsd-profile) *::after, :where(.page-brain-body, .page-cptsd-profile) [data-motion="still"] *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-property:opacity !important;transition-duration:var(--motion-fade) !important;transition-timing-function:var(--motion-fade-ease) !important;} /* used: screening-results-pages */
:where(.page-brain-body, .page-health-history) .export-split-pill.mobile-only{display:none;} /* used: screening-results-pages */
:where(.page-brain-body, .page-health-history) .export-split-pill.desktop-only{display:flex;} /* used: screening-results-pages */

@media (max-width:760px) {
  :where(.page-brain-body, .page-health-history) .export-split-pill.desktop-only{display:none;} /* used: screening-results-pages */
}

[data-motion="still"]:where(.page-cptsd-profile) .score-bar-fill, :where(.page-cptsd-profile) [data-motion="still"] .score-bar-fill{transition-property:width !important;transition-duration:var(--transition-bar-fill) !important;transition-timing-function:ease-out !important;}
[data-motion="still"]:where(.page-cptsd-profile) .temp-chrome, :where(.page-cptsd-profile) [data-motion="still"] .temp-chrome, [data-motion="still"]:where(.page-cptsd-profile) .section-nav-bar, :where(.page-cptsd-profile) [data-motion="still"] .section-nav-bar{transition-property:transform, top !important;transition-duration:var(--transition-base) !important;transition-timing-function:ease !important;} /* used: chrome */

@media (max-width:760px) {
  :where(.page-brain-body) .export-split-pill.mobile-only{display:flex;align-self:center;} /* used: screening-results-pages */
}

[data-motion="still"]:where(.page-brain-body) .left, :where(.page-brain-body) [data-motion="still"] .left{animation-duration:var(--motion-fade) !important;}
[data-motion="still"]:where(.page-brain-body) .brain-body-temp-chrome, :where(.page-brain-body) [data-motion="still"] .brain-body-temp-chrome, [data-motion="still"]:where(.page-brain-body) .section-nav-bar, :where(.page-brain-body) [data-motion="still"] .section-nav-bar{transition-property:transform, top !important;transition-duration:var(--transition-base) !important;transition-timing-function:ease !important;} /* used: chrome */

@media (prefers-reduced-motion:reduce) {
  html:not([data-motion]):where(.page-brain-body, .page-cptsd-profile) *, html:not([data-motion]):where(.page-brain-body, .page-cptsd-profile) *::before, html:not([data-motion]):where(.page-brain-body, .page-cptsd-profile) *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;} /* used: screening-results-pages */
  html:not([data-motion]):where(.page-cptsd-profile) .donut-wrap, html:not([data-motion]):where(.page-cptsd-profile) .donut-pct, html:not([data-motion]):where(.page-cptsd-profile) .donut-sev{opacity:var(--opacity-visible);transition:none;}
}

@media (max-width:760px) {
  :where(.page-health-history) .export-split-pill.mobile-only{display:flex;align-self:center;} /* used: screening-results-pages */
}

:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .drawer-split-pill-menu-item + .drawer-split-pill-menu-item{border-top:var(--stroke-hairline) solid var(--t-divider);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .drawer-split-pill-menu-item:hover, :where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .drawer-split-pill-menu-item:focus-visible{background:var(--t-surface-hover);outline:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .drawer-split-pill-menu-item i{font-size:var(--button-icon-md);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .export-split-pill-main:focus-visible:where(:not(.uma-input-pointer *)), :where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .export-split-pill-arrow:focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) .export-split-pill .drawer-split-pill-menu{right:auto;min-width:100%;width:max-content;max-width:90vw;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .export-split-pill{width:max-content;max-width:100%;min-height:var(--button-size-lg);background:var(--orange);color:var(--bright-white);border-color:transparent;align-items:center;margin-top:1rem;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .export-split-pill-main{background:transparent;color:var(--bright-white);font-family:inherit;font-size:var(--body-text-lg);font-weight:var(--font-weight-normal);padding-top:var(--gap-xs);padding-bottom:var(--gap-xs);white-space:normal;text-align:left;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .export-split-pill-arrow{width:var(--button-size-lg);height:var(--button-size-lg);min-height:var(--button-size-lg);max-height:var(--button-size-lg);aspect-ratio:1 / 1;flex-shrink:0;border-left:var(--stroke-hairline) solid rgba(var(--bright-white-rgb), 0.3);background:transparent;color:var(--bright-white);align-self:center;display:inline-flex;align-items:center;justify-content:center;padding:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-health-history) .export-split-pill-arrow i{display:inline-flex;align-items:center;justify-content:center;line-height:1;margin:0;vertical-align:middle;} /* used: screening-results-pages */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .export-split-pill-main:hover, :where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .export-split-pill-arrow:hover{background:var(--orange-dark);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-cptsd-profile) .side-bar-placeholder{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:var(--navy);z-index:var(--z-side-bar-placeholder);} /* used: screening-results-pages */
:where(.page-adhd-profile, .page-autism-profile) .export-split-pill-arrow-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;margin:0;vertical-align:middle;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile) .export-split-pill-label{overflow:visible;display:block;flex:1;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (max-width: 600px) {
  :where(.page-brain-body, .page-cptsd-profile) .side-bar-placeholder{display:none;} /* used: screening-results-pages */
}

:where(.page-cptsd-profile) .drawer-split-pill{position:relative;display:flex;width:100%;border-radius:var(--radius-pill);overflow:visible;} /* used: screening-results-pages, chrome */
:where(.page-cptsd-profile) .drawer-split-pill-main{flex:1;padding:0 var(--btn-padding-x);border:none;cursor:pointer;display:flex;align-items:center;justify-content:flex-start;gap:var(--gap-sm);line-height:var(--default-line-height-x-small);border-radius:var(--radius-pill) 0 0 var(--radius-pill);transition:background var(--transition-fast) ease;} /* used: screening-results-pages, chrome */
:where(.page-cptsd-profile) .drawer-split-pill-label{flex:1;display:flex;align-items:center;justify-content:flex-start;gap:0;overflow:hidden;font-size:inherit;text-align:left;} /* used: screening-results-pages, chrome */
:where(.page-cptsd-profile) .drawer-split-pill-label-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:inherit;text-align:left;} /* used: screening-results-pages, chrome */
:where(.page-cptsd-profile) .drawer-split-pill-arrow{flex-shrink:0;padding:0;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:0 var(--radius-pill) var(--radius-pill) 0;transition:background var(--transition-fast) ease;} /* used: screening-results-pages, chrome */
:where(.page-cptsd-profile) .drawer-split-pill-arrow-icon{font-size:var(--button-icon-md);line-height:1;display:block;} /* used: screening-results-pages */
:where(.page-cptsd-profile) .drawer-split-pill-menu{position:absolute;top:calc(100% + var(--gap-xs));left:0;right:0;background:var(--t-surface);border:var(--stroke-hairline) solid var(--t-border);border-radius:var(--app-default-radius-md);box-shadow:var(--canvas-sheet-shadow);z-index:20;overflow:hidden;display:none;} /* used: screening-results-pages */
:where(.page-cptsd-profile) .drawer-split-pill-menu.is-open{display:block;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-cptsd-profile) .drawer-split-pill-menu-item{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-sm);width:100%;min-height:var(--button-size-lg);padding:0 var(--btn-padding-x);border:none;background:transparent;color:var(--t-emphasis);cursor:pointer;text-align:left;transition:background 0.15s ease;font-size:var(--body-text-md);font-family:inherit;} /* used: screening-results-pages */
:where(.page-cptsd-profile) .drawer-split-pill-menu-item + .drawer-split-pill-menu-item{border-top:var(--stroke-hairline) solid var(--t-divider);} /* used: screening-results-pages */
:where(.page-cptsd-profile) .drawer-split-pill-menu-item:hover, :where(.page-cptsd-profile) .drawer-split-pill-menu-item:focus-visible{background:var(--t-surface-hover);outline:none;} /* used: screening-results-pages */
:where(.page-cptsd-profile) .drawer-split-pill-menu-item i{font-size:var(--button-icon-md);} /* used: screening-results-pages */
:where(.page-cptsd-profile) .drawer-split-pill-menu-item span{flex:1 1 auto;} /* used: screening-results-pages */
:where(.page-cptsd-profile) .export-split-pill .drawer-split-pill-menu{right:auto;min-width:100%;width:max-content;max-width:90vw;} /* used: screening-results-pages */
:where(.page-cptsd-profile) .export-split-pill{width:max-content;max-width:100%;min-height:var(--button-size-lg);background:var(--orange);color:var(--bright-white);border-color:transparent;align-items:center;margin-top:1rem;} /* used: screening-results-pages */
:where(.page-cptsd-profile) .export-split-pill-main{background:transparent;color:var(--bright-white);font-family:inherit;font-size:var(--body-text-lg);font-weight:var(--font-weight-normal);padding-top:var(--gap-xs);padding-bottom:var(--gap-xs);white-space:normal;text-align:left;} /* used: screening-results-pages */
:where(.page-cptsd-profile) .export-split-pill-arrow{width:var(--button-size-lg);height:var(--button-size-lg);min-height:var(--button-size-lg);max-height:var(--button-size-lg);aspect-ratio:1 / 1;flex-shrink:0;border-left:var(--stroke-hairline) solid rgba(var(--bright-white-rgb), 0.3);background:transparent;color:var(--bright-white);align-self:center;display:inline-flex;align-items:center;justify-content:center;padding:0;} /* used: screening-results-pages */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .profile-content-box-stroked-mushroom{border-color:var(--t-box-edge);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-cptsd-profile) .export-split-pill-arrow-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;margin:0;vertical-align:middle;} /* used: screening-results-pages */

@media (max-width:700px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .export-split-pill.mobile-explore{position:absolute;bottom:var(--default-left-right-mob-body-padding);left:50%;transform:translateX(-50%);margin-top:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-cptsd-profile) .export-split-pill-label{overflow:visible;display:block;flex:1;} /* used: screening-results-pages */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .export-split-pill-label-text{white-space:normal;overflow:visible;text-overflow:clip;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .export-split-pill-main i{flex:0 0 auto;font-size:var(--button-icon-md);line-height:1;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .export-split-pill-lock-icon{display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media (min-width:901px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .export-split-pill.mobile-explore{display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

@media (max-width:900px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .export-split-pill.desktop-explore{display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-cptsd-profile) .export-split-pill-main:hover, :where(.page-cptsd-profile) .export-split-pill-arrow:hover{background:var(--orange-dark);} /* used: screening-results-pages */
:where(.page-profile, .page-brain-body) .one-pager{display:none;box-sizing:border-box;width:210mm;font-family:"Inter",system-ui,sans-serif;color:#333232;background:#F6F3F1;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile, .page-brain-body) .one-pager *{box-sizing:border-box;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile, .page-brain-body) .one-pager-band{background:#F9F9F9;padding:11mm 12mm 7mm;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8mm;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile, .page-brain-body) .one-pager-title{flex:1 1 auto;margin:0;font-size:9mm;font-weight:300;line-height:1.2;letter-spacing:-0.02em;color:#333232;text-align:left;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile, .page-brain-body) .one-pager-body{background:#F6F3F1;padding:8mm 12mm 6mm;column-count:2;column-gap:9mm;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile) .one-pager-dots{flex:0 0 auto;width:88mm;height:56mm;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .one-pager-dots img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .one-pager-group{break-inside:avoid;page-break-inside:avoid;margin-bottom:11mm;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile) .one-pager-group .score-group-heading{margin:0 0 2.5mm;gap:3mm;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .one-pager-group .score-group-title{font-size:3.4mm;font-weight:500;line-height:1.35;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .one-pager-group .score-item-percent{font-size:3.4mm;font-weight:500;color:#333232;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .one-pager-group .score-group-list{margin:0 0 2.5mm;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .one-pager-group .score-group-item{margin:0 0 2.2mm;gap:3mm;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .one-pager-group .score-group-item:has(.score-bar-track){margin:0;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .one-pager-group .score-bar-track{height:1.4mm;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .one-pager-group .score-group-desc{font-size:3mm;line-height:1.7;margin:0;color:#333232;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-profile) .one-pager-group .score-group-title-key{margin-bottom:4mm;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-cptsd-profile) .export-split-pill-main:focus-visible:where(:not(.uma-input-pointer *)), :where(.page-cptsd-profile) .export-split-pill-arrow:focus-visible:where(:not(.uma-input-pointer *)){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset);}
:where(.page-brain-body) .one-pager-brain{flex:0 0 auto;width:56mm;height:56mm;}
:where(.page-brain-body) .one-pager-brain svg{width:100%;height:100%;display:block;}
:where(.page-brain-body) .one-pager-stack{break-inside:avoid;page-break-inside:avoid;margin-bottom:9mm;} /* used: screening-results-pages */
:where(.page-brain-body) .one-pager-stack h2{font-size:3.4mm;font-weight:500;margin:0 0 2.5mm;} /* used: screening-results-pages */
:where(.page-brain-body) .one-pager-stack .rule{height:0.7mm;margin-bottom:2.5mm;} /* used: screening-results-pages */
:where(.page-brain-body) .one-pager-stack li{font-size:3mm;line-height:1.45;margin-bottom:1.8mm;gap:3mm;} /* used: screening-results-pages */
:where(.page-profile, .page-brain-body) .one-pager-footer{background:#F6F3F1;padding:5mm 12mm 8mm;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:6mm;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile, .page-brain-body) .one-pager-rule{height:0.3mm;margin:0 12mm;background:#DCD6D4;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile, .page-brain-body) .one-pager-mark{flex:0 0 auto;width:8.1mm;height:8.1mm;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile) .one-pager-footnote{background:#F6F3F1;padding:0 12mm 6mm;margin:0;font-size:2.6mm;line-height:1.6;color:#333232;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-brain-body) .one-pager-stack li .text{white-space:normal;overflow:visible;text-overflow:clip;} /* used: screening-results-pages */
:where(.page-profile, .page-brain-body) .one-pager-mark-svg{width:100%;height:100%;display:block;fill:#232F4B;overflow:visible;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile, .page-brain-body) .one-pager-lines{flex:1 1 auto;text-align:right;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media print {
  :where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) body > .side-bar-placeholder, :where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) body > .temp-chrome, :where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) body > .profile-skip-link, :where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) body > .section-nav-bar, :where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) body > .wrapper-for-all-sections{display:none;} /* used: screening-results-pages, chrome */
  :where(.page-adhd-profile, .page-autism-profile) body > .side-bar-placeholder, :where(.page-adhd-profile, .page-autism-profile) body > .temp-chrome, :where(.page-adhd-profile, .page-autism-profile) body > .skip-link, :where(.page-adhd-profile, .page-autism-profile) body > .section-nav-bar, :where(.page-adhd-profile, .page-autism-profile) body > .wrapper-for-all-sections{display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-brain-body) .one-pager-stack li .pc{color:#333232;} /* used: screening-results-pages */
:where(.page-profile, .page-brain-body) .one-pager-website{margin:0;font-size:2.8mm;line-height:1.5;color:#EA7100;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile, .page-brain-body) .one-pager-copyright{margin:0;font-size:2.6mm;line-height:1.5;color:#808080;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile) body{background-color:var(--t-page-bg);color:var(--t-page-text);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile) .profile-hero-band{background-color:var(--t-hero-bg);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile) .chart-tooltip{position:fixed;max-width:var(--chart-tooltip-max-width);padding:var(--app-default-top-bottom-margin-sm);border-radius:var(--app-default-radius-sm);background:var(--t-tooltip-bg);color:var(--t-tooltip-text);font-family:inherit;pointer-events:none;z-index:var(--z-chart-tooltip);opacity:0;transition:opacity var(--chart-tooltip-fade-duration) var(--button-transition-ease);} /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-profile) .chart-tooltip-visible{opacity:1;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile) .chart-tooltip-title{font-size:var(--body-text-sm);font-weight:var(--font-weight-bold);margin-bottom:var(--gap-xxs);} /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-profile) .chart-tooltip-text{font-size:var(--body-text-xs);} /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-profile) h1{font-size:var(--heading-size-xl);color:var(--navy);letter-spacing:var(--heading-letter-spacing-tight);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */

@media print {
  html:where(.page-profile), :where(.page-profile) body{background:var(--pure-white);height:auto;overflow:visible;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}

:where(.page-adhd-profile, .page-autism-profile) .adhd-autism-profile-references-button{color:var(--t-text-strong);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body) h1{color:var(--t-heading);} /* used: screening-results-pages */

@media print {
  html:where(.page-brain-body), :where(.page-brain-body) body{background:#FFFFFF;margin:0;padding:0;} /* used: screening-results-pages */
  :where(.page-brain-body) body > .side-bar-placeholder, :where(.page-brain-body) body > .brain-body-temp-chrome, :where(.page-brain-body) body > .skip-link, :where(.page-brain-body) body > .section-nav-bar, :where(.page-brain-body) body > .bg, :where(.page-brain-body) body > .wrapper-for-all-sections{display:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-profile, .page-brain-body) body > .one-pager{display:flex;flex-direction:column;min-height:297mm;margin:0 auto;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-profile, .page-brain-body) .one-pager-body{flex:1 1 auto;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
}


/* ==========================================================================
   SOS PANEL
   Used on every page, so these rules are not limited to one page.
   ========================================================================== */
.sos-button{position:fixed;bottom:var(--app-default-top-bottom-margin-xxxl);right:var(--app-default-top-bottom-margin-xxl);z-index:var(--z-chrome);background:var(--tomato);color:var(--bright-white);transition:transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background var(--transition-base);} /* used: chrome, screenings-home */
.sos-button:hover{background:var(--red-dark);transform:scale(1.12);} /* used: chrome, screenings-home */
.sos-button.btn-circular{width:auto;aspect-ratio:1 / 1;} /* used: chrome, screenings-home, onboarding, profile */
.sos-hidden .sos-button, .screening-hide-sos .sos-button{display:none;} /* used: chrome, screenings-home */
.crisis-pane{position:fixed;inset:0;z-index:var(--crisis-pane-z);display:none;overflow-y:auto;background:var(--dark-teal);color:var(--bright-white);} /* used: chrome, screenings-home */
.crisis-pane-open{display:flex;align-items:flex-start;animation:crisis-pane-fade-in var(--transition-base) ease-out;} /* used: chrome, screenings-home */
@keyframes crisis-pane-fade-in{from { opacity: 0; } to { opacity: 1; }}
[data-motion="still"] .crisis-pane-open{animation:none;} /* used: chrome, screenings-home */
.crisis-pane-scroll-lock{overflow:hidden;} /* used: chrome, screenings-home */
.crisis-pane-inner{width:100%;min-height:100%;max-width:var(--max-body-wrapper-width);margin-left:var(--sidebar-width);padding:var(--app-default-top-bottom-margin-lg) var(--default-left-right-desk-body-padding) var(--app-default-top-bottom-margin-xxl);display:flex;flex-direction:column;box-sizing:border-box;} /* used: chrome, screenings-home */
.crisis-pane-close-row{display:flex;justify-content:flex-end;} /* used: chrome, screenings-home */
.crisis-pane{--flood-color:var(--dark-teal);} /* used: chrome, screenings-home */
.crisis-pane .btn-secondary-white-on-dark{border:var(--stroke-hairline) solid var(--bright-white);} /* used: chrome, screenings-home, onboarding, profile */
.crisis-pane .btn-secondary-white-on-dark:hover{background:var(--bright-white);} /* used: chrome, screenings-home, onboarding, profile */
.crisis-pane-split{display:grid;grid-template-columns:minmax(0, var(--golden-width-small)) minmax(0, 38.2%);grid-template-areas:"breath visual" "help visual";column-gap:var(--app-default-top-bottom-margin-xxxxl);align-content:center;flex:1;margin-top:var(--app-default-top-bottom-margin-xxxl);} /* used: chrome, screenings-home */
.crisis-pane-breath-text{grid-area:breath;} /* used: chrome, screenings-home */
.crisis-pane-help{grid-area:help;display:flex;flex-direction:column;} /* used: chrome, screenings-home */
.crisis-pane-visual{grid-area:visual;align-self:center;display:flex;align-items:center;justify-content:center;} /* used: chrome, screenings-home */
.crisis-pane-breath-stage{position:relative;width:100%;max-width:var(--crisis-pane-breath-max-width);aspect-ratio:var(--crisis-pane-breath-stage-ratio);display:flex;align-items:center;justify-content:center;} /* used: chrome, screenings-home, learn-pages-homepage-legal */
.crisis-pane-breath-rect{width:65%;height:var(--crisis-pane-breath-height-small);border:var(--stroke-thin) solid var(--bright-white);border-radius:var(--app-default-radius-lg);animation:crisis-pane-breathe var(--crisis-pane-breath-cycle) ease-in-out infinite;position:relative;color:var(--bright-white);font-weight:var(--font-weight-medium);font-size:var(--body-text-sm);text-align:center;} /* used: chrome, screenings-home, learn-pages-homepage-legal */
.crisis-pane-breath-label{white-space:nowrap;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);font-size:var(--crisis-pane-breath-label-size);} /* used: chrome, screenings-home, learn-pages-homepage-legal */
.crisis-pane-breath-label-in{animation:crisis-pane-breath-show-in var(--crisis-pane-breath-cycle) ease-in-out infinite;} /* used: chrome, screenings-home, learn-pages-homepage-legal */
.crisis-pane-breath-label-out{animation:crisis-pane-breath-show-out var(--crisis-pane-breath-cycle) ease-in-out infinite;} /* used: chrome, screenings-home, learn-pages-homepage-legal */
@keyframes crisis-pane-breathe{0%{width:65%;height:var(--crisis-pane-breath-height-small);} /* used: learn-pages-homepage-legal */
33%{width:95%;height:var(--crisis-pane-breath-height-large);}
42%{width:95%;height:var(--crisis-pane-breath-height-large);}
100%{width:65%;height:var(--crisis-pane-breath-height-small);}}
@keyframes crisis-pane-breath-show-in{0%,32%{opacity:0;} /* used: learn-pages-homepage-legal */
4%,30%{opacity:1;}
34%,100%{opacity:0;}}
@keyframes crisis-pane-breath-show-out{0%,32%{opacity:0;} /* used: learn-pages-homepage-legal */
36%,98%{opacity:1;}
100%{opacity:0;}}
[data-motion="still"] .crisis-pane-breath-rect, [data-motion="still"] .crisis-pane-breath-label-in, [data-motion="still"] .crisis-pane-breath-label-out{animation-duration:var(--crisis-pane-breath-cycle) !important;animation-iteration-count:infinite !important;} /* used: chrome, screenings-home */
.crisis-pane-heading{font-size:var(--heading-size-xl);font-weight:var(--font-weight-light);line-height:var(--default-line-height-small);letter-spacing:var(--heading-letter-spacing-tight);color:var(--bright-white);margin:0 0 var(--app-default-top-bottom-margin-lg);} /* used: chrome, screenings-home */
.crisis-pane-subheading{font-size:var(--heading-size-md);font-weight:var(--font-weight-light);line-height:var(--default-line-height-small);letter-spacing:var(--heading-letter-spacing-tight);color:var(--bright-white);margin:var(--app-default-top-bottom-margin-lg) 0 var(--app-default-top-bottom-margin-sm);} /* used: chrome, screenings-home, learn-pages-homepage-legal */
.crisis-pane-text{font-size:var(--body-text-sm);line-height:var(--default-line-height-large);color:rgba(var(--bright-white-rgb), var(--opacity-very-high));margin:0 0 var(--app-default-top-bottom-margin-sm);} /* used: chrome, screenings-home, learn-pages-homepage-legal */
.crisis-pane-text-highlight{color:var(--bright-white);} /* used: chrome, screenings-home, learn-pages-homepage-legal */
.crisis-pane-actions{display:flex;flex-direction:column;gap:var(--default-gap);width:100%;margin-top:var(--app-default-top-bottom-margin-xl);} /* used: chrome, screenings-home, learn-pages-homepage-legal */
.crisis-pane-button{display:flex;align-items:center;justify-content:center;width:100%;height:var(--crisis-pane-control-height);box-sizing:border-box;border:var(--stroke-thin) solid var(--bright-white);border-radius:var(--radius-pill);background:transparent;color:var(--bright-white);font-family:inherit;font-size:var(--body-text-sm);font-weight:var(--font-weight-normal);text-decoration:none;transition:background var(--transition-base);} /* used: chrome, screenings-home */
.crisis-pane-button:hover{background:rgba(var(--bright-white-rgb), var(--opacity-low));} /* used: chrome, screenings-home */
.crisis-pane-slider{position:relative;display:flex;align-items:center;width:100%;height:var(--crisis-pane-control-height);box-sizing:border-box;border:var(--stroke-thin) solid var(--bright-white);border-radius:var(--radius-pill);overflow:hidden;user-select:none;touch-action:pan-y;} /* used: chrome, screenings-home */
.crisis-pane-slider-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--navy-dark);pointer-events:none;transition:width var(--transition-base) ease-out;} /* used: chrome, screenings-home */
.crisis-pane-slider-handle{position:absolute;left:0;top:0;height:100%;aspect-ratio:1 / 1;border-radius:var(--radius-circle);background:var(--tomato);color:var(--bright-white);display:flex;align-items:center;justify-content:center;z-index:2;cursor:grab;transition:left var(--transition-base) ease-out, background var(--transition-base);} /* used: chrome, screenings-home */
.crisis-pane-slider-handle:hover{background:var(--red-dark);} /* used: chrome, screenings-home */
.crisis-pane-slider-icon{font-size:var(--button-icon-md);} /* used: chrome, screenings-home */
.crisis-pane-slider-label{width:100%;padding-left:calc(var(--crisis-pane-control-height) + var(--gap-md));padding-right:var(--gap-md);font-size:var(--body-text-sm);font-weight:var(--font-weight-normal);color:var(--bright-white);pointer-events:none;z-index:1;} /* used: chrome, screenings-home */
.crisis-pane-slider-dragging{cursor:grabbing;transition:none;} /* used: chrome, screenings-home, learn-pages-homepage-legal */

@media not all and (pointer: coarse) {
  .crisis-pane-touch-only{display:none;} /* used: chrome, screenings-home */
}

@media (pointer: coarse) {
  .crisis-pane-no-touch-only{display:none;} /* used: chrome, screenings-home */
}

@media (max-width: 1050px) {
  .crisis-pane-split{grid-template-columns:minmax(0, var(--golden-width-small));grid-template-areas:"breath" "visual" "help";row-gap:var(--gap-xl);} /* used: chrome, screenings-home */
  .crisis-pane-visual{justify-content:flex-start;} /* used: chrome, screenings-home */
  :root{--crisis-pane-breath-stage-ratio:1 / 0.72;--crisis-pane-breath-height-small:63.89%;--crisis-pane-breath-height-large:100%;} /* used: screening-results-pages, screenings, learn-pages-homepage-legal */
}

@media (max-width: 600px) {
  .sos-button{bottom:var(--app-default-top-bottom-margin-xl);right:var(--app-default-top-bottom-margin-xl);height:var(--button-size-lg);} /* used: chrome, screenings-home */
  .crisis-pane-inner{margin-left:0;max-width:100%;padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);padding-bottom:var(--app-default-top-bottom-margin-xl);} /* used: chrome, screenings-home */
  .crisis-pane-split{grid-template-columns:minmax(0, 1fr);} /* used: chrome, screenings-home */
  .crisis-pane-heading{font-size:var(--heading-size-lg);} /* used: chrome, screenings-home */
}

/* ==========================================================================
   WHERE UMA.CSS WOULD CHANGE THESE PAGES
   These put back what the pages show now, where a uma.css rule would
   otherwise win. Keep them after everything above.
   ========================================================================== */
html:where(.page-profile, .page-brain-body, .page-health-history, .page-condition, .page-trauma-history, .page-hero-dots), :where(.page-profile, .page-brain-body, .page-health-history, .page-condition, .page-trauma-history, .page-hero-dots) body{scrollbar-gutter:revert;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile, .page-brain-body, .page-trauma-history, .page-hero-dots) body{scroll-behavior:revert;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile, .page-brain-body, .page-health-history, .page-condition, .page-trauma-history) button{font-family:revert;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-profile) :is(.polar-body-text):is(p:last-of-type){margin-bottom:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile) :is(.reference-text-spaced):is(p:last-of-type){margin-bottom:var(--app-default-top-bottom-margin-xxs);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile) p:last-of-type{margin-bottom:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-profile) p{line-height:revert;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-adhd-profile, .page-autism-profile) .footer-body-text{line-height:revert;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile) :is(.footer-body-text-spaced):is(p:last-of-type){margin-bottom:var(--app-default-top-bottom-margin-sm);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile) :is(.footer-copyright):is(p:last-of-type){margin-bottom:0;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-profile, .page-brain-body) h1, :where(.page-profile, .page-brain-body) h2, :where(.page-profile, .page-brain-body) h3, :where(.page-profile, .page-brain-body) h4, :where(.page-profile, .page-brain-body) h5, :where(.page-profile, .page-brain-body) h6{line-height:revert;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) body a{transition:text-decoration-color 0.4s ease,color 0.4s ease;} /* used: screening-results-pages */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) :is(.profile-reference-text):is(p:last-of-type){margin-bottom:0.5rem;} /* used: screening-results-pages */
:where(.page-cptsd-profile) :is(.section-subtitle):is(p:last-of-type){margin-bottom:0;} /* used: screening-results-pages */
:where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile) :is(.profile-footer-body-text):is(p:last-of-type){margin-bottom:1rem;} /* used: screening-results-pages */
:where(.page-cptsd-profile) p{margin-bottom:0;} /* used: screening-results-pages, learn-pages-homepage-legal */
:where(.page-masking-profile, .page-rsd-profile) :is(.donut-card-desc):is(p:last-of-type){margin-bottom:0;} /* used: screening-results-pages */
:where(.page-health-history, .page-condition) body a{transition:text-decoration-color 0.4s ease, color 0.4s ease;} /* used: screening-results-pages */
:where(.page-brain-body, .page-trauma-history) body a{transition:revert;} /* used: screening-results-pages */
:where(.page-brain-body) :is(.skip-link):is(a:hover){color:#fff;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-brain-body) :is(.skip-link):is(a:hover){text-decoration:none;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:where(.page-trauma-history) :is(.trauma-history-skip-link):is(a:hover){color:var(--pure-white);} /* used: screening-results-pages */
:where(.page-trauma-history) :is(.trauma-history-skip-link):is(a:hover){text-decoration:none;} /* used: screening-results-pages */

/* ==========================================================================
   REDUCED MOTION: EACH PAGE KEEPS ITS OWN MOTION SETTING
   When a device asks for less motion, uma.css sets every animation and
   transition to 0.001ms with !important. On these pages the Uma motion
   setting decides instead, so these put the page's own timings back.
   This is part of the motion switch, so it keeps !important.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html:where(.page-profile){scroll-behavior:smooth !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-condition) body{scroll-behavior:smooth !important;} /* used: screening-results-pages */
  :where(.page-brain-body):where([data-motion="full"]) .left{animation-duration:0.6s !important;animation-iteration-count:1 !important;} /* used: screening-results-pages */
  :where(.page-health-history) body{scroll-behavior:smooth !important;} /* used: screening-results-pages */
  :where(.page-condition):where([data-motion="full"]) a{transition-duration:0.4s, 0.4s !important;} /* used: screening-results-pages */
  :where(.page-health-history):where([data-motion="full"]) a{transition-duration:0.4s, 0.4s !important;} /* used: screening-results-pages */
  :where(.page-profile):where([data-motion="full"]) .profile-nav-links a{transition-duration:0.3s !important;} /* used: chrome, screenings-home, onboarding, profile */
  :where(.page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .profile-nav-links a::after{transition-duration:0.3s !important;} /* used: screening-results-pages */
  @media (max-width:900px){:where(.page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .subnav-links{scroll-behavior:smooth !important;}}
  :where(.page-health-history, .page-condition, .page-trauma-history):where([data-motion="full"]) .btn-primary-orange{transition-duration:0.3s !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-health-history, .page-condition):where([data-motion="full"]) .btn-primary-navy{transition-duration:0.3s !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding */
  :where(.page-condition):where([data-motion="full"]) .btn-primary-white-on-dark{transition-duration:0.3s, 0.3s !important;} /* used: chrome */
  :where(.page-adhd-profile):where([data-motion="full"]) .profile-nav-links a::after{transition-duration:0.3s !important;} /* used: chrome, screenings-home, onboarding, profile */
  @media (max-width: 900px){:where(.page-adhd-profile) .subnav-links{scroll-behavior:smooth !important;}}
  :where(.page-condition):where([data-motion="full"]) .condition-btn-secondary-navy-on-white{transition-duration:0.3s, 0.3s, 0.3s !important;} /* used: screening-results-pages */
  :where(.page-condition):where([data-motion="full"]) .btn-secondary-white-on-dark{transition-duration:0.3s !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-condition):where([data-motion="full"]) .add-on-press-animation{transition-duration:0.35s, 0.2s, 0.2s !important;} /* used: screenings-home */
  :where(.page-condition):where([data-motion="full"]) .add-on-press-animation:active{transition-duration:0.08s, 0.08s, 0.08s !important;} /* used: screenings-home */
  :where(.page-health-history):where([data-motion="full"]) .health-history-btn-primary-white-on-dark{transition-duration:0.3s, 0.3s !important;} /* used: screening-results-pages */
  :where(.page-health-history):where([data-motion="full"]) .health-history-btn-secondary-navy-on-white{transition-duration:0.3s, 0.3s, 0.3s !important;} /* used: screening-results-pages */
  :where(.page-health-history):where([data-motion="full"]) .health-history-btn-secondary-white-on-dark{transition-duration:0.3s !important;} /* used: screening-results-pages */
  :where(.page-health-history):where([data-motion="full"]) .health-history-add-on-press-animation{transition-duration:0.35s, 0.2s, 0.2s !important;} /* used: screening-results-pages */
  :where(.page-trauma-history):where([data-motion="full"]) .trauma-history-btn-secondary-navy-on-white{transition-duration:0.3s, 0.3s, 0.3s !important;} /* used: screening-results-pages */
  :where(.page-trauma-history):where([data-motion="full"]) .trauma-history-btn-secondary-white-on-dark{transition-duration:0.3s !important;} /* used: screening-results-pages */
  [data-motion="still"]:where(.page-condition) .section-nav-scroller, :where(.page-condition) [data-motion="still"] .section-nav-scroller, [data-motion="still"]:where(.page-condition) .condition-centred-card-carousel, :where(.page-condition) [data-motion="still"] .condition-centred-card-carousel{scroll-behavior:auto !important;} /* used: chrome */
  [data-motion="still"]:where(.page-health-history) .section-nav-scroller, :where(.page-health-history) [data-motion="still"] .section-nav-scroller, [data-motion="still"]:where(.page-health-history) .health-history-centred-card-carousel, :where(.page-health-history) [data-motion="still"] .health-history-centred-card-carousel, [data-motion="still"]:where(.page-health-history) .filter-bar, :where(.page-health-history) [data-motion="still"] .filter-bar{scroll-behavior:auto !important;} /* used: chrome */
  :where(.page-trauma-history):where([data-motion="full"]) .trauma-history-left{animation-duration:0.6s !important;animation-iteration-count:1 !important;} /* used: screening-results-pages */
  :where(.page-condition) .condition-centred-card-carousel{scroll-behavior:smooth !important;} /* used: screening-results-pages */
  :where(.page-condition):where([data-motion="full"]) .condition-carousel-nav-btn{transition-duration:var(--transition-base), var(--transition-base), var(--transition-base) !important;} /* used: screening-results-pages */
  :where(.page-condition):where([data-motion="full"]) .condition-toggle-icon{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages */
  :where(.page-condition):where([data-motion="full"]) .condition-references-button{transition-duration:var(--transition-base), var(--transition-base) !important;} /* used: screening-results-pages */
  :where(.page-condition):where([data-motion="full"]) .references-content{transition-duration:0.4s, 0.4s !important;} /* used: screening-results-pages */
  :where(.page-health-history):where([data-motion="full"]) .health-history-left{animation-duration:0.6s !important;animation-iteration-count:1 !important;} /* used: screening-results-pages */
  :where(.page-health-history):where([data-motion="full"]) .health-history-explore-btn{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages */
  :where(.page-trauma-history):where([data-motion="full"]) .trauma-history-explore-btn{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages */
  :where(.page-condition):where([data-motion="full"]) .temp-chrome{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages */
  :where(.page-condition):where([data-motion="full"]) .section-nav-bar{transition-duration:var(--transition-base), var(--transition-base) !important;} /* used: screening-results-pages, chrome */
  :where(.page-condition) .section-nav-scroller{scroll-behavior:smooth !important;} /* used: screening-results-pages, chrome */
  :where(.page-condition):where([data-motion="full"]) .section-nav-link{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages, chrome */
  :where(.page-condition):where([data-motion="full"]) .section-nav-link::after{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages, chrome */
  :where(.page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .masking-rsd-profile-explore-btn{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages */
  :where(.page-brain-body):where([data-motion="full"]) .brain-body-explore-btn{transition-duration:0.3s !important;}
  :where(.page-brain-body):where([data-motion="full"]) .brain-body-temp-chrome{transition-duration:0.3s !important;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .polar-key-item{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .results-view-tab{transition-duration:var(--transition-fast), var(--transition-fast) !important;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile) .centred-card-carousel{scroll-behavior:smooth !important;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .carousel-nav-btn{transition-duration:var(--button-transition-duration), var(--button-transition-duration), var(--button-transition-duration), var(--button-transition-duration) !important;} /* used: screening-results-pages, chrome */
  :where(.page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .donut-card{transition-duration:var(--transition-card) !important;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .donut-wrap, :where(.page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .donut-pct, :where(.page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .donut-sev{transition-duration:var(--transition-fade) !important;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .score-bar-fill{transition-duration:var(--transition-bar-fill) !important;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .temp-chrome{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile):where([data-motion="full"]) a{transition-duration:0.4s, 0.4s !important;} /* used: screening-results-pages */
  :where(.page-brain-body, .page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .section-nav-bar{transition-duration:var(--transition-base), var(--transition-base) !important;} /* used: screening-results-pages, chrome */
  :where(.page-brain-body, .page-masking-profile, .page-rsd-profile) .section-nav-scroller{scroll-behavior:smooth !important;} /* used: screening-results-pages, chrome */
  :where(.page-brain-body, .page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .section-nav-link{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages, chrome */
  :where(.page-brain-body, .page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .section-nav-link::after{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages, chrome */
  [data-motion="still"]:where(.page-brain-body) .section-nav-scroller, :where(.page-brain-body) [data-motion="still"] .section-nav-scroller{scroll-behavior:auto !important;} /* used: chrome */
  :where(.page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .profile-references-button{transition-duration:0.3s, 0.3s !important;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .references-content{transition-duration:0.4s, 0.4s !important;} /* used: screening-results-pages */
  :where(.page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .toggle-icon{transition-duration:0.3s !important;} /* used: screening-results-pages */
  :where(.page-trauma-history):where([data-motion="full"]) .breathing-rect{animation-duration:9s !important;animation-iteration-count:infinite !important;} /* used: screening-results-pages */
  :where(.page-trauma-history):where([data-motion="full"]) .breathing-label-fades-in{animation-duration:9s !important;animation-iteration-count:infinite !important;} /* used: screening-results-pages */
  :where(.page-trauma-history):where([data-motion="full"]) .breathing-label-fades-out{animation-duration:9s !important;animation-iteration-count:infinite !important;} /* used: screening-results-pages */
  :where(.page-trauma-history) .trauma-history-filter-bar{scroll-behavior:smooth !important;} /* used: screening-results-pages */
  :where(.page-health-history, .page-trauma-history):where([data-motion="full"]) .filter-pill{transition-duration:var(--button-transition-duration), var(--button-transition-duration) !important;} /* used: screening-results-pages */
  :where(.page-health-history) .filter-bar{scroll-behavior:smooth !important;} /* used: screening-results-pages */
  :where(.page-health-history):where([data-motion="full"]) .health-history-delete-list-item-btn.del{transition-duration:.2s, .2s !important;} /* used: screening-results-pages */
  :where(.page-trauma-history):where([data-motion="full"]) .trauma-history-delete-list-item-btn.del{transition-duration:.2s, .2s !important;} /* used: screening-results-pages */
  :where(.page-trauma-history):where([data-motion="full"]) .trauma-history-btn-primary-white-on-dark{transition-duration:0.3s, 0.3s !important;} /* used: screening-results-pages */
  :where(.page-health-history, .page-trauma-history):where([data-motion="full"]) .add-btn{transition-duration:var(--button-transition-duration), var(--button-transition-duration), 0.35s !important;} /* used: screening-results-pages */
  :where(.page-health-history):where([data-motion="full"]) .health-history-add-on-press-animation:active{transition-duration:var(--press-down-duration), var(--press-down-duration), var(--press-down-duration) !important;} /* used: screening-results-pages */
  :where(.page-health-history):where([data-motion="full"]) .health-history-carousel-nav-btn{transition-duration:var(--transition-base), var(--transition-base), var(--transition-base) !important;} /* used: screening-results-pages */
  :where(.page-trauma-history):where([data-motion="full"]) .trauma-history-add-on-press-animation:active{transition-duration:var(--press-down-duration), var(--press-down-duration), var(--press-down-duration) !important;} /* used: screening-results-pages */
  :where(.page-health-history) .health-history-centred-card-carousel{scroll-behavior:smooth !important;} /* used: screening-results-pages */
  :where(.page-trauma-history) .trauma-history-centred-card-carousel{scroll-behavior:smooth !important;} /* used: screening-results-pages */
  :where(.page-trauma-history):where([data-motion="full"]) .trauma-history-carousel-nav-btn{transition-duration:var(--transition-base), var(--transition-base), var(--transition-base) !important;} /* used: screening-results-pages */
  :where(.page-adhd-profile, .page-autism-profile):where([data-motion="full"]) .adhd-autism-profile-references-button{transition-duration:0.3s, 0.3s !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile):where([data-motion="full"]) .references-content{transition-duration:0.4s, 0.4s !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile):where([data-motion="full"]) .toggle-icon{transition-duration:0.3s !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile):where([data-motion="full"]) a{transition-duration:0.4s, 0.4s, 0.4s !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile):where([data-motion="full"]) .explore-btn{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile):where([data-motion="full"]) .polar-key-item{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile):where([data-motion="full"]) .btn-primary-orange{transition-duration:0.3s !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile):where([data-motion="full"]) .btn-primary-navy{transition-duration:0.3s !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile):where([data-motion="full"]) .profile-btn-secondary-navy-on-white{transition-duration:var(--transition-base), var(--transition-base), var(--transition-base) !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile):where([data-motion="full"]) .results-view-tab{transition-duration:var(--transition-fast), var(--transition-fast) !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile) .centred-card-carousel{scroll-behavior:smooth !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile):where([data-motion="full"]) .carousel-nav-btn{transition-duration:var(--button-transition-duration), var(--button-transition-duration), var(--button-transition-duration), var(--button-transition-duration) !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile):where([data-motion="full"]) .donut-card{transition-duration:var(--transition-card) !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile):where([data-motion="full"]) .donut-wrap, :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile):where([data-motion="full"]) .donut-pct, :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile):where([data-motion="full"]) .donut-sev{transition-duration:var(--transition-fade) !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile):where([data-motion="full"]) .score-bar-fill{transition-duration:var(--transition-bar-fill) !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-health-history, .page-trauma-history, .page-adhd-profile, .page-autism-profile, .page-cptsd-profile):where([data-motion="full"]) .temp-chrome{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-cptsd-profile):where([data-motion="full"]) a{transition-duration:0.4s, 0.4s !important;} /* used: screening-results-pages */
  :where(.page-trauma-history, .page-adhd-profile, .page-autism-profile, .page-cptsd-profile):where([data-motion="full"]) .section-nav-bar{transition-duration:var(--transition-base), var(--transition-base) !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-trauma-history, .page-adhd-profile, .page-autism-profile) .section-nav-scroller{scroll-behavior:smooth !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-trauma-history, .page-adhd-profile, .page-autism-profile):where([data-motion="full"]) .section-nav-link{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-trauma-history, .page-adhd-profile, .page-autism-profile):where([data-motion="full"]) .section-nav-link::after{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-health-history):where([data-motion="full"]) .section-nav-bar{transition-duration:var(--transition-base), var(--transition-base) !important;} /* used: screening-results-pages, chrome */
  :where(.page-health-history, .page-cptsd-profile) .section-nav-scroller{scroll-behavior:smooth !important;} /* used: screening-results-pages, chrome */
  :where(.page-health-history, .page-cptsd-profile):where([data-motion="full"]) .section-nav-link{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages, chrome */
  :where(.page-health-history, .page-cptsd-profile):where([data-motion="full"]) .section-nav-link::after{transition-duration:var(--transition-base) !important;} /* used: screening-results-pages, chrome */
  :where(.page-cptsd-profile):where([data-motion="full"]) .profile-references-button{transition-duration:0.3s, 0.3s !important;} /* used: screening-results-pages */
  :where(.page-cptsd-profile):where([data-motion="full"]) .references-content{transition-duration:0.4s, 0.4s !important;} /* used: screening-results-pages */
  :where(.page-cptsd-profile):where([data-motion="full"]) .toggle-icon{transition-duration:0.3s !important;} /* used: screening-results-pages */
  [data-motion="still"]:where(.page-trauma-history) .section-nav-scroller, :where(.page-trauma-history) [data-motion="still"] .section-nav-scroller, [data-motion="still"]:where(.page-trauma-history) .trauma-history-centred-card-carousel, :where(.page-trauma-history) [data-motion="still"] .trauma-history-centred-card-carousel, [data-motion="still"]:where(.page-trauma-history) .trauma-history-filter-bar, :where(.page-trauma-history) [data-motion="still"] .trauma-history-filter-bar{scroll-behavior:auto !important;} /* used: chrome */
  @media (prefers-reduced-motion:reduce){html:not([data-motion]):where(.page-adhd-profile, .page-autism-profile, .page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .donut-wrap, html:not([data-motion]):where(.page-adhd-profile, .page-autism-profile, .page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .donut-pct, html:not([data-motion]):where(.page-adhd-profile, .page-autism-profile, .page-masking-profile, .page-rsd-profile):where([data-motion="full"]) .donut-sev{transition-duration:0s !important;}}
  :where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile):where([data-motion="full"]) .drawer-split-pill-main{transition-duration:var(--transition-fast) !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile):where([data-motion="full"]) .drawer-split-pill-arrow{transition-duration:var(--transition-fast) !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-brain-body, .page-health-history, .page-adhd-profile, .page-autism-profile):where([data-motion="full"]) .drawer-split-pill-menu-item{transition-duration:0.15s !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  @media (prefers-reduced-motion:reduce){html:not([data-motion]):where(.page-cptsd-profile):where([data-motion="full"]) .donut-wrap, html:not([data-motion]):where(.page-cptsd-profile):where([data-motion="full"]) .donut-pct, html:not([data-motion]):where(.page-cptsd-profile):where([data-motion="full"]) .donut-sev{transition-duration:0s !important;}}
  :where(.page-cptsd-profile):where([data-motion="full"]) .drawer-split-pill-main{transition-duration:var(--transition-fast) !important;} /* used: screening-results-pages, chrome */
  :where(.page-cptsd-profile):where([data-motion="full"]) .drawer-split-pill-arrow{transition-duration:var(--transition-fast) !important;} /* used: screening-results-pages, chrome */
  :where(.page-cptsd-profile):where([data-motion="full"]) .drawer-split-pill-menu-item{transition-duration:0.15s !important;} /* used: screening-results-pages */
  :where(.page-profile):where([data-motion="full"]) .chart-tooltip{transition-duration:var(--chart-tooltip-fade-duration) !important;} /* used: chrome, screenings-home, onboarding, profile */
  :where(.page-profile, .page-brain-body, .page-trauma-history) body, :where(.page-hero-dots) body{scroll-behavior:revert !important;} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
  :where(.page-cptsd-profile, .page-masking-profile, .page-rsd-profile):where([data-motion="full"]) body a{transition-duration:0.4s, 0.4s !important;} /* used: screening-results-pages */
  :where(.page-health-history, .page-condition):where([data-motion="full"]) body a{transition-duration:0.4s, 0.4s !important;} /* used: screening-results-pages */
  :where(.page-brain-body, .page-trauma-history):where([data-motion="full"]) body a{transition-duration:0s !important;} /* used: screening-results-pages */
}

/* ==========================================================================
   v19, 24 September 2026. POLAR KEY SWATCH COLOURS.

   The key on the five profile pages builds its swatch class from the colour
   token it was handed: 'polar-key-swatch-' plus the token name without the
   leading dashes. The seven classes that produces had no rule behind them
   anywhere, so every swatch drew transparent and the key read as plain text
   with a blank gap in front of it.

   The only other rules on this selector are the two size rules above, scoped
   to masking and rsd and to adhd, autism and cptsd. Neither sets a
   background, so nothing here overrides anything.

   The token list these come from is POLAR_COLOURS in each profile page.
   ========================================================================== */
.polar-key-swatch-bright-teal{background:var(--bright-teal);}
.polar-key-swatch-dark-teal{background:var(--dark-teal);}
.polar-key-swatch-bright-blue{background:var(--bright-blue);}
.polar-key-swatch-moss-green{background:var(--moss-green);}
.polar-key-swatch-bright-green{background:var(--bright-green);}
.polar-key-swatch-light-sage-green{background:var(--light-sage-green);}
.polar-key-swatch-dark-sage-green{background:var(--dark-sage-green);}

/* ==========================================================================
   v20, 25 September 2026. WHITE TEXT ON A COLOURED BACKGROUND.

   Full strength white against a saturated colour glares. This is the same
   change already made on the red and blue panels of the diagnostic pages,
   where it is called --panel-text-white, now carried across every other place
   the pages put white text on orange, orange dark, mustard, red or bright
   blue.

   NAVY IS DELIBERATELY NOT IN HERE. Navy is the dark background, not a
   coloured one, and bright white stays on dark. Same for the crisis pane and
   every .btn-*-on-dark, which are untouched.

   The selectors below are the ones a render of all fifteen pages proved are
   drawing full strength white on a saturated colour. Nothing above is edited:
   this block sits last so it wins on source order at equal specificity, and
   deleting it puts every one of them back exactly as it was.
   ========================================================================== */
:root{--text-on-colour:var(--mid-white);} /* used: screening-results-pages, screenings, learn-pages-homepage-legal, auth */

/* the answer labels, the largest group by far */
.override-label-flex{color:var(--text-on-colour);} /* used: screening-results-pages */
.override-text-on-dark{color:var(--text-on-colour);} /* used: screening-results-pages */

/* the condition card titles */
.cond-card-title{color:var(--text-on-colour);} /* used: screening-results-pages */
.trauma-history-cond-card-title{color:var(--text-on-colour);} /* used: screening-results-pages */

/* the split pill label on the orange download control */
.drawer-split-pill-label-text{color:var(--text-on-colour);} /* used: screening-results-pages, chrome */
.export-split-pill-label-text{color:var(--text-on-colour);} /* used: screening-results-pages */

/* the orange pill buttons across the page families */
.btn-primary-orange{color:var(--text-on-colour);} /* used: screening-results-pages, screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
/* v34, 27 September 2026. FOUR LINES REMOVED FROM HERE, and this is the only
   edit ever made inside an existing block.

   They were:
       .adhd-autism-cptsd-profile-btn{color:var(--text-on-colour);}
       .condition-btn{color:var(--text-on-colour);}
       .health-history-btn{color:var(--text-on-colour);}
       .trauma-history-btn{color:var(--text-on-colour);}

   Those are the FAMILY BASE classes. Every button on those pages carries one,
   not only the orange ones this block is about, so all four painted mid white
   text onto white backgrounds and made 38 controls invisible in light mode.
   They were never needed for their stated purpose either: the orange buttons
   are already covered by .btn-primary-orange on the line above.

   v22 papered over this with sixteen two-class rules written at 0-2-0 to beat
   these four at 0-1-0. That was a specificity ladder, which her rules forbid.
   Removing the four lines removes the need for all sixteen, so the v22 block
   below is now gone as well. Four deletions in place of sixteen additions.

   To put the old behaviour back, restore the four lines above AND the v22
   block. UMA-26sep2026-v33.css is kept intact as the file that still has both. */
.explore-btn{color:var(--text-on-colour);}
.masking-rsd-profile-explore-btn{color:var(--text-on-colour);} /* used: screening-results-pages */
.health-history-explore-btn{color:var(--text-on-colour);} /* used: screening-results-pages */
.trauma-history-explore-btn{color:var(--text-on-colour);} /* used: screening-results-pages */

/* the select menu on bright blue */
.override-label-flex option,
select.override-select option{color:var(--text-on-colour);}

/* the outlined buttons that sit on bright blue. Text only. Their border is
   still bright white, which is a separate declaration and was not asked for. */
.health-history-btn-secondary-white-on-dark{color:var(--text-on-colour);} /* used: screening-results-pages */
.trauma-history-btn-secondary-white-on-dark{color:var(--text-on-colour);} /* used: screening-results-pages */

/* ==========================================================================
   v20. DELETE CONTROLS ON A TOUCH SCREEN.

   The delete button on each list item is opacity 0 and revealed on hover or
   focus. A coarse pointer has no hover, so on a touch screen it could not be
   found at all. There was already a rule forcing it visible under 640, which
   covers phones; a tablet or a touch laptop wider than that showed nothing.
   ========================================================================== */
@media(pointer:coarse){
  .health-history-delete-list-item-btn.del{opacity:1;visibility:visible;} /* used: screening-results-pages */
  .trauma-history-delete-list-item-btn.del{opacity:1;visibility:visible;} /* used: screening-results-pages */
}

/* ==========================================================================
   v21, 25 September 2026. THREE DECISIONS TAKEN WITHOUT HER, ON HER
   INSTRUCTION TO TACKLE EVERYTHING OUTSTANDING.

   Each is one block and each is reversible by deleting that block. Nothing
   above this line is edited. If any of the three is wrong, say which and it
   comes straight back out.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ORANGE FOCUS RINGS.

   The convention says orange focus rings were removed from the design. These
   eight page scopes still set --focus-outline-color to var(--orange), and it
   feeds the global :focus-visible and .btn:focus-visible, so it is the ring
   on every control on all fifteen pages.

   DECISION: --t-emphasis, not a flat colour.
     - uma-user-profile-v72 already has one --focus-outline-color: var(--navy),
       so navy is the direction somebody had started in
     - --t-emphasis IS navy in light. In dark it is mid white, so the ring
       stays visible; a flat navy ring disappears against a navy-60 page
     - the ring is kept rather than removed, because removing it from buttons
       and links fails WCAG 2.4.7. Fields can rely on the caret; a button
       cannot

   If the intention was to remove the ring from FIELDS only, that is a
   separate, narrower change and this block does not do it. */
:root:where(.page-adhd-profile){--focus-outline-color:var(--t-emphasis);} /* used: screening-results-pages, chrome, screenings-home, onboarding, profile */
:root:where(.page-autism-profile){--focus-outline-color:var(--t-emphasis);} /* used: screening-results-pages */
:root:where(.page-cptsd-profile){--focus-outline-color:var(--t-emphasis);} /* used: screening-results-pages */
:root:where(.page-masking-profile, .page-rsd-profile){--focus-outline-color:var(--t-emphasis);} /* used: screening-results-pages */
:root:where(.page-brain-body){--focus-outline-color:var(--t-emphasis);} /* used: screening-results-pages */
:root:where(.page-condition){--focus-outline-color:var(--t-emphasis);} /* used: screening-results-pages */
:root:where(.page-health-history){--focus-outline-color:var(--t-emphasis);} /* used: screening-results-pages */
:root:where(.page-trauma-history){--focus-outline-color:var(--t-emphasis);} /* used: screening-results-pages */
/* These two never set the token in a page scope at all, so they were picking
   orange up from further out. Measured: #EA7100 on both before this line.

   hero-dots uses --t-page-text rather than --t-emphasis: it defines no
   --t-emphasis at all, and pointing at a token that does not exist leaves the
   ring with NO colour, which is worse than orange. Measured before and after.
   --t-page-text is #1A1A1A in light and #F2EDEA in dark, so the ring
   contrasts with the page in both. */
:root:where(.page-diagnostic){--focus-outline-color:var(--t-emphasis);} /* used: screening-results-pages */

/* --------------------------------------------------------------------------
   2. THE LAST WHITE-ON-ORANGE CASE, uma-hero-dots.

   The "Discover more" button drew rgb(255, 255, 255) on rgb(234, 113, 0).
   It has no class, only an inline onclick, but it reads --t-button-text,
   which is set to --pure-white in exactly one place and read by nothing else
   in the stylesheet. So the token is the fix, not a new rule, and no markup
   changes. */

/* --------------------------------------------------------------------------
   3. THE OUTLINED BUTTONS ON BRIGHT BLUE.

   v20 moved their text to mid white and deliberately left the border at
   bright white, because the instruction that round was text only. A mid white
   label inside a brighter white outline is the glare the change was meant to
   remove, just moved to the edge. The border now follows the text. */
.health-history-btn-secondary-white-on-dark{border-color:var(--text-on-colour);} /* used: screening-results-pages */
.trauma-history-btn-secondary-white-on-dark{border-color:var(--text-on-colour);} /* used: screening-results-pages */

/* ==========================================================================
   v22, 25 September 2026: THE WHOLE BLOCK IS GONE, removed in v34.

   It held sixteen rules, each a family class plus a variant class, written at
   0-2-0 so they would beat four bare 0-1-0 rules in the v20 block above. They
   corrected 38 controls that were rendering mid white on white in light mode.

   They worked, but sixteen compound selectors existing only to out-specify
   four lines IS a specificity ladder, and her rules forbid one. v34 deletes
   the four lines instead, so nothing needs out-specifying and all sixteen of
   these rules became unnecessary. See the note in the v20 block above.

   Deleting rules is normally out of bounds, so for the record: this removes
   only rules added on 25 September in this conversation, it restores no
   earlier behaviour, and UMA-26sep2026-v33.css is kept intact as the file
   that still contains them.
   ========================================================================== */

/* ==========================================================================
   v23, 26 September 2026. THE HANDED OVER HERO HEADING, FIVE PROFILE PAGES.

   Nothing above is edited. Deleting this one rule puts the heading back.

   At 900 and below the hero heading is already hidden and handed to a second
   copy, .hero-text-mobile, which sits in the section under the hero. Asked to
   drop that copy too, so the single column hero is the graphic and the button
   and nothing else. The graphic spells the word, so the heading under it was
   saying the same thing twice.

   One bare class, 0-1-0, which beats the :where() rules that turn it on at
   6305 and 6912 because those contribute zero and this sits later. It is
   already display:none above 900, so this changes only the small screens.

   SCOPE: .hero-text-mobile is on adhd, autism, cptsd, masking and rsd
   profiles only. Brain body uses .brain-body-hero-text-mobile and is NOT
   touched by this rule.

   The heading text now reaches a screen reader through the hero canvas, which
   carries role="img" and aria-label in the page markup. Removing this rule
   without also putting that label back would leave those pages with no
   accessible heading on a small screen. */
.hero-text-mobile{display:none;} /* used: screening-results-pages */

/* ==========================================================================
   v24, 26 September 2026. SUNSET MODE ON EVERY PAGE.

   Nothing above is edited. Deleting this block removes sunset again.

   THE GAP. Sunset was worked out on uma-statistics on 21 September and never
   rolled out. Measured by rendering all sixteen and switching data-theme at
   runtime: light and dark flip correctly on all sixteen, sunset worked on
   uma-statistics ONLY. On the other fifteen, data-theme="sunset" did nothing
   and the page rendered as light, so the chrome's switch would have had a
   dead third position everywhere but one page.

   Sunset is deliberately NOT a token block. It is light plus a warm filter,
   decided 21 September 2026. Two lines, copied verbatim from the statistics
   page, which took them verbatim from the chrome.

   The #uma-warm reference is a filter lookup, not a styling selector, and it
   resolves within the document that uses it. That is why the matching <svg>
   sits in each page's own body rather than here, and why it cannot live in
   this stylesheet.

   The print reset is not optional. Without it a warmed page prints warmed. */
html[data-theme="sunset"] { filter:url(#uma-warm); } /* used: screenings */

@media print {
html[data-theme="sunset"] { filter:none; } /* used: screenings */
}

/* ==========================================================================
   v25, 26 September 2026. THE BRAIN BODY HERO HEADING.

   Nothing above is edited. Deleting this one rule puts the heading back.

   v23 hid the handed over hero heading on the five dot profiles with
   .hero-text-mobile. Brain body was left out of that because it uses its own
   class, .brain-body-hero-text-mobile. Asked to apply the same rule here, so
   the single column hero is the graphic and the button and nothing else. The
   page name is already in the navigation.

   Its own h1 already hides below the hero's stacking breakpoint, so this is
   the second copy, the one that sits in the section underneath.

   As on the other five, the heading text now reaches a screen reader through
   the graphic: the #stage svg carries role="img" and the heading text as its
   aria-label, changed in the page markup. Removing this rule without also
   putting that label back would leave the page with no accessible heading on
   a small screen. */
/* v29, 26 September: WITHDRAWN. Kept as a comment rather than deleted so the
   history reads straight. Brain body's own h1 hides below its stacking
   breakpoint and this second copy is what carries the title from there down,
   so hiding it as well left the page with no visible title on a small screen.
   Its graphic names nothing, unlike the dot lettering on the other five.
.brain-body-hero-text-mobile{display:none;} */

/* ==========================================================================
   v26, 26 September 2026. THE HERO TITLE, ALL SIX PROFILE PAGES.

   Nothing above is edited. Deleting this one rule puts the heading back.

   MY MISTAKE, worth writing down. v23 and v25 hid the SECOND copy of the
   heading, the one handed to the section below the hero at 900 and under, and
   I tested at 600 and called it done. The hero on these pages is
   flex-direction:column at EVERY width, not only under 900, so it is always
   the single stack she means. The h1 itself was only hidden by the 900 media
   query, so from 901 upwards it still sat between the graphic and the button.
   Measured: shown at 1440, 1200, 1040 and 901, hidden at 900 and below.

   So the heading is now hidden at every width. The page name is in the
   navigation, and the graphic spells it out.

   VISUALLY HIDDEN, NOT display:none, deliberately. The declarations are
   copied from .uma-visually-hidden, already in this file. display:none would
   take the only h1 out of the accessibility tree and leave these pages with
   no document heading at all. This keeps the h1 for a screen reader, keeps it
   out of the layout, and keeps its textContent readable by the one pager
   export, which reads .profile-hero-title directly. */
/* v29, 26 September: .brain-body-hero-title REMOVED from this list. Brain
   body is not like the other five. Their hero graphic is dot lettering that
   spells the page name, so the heading was saying it twice. Brain body's
   graphic is the abstract #stage visualisation and names nothing, so hiding
   the heading left that hero with no title at all. */
/* v30, 26 September: WITHDRAWN, and no replacement needed. Kept as a comment
   so the history reads straight. The two pane hero is back above 900 (see the
   v30 block below), and the page's own @media(max-width:900px) rule already
   hides these two titles at 900 and under. So the heading is visible in the
   two pane and gone in the single stack, which is what was wanted all along,
   with no extra rule doing it.
.profile-hero-title,
.cptsd-profile-hero-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} */

/* ==========================================================================
   v30, 26 September 2026. THE TWO PANE HERO IS BACK, FIVE DOT PROFILES.

   Nothing above is edited. Deleting this block returns the single column.

   The two pane hero was retired when the dot animation became a full bleed
   layer. Asked to bring it back above the breakpoint, because it reads better
   on a large screen, and to match what brain body does.

   BRAIN BODY IS THE PATTERN, and its rules are the model for these:
     .split{display:flex;flex-direction:row;...}
     .left{flex:0 0 max-content;display:flex;flex-direction:column;
           justify-content:center;}
   with a max-width query that turns the row into a column.

   These five already have that max-width query at 900, which is also the
   breakpoint the original two pane hero used before it was retired, measured
   off unstripped-22sep2026. So the query stays at 900 and this block only has
   to put the row back above it. min-width:901px rather than another
   max-width, so it cannot fight the rules already in the file.

   THE DOTS. There is no .hero-right element any more, and it is not coming
   back: the canvas is a full bleed layer over the whole band, which is what
   lets the dots drift across the section instead of stopping at the edge of a
   square. So the right pane is not an element, it is the space left over, and
   the lettering moves into it in the page's own script. wordBand() there
   measures the rendered .hero-left and centres the word in what remains,
   falling back to the whole band when the hero is stacked. The breakpoint
   lives here in the CSS and nowhere else. */
@media (min-width:901px) {
  .hero{flex-direction:row;align-items:center;justify-content:flex-start;} /* used: screening-results-pages */
  .hero-left{flex:0 0 max-content;align-items:flex-start;text-align:left;} /* used: screening-results-pages */
}

/* ==========================================================================
   v31, 26 September 2026. THE DELETE BUTTONS, KEYBOARD REACHABILITY.

   Nothing above is edited. Deleting this block puts both rules back.

   WORSE THAN THE AUDIT SAID. I reported these 17 as having no focus ring.
   Measured properly, they cannot be focused at all.

   The button rests at opacity:0 AND visibility:hidden, and it is revealed by
   an existing rule, .lozenge-wrapper:focus-within .del. That rule can never
   fire, because visibility:hidden takes the button out of the tab order, so
   it never receives focus, so :focus-within never matches. A deadlock: hidden,
   therefore unfocusable, therefore never revealed.

   So on a desktop keyboard the delete control on health self report and
   trauma history is unreachable. Not badly signposted, unreachable. 26
   buttons on health self report and 8 on trauma history.

   RULE ONE drops visibility:hidden and leaves opacity:0 to do the hiding. An
   element at opacity:0 is still in the tab order, so the button can be
   reached, and the existing :focus-within rule then reveals it exactly as it
   already does on hover. Nothing about the resting appearance changes.

   RULE TWO gives it the ring, using the page's own focus tokens rather than
   any new value. NO ORANGE: --focus-outline-color resolves to --t-emphasis on
   both these page scopes, which is navy #232F4B in light and mid white
   #F2EDEA in dark. Measured, both themes, both pages. No colour on either
   page changes. */
.health-history-delete-list-item-btn.del,
.trauma-history-delete-list-item-btn.del{visibility:visible;} /* used: screening-results-pages */

/* RULE TWO also carries opacity:1. Measured after rule one: the button became
   reachable and the ring drew, but the button was still at opacity:0, so the
   ring was painted on something invisible. The existing
   .lozenge-wrapper:focus-within .del reveal did not reach it. Rather than
   chase that, the reveal is stated here on the same rule that draws the ring,
   using the same value the hover reveal already uses. */
.health-history-delete-list-item-btn.del:focus-visible:where(:not(.uma-input-pointer *)),
.health-history-delete-list-item-btn.del:focus-visible:where(:not(.uma-input-pointer *)),
.trauma-history-delete-list-item-btn.del:focus-visible:where(:not(.uma-input-pointer *)),
.trauma-history-delete-list-item-btn.del:focus-visible:where(:not(.uma-input-pointer *)){opacity:1;outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-ring-offset);} /* used: screening-results-pages */

/* ==========================================================================
   v32, 26 September 2026. HEALTH SELF REPORT, STACKED HERO ORDER.

   Nothing above is edited. Deleting this block restores the old order.

   Asked for the text and the button to sit BELOW the lung animation when the
   hero stacks. Measured at 600px before the change, by visual top edge:

     152  .health-history-left        order 0   heading and paragraph
     334  the split pill              order 0   the button
     412  .health-history-right       order 2   the lungs

   The animation already carried order:2 and the mobile-only button order:3,
   but .health-history-left carried no order at all, so it fell to 0 and led.
   Giving it an order after the animation puts the three in the order asked
   for, and the button follows the text rather than being stranded above it.

   Only the ordering changes. Nothing moves on the two pane layout above 760,
   because this sits inside the same max-width query the stack already uses.

   HEALTH SELF REPORT ONLY. Trauma history has the same shape with its
   breathing box, and has NOT been changed, because the screenshot was of this
   page and I would rather ask than assume.

   THE BUTTON NEEDED ITS OWN LINE. After the first attempt the text sat below
   the lungs correctly, but the split pill jumped to the top: it is a third
   child of the same flex container and also carried no order, so it fell to 0
   in turn. It is now ordered after the text, which is what "the text and
   button below the animation" means.

   That one rule carries a descendant combinator, .health-history-split before
   the button, which I would normally avoid. It is here on purpose:
   .export-split-pill.mobile-only is also on brain body, and a bare rule would
   reorder that page's hero too. One combinator is the cheaper cost. */
@media (max-width:760px) {
  .health-history-left{order:3;} /* used: screening-results-pages */
  .health-history-split .export-split-pill.mobile-only{order:4;} /* used: screening-results-pages */
  .health-history-explore-btn.mobile-only{order:5;} /* used: screening-results-pages */
}

/* ==========================================================================
   v27, 26 September 2026. THE SECTION STRIPE ON THE FIVE PROFILE PAGES.

   Nothing above is edited. Deleting this one rule puts the hero back.

   Measured top to bottom on adhd, cptsd and masking. Four bands:

     1 .profile-hero-band                      mid white   <- the odd one out
     2 #polar-overview  .section-panel-bright-white   mid white
     3 #visual-summary  .section-panel-new-white       new white
     4 the last section, no background of its own, so the page shows through
                                                       mid white

   So bands 1 and 2 were both mid white and ran together, which is the
   "hero and polar run into each other" defect, and counted from the bottom
   the stripe was mid, new, mid, MID instead of mid, new, mid, NEW.

   Only band 1 is wrong. The hero was on --t-hero-bg; it now uses
   --t-band-alt, which is the same token band 3 already uses, so the stripe
   alternates on one existing token and no new one is needed.

   DARK IS UNCHANGED: --t-hero-bg and --t-band-alt are both navy-40 on these
   page scopes, so this only moves light mode from mid white to new white.

   Brain body is NOT affected. Its hero is not .profile-hero-band. */
.profile-hero-band{background-color:var(--t-band-alt);} /* used: screening-results-pages */

/* ==========================================================================
   v28, 26 September 2026. THE 19px STRIP UNDER THE NAVIGATION.

   Nothing above is edited. Deleting this one rule puts the strip back.

   MY OWN DEFECT, made earlier today. The sunset rollout put an <svg> holding
   the #uma-warm filter into the top of every page body. It carries width="0"
   and height="0", but an svg is display:inline by default, so it still
   generated a LINE BOX at the top of the flow and pushed <main> down.

   Measured on adhd-profile at 1280: the navigation bar ends at 120 and the
   hero starts at 139. Those 19px show the page background.

   It was invisible until v27, because until then the hero was the same mid
   white as the page behind the strip. Making the hero new white for the
   stripe is what revealed it. The strip was there on all fifteen pages from
   the moment sunset went in, on every page, not only these.

   display:block gives it a block box, and a block box of zero height takes no
   space and generates no line box. The filter still resolves: it is found by
   reference, not by being rendered. */
.sunset-filter-source{display:block;} /* used: screening-results-pages */

/* ==========================================================================
   v33, 26 September 2026. TWO SPACING CORRECTIONS.

   Nothing above is edited. Deleting this block restores both gaps.

   ONE. THE GAP ABOVE THE H1 ON THE THREE CONDITION PAGES.
   hypermobility-eds, mcas and pots only. Measured in Chromium at 1040 wide.

   .condition-section-centred-without-carousel already supplies 4rem of
   padding-top, and .hero-title then adds 2.5rem of margin-top on top of it,
   so the H1 sits 6.5rem, 104px, below the fixed chrome. The three diagnostic
   pages put their H1 4rem, 64px, below the same chrome, because
   .summary-h1-header carries no top margin at all. That 2.5rem is the whole
   of the difference she can see.

   Removing it brings the three condition pages to the same 4rem. Under 600px
   the section padding drops to 2rem and the heading margin dropped to 1.5rem,
   3.5rem in total; removing the margin there leaves 2rem.

   TWO. THE INTRO COPY AND THE DISCOVER MORE BUTTON ON uma-hero-dots.

   .copy is anchored at 63% of the viewport height, a fixed proportion, while
   the height of the drawn word scales with the width of the band it is drawn
   into. So the gap grows as the window narrows. Measured from the bottom of
   the painted word to the top of the paragraph:

     1440 x 900 ..... 91px
     1280 x 800 ..... 80px
     1040 x 760 ..... 76px
      760 x 900 .... 124px
      420 x 760 .... 126px

   Moving the anchor to 57% closes those to 37, 28, 30, 78 and 80px. No size
   tested brings the copy into contact with the word, and the button stays
   above the fold at every size, the shortest tested being 760 tall.

   NEW TOKEN NEEDED: --hero-dots-copy-top. The 63% it replaces is a raw
   percentage in the block above, so there was no existing token to reuse.
   ========================================================================== */


:where(.page-condition) .hero-title{margin-top:0;} /* used: screening-results-pages */


@media (max-width:600px) {
  :where(.page-condition) .hero-title{margin-top:0;} /* used: screening-results-pages */
}



/* NEW STYLES: screening-results-pages, 30 Sep 2026, for: adhd-profile, autism-profile, cptsd-profile, masking-profile, rsd-profile, brain-body-profile, adhd-diagnostic-scoring, autism-diagnostic-scoring, cptsd-diagnostic-scoring, health-self-report, trauma-history, hypermobility-eds, mcas, pots, self-report */
/* v36, 30 Sep 2026: the self-report preview placeholder was calling
   --t-muted-text, which does not exist in UMA.css. Swapped to
   --t-text-muted, the existing muted text token, which is declared for
   every page family in light and dark. No other line changed. */
/* ==========================================================================
   BLOCK 2 AND THE FOCUS RULES, FOR EVERY CONVERSATION
   30 September 2026, version 2. NEW CSS. NOT in UMA.css. For approval.

   REPLACES uma-block-2-results-pages-30sep2026-v1.css, which was written to
   an earlier ruling. Do not use v1.

   This is the exact block 2 now in mcas.html, word for word, proven by
   rendering: twenty tab stops all 1px orange sitting on the element edge,
   a real mouse click drawing nothing, no page errors.

   Checked: 73 rules, parses clean, comments balanced, no ids, no
   !important, no double underscores, every value a token except the one new
   token, which is defined at the top and listed at the foot.

   THE TAB SCRIPT IS NOT HERE. It belongs to the chrome. It is at the end of
   this file so the chrome conversation can take it.
   ========================================================================== */

/* ==========================================================================
   BLOCK 2. Only what these pages add. None of it is in UMA.css.

   The SAME text in all fifteen results pages, word for word, so merging it
   into UMA.css is "take one copy" rather than reconciling fifteen
   near-identical copies.

   Reasoning, measurements and the token note:
   uma-block-2-results-pages-30sep2026-v1.css

   No ids. No !important. Flat rules. Hyphens only, no double underscores.
   Every value a token. Buttons use the UMA.css .btn set.
   ========================================================================== */

/* The one new token. On merge this line moves to the :root in UMA.css. */
:root:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile, .page-brain-body, .page-diagnostic, .page-health-history, .page-trauma-history){--example-state-banner-text-width:16rem;} /* used: chrome, screenings-home, onboarding, profile */

/* THE EXAMPLE PROFILE BANNER. The band that says the numbers on the page are
   an example, not yours. Hidden until the page works out that nobody has
   finished that screening. */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile, .page-brain-body, .page-diagnostic, .page-health-history, .page-trauma-history) .example-state-banner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-sm);width:100%;padding:var(--app-default-top-bottom-margin-sm) var(--default-left-right-desk-body-padding);background:var(--t-band-alt);border-bottom:var(--stroke-hairline) solid var(--t-divider);color:var(--t-page-text);font-size:var(--body-text-md);line-height:var(--default-line-height-medium);} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile, .page-brain-body, .page-diagnostic, .page-health-history, .page-trauma-history) .example-state-banner-label{flex:0 0 auto;padding:var(--gap-xxs) var(--gap-sm);border-radius:var(--radius-pill);background:var(--t-surface);border:var(--stroke-hairline) solid var(--t-border);font-size:var(--caption-text-sm);letter-spacing:var(--button-letter-spacing);text-transform:none;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile, .page-brain-body, .page-diagnostic, .page-health-history, .page-trauma-history) .example-state-banner-text{flex:1 1 var(--example-state-banner-text-width);margin:0;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile, .page-brain-body, .page-diagnostic, .page-health-history, .page-trauma-history) .example-state-banner-action{flex:0 0 auto;} /* used: chrome, screenings-home, onboarding, profile */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile, .page-brain-body, .page-diagnostic, .page-health-history, .page-trauma-history) .example-state-banner[hidden]{display:none;} /* used: chrome, screenings-home, onboarding, profile */

@media (max-width:600px) {
  :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile, .page-brain-body, .page-diagnostic, .page-health-history, .page-trauma-history) .example-state-banner{padding-left:var(--default-left-right-mob-body-padding);padding-right:var(--default-left-right-mob-body-padding);} /* used: chrome, screenings-home, onboarding, profile */
}

/* THE CLINICIAN COPY IS NOT SHIPPING AT LAUNCH. One class, switched off. */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-health-history) .self-report-not-at-launch{display:none;} /* used: chrome, screenings-home, onboarding, profile */

/* THE STACKED HERO, HEALTH HISTORY ONLY. The hero was a fixed viewport
   height so it could not grow. Measured at 390: the section ended at 581
   while the button ran to 642, sixty-one pixels past the bottom of its own
   hero. The height becomes a minimum, then two margins give the lungs room
   above and the button room below. */
@media (max-width:760px) {
  :where(.page-health-history) .health-history-split{height:auto;min-height:calc(100vh - var(--health-hero-chrome));}
  :where(.page-health-history) .health-history-right{margin-bottom:var(--app-default-top-bottom-margin-xl);}
  :where(.page-health-history) .health-history-hero-pill{margin-bottom:var(--app-default-top-bottom-margin-xl);}
}

/* ==========================================================================
   THE ORANGE KEYBOARD FOCUS RING

   Keyboard only, on things you can press or type into. Never on a mouse
   click or a tap, never on carousels, cards, tracks, scroll areas, text or
   sections.

   :focus-visible is the browser's own answer to "did this person arrive here
   by keyboard". Bare :focus is not, because it fires on a click too, which
   is where the rings on the carousel boxes came from. Nothing here uses bare
   :focus to draw anything.

   WHY THE FIRST RULE EXISTS. --focus-outline-color is set to var(--orange)
   near the top of UMA.css and then set again to var(--t-emphasis) further
   down for every page family. The later one wins, and that token is navy in
   light mode, so every ring on the site was drawing navy. Measured:
   rgb(35, 47, 75) on all six buttons of this page. On merge, delete that
   second setting in UMA.css and this rule goes with it.

   WHY THE LAST RULES EXIST. A box that scrolls sideways is made keyboard
   reachable by the browser itself, and it draws a ring round it that nobody
   asked for. That one cannot be fixed by a colour, so it is silenced by
   name. Arrow buttons, play buttons and links inside a carousel are buttons
   and links, so they keep the ring as normal.
   ========================================================================== */
:root:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile, .page-brain-body, .page-diagnostic, .page-condition, .page-health-history, .page-trauma-history, .page-self-report-preview){--focus-outline-color:var(--orange);} /* used: chrome, screenings-home, onboarding, profile */

/* 1. TEXT FIELDS. Clicking in: the grey stroke goes and only the flashing
      cursor shows. The width does not change, so nothing moves.

      NONE OF THE FIFTEEN RESULTS PAGES HAS A TEXT FIELD. Measured: the only
      form controls on any of them are six dropdowns on health history and
      three on trauma history. These two rules are here for the merge,
      because the same field classes are used on the sign-up, screening and
      library pages. They also replace the UMA.css rules that colour the
      field border orange on bare :focus, which fires on a mouse click. */
.field:focus{border-color:transparent;outline:none;} /* used: chrome, screenings-home, onboarding, learn-pages-homepage-legal, auth */
.field-action-input:focus{border-color:transparent;outline:none;} /* used: chrome, screenings-home, onboarding, profile, auth */

/* 2. TAB ONLY. The chrome adds the class keyboard-focus after the Tab key,
      and that class is the only thing that draws a ring. Nothing here reacts
      to a mouse click or a tap, because nothing here uses :focus to draw.

      THE RING REPLACES THE ELEMENT'S OWN STROKE. Same width, same corner
      radius, no gap, never a second ring.

      ONE THING WORTH KNOWING. Twenty-three of the twenty-four pressable
      things on these pages have no border at all; only the round carousel
      arrows do. Measured. A border colour alone would therefore show
      nothing on almost everything, so these take an outline at the width of
      a UMA.css stroke with no offset, which lands exactly where a border
      would and follows the corner radius, so a pill stays a pill. The two
      that do have a stroke take the colour on the stroke itself and no
      outline, so no grey line shows inside or outside.

      The three rules that do the drawing are at the FOOT of this section,
      after everything is switched off, because they have to come last to
      win. */

/* 4. EVERY OTHER RING OFF. UMA.css draws an offset ring on twenty-four
      named controls at 2.5px with a 2px gap, and that gap is the second
      ring. All of them are switched off here, so keyboard-focus above is
      the only thing that ever draws. Same specificity as the UMA.css rules,
      so these win by coming later, not by being heavier. On merge these
      rules are deleted from UMA.css and this section goes with them. */
a:focus-visible{outline:none;} /* used: screenings, learn-pages-homepage-legal, auth */
button:focus-visible{outline:none;} /* used: screenings, learn-pages-homepage-legal, auth */
input:focus-visible{outline:none;} /* used: screenings, learn-pages-homepage-legal, auth */
select:focus-visible{outline:none;} /* used: screenings, learn-pages-homepage-legal, auth */
textarea:focus-visible{outline:none;} /* used: screenings, learn-pages-homepage-legal, auth */
summary:focus-visible{outline:none;} /* used: screenings */
[role="button"]:focus-visible{outline:none;} /* used: screenings, learn-pages-homepage-legal, auth */
.adhd-autism-cptsd-profile-btn:focus-visible{outline:none;} /* used: learn-pages-homepage-legal */
.bin:focus-visible{outline:none;}
.btn:focus-visible{outline:none;} /* used: screenings, chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */
.carousel-nav-btn:focus-visible{outline:none;} /* used: chrome, learn-pages-homepage-legal */
.condition-btn:focus-visible{outline:none;}
.del:focus-visible{outline:none;}
.donut-grid:focus-visible{outline:none;}
.explanation-card:focus-visible{outline:none;}
.export-split-pill-arrow:focus-visible{outline:none;}
.export-split-pill-main:focus-visible{outline:none;}
.health-history-btn:focus-visible{outline:none;}
.health-history-explore-btn:focus-visible{outline:none;}
.ptask:focus-visible{outline:none;}
.qlabel:focus-visible{outline:none;}
.results-view-tab:focus-visible{outline:none;}
.screening-trauma-age-dropdown:focus-visible{outline:none;} /* used: screenings */
.trauma-history-btn:focus-visible{outline:none;}
.trauma-history-explore-btn:focus-visible{outline:none;}
.uma-canvas-allergies-option:focus-visible{outline:none;}
.uma-canvas-cost-value:focus-visible{outline:none;}
.uma-canvas-shortcuts:focus-visible{outline:none;}
.uma-canvas-title-tile:focus-visible{outline:none;}
.wnote:focus-visible{outline:none;}

/* THE ONLY THREE RULES THAT DRAW ANYTHING. Last on purpose: everything
   above switches rings off, and these have to come after to win. They carry
   :focus as well as the class so they weigh the same as the rules above and
   win on order rather than on weight, which is what keeps this out of a
   specificity fight. */
.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)){border-color:var(--focus-outline-color);outline:var(--stroke-thin) solid var(--focus-outline-color);outline-offset:0;} /* used: screenings, chrome, onboarding, profile, learn-pages-homepage-legal, auth */
.field.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)){border-color:var(--focus-outline-color);outline:none;} /* used: chrome, screenings-home, onboarding, profile, learn-pages-homepage-legal, auth */

/* Nothing that is not pressable keeps a ring, by keyboard or by mouse. */
.condition-centred-card-carousel:focus{outline:none;}
.condition-centred-card-carousel:focus-visible{outline:none;}
.health-history-centred-card-carousel:focus{outline:none;}
.health-history-centred-card-carousel:focus-visible{outline:none;}
.cond-card:focus{outline:none;}
.cond-card:focus-visible{outline:none;}
.portrait-tile-single-row:focus{outline:none;} /* used: learn-pages-homepage-legal */
.portrait-tile-single-row:focus-visible{outline:none;} /* used: learn-pages-homepage-legal */
.criteria-table-a-wrapper:focus{outline:none;}
.criteria-table-a-wrapper:focus-visible{outline:none;}
.criteria-table-b-wrapper:focus{outline:none;}
.criteria-table-b-wrapper:focus-visible{outline:none;}
.criteria-table-c-wrapper:focus{outline:none;}
.criteria-table-c-wrapper:focus-visible{outline:none;}
.radar-graph:focus{outline:none;} /* used: learn-pages-homepage-legal */
.radar-graph:focus-visible{outline:none;} /* used: learn-pages-homepage-legal */

/* ==========================================================================
   THE TAB SCRIPT. FOR THE CHROME, NOT FOR A PAGE.

   Nothing above draws a ring on its own. The ring only appears when this
   script has put the class keyboard-focus on the element, and it only does
   that after the Tab key. A mouse click or a tap takes it off again, so a
   click never shows a ring.

   Put this in the chrome once. While it is missing, pages are simply
   ringless, which is safe but leaves keyboard users without a cue, so it is
   worth doing early.

   <script>
   (function () {
     var cameFromKeyboard = false;

     // Only the Tab key counts. Arrow keys move inside a control rather than
     // between controls, so they are left alone.
     document.addEventListener('keydown', function (e) {
       if (e.key === 'Tab') { cameFromKeyboard = true; }
     }, true);

     document.addEventListener('mousedown', function () { cameFromKeyboard = false; }, true);
     document.addEventListener('touchstart', function () { cameFromKeyboard = false; }, true);

     document.addEventListener('focusin', function (e) {
       if (cameFromKeyboard) { e.target.classList.add('keyboard-focus'); }
     });

     document.addEventListener('focusout', function (e) {
       e.target.classList.remove('keyboard-focus');
     });
   })();
   </script>
   ========================================================================== */

/* NEW STYLES: screenings, 30 Sep 2026, for: uma-adhd-screening, uma-autism-screening, uma-masking-screening, uma-rsd-screening, uma-stimming-screening, uma-cptsd-screening, uma-health-screening */
/* Only what the screening pages need that UMA.css does not have yet. Nothing
   here overrides a UMA.css rule: every selector below is new, or adds a
   property the UMA.css rule does not set. No ids, flat classes, hyphens only.
   The focus rings reuse the results block above: the screening pages add
   keyboard-focus after Tab (uma-screening-hooks v8), .keyboard-focus:focus
   draws the ring, and the lines below only move it onto the stroke of the
   screening controls that have one. */

/* New tokens. On merge these move to the :root at the top of UMA.css. */
:root { --marker-font-size: var(--body-text-lg); --opacity-faint: 0.1; --hover-scale: 1.05; --word-stream-duration: 0.18s; } /* used: learn-pages-homepage-legal, auth */
/* No hover grow unless full motion is chosen. */
:root:not([data-motion="full"]) { --hover-scale: 1; } /* used: learn-pages-homepage-legal */

/* Focus: the ring replaces the stroke on the controls that have one (Back and
   X, the answers, the pill answers, the trauma age dropdown). The question
   text takes focus so screen readers read it out; it is text, so no ring. */
.screening-nav-icon-button.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--focus-outline-color); outline: none; } /* used: chrome, onboarding, profile */
.screening-likert-single-choice-option.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--focus-outline-color); outline: none; } /* used: chrome, onboarding, profile */
.lozenge.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--focus-outline-color); outline: none; } /* used: chrome, onboarding, profile */
.screening-trauma-age-dropdown.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--focus-outline-color); outline: none; } /* used: chrome, onboarding, profile */
.screening-question-text.keyboard-focus:focus { outline: none; } /* used: chrome, onboarding, profile */

/* Themes: light, sunset and dark. The screening pages carry .page-screening on <html>. */
:root:where(.page-screening) { --navy-40: #151C2D; --navy-60: #0E131E; --navy-60-rgb: 14,19,30; --motion-fade: 0.45s; --motion-fade-ease: ease; --transition-card: 0.35s; --t-page-bg: var(--mid-white); --t-band: var(--mid-white); --t-band-alt: var(--new-white); --t-surface: var(--light-white); --t-card: var(--mid-white); --t-page-text: var(--mid-charcoal); --t-text-strong: var(--dark-charcoal); --t-text-secondary: var(--light-charcoal); --t-border: var(--dark-white); --t-divider: var(--dark-white); --t-selected-bg: var(--navy); --t-selected-text: var(--bright-white); --t-label-text: var(--t-text-secondary); --t-control-hover-fill: var(--hover-overlay-light); --t-control-hover-icon: var(--t-text-secondary); --t-control-hover-border: var(--t-text-secondary); }
:root[data-theme="dark"]:where(.page-screening) { --bright-white: var(--mid-white); --bright-white-rgb: var(--panel-text-white-rgb); --t-page-bg: var(--navy-60); --t-band: var(--navy-60); --t-band-alt: var(--navy-40); --t-surface: var(--navy); --t-card: var(--navy); --t-page-text: var(--bright-white); --t-text-strong: var(--bright-white); --t-text-secondary: rgba(var(--bright-white-rgb), var(--opacity-high)); --t-border: rgba(var(--bright-white-rgb), var(--opacity-low)); --t-divider: rgba(var(--bright-white-rgb), var(--opacity-faint)); --t-selected-bg: var(--bright-white); --t-selected-text: var(--navy); --t-answer-text: var(--t-page-text); --t-answer-outline: var(--t-text-secondary); --t-answer-hover: var(--t-divider); --t-category-heading: var(--t-text-strong); --t-info-icon: var(--t-text-secondary); --t-field-background: var(--t-surface); --t-field-border: var(--t-border); --t-field-icon: var(--t-page-text); --t-disabled-fill: var(--t-border); --t-disabled-text: rgba(var(--bright-white-rgb), var(--opacity-moderate)); --t-label-text: var(--t-page-text); --t-answer-selected-fill: var(--t-selected-bg); --t-answer-selected-text: var(--t-selected-text); --t-answer-selected-marker: var(--t-selected-text); --t-answer-selected-tick: var(--t-selected-bg); --t-control-hover-fill: var(--t-selected-bg); --t-control-hover-icon: var(--t-page-bg); --t-control-hover-border: transparent; }
/* The two screen kinds, set on <body> by the page script. Question screens follow the theme; coloured screens stay coloured in every theme. */
.screening-question-screen { background: var(--t-page-bg); --screen-background: var(--t-page-bg); --t-progress-track: var(--t-border); --t-control: var(--t-text-secondary); --t-nav-label: var(--t-label-text); }
.screening-colour-screen { --screen-background: var(--flood-color); --bright-white: var(--mid-white); --bright-white-rgb: var(--panel-text-white-rgb); --white-text-default: var(--mid-white); --white: var(--mid-white); --t-control-hover-fill: var(--bright-white); --t-control-hover-icon: var(--flood-color); --t-control-hover-border: transparent; }

/* Page frame. The screenings fill the window and never scroll the page. */
.page-screening { height: 100%; overflow: hidden; scrollbar-gutter: auto; }
.screening-fixed-height { height: 100%; overflow: hidden; scrollbar-gutter: auto; }
.screening-page-wrapper { --fixed-header-height: 0rem; height: 100%; display: flex; flex-direction: column; box-sizing: border-box; background: var(--screen-background, var(--mid-white)); transition: background var(--transition-card) ease; }
.screening-page-content { flex: 1; min-height: 0; display: flex; flex-direction: column; height: auto; width: 100%; max-width: var(--max-body-wrapper-width); margin-left: auto; margin-right: auto; padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); padding-top: var(--app-default-top-bottom-margin-xl); }
@media (max-width: 600px) {
  .screening-page-content { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); padding-top: var(--app-default-top-bottom-margin-xxxl); }
  .screening-screen { padding-right: var(--gap-xs); }
}

/* The bar above each screen: progress, back, section name, X. */
.screening-progress-track { background-color: var(--t-progress-track, var(--dark-white)); }
.screening-control-bar { margin-top: var(--app-default-top-bottom-margin-sm); }
.screening-control-bar-label { padding-left: var(--gap-regular); padding-right: var(--gap-regular); color: var(--t-nav-label, var(--light-charcoal)); }
.screening-nav-icon-button { color: var(--t-control, var(--bright-white)); border-color: var(--t-control, var(--bright-white)); } /* used: onboarding */
.screening-nav-icon-button:hover { background: var(--t-control-hover-fill); color: var(--t-control-hover-icon); border-color: var(--t-control-hover-border); mix-blend-mode: normal; } /* used: onboarding */

/* Title screens. */
.screening-title-heading { font-size: var(--heading-size-xxl); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-x-small); color: var(--bright-white); margin-bottom: var(--app-default-top-bottom-margin-sm); }
.screening-title-intro-text { font-size: var(--app-section-para-text); color: rgba(var(--bright-white-rgb), var(--opacity-near-full)); margin-top: 0; }
@media (max-width: 600px) {
  .screening-title-heading { font-size: var(--heading-size-lg); }
}

/* Question screens. */
.screening-question-number { margin-top: var(--app-default-top-bottom-margin-xxxxl); margin-bottom: var(--app-default-top-bottom-margin-xs); color: var(--t-label-text, var(--t-text-secondary)); }
.screening-question-text { font-size: var(--body-text-xxl); line-height: var(--default-line-height-large); font-weight: var(--font-weight-normal); display: block; width: 100%; max-width: var(--golden-width-small); margin-bottom: 0; white-space: normal; overflow-wrap: break-word; text-wrap: pretty; color: var(--t-page-text); }
@media (max-width: 600px) {
  .screening-question-text { max-width: 100%; }
}
.screening-word { color: var(--t-page-text); }
.screening-confirm-button-wrapper { display: none; margin-bottom: var(--app-default-top-bottom-margin-xxxl); }
.screening-confirm-selection-button:disabled { background: var(--t-disabled-fill, var(--dark-white)); color: var(--t-disabled-text, var(--light-charcoal)); }

/* Results screens (donut and score). */
.screening-resultsPage { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; }
.screening-results-text { margin-top: 0; }

/* Orange forward buttons (Start, Continue, Finish): a slight grow on hover. */
.screening-start-button { gap: var(--gap-xs); }
.screening-start-button:hover:not(:active) { transform: scale(var(--hover-scale)); }
.screening-continue-button:hover:not(:active) { transform: scale(var(--hover-scale)); }

/* Still motion, kept as it is on her instruction: the UMA.css .page-diagnostic still rule, scoped to .page-screening, with its !important. */
[data-motion="still"]:where(.page-screening) *, :where(.page-screening) [data-motion="still"] *, [data-motion="still"]:where(.page-screening) *::before, :where(.page-screening) [data-motion="still"] *::before, [data-motion="still"]:where(.page-screening) *::after, :where(.page-screening) [data-motion="still"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-property: opacity !important; transition-duration: var(--motion-fade) !important; transition-timing-function: var(--motion-fade-ease) !important; scroll-behavior: auto !important; }


/* ==========================================================================
   NEW STYLES: chrome, onboarding and profile, 30 Sep 2026, for: page addresses
   /profile, /uma-onboarding, /uma-screenings, and the chrome on every page

   FOCUS, the whole of it. Nothing else in this block yet: see the note sent
   with this file for the 5,564 rules from onboarding and profile that are not
   in here and why they are not.

   WHAT THIS DOES

   Clicking into a field hides that field's grey stroke and leaves the cursor
   on its own. Pressing Tab turns the stroke orange, same width, same corners,
   in the same place. It replaces the stroke rather than sitting outside it, so
   there is no second ring and no gap. Nothing shows on a click, on a tap, or
   when a page moves focus by itself. No rings on cards, carousel boxes,
   tracks, scrolling areas, text or sections, because nothing below names one.

   HOW IT KNOWS IT WAS TAB

   The chrome watches the Tab key and puts the class keyboard-focus on the
   element that receives focus, only when Tab is what sent it there, and takes
   it off again the moment focus leaves. That watcher is in the chrome's head
   snippet, so every page gets it without doing anything. The rules below read
   that one class and nothing else. There is no :focus-visible in this block.

   HOUSE RULES

   No IDs. No !important. No raw values: the only value here is the orange,
   from the :root above. Flat single-class selectors, plain words, hyphens. No
   class invented, and buttons are left to the .btn classes untouched.

   NO NEW TOKENS NEEDED.

   TWO TOKENS STOP BEING READ once this is in: --focus-outline-width, which is
   2.5px, and --focus-ring-offset, which is the 2px gap. Both can stay. Nothing
   else reads them.
   ========================================================================== */

/* 1. A CLICK INTO A FIELD. The stroke loses its colour and keeps its width,
      so nothing moves and the only thing showing is the cursor. */
.field:focus, /* used: chrome, onboarding, profile, screenings-home, auth */
.field-multiline:focus, /* used: chrome, auth */
.field-action-input:focus, /* used: chrome, onboarding, profile, auth */
.uma-profile-edit-input:focus, /* used: profile */
.donate-party-time-select:focus, /* used: profile */
.onb-textarea-field:focus, /* used: onboarding */
.single-digit-input-box:focus, /* used: onboarding */
.drawer-show-format-input:focus { /* used: chrome, learn-pages-homepage-legal */
  border-color: transparent;
  outline: none;
}

/* 2. FIELDS WHOSE STROKE IS DRAWN ON THE BOX AROUND THEM. The discount code
      box, the four digit code box and the segmented toggle all draw their edge
      on the wrapper, so that is the one that has to lose its colour. */
.field-action:focus-within, /* used: chrome, onboarding, profile, auth */
.four-digit-code-field:focus-within, /* used: onboarding */
.uma-segmented-toggle:focus-within { /* used: chrome */
  border-color: transparent;
}

/* 3. TAB. The stroke turns orange.
      The :focus on the end is there for weight, not behaviour: the rules above
      are a class plus a state, and a bare class would lose to them whatever
      the order. With :focus on the end the two weigh the same and the later
      one wins, which is this one. */
.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: chrome, onboarding, profile, screenings-home, learn-pages-homepage-legal, auth */
  border-color: var(--orange);
  outline: none;
}

.field-action:has(.keyboard-focus), /* used: chrome, onboarding, profile, auth */
.four-digit-code-field:has(.keyboard-focus) { /* used: onboarding. release build 91 (bug 17): the segmented toggle left this rule, its option draws the ring */
  border-color: var(--orange);
}

/* 4. THE SKIP LINK. The one control a page moves focus to by itself, which is
      when the browser draws its own ring. Nothing else on any page does. */
.skip-link:focus { /* used: chrome, onboarding, profile, screenings-home, learn-pages-homepage-legal */
  outline: none;
}


/* NEW STYLES: learn-pages-homepage-legal, 30 Sep 2026, for: /, /about-autism, /about-adhd, /about-cptsd, /burnout-depression, /she-s-hormonal, /somatic-super-syndrome, /glossary, /terms, /privacy, /cookies */

/* =====================================================================
   Flat single-class rules, hyphens only, no IDs. One !important, on the
   eustress chart canvas, where Chart.js writes inline sizes.
   Nothing here restyles a class UMA.css already styles for these pages.
   Where a class name also appears in UMA.css it is because UMA.css only
   styles it for other pages (inside :where(.page-...)); the rule here is
   scoped the same way, to the homepage and the Learn pages.
   Page-only scaffolding (the placeholder chrome bars) is not in this file.
   ===================================================================== */


/* ===== TOKENS =====
   Scoped to the homepage and the Learn pages with :where(), which adds no
   weight, so no other page family's tokens are touched. */
:root:where(.page-home, .page-learn) {
  /* the Learn pages' light theme. UMA.css declares these only for other
     page families, so they are declared here with the same values */
  --t-page-bg: var(--mid-white);
  --t-band-alt: var(--new-white);
  --t-page-text: var(--mid-charcoal);
  --t-text-strong: var(--dark-charcoal);
  --t-text-muted: var(--lightest-charcoal);
  --t-emphasis: var(--navy);
  --t-emphasis-hover: var(--navy-dark);
  --t-divider: var(--rule-grey);
  --t-nav-frost: rgba(var(--light-white-rgb), var(--opacity-very-high));
  --z-section-nav: 999;
  --section-nav-edge-inset: var(--default-left-right-desk-body-padding);
  --navy-40: #151C2D;
  --navy-60: #0E131E;
  --navy-60-rgb: 14, 19, 30;
  --default-line-height-compact: 1.4;
  --carouselle-card-xxs: 280px;
  --opacity-dimmed: 0.3;

  /* NEW TOKENS: the themed surfaces these pages name. Light values are the
     colours the pages already used; the dark block below swaps them. */
  --t-hero-title: var(--navy);
  --t-card-surface: var(--card-default-background);
  --t-card-text: var(--dark-charcoal);
  --t-card-question-number: var(--light-charcoal);
  --t-card-heading-accent: var(--tomato);
  --t-answer-button-bg: var(--white-text-default);
  --t-answer-button-text: var(--mid-charcoal);
  --t-carousel-arrow: var(--lightest-charcoal);
  --t-about-hero-bg: var(--mid-white);
  --t-what-is-text-bg: var(--new-white);
  --t-profile-copy-line: var(--dark-white);
  --t-card-fade-rgb: var(--light-white-rgb);
  --t-card-fade-solid: var(--light-white);
  --card-fade-opacity: var(--opacity-visible);
  --card-scroll-fade-gradient: linear-gradient(to bottom, rgba(var(--t-card-fade-rgb), 0) 0%, rgba(var(--t-card-fade-rgb), 0.08) 40%, rgba(var(--t-card-fade-rgb), 0.30) 62%, rgba(var(--t-card-fade-rgb), 0.70) calc(100% - var(--app-default-top-bottom-margin-xxl)), var(--t-card-fade-solid) calc(100% - var(--app-default-top-bottom-margin-lg)), var(--t-card-fade-solid) 100%);

  /* NEW TOKENS: sizes and values the pages already used, written in raw */
  --about-hero-animation-max-width: 900px;
  --about-hero-animation-ratio: 3 / 2;
  --hero-shape-floor: 56.25%;
  --z-about-hero-canvas: 0;
  --z-about-hero-content: 1;
  --learn-hero-title-size: 2.5rem;
  --hero-space-below-title: 2.3rem;
  --heading-space-below-on-colour: 2.3rem;
  --term-cluster-min-height: 26rem;
  --term-cluster-stacked-max-width: 26rem;
  --z-term-cluster: 0;
  --z-term-cluster-content: 1;
  --section-space-below-when-stacked: var(--app-default-top-bottom-margin-xxl);
  --golden-tile-width-wide: 46%;
  --golden-tile-max-width-wide: 450px;
  --blue-box-space-below: 10rem;
  --list-indent: 1.25em;
  --dynamic-gutter: max(0px, (100% - var(--default-max-width)) / 2);
  --carouselle-card-315: 315px;
  --carouselle-card-420: 420px;
  --carouselle-card-xxxl: 400px;
  --default-section-whitespace-top: 7rem;
  --default-section-whitespace-bottom: 10rem;
  --default-section-whitespace-top-mob: 4.5rem;
  --default-section-whitespace-bottom-mob: 6rem;
  --heading-size-md-plus: 1.8rem;
  --heading-size-xxl-narrow: 2.5rem;
  --card-label-size: 1.1rem;
  --card-icon-space-below: 1.6rem;
  --card-heading-space-below: 0.7rem;
  --barrier-emoji-size: 2.8rem;
  --reference-number-scale: 0.65em;
  --target-size-min: 24px;
  --transition-card-flood: 0.4s;
  --transition-accordion: 0.4s;
  --transition-card-fade: 0.2s;
  --blur-section-nav: 12px;
  --film-embed-max-width: 820px;
  --opacity-watermark: 0.75;
  --opacity-card-text: 0.85;
  --card-hover-scale: 1.015;
  --faq-answer-open-max-height: 1200px;
  --z-glossary-tools: 2;
  --sos-badge-max-width: 12rem;
  --sos-dot-size: 58%;
  --sos-ring-inner-size: 74%;
  --sos-ring-outer-size: 90%;
  --z-sos-dot: 2;
  --charity-logo-height: 3rem;
  --z-image-modal: 9999;
  --t-modal-backdrop: rgba(var(--black-rgb), 0.9);
  --image-modal-max-size: 90%;
  --stress-resources-accent: var(--dark-teal);
  --stress-demands-accent: var(--red);
  --t-stress-resources-text: var(--dark-teal);
  --t-stress-demands-text: var(--red);
  --stress-halves-gap: var(--app-default-top-bottom-margin-xxxxxl);
  --stress-seesaw-max-width: 28rem;
  --stress-column-min-width: 320px;
  --stress-heading-size: 0.95rem;
  --stress-heading-space-below: 0.75rem;
  --stress-rule-height: 3px;
  --stress-rule-space-below: 0.85rem;
  --stress-rule-radius: 2px;
  --symptom-pill-bg: #023D58;
  --eustress-chart-max-width: 1200px;
  --eustress-chart-ratio: 16 / 9;
  --eustress-chart-ratio-narrow: 4 / 3;
  --eustress-key-space-below: var(--app-default-top-bottom-margin-xxxl);
  --chart-scroll-min-width: 44rem;
  --chart-ratio-wide: 2 / 1;
  --chart-ratio-narrow: 4 / 3;
  --t-text-secondary: var(--light-charcoal);
  --t-line-muted: var(--lightest-charcoal);
  --t-chart-grid: var(--lightest-charcoal);
  --t-chart-band: var(--mid-white);
  --t-chart-window: rgba(var(--black-rgb), var(--opacity-very-low));
  --t-chart-key-bg: rgba(var(--black-rgb), 0.03);
  --t-egg-edge: var(--dark-white);
  --chart-key-left-inset: 3.2;
  --chart-mark-shadow-blur: 1.5px;
  --hpg-sign-size: 36px;
  --hpg-label-size: 16px;
  --hpg-kern-tight: -0.11em;
  --hpg-line-miter: 10;
  --hpg-dash: 0 0 11.55 11.55;
}

@media (min-width: 1280px) {
  :root:where(.page-home, .page-learn) {
    --section-nav-edge-inset: calc(((100vw - var(--sidebar-width) - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding));
  }
}

@media (max-width: 600px) {
  :root:where(.page-home, .page-learn) {
    --section-nav-edge-inset: var(--default-left-right-mob-body-padding);
  }
}

/* dark: every token that changes. Scoped to the Learn pages and the
   homepage so no other page family picks it up on merge */
:root[data-theme="dark"]:where(.page-home, .page-learn) {
  --bright-white: var(--mid-white);
  --bright-white-rgb: 242, 237, 234;
  --t-page-bg: var(--navy-60);
  --t-band: var(--navy-60);
  --t-band-alt: var(--navy-40);
  --t-band-soft: var(--navy-40);
  --t-surface: var(--navy);
  --t-card: var(--navy);
  --t-card-panel: var(--navy);
  --t-page-text: var(--bright-white);
  --t-text-strong: var(--bright-white);
  --t-text-secondary: rgba(var(--bright-white-rgb), 0.7);
  --t-text-muted: rgba(var(--bright-white-rgb), 0.7);
  --t-border: rgba(var(--bright-white-rgb), 0.2);
  --t-divider: rgba(var(--bright-white-rgb), 0.1);
  --t-emphasis: var(--bright-white);
  --t-emphasis-hover: rgba(var(--bright-white-rgb), 0.7);
  --t-nav-frost: rgba(var(--navy-60-rgb), var(--opacity-very-high));
  --t-nav-line: rgba(var(--bright-white-rgb), 0.2);
  --t-chart-grid: rgba(var(--bright-white-rgb), 0.2);
  --t-chart-track: rgba(var(--bright-white-rgb), 0.15);
  --t-control-bg: var(--navy-40);
  --t-selected-bg: var(--bright-white);
  --t-selected-text: var(--navy);
  --t-header-bg: var(--navy-60);
  --t-score-met: var(--bright-green);
  --t-hero-title: var(--t-text-strong);
  --t-card-surface: var(--t-card);
  --t-card-text: var(--t-page-text);
  --t-card-question-number: var(--t-page-text);
  --t-card-heading-accent: var(--t-page-text);
  --t-answer-button-bg: var(--t-control-bg);
  --t-answer-button-text: var(--t-page-text);
  --t-carousel-arrow: var(--t-page-text);
  --t-about-hero-bg: var(--t-band-alt);
  --t-what-is-text-bg: var(--t-card);
  --t-profile-copy-line: var(--t-divider);
  --t-card-fade-rgb: 35, 47, 75;
  --t-card-fade-solid: var(--t-card);
  --t-stress-resources-text: var(--t-page-text);
  --t-stress-demands-text: var(--t-page-text);
}

/* ===== THE PAGE GROUND ===== */
.page-surface {
  background-color: var(--t-page-bg);
  color: var(--t-page-text);
}


/* ===== THE LEARN SUB NAV =====
   UMA.css has these same classes for the profile and diagnostic pages,
   each scoped to its own page family. These are scoped to the homepage and
   the Learn pages the same way, with :where(), which adds no weight, so
   they never reach another family's pages. */
:where(.page-home, .page-learn) .section-nav-bar {
  position: fixed;
  top: var(--fixed-header-height);
  left: 0;
  z-index: var(--z-section-nav);
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: var(--subnav-row-height);
  background: var(--t-nav-frost);
  backdrop-filter: blur(var(--blur-section-nav));
  border-bottom: var(--stroke-thin) solid var(--t-divider);
  transition: transform var(--transition-base) ease, top var(--transition-base) ease;
  overflow: hidden;
  box-sizing: border-box;
}

:where(.page-home, .page-learn) .section-nav-bar-chrome-hidden {
  top: 0;
}

:where(.page-home, .page-learn) .section-nav-bar-cards-active {
  transform: translateY(-100%);
}

:where(.page-home, .page-learn) .section-nav-row {
  box-sizing: border-box;
  width: 100%;
  height: var(--subnav-row-height);
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding-left: var(--section-nav-edge-inset);
  padding-right: 0;
}

:where(.page-home, .page-learn) .section-nav-title-wrapper {
  flex: 0 0 auto;
}

:where(.page-home, .page-learn) .section-nav-title {
  font-weight: var(--font-weight-medium);
  text-wrap: pretty;
  margin: 0;
  padding: 0;
  line-height: var(--default-line-height-single);
  font-size: var(--heading-size-sm);
}

:where(.page-home, .page-learn) .section-nav-scroller {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--section-nav-edge-inset);
  scroll-padding-right: var(--section-nav-edge-inset);
}

:where(.page-home, .page-learn) .section-nav-scroller::-webkit-scrollbar {
  display: none;
}

:where(.page-home, .page-learn) .section-nav-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0 auto;
  height: max-content;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  white-space: nowrap;
  width: auto;
  text-align: center;
  font-size: var(--body-text-sm);
}

:where(.page-home, .page-learn) .section-nav-item {
  font-size: var(--body-text-xs);
}

:where(.page-home, .page-learn) .section-nav-link {
  display: block;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: var(--t-page-text);
  line-height: var(--default-line-height-single);
  padding-top: calc((var(--subnav-row-height) - 1em) / 2 + var(--link-line-height));
  padding-bottom: calc((var(--subnav-row-height) - 1em) / 2 - var(--link-line-height));
  padding-left: var(--gap-xl);
  padding-right: var(--gap-xl);
  transition: color var(--transition-base) ease;
}

:where(.page-home, .page-learn) .section-nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--link-line-height);
  background-color: transparent;
  transition: background-color var(--transition-base) ease;
  display: block;
}

:where(.page-home, .page-learn) .section-nav-link:hover {
  color: var(--orange);
  text-decoration: none;
}

:where(.page-home, .page-learn) .section-nav-link:active {
  color: var(--t-emphasis);
}

:where(.page-home, .page-learn) .section-nav-link-active::after {
  background-color: var(--t-emphasis);
}

:where(.page-home, .page-learn) .section-nav-link-active:hover {
  color: var(--t-page-text);
}

:where(.page-home, .page-learn) .section-nav-action {
  position: relative;
  flex: 0 0 auto;
  height: var(--button-size-xs);
  font-weight: var(--font-weight-normal);
  font-size: var(--body-text-sm);
  margin-left: var(--gap-xl);
  padding-left: var(--app-default-top-bottom-margin-sm);
  padding-right: var(--app-default-top-bottom-margin-sm);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xxs);
}

@media (min-width: 601px) {
  :where(.page-home, .page-learn) .section-nav-bar {
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
  }
}

@media (max-width: 900px) {
  :where(.page-home, .page-learn) .section-nav-title-wrapper {
    display: none;
  }

  :where(.page-home, .page-learn) .section-nav-row {
    padding-left: 0;
  }

  :where(.page-home, .page-learn) .section-nav-scroller {
    padding-left: var(--section-nav-edge-inset);
  }

  :where(.page-home, .page-learn) .section-nav-list {
    min-width: max-content;
    margin-left: 0;
  }
}

@media (max-width: 600px) {
  :where(.page-home, .page-learn) .section-nav-item {
    font-size: var(--body-text-sm);
  }
}


/* ===== SECTIONS =====
   Every section the page scrolls to clears the fixed header and sub nav. */
.learn-section {
  scroll-margin-top: calc(var(--fixed-header-height) + var(--subnav-row-height));
}

:where(.page-home, .page-learn) .section-panel-new-white {
  width: 100%;
  background-color: var(--t-band-alt);
}

.section-panel-mid-white {
  width: 100%;
  background-color: var(--t-page-bg);
}

.section-panel-red {
  width: 100%;
  background-color: var(--red-dark);
  color: var(--mid-white);
}

/* the section inners. UMA.css has these for the profile and diagnostic
   pages, scoped to their families; these are the homepage's and the Learn
   pages' own, scoped the same way */
:where(.page-home, .page-learn) .section-centred-without-carousel {
  height: auto;
  width: 100%;
  max-width: var(--max-body-wrapper-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
  padding-top: var(--app-default-top-bottom-margin-xxxxl);
  padding-bottom: var(--app-default-top-bottom-margin-xxxl);
}

:where(.page-home, .page-learn) .section-full-bleed-with-carousel {
  height: auto;
  width: 100%;
  padding-top: var(--app-default-top-bottom-margin-xxxxl);
}

@media (max-width: 600px) {
  :where(.page-home, .page-learn) .section-full-bleed-with-carousel {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    padding-top: var(--app-default-top-bottom-margin-xxxl);
  }

  :where(.page-home, .page-learn) .section-centred-without-carousel {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    padding-top: var(--app-default-top-bottom-margin-xxxl);
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }
}

/*on the narrowest screens the side padding gives way so a card still fits*/
@media (max-width: 450px) {
  :where(.page-home, .page-learn) .section-centred-without-carousel {
    padding-left: min(var(--default-left-right-mob-body-padding), calc((100% - var(--carouselle-card-xs)) / 2));
    padding-right: min(var(--default-left-right-mob-body-padding), calc((100% - var(--carouselle-card-xs)) / 2));
  }
}


/* ===== HEADINGS AND TEXT ===== */
.learn-panel-heading {
  width: 100%;
  max-width: var(--golden-width-large);
  margin-top: 0;
  line-height: var(--default-line-height-x-small);
  text-wrap: pretty;
  color: var(--t-page-text);
  overflow-wrap: break-word;
}

.learn-intro-text {
  max-width: var(--golden-width-large);
  line-height: var(--default-line-height-small);
}

.heading-on-colour {
  color: var(--mid-white);
  margin-bottom: var(--heading-space-below-on-colour);
}

.section-intro-text {
  text-wrap: pretty;
  font-size: var(--body-text-xl);
  line-height: var(--default-line-height-large);
  width: 100%;
  max-width: var(--golden-width-large);
}

.section-heading-group {
  margin-bottom: var(--default-whitespace-below-section-headings);
}

.section-footer-group {
  margin-top: var(--app-default-top-bottom-margin-xxxl);
}

.no-break-word {
  white-space: nowrap;
}

/*UMA.css gives the last paragraph in a block a 2rem gap below it with
  p:last-of-type, so this has to name :last-of-type too to take it away*/
.paragraph-no-space-below:last-of-type {
  margin-bottom: 0;
}

.reference-number {
  font-size: var(--reference-number-scale);
  vertical-align: super;
  line-height: 0;
}

.reference-entry {
  line-height: var(--default-line-height-small);
}

@media (max-width: 900px) {
  .learn-intro-text {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .section-heading-group {
    margin-bottom: var(--app-default-top-bottom-margin-xl);
  }
}


/* ===== THE ABOUT HERO =====
   The dot animation spelling the word, with Discover more under it. The
   canvas is a layer across the whole hero so the dots can scatter the full
   width; it takes no pointer events. The hero holds a 16 by 9 shape as a
   floor, never a ceiling, and drops it at 900 and under. */
.about-hero-section {
  background-color: var(--t-about-hero-bg);
  margin-top: calc(var(--fixed-header-height) + var(--subnav-row-height));
  position: relative;
  padding-top: var(--app-default-top-bottom-margin-xxl);
  padding-bottom: var(--app-default-top-bottom-margin-xxl);
  box-sizing: border-box;
  display: flex;
  align-items: safe center;
}

.about-hero-section::before {
  content: "";
  flex: 0 0 0;
  width: 0;
  padding-top: var(--hero-shape-floor);
}

.about-hero {
  position: relative;
  z-index: var(--z-about-hero-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--app-default-top-bottom-margin-sm);
  width: 100%;
  max-width: var(--max-body-content-width);
  margin: 0 auto;
  padding: var(--app-default-top-bottom-margin-xxxxl) var(--default-left-right-desk-body-padding);
  box-sizing: border-box;
}

.about-hero-animation {
  position: relative;
  width: 100%;
  max-width: var(--about-hero-animation-max-width);
  aspect-ratio: var(--about-hero-animation-ratio);
}

/*pan-y so a finger on the dots still scrolls the page*/
.about-hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: var(--z-about-hero-canvas);
  pointer-events: none;
  touch-action: pan-y;
}

.hero-discover-button {
  height: var(--button-size-md);
}

@media (min-width: 600px) {
  .hero-discover-button {
    height: var(--button-size-lg);
  }
}

@media (min-width: 900px) {
  .hero-discover-button {
    height: var(--button-size-xl);
  }
}

@media (max-width: 600px) {
  .hero-discover-button {
    width: auto;
    max-width: max-content;
    align-self: center;
    flex: none;
  }
}

@media (max-width: 950px) {
  .about-hero {
    padding: var(--app-default-top-bottom-margin-xxl) var(--default-left-right-desk-body-padding);
  }
}

@media (max-width: 900px) {
  .about-hero-section::before {
    content: none;
  }
}

@media (max-width: 600px) {
  .about-hero {
    padding: var(--app-default-top-bottom-margin-xl) var(--default-left-right-mob-body-padding);
  }
}


/* ===== WHAT IS ... =====
   A 50/50 split: the words on the left, a dark teal tile on the right. The
   backdrop carries the two colours out to the edges of the page. Stacked,
   the tile goes first and turns square. */
.what-is-backdrop {
  background: linear-gradient(to right, var(--new-white) 0 50%, var(--dark-teal) 50% 100%);
}

/*the split drops the inner's side padding at every width: the two columns
  carry the body padding themselves. The section rules sit earlier in this
  file, so this wins at every width*/
.mission-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
}

.mission-text-col {
  background-color: var(--t-what-is-text-bg);
  color: var(--t-page-text);
  padding: var(--default-section-whitespace-top) var(--default-left-right-desk-body-padding) var(--default-section-whitespace-bottom);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.what-is-title {
  margin: 0 0 var(--app-default-top-bottom-margin-sm) 0;
  font-size: var(--heading-size-xl);
  line-height: var(--default-line-height-x-small);
  color: var(--t-page-text);
}

.what-is-image-tile {
  background-color: var(--dark-teal);
  min-width: 0;
}

/*the copy uses the profile pages' styles in UMA.css, which read the
  profile pages' light theme colours. This wrapper sets the two lines those
  styles draw, and the button hover, for these pages*/
.about-profile-copy {
  --t-border: var(--t-profile-copy-line);
  --t-divider: var(--t-profile-copy-line);
}

/*the source buttons take their width from their words, and the words stay
  on one line with the external link mark*/
.reference-button-fits-content {
  flex: 0 0 auto;
}

.reference-label-one-line {
  white-space: nowrap;
}

/*UMA.css's .btn-secondary-navy-on-white is navy in every theme, so on a
  dark page it vanishes. This class sits beside it and reads the theme*/
.themed-secondary-button {
  color: var(--t-emphasis);
  border-color: var(--t-emphasis);
}

.themed-secondary-button:hover {
  color: var(--t-emphasis-hover);
  border-color: var(--t-emphasis-hover);
}

@media (max-width: 900px) {
  .mission-split {
    grid-template-columns: 1fr;
  }

  .mission-text-col {
    padding: var(--default-section-whitespace-top-mob) var(--default-left-right-desk-body-padding) var(--default-section-whitespace-bottom-mob);
  }

  .what-is-image-tile {
    order: -1;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 750px) {
  .what-is-backdrop {
    background: var(--new-white);
  }
}

@media (max-width: 600px) {
  .mission-text-col {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }
}


/* ===== THE FILM ===== */
.video-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.you-tube {
  max-width: var(--film-embed-max-width);
  width: 100%;
  aspect-ratio: 16 / 9;
  box-sizing: border-box;
  border: 0;
  display: block;
}


/* ===== THE GOLDEN SECTION PANEL =====
   Words on one side, a tile on the other. Below 900 they stack and centre,
   heading first, then the tile, then the words, then the button. */
.goldensectionpanel-items {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--default-left-right-desk-body-padding);
}

.goldensectionpanel-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--golden-ratio-small-percentage);
  max-width: var(--golden-width-small);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  flex-grow: 0;
  align-self: center;
}

.goldensectionpanel-button {
  display: flex;
  flex-direction: row;
  gap: var(--gap-regular);
}

.hero-text-col {
  padding-right: var(--default-left-right-desk-body-padding);
}

.vagus-text-col {
  padding-right: 0;
}

@media (max-width: 900px) {
  .goldensectionpanel-items {
    gap: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .goldensectionpanel-text-column {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    display: contents;
  }

  .goldensectionpanel-title {
    order: 1;
  }

  .goldensectionpanel-tile {
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--section-space-below-when-stacked);
    order: 2;
  }

  .goldensectionpanel-text {
    text-align: center;
    order: 3;
  }

  .goldensectionpanel-text-first {
    margin-top: var(--app-default-top-bottom-margin-sm);
  }

  .goldensectionpanel-button {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    order: 4;
  }

  /*the hero's cluster goes first when stacked, then the heading*/
  .stacked-first {
    order: 0;
  }
}

@media (max-width: 600px) {
  .goldensectionpanel-button {
    flex-direction: column;
    gap: var(--gap-regular);
  }
}


/* ===== THE HERO AND ITS TERM CLUSTER =====
   The canvas is a layer across the whole hero. The copy sits above it and
   the canvas takes no pointer events. The hero holds a 16 by 9 shape as a
   floor, never a ceiling. */
.term-cluster-host {
  margin-top: var(--subnav-row-height);
  position: relative;
  display: flex;
  align-items: safe center;
  padding-top: var(--app-default-top-bottom-margin-xxl);
  padding-bottom: var(--app-default-top-bottom-margin-xxl);
  box-sizing: border-box;
}

.term-cluster-host::before {
  content: "";
  flex: 0 0 0;
  width: 0;
  padding-top: var(--hero-shape-floor);
}

.term-cluster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-term-cluster);
  pointer-events: none;
}

.term-cluster-content {
  width: 100%;
  position: relative;
  z-index: var(--z-term-cluster-content);
}

.term-cluster-spacer {
  aspect-ratio: 1 / 1;
  min-height: var(--term-cluster-min-height);
}

.hero-tile {
  width: var(--golden-tile-width-wide);
  max-width: var(--golden-tile-max-width-wide);
  aspect-ratio: auto;
  justify-content: flex-start;
  align-items: center;
  align-self: center;
}

.learn-hero-title {
  font-size: var(--learn-hero-title-size);
  line-height: var(--default-line-height-x-small);
  max-width: 100%;
  margin-bottom: var(--hero-space-below-title);
  color: var(--t-hero-title);
}

@media (max-width: 900px) {
  .term-cluster-host::before {
    content: none;
  }

  .hero-tile {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: center;
  }

  .term-cluster-spacer {
    max-width: var(--term-cluster-stacked-max-width);
  }
}

/* ===== THE VAGUS NERVE ===== */
.vagus-tile {
  width: var(--golden-tile-width-wide);
  max-width: var(--golden-tile-max-width-wide);
  aspect-ratio: auto;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: flex-start;
}

.vagus-diagram {
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
}

@media (max-width: 900px) {
  .vagus-tile {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: center;
  }
}


/* ===== THE TRIGEMINAL NERVE =====
   A white image band, then a full width blue box with the words in three
   columns, two below 900 and one below 600. */
.trigeminal-panel {
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

.trigeminal-image-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: calc(max(0px, (100% - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding));
  padding-right: calc(max(0px, (100% - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding));
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: var(--pure-white);
}

.trigeminal-diagram {
  width: 100%;
  max-width: var(--golden-width-large);
  height: auto;
  display: block;
  padding: 0;
  margin: 0;
  border: none;
  outline: 0;
  box-shadow: none;
}

.trigeminal-blue-box {
  width: 100%;
  background-color: var(--bright-blue);
  color: var(--light-white);
  box-sizing: border-box;
}

.trigeminal-blue-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--max-body-wrapper-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
  padding-top: var(--default-left-right-desk-body-padding);
  padding-bottom: var(--blue-box-space-below);
  text-align: left;
}

.three-column-panel-cols {
  column-count: 3;
  column-gap: var(--default-left-right-desk-body-padding);
}

.column-paragraph {
  break-inside: avoid;
  margin-top: 0;
}

.trigeminal-symptom-list {
  list-style: disc;
  margin: 0 0 var(--app-default-top-bottom-margin-sm) 0;
  padding-left: var(--list-indent);
  line-height: var(--default-line-height-large);
}

.symptom-list-item {
  break-inside: avoid;
  margin-bottom: var(--app-default-top-bottom-margin-xxs);
  line-height: var(--default-line-height-small);
  color: var(--mid-white);
}

@media (max-width: 900px) {
  .three-column-panel-cols {
    column-count: 2;
  }
}

@media (max-width: 600px) {
  .trigeminal-image-wrap {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }

  .trigeminal-diagram {
    max-width: 100%;
  }

  .trigeminal-blue-inner {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
    margin-left: 0;
    margin-right: 0;
    text-align: center;
  }

  .three-column-panel-cols {
    column-count: 1;
  }

  .trigeminal-symptom-list {
    list-style-position: inside;
    padding-left: 0;
  }
}


/* ===== THE CARD CAROUSEL ===== */
.carousel-section-heading {
  text-wrap: pretty;
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
}

.carousel-section-intro {
  color: var(--t-page-text);
  text-wrap: pretty;
  font-size: var(--body-text-xl);
  line-height: var(--default-line-height-large);
  width: 100%;
  max-width: var(--max-content-width-golden-section-large);
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
}

/* the carousel and its arrows. UMA.css has these for the profile and
   diagnostic pages, scoped to their families; these are scoped the same way */
:where(.page-home, .page-learn) .centred-card-carousel {
  display: flex;
  flex-direction: row;
  gap: var(--default-row-gap);
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-top: var(--app-default-top-bottom-margin-sm);
  padding-bottom: var(--app-default-top-bottom-margin-xl);
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
  scroll-padding-left: var(--default-left-right-desk-body-padding);
  scroll-padding-right: var(--default-left-right-desk-body-padding);
}

:where(.page-home, .page-learn) .centred-card-carousel::-webkit-scrollbar {
  display: none;
}

:where(.page-home, .page-learn) .centred-card-carousel-controls {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  gap: var(--gap-sm);
  height: auto;
  width: auto;
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
  padding-bottom: var(--app-default-top-bottom-margin-xxxl);
}

/* the arrows are UMA.css circular buttons (.btn .btn-circular .btn-md).
   This class gives them their hairline and their colour. */
.carousel-arrow-button {
  border: var(--stroke-hairline) solid var(--t-carousel-arrow);
  background: transparent;
  color: var(--t-carousel-arrow);
  transition: background var(--button-transition-duration) var(--button-transition-ease),
              border-color var(--button-transition-duration) var(--button-transition-ease),
              color var(--button-transition-duration) var(--button-transition-ease),
              opacity var(--button-transition-duration) var(--button-transition-ease);
}

.carousel-arrow-button:hover {
  background: var(--hover-overlay-light);
  color: var(--t-page-text);
  border-color: var(--t-page-text);
}

.carousel-nav-btn--disabled {
  --t-carousel-arrow: var(--t-text-muted);
  opacity: var(--opacity-dimmed);
  pointer-events: none;
  cursor: default;
}

/*the line under a carousel, and the note it holds*/
.carouselle-footer-items {
  width: 100%;
  max-width: var(--default-max-width);
  margin-left: var(--dynamic-gutter);
  margin-right: var(--dynamic-gutter);
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
  padding-bottom: var(--app-default-top-bottom-margin-xxxxl);
  margin-top: var(--app-default-top-bottom-margin-xxxl);
}

.carousel-footnote {
  width: 100%;
  max-width: var(--golden-width-large);
  margin: 0;
  font-size: var(--card-label-size);
  line-height: var(--default-line-height-large);
}

@media (min-width: 1280px) {
  .carousel-section-heading {
    margin-left: calc(((100% - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding));
    padding-left: 0;
    padding-right: 0;
  }

  .carousel-section-intro {
    margin-left: calc(((100% - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding));
    padding-left: 0;
    padding-right: 0;
  }

  :where(.page-home, .page-learn) .centred-card-carousel {
    padding-left: calc(((100% - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding));
    padding-right: calc(((100% - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding));
    scroll-padding-left: calc(((100% - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding));
    scroll-padding-right: calc(((100% - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding));
  }

  :where(.page-home, .page-learn) .centred-card-carousel-controls {
    padding-left: calc(((100% - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding));
  }
}

@media (max-width: 600px) {
  .carousel-section-heading {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }

  .carousel-section-intro {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }

  :where(.page-home, .page-learn) .centred-card-carousel {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
    scroll-padding-left: var(--default-left-right-mob-body-padding);
    scroll-padding-right: var(--default-left-right-mob-body-padding);
  }

  :where(.page-home, .page-learn) .centred-card-carousel-controls {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }

  .carouselle-footer-items {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
    margin-top: var(--app-default-top-bottom-margin-sm);
  }
}

@media (pointer: coarse) {
  :where(.page-home, .page-learn) .centred-card-carousel {
    padding-bottom: var(--app-default-top-bottom-margin-xxxl);
  }

  :where(.page-home, .page-learn) .centred-card-carousel-controls {
    display: none;
  }
}


/* ===== WHAT IT IS NOT: THE MISINFORMATION CARDS ===== */
.uma-not-carousel-card {
  scroll-snap-align: start;
  width: var(--carouselle-card-xs);
  aspect-ratio: var(--carouselle-card-ratio-portrait);
  flex-shrink: 0;
  background-color: var(--t-card-surface);
  border-radius: var(--default-radius);
  padding-top: var(--default-card-top-padding);
  padding-bottom: var(--default-card-bottom-padding);
  padding-left: var(--default-card-left-right-padding);
  padding-right: var(--default-left-right-desk-body-padding);
  text-align: left;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.card-icon {
  color: var(--tomato);
  font-size: var(--heading-size-md-plus);
  display: flex;
  flex-direction: column;
  margin-bottom: var(--card-icon-space-below);
  text-align: left;
}

.misinformation-heading {
  color: var(--tomato);
  font-size: var(--heading-size-md);
  margin-bottom: var(--card-heading-space-below);
  line-height: var(--default-line-height-x-small);
}

.card-paragraph-text {
  font-size: var(--body-text-sm);
  line-height: var(--default-line-height-large);
}

@media (min-width: 450px) {
  .uma-not-carousel-card {
    width: var(--carouselle-card-315);
  }
}

@media (min-width: 600px) {
  .uma-not-carousel-card {
    width: var(--carouselle-card-xl);
    aspect-ratio: var(--carouselle-card-ratio-landscape);
  }
}

@media (min-width: 900px) {
  .uma-not-carousel-card {
    width: var(--carouselle-card-xxxl);
  }
}

@media (min-width: 1000px) {
  .uma-not-carousel-card {
    width: var(--carouselle-card-420);
  }
}


/* ===== THE MINI SCREEN CARD ===== */
.miniscreencard {
  flex: 0 0 var(--carouselle-card-xs);
  width: var(--carouselle-card-xs);
  min-width: var(--carouselle-card-xs);
  max-width: var(--carouselle-card-xs);
  height: auto;
  min-height: 0;
  aspect-ratio: 9 / 16;
  scroll-snap-align: start;
  border-radius: var(--default-radius);
  background: var(--t-card-surface);
  color: var(--t-card-text);
  text-align: left;
  overflow: hidden;
  padding-top: var(--default-card-top-padding);
  padding-bottom: var(--default-card-bottom-padding);
  padding-left: var(--default-card-left-right-padding);
  padding-right: var(--default-card-left-right-padding);
  margin-bottom: var(--app-default-top-bottom-margin-sm);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  transition: background-color var(--transition-card-flood), color var(--transition-card-flood), transform var(--transition-base) ease-in-out, box-shadow var(--transition-base) ease;
  will-change: transform;
}

.miniscreencard:hover {
  transform: scale(var(--card-hover-scale));
}

.miniscreencard-orange {
  background-color: var(--orange-dark);
  color: var(--white-text-default);
}

.miniscreencard-teal {
  background-color: var(--dark-teal);
  color: var(--white-text-default);
}

.title-miniscreencard {
  justify-content: center;
  padding-bottom: calc(var(--button-size-xl) + (2 * var(--app-default-top-bottom-margin-xl)));
}

/*the last two cards take the page's own text colour, which is charcoal in
  light and the light text in dark*/
.cta-miniscreencard {
  color: var(--t-page-text);
}

.not-alone-miniscreencard {
  color: var(--t-page-text);
}

.miniscreencard-content {
  width: 100%;
  flex-grow: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.title-card-heading-text {
  line-height: var(--default-line-height-x-small);
  margin-bottom: var(--app-default-top-bottom-margin-md);
  transition: color var(--transition-card-flood);
}

.title-card-heading-large {
  font-size: var(--heading-size-xl);
}

.other-signs-heading {
  font-size: var(--heading-size-xl);
  line-height: var(--default-line-height-x-small);
  transition: color var(--transition-card-flood);
}

.score-level {
  line-height: var(--default-line-height-x-small);
  transition: color var(--transition-card-flood);
}

.title-card-para {
  font-size: var(--heading-size-xs);
  line-height: var(--default-line-height-large);
  transition: color var(--transition-card-flood);
}

.question-number {
  color: var(--t-card-question-number);
  display: block;
  font-size: var(--card-label-size);
  font-weight: var(--font-weight-normal);
  margin-bottom: var(--app-default-top-bottom-margin-xs);
  transition: color var(--transition-card-flood);
}

.mini-screen-question-text {
  flex-grow: 1;
  font-size: var(--body-text-xxl);
  line-height: var(--default-line-height-compact);
  transition: color var(--transition-card-flood);
}

/*the summary cards: the result sits in the middle of the card*/
.score-miniscreencard {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mini-screen-score-value-raw {
  font-size: var(--card-label-size);
  font-weight: var(--font-weight-normal);
  display: flex;
  position: absolute;
  top: var(--app-default-top-bottom-margin-xl);
  left: var(--app-default-top-bottom-margin-xl);
}

.mini-screen-score-value-percent {
  font-size: var(--heading-size-xxl-narrow);
  font-weight: var(--font-weight-normal);
  display: block;
  margin-top: 0;
  margin-bottom: var(--app-default-top-bottom-margin-xxxs);
  text-align: left;
}

.card-footnote {
  line-height: var(--default-line-height-small);
  transition: color var(--transition-card-flood);
}

.card-source-note {
  font-size: var(--body-text-xxs);
  margin-top: var(--app-default-top-bottom-margin-sm);
}

/*the Try Uma card's button sits on the foot of the card*/
.fix-btn-to-bot {
  position: absolute;
  bottom: var(--app-default-top-bottom-margin-xl);
  width: calc(100% - (2 * var(--default-card-left-right-padding)));
}

.cta-constrained {
  max-width: var(--golden-width-small);
}

.btn-self-start {
  align-self: flex-start;
  width: auto;
}

@media (max-width: 449px) {
  .miniscreencard {
    flex: 0 0 var(--carouselle-card-xxs);
    width: var(--carouselle-card-xxs);
    min-width: var(--carouselle-card-xxs);
    max-width: var(--carouselle-card-xxs);
  }

  .title-card-heading-large {
    font-size: var(--heading-size-sm);
  }

  .other-signs-heading {
    font-size: var(--heading-size-sm);
  }

  .title-card-heading-steps-down {
    font-size: var(--heading-size-sm);
  }

  .title-card-para {
    font-size: var(--body-text-xs);
  }
}

/*between 450 and 600 the Other signs card has already lost height but its
  heading has not stepped down yet, so it takes the largest size that clears
  the card*/
@media (min-width: 450px) and (max-width: 599px) {
  .other-signs-heading {
    font-size: var(--heading-size-md-plus);
    line-height: var(--default-line-height-single);
    margin-bottom: var(--app-default-top-bottom-margin-xxs);
  }
}

@media (min-width: 600px) {
  .miniscreencard {
    flex: 0 0 var(--carouselle-card-lg);
    width: var(--carouselle-card-lg);
    min-width: var(--carouselle-card-lg);
    max-width: var(--carouselle-card-lg);
  }
}

@media (min-width: 900px) {
  .miniscreencard {
    flex: 0 0 var(--carouselle-card-xl);
    width: var(--carouselle-card-xl);
    min-width: var(--carouselle-card-xl);
    max-width: var(--carouselle-card-xl);
  }
}

@media (min-width: 1280px) {
  .miniscreencard {
    flex: 0 0 var(--carouselle-card-xxl);
    width: var(--carouselle-card-xxl);
    min-width: var(--carouselle-card-xxl);
    max-width: var(--carouselle-card-xxl);
  }
}


/* ===== THE QUESTION CARDS AND THEIR TICK AND CROSS =====
   The tick and the cross are UMA.css circular buttons (.btn .btn-circular
   .btn-xl). Their colours are tokens, so the card's own state class can
   change them without a descendant selector: .answered-true and
   .answered-false sit on the card and set the tokens its buttons read. Each
   kind of question card names the colour it floods to when ticked. */
.question-miniscreencard {
  --answered-flood: var(--orange);
  --answer-tick-bg: var(--t-answer-button-bg);
  --answer-tick-edge: var(--lightest-charcoal);
  --answer-tick-icon: var(--t-answer-button-text);
  --answer-cross-bg: var(--t-answer-button-bg);
  --answer-cross-edge: var(--lightest-charcoal);
  --answer-cross-icon: var(--t-answer-button-text);
}

.main-miniscreencard {
  --answered-flood: var(--orange-dark);
}

.bonus-miniscreencard {
  --answered-flood: var(--dark-teal);
}

/*the Beighton cards carry a drawing that takes the card's state colour*/
.beighton-miniscreencard {
  padding-bottom: calc(var(--app-default-top-bottom-margin-xl) + var(--button-size-xl) + var(--app-default-top-bottom-margin-sm));
  --card-drawing-fill: var(--navy);
  --card-drawing-flip: 1;
}

/*the drawing faced the wrong way round for the side its card names*/
.beighton-miniscreencard--mirrored {
  --card-drawing-flip: -1;
}

.beighton-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--app-default-radius-md);
  margin-bottom: var(--app-default-top-bottom-margin-sm);
  flex: 0 1 auto;
  min-height: 0;
  transform: scaleX(var(--card-drawing-flip));
  fill: var(--card-drawing-fill);
  transition: fill var(--transition-card-flood);
}

@media (max-width: 600px) {
  .beighton-card-image {
    aspect-ratio: 16 / 9;
  }
}

.mini-screen-button-row {
  display: flex;
  gap: var(--app-default-top-bottom-margin-xs);
  position: absolute;
  bottom: var(--app-default-top-bottom-margin-xl);
  left: var(--app-default-top-bottom-margin-xl);
}

.button-tick-screen {
  border: var(--stroke-thin) solid var(--answer-tick-edge);
  background-color: var(--answer-tick-bg);
  color: var(--answer-tick-icon);
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.button-cross-screen {
  border: var(--stroke-thin) solid var(--answer-cross-edge);
  background-color: var(--answer-cross-bg);
  color: var(--answer-cross-icon);
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

/* ticked: the card floods, the tick takes the flood colour and a drawing
   turns white */
.answered-true {
  background-color: var(--answered-flood);
  color: var(--white-text-default);
  --t-card-question-number: var(--white-text-default);
  --card-drawing-fill: var(--white-text-default);
  --answer-tick-bg: var(--white-text-default);
  --answer-tick-edge: var(--bright-white);
  --answer-tick-icon: var(--answered-flood);
  --answer-cross-bg: transparent;
  --answer-cross-edge: var(--bright-white);
  --answer-cross-icon: var(--white-text-default);
}

/* crossed: the words and a drawing fade to grey and the cross fills grey */
.answered-false {
  color: var(--dark-white);
  --t-card-question-number: var(--dark-white);
  --card-drawing-fill: var(--dark-white);
  --answer-tick-bg: var(--white-text-default);
  --answer-tick-edge: var(--dark-white);
  --answer-tick-icon: var(--dark-white);
  --answer-cross-bg: var(--dark-white);
  --answer-cross-edge: var(--dark-white);
  --answer-cross-icon: var(--white-text-default);
}


/* ===== THE SIGNPOSTING CARDS =====
   The button is the UMA.css white pill on a dark ground
   (.btn .btn-pill .btn-md .btn-primary-white-on-dark). */
.charity-miniscreencard {
  background: var(--dark-teal);
  color: var(--bright-white);
  border-radius: var(--app-default-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-bottom: calc(var(--button-size-xl) + (2 * var(--app-default-top-bottom-margin-xl)));
}

.charity-card-eyebrow {
  color: rgba(var(--bright-white-rgb), var(--opacity-high));
  font-size: var(--body-text-xs);
  line-height: var(--default-line-height-large);
  margin: 0 0 var(--app-default-top-bottom-margin-xxs) 0;
}

.charity-card-title {
  font-size: var(--heading-size-md);
  font-weight: var(--font-weight-light);
  line-height: var(--default-line-height-x-small);
  margin: 0 0 var(--app-default-top-bottom-margin-sm) 0;
  text-wrap: pretty;
  color: var(--white-text-default);
}

.charity-card-text {
  color: rgba(var(--bright-white-rgb), var(--opacity-card-text));
  font-size: var(--body-text-sm);
  line-height: var(--default-line-height-small);
  margin: 0 0 var(--app-default-top-bottom-margin-lg) 0;
  text-wrap: pretty;
}

.charity-card-btn {
  align-self: flex-start;
  gap: var(--gap-xs);
  text-decoration: none;
}


/* ===== THE WHY-OVERLOOKED CARDS =====
   The 9 by 16 card, a red card at each end and the text cards between. A
   card whose words run past its foot scrolls inside itself, with a fade at
   the foot that goes once it is scrolled to the bottom. */
.threebyfive-carousel-card {
  flex: 0 0 var(--carouselle-card-xs);
  width: var(--carouselle-card-xs);
  min-width: var(--carouselle-card-xs);
  max-width: var(--carouselle-card-xs);
  height: auto;
  min-height: 0;
  aspect-ratio: 9 / 16;
  scroll-snap-align: start;
  padding-top: var(--default-card-top-padding);
  padding-bottom: var(--default-card-bottom-padding);
  padding-left: var(--default-card-left-right-padding);
  padding-right: var(--default-left-right-desk-body-padding);
  text-align: left;
  position: relative;
  background-color: var(--t-card-surface);
  border-radius: var(--default-radius);
}

/*a card whose words can run past its foot scrolls, and its words start at
  the top so none are cut off above. After the summary card rule above, so
  it wins on a scrolling summary card*/
.make-card-scrollable {
  justify-content: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  border-bottom: var(--default-card-bottom-padding) solid var(--card-default-background);
  background-clip: padding-box;
  --card-fade-opacity: var(--opacity-visible);
}

:where(.page-home, .page-learn) .is-scrolled-to-bottom {
  --card-fade-opacity: var(--opacity-hidden);
}

.card-scroll-fade {
  position: sticky;
  bottom: calc(-1 * var(--default-card-bottom-padding));
  left: 0;
  right: 0;
  height: calc(var(--app-default-top-bottom-margin-xxxxxl) + var(--default-card-bottom-padding));
  margin-left: calc(-1 * var(--default-card-left-right-padding));
  margin-right: calc(-1 * var(--default-card-left-right-padding));
  margin-top: calc(-1 * var(--app-default-top-bottom-margin-xxxxxl));
  background: var(--card-scroll-fade-gradient);
  opacity: var(--card-fade-opacity);
  pointer-events: none;
  flex-shrink: 0;
  transition: opacity var(--transition-card-fade) ease;
}

.bookend-card-red {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: var(--mid-white);
  background-color: var(--tomato);
}

.barrier-emoji {
  font-size: var(--barrier-emoji-size);
  margin-top: 0;
  margin-bottom: var(--gap-xxs);
  line-height: var(--default-line-height-single);
}

.card-heading-text {
  color: var(--t-card-heading-accent);
  margin-bottom: var(--app-default-top-bottom-margin-md);
  font-size: var(--heading-size-md);
  line-height: var(--default-line-height-x-small);
}

@media (max-width: 449px) {
  .threebyfive-carousel-card {
    flex: 0 0 var(--carouselle-card-xxs);
    width: var(--carouselle-card-xxs);
    min-width: var(--carouselle-card-xxs);
    max-width: var(--carouselle-card-xxs);
  }
}

@media (min-width: 600px) {
  .threebyfive-carousel-card {
    flex: 0 0 var(--carouselle-card-lg);
    width: var(--carouselle-card-lg);
    min-width: var(--carouselle-card-lg);
    max-width: var(--carouselle-card-lg);
  }
}

@media (min-width: 900px) {
  .threebyfive-carousel-card {
    flex: 0 0 var(--carouselle-card-xl);
    width: var(--carouselle-card-xl);
    min-width: var(--carouselle-card-xl);
    max-width: var(--carouselle-card-xl);
  }
}

@media (min-width: 1280px) {
  .threebyfive-carousel-card {
    flex: 0 0 var(--carouselle-card-xxl);
    width: var(--carouselle-card-xxl);
    min-width: var(--carouselle-card-xxl);
    max-width: var(--carouselle-card-xxl);
  }
}


/* ===== THE CARD WATERMARK ===== */
.fact-card-footer {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  position: absolute;
  height: var(--button-size-xl);
  bottom: var(--app-default-top-bottom-margin-xl);
  left: var(--app-default-top-bottom-margin-xl);
  right: var(--app-default-top-bottom-margin-xl);
}

.fact-card-footer-logo {
  width: var(--uma-xs);
  height: var(--uma-xs);
  flex-shrink: 0;
  opacity: var(--opacity-watermark);
  position: relative;
  top: 0;
  fill: var(--bright-white);
}

.fact-card-footer-url {
  position: relative;
  font-size: var(--body-text-xxs);
  font-weight: var(--font-weight-normal);
  text-decoration: none;
  color: rgba(var(--bright-white-rgb), var(--opacity-high));
  flex: 1;
}

.fact-card-footer-url:hover {
  color: var(--orange);
  text-decoration: none;
}


/* ===== POINTER TARGET MINIMUM =====
   The link stays the size it is drawn at; an invisible box centred on it
   is what you can hit. */
.small-target-grows {
  position: relative;
}

.small-target-grows::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: max(100%, var(--target-size-min));
}


/* ===== THE FAQ ACCORDION ===== */
.faq-full-width-panel {
  padding-left: 0;
  padding-right: 0;
}

.faq-bleed-wrapper {
  padding-left: 0;
  padding-right: 0;
}

.faq-bleed-heading {
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
}

.faq-heading-group {
  width: 100%;
  max-width: var(--default-max-width);
  margin-left: var(--dynamic-gutter);
  margin-right: var(--dynamic-gutter);
  margin-bottom: var(--default-whitespace-below-section-headings);
}

.faq-section-heading {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.faqs-accordion {
  width: 100%;
  max-width: var(--golden-width-large);
  margin: 0 auto;
  text-align: left;
  align-self: stretch;
}

.faq-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.faq-item {
  border-bottom: var(--stroke-thin) solid var(--t-divider);
  text-align: left;
}

.faq-question {
  background-color: transparent;
  color: var(--t-text-strong);
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-semi-bold);
  padding-top: var(--app-default-top-bottom-margin-sm);
  padding-bottom: var(--app-default-top-bottom-margin-sm);
  padding-right: var(--default-left-right-desk-body-padding);
  padding-left: var(--default-left-right-desk-body-padding);
  width: 100%;
  text-align: left;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color var(--transition-base) ease, background-color var(--transition-base) ease;
}

.faq-question:hover {
  color: var(--orange);
}

.faq-answer {
  position: relative;
  color: var(--t-page-text);
  text-align: left;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: var(--default-left-right-desk-body-padding);
  padding-left: var(--default-left-right-desk-body-padding);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-accordion) ease-out, padding var(--transition-accordion) ease-out;
}

/*the page script adds this class when an answer opens*/
.faq-answer-open {
  max-height: var(--faq-answer-open-max-height);
  padding-top: var(--app-default-top-bottom-margin-sm);
  padding-bottom: var(--app-default-top-bottom-margin-sm);
}

/*the references are the last answer and far longer than the rest, so that
  one answer is never capped*/
.faq-answer-references {
  --faq-answer-open-max-height: none;
}

.faq-text {
  text-align: left;
  font-size: var(--body-text-xs);
  line-height: var(--default-line-height-large);
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}

/*a subheading inside an answer is an h5 so the outline does not skip a
  level; it reads at the h6 size*/
.faq-subheading {
  font-size: var(--body-text-sm);
}

@media (max-width: 600px) {
  .faq-question {
    padding-right: var(--default-left-right-mob-body-padding);
    padding-left: var(--default-left-right-mob-body-padding);
  }

  .faq-answer {
    padding-left: var(--default-left-right-mob-body-padding);
  }

  .faq-bleed-heading {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }

  .faq-heading-group {
    margin-bottom: var(--app-default-top-bottom-margin-xl);
  }
}


/* ===== THE GLOSSARY =====
   A heading, a search box and a row of letters that stay under the sub nav
   while the list scrolls, then every word grouped by its first letter. */

/*the page has no hero, so its first section starts below the header and
  the sub nav*/
.clears-fixed-bars {
  margin-top: calc(var(--fixed-header-height) + var(--subnav-row-height));
}

.glossary-column {
  width: 100%;
  max-width: var(--golden-width-large);
}

.glossary-title {
  font-size: var(--heading-size-xl);
  line-height: var(--default-line-height-x-small);
  color: var(--t-page-text);
  margin-bottom: var(--app-default-top-bottom-margin-sm);
}

.glossary-intro {
  font-size: var(--body-text-xl);
  line-height: var(--default-line-height-large);
  text-wrap: pretty;
}

/*the search box and the letters. Sticky, so they stay under the sub nav
  while the list scrolls past. The page script adds the chrome-hidden class
  when the header slides away, and the bar follows the sub nav up.*/
.glossary-tools {
  position: sticky;
  top: calc(var(--fixed-header-height) + var(--subnav-row-height));
  z-index: var(--z-glossary-tools);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding-top: var(--app-default-top-bottom-margin-sm);
  padding-bottom: var(--app-default-top-bottom-margin-sm);
  background-color: var(--t-page-bg);
  border-bottom: var(--stroke-thin) solid var(--t-divider);
  transition: top var(--transition-base) ease;
}

.glossary-tools-chrome-hidden {
  top: var(--subnav-row-height);
}

/*the search box is a pill with the bold Phosphor magnifying glass inside
  it on the left. The icon takes no clicks, so a click on it lands in the box*/
.search-field-wrap {
  position: relative;
  width: 100%;
}

.search-field-icon {
  position: absolute;
  top: 50%;
  left: var(--field-padding-x);
  transform: translateY(-50%);
  font-size: var(--button-icon-md);
  color: var(--t-text-muted);
  pointer-events: none;
}

/*the box itself is a UMA.css .field. This sits beside it: a pill, with room
  on the left for the magnifying glass*/

/*the letters are UMA.css circular buttons. They wrap on a wide screen and
  scroll sideways on a phone*/
.glossary-letter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}

.glossary-letter-link {
  font-size: var(--body-text-xs);
  text-decoration: none;
}

/*UMA.css underlines every link on hover with a:hover. A letter is a button,
  so it names :hover too to keep the underline off*/
.glossary-letter-link:hover {
  text-decoration: none;
}

.glossary-group {
  padding-top: var(--app-default-top-bottom-margin-xl);
}

.glossary-letter-heading {
  font-size: var(--heading-size-lg);
  line-height: var(--default-line-height-x-small);
  color: var(--t-emphasis);
  margin-bottom: var(--app-default-top-bottom-margin-xxs);
}

.glossary-term-list {
  margin: 0;
  padding: 0;
}

.glossary-entry {
  padding-top: var(--app-default-top-bottom-margin-sm);
  padding-bottom: var(--app-default-top-bottom-margin-sm);
  border-bottom: var(--stroke-thin) solid var(--t-divider);
}

.glossary-term {
  font-size: var(--body-text-lg);
  font-weight: var(--font-weight-semi-bold);
  line-height: var(--default-line-height-x-small);
  color: var(--t-text-strong);
  margin-bottom: var(--app-default-top-bottom-margin-xxxs);
}

.glossary-definition {
  margin: 0;
  font-size: var(--body-text-sm);
  line-height: var(--default-line-height-large);
  color: var(--t-page-text);
}

.glossary-no-results {
  padding-top: var(--app-default-top-bottom-margin-xl);
  font-size: var(--body-text-lg);
}

@media (max-width: 600px) {
  .glossary-letter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .glossary-letter-row::-webkit-scrollbar {
    display: none;
  }
}



/* ===== THE LEGAL PAGES: TERMS, PRIVACY, COOKIES ===== */
/*the reading column is the large golden width UMA.css uses for long text
  (.references-wrapper), centred, with the body padding either side*/
.legal-page {
  max-width: calc(var(--golden-width-large) + (2 * var(--default-left-right-desk-body-padding)));
  margin: 0 auto;
  padding: var(--app-default-top-bottom-margin-xxxxl) var(--default-left-right-desk-body-padding);
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .legal-page {
    padding: var(--app-default-top-bottom-margin-xxl) var(--default-left-right-mob-body-padding);
  }
}

.legal-section {
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}

.legal-list {
  padding-left: var(--app-default-top-bottom-margin-xl);
}

/*list items sat tight on each other; they take the same line height as the
  paragraphs and a small gap between them, the same across all three pages*/
.legal-list-item {
  line-height: var(--default-line-height-large);
  margin-bottom: var(--gap-xxs);
}

/*Privacy, Terms and Cookies read as one legal document, so every heading is
  charcoal, the same as the text, and has room to wrap*/
.legal-heading {
  color: var(--mid-charcoal);
  line-height: var(--default-line-height-x-small);
}

/*in long legal text a link has to be findable without a pointer, so it keeps
  the underline, and a long web address wraps instead of pushing the page
  sideways on a phone*/
.legal-link {
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/*the lawful basis table, with UMA.css's hairline divider colour*/
.legal-table {
  width: 100%;
  border-collapse: collapse;
  border: var(--stroke-thin) solid var(--dark-white);
}

.legal-table-cell {
  padding: var(--gap-md);
  text-align: left;
  vertical-align: top;
  border: var(--stroke-thin) solid var(--dark-white);
}

.legal-table-heading-cell {
  padding: var(--gap-md);
  text-align: left;
  vertical-align: top;
  border: var(--stroke-thin) solid var(--dark-white);
  font-weight: var(--font-weight-medium);
}

/*below 600 the three columns are wider than the screen and pushed the whole
  page sideways. The table scrolls sideways inside the page instead.*/
@media (max-width: 600px) {
  .legal-table {
    display: block;
    overflow-x: auto;
  }
}



/* ===== THE CRISIS CARDS =====
   Two cards in the mini screen carousel: a breathing card and a crisis
   signposting card that turns over. Each is also a .miniscreencard, so it
   takes the card's size, corners and ground from the rules above.
   The breathing box, the headings, the words and the buttons on the back are
   the chrome's own crisis pane classes from UMA.css, used exactly as UMA.css
   has them. The back of the card is the pane's dark teal, so they read the
   way they do in the pane, and nothing here restyles them. */
.uma-miniscreen-card-teal {
  background-color: var(--dark-teal);
  color: var(--bright-white);
}

.uma-miniscreen-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-xxl);
}

/*the face that is turned away. After the face rule so it wins*/
.uma-miniscreen-face-hidden {
  display: none;
}

.uma-miniscreen-back {
  background-color: var(--dark-teal);
  color: var(--bright-white);
  overflow-y: auto;
  --crisis-pane-control-height: var(--button-size-lg);
}

.card-name {
  font-size: var(--heading-size-md);
  font-weight: var(--font-weight-light);
  line-height: var(--default-line-height-x-small);
  margin: 0;
  text-align: left;
  color: inherit;
}

/*on the back the heading leaves room for the close button beside it*/
.card-name-beside-close {
  padding-right: var(--app-default-top-bottom-margin-xxxl);
  margin-bottom: var(--app-default-top-bottom-margin-sm);
}

/*the breathing box and the SOS badge sit in the middle of the card*/
.uma-miniscreen-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  --crisis-pane-breath-label-size: var(--body-text-sm);
}

.uma-miniscreen-body {
  margin: 0;
  font-size: var(--body-text-xs);
  line-height: var(--default-line-height-large);
}

/*the crisis pane's words, one size down so they fit the card. The pane's
  own rules read these two sizes, so this changes the size and nothing else*/
.uma-miniscreen-back-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  --heading-size-md: var(--body-text-lg);
  --body-text-sm: var(--body-text-xs);
}

/*the SOS badge: a tomato disc with two rings round it*/
.uma-sos {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--sos-badge-max-width);
  aspect-ratio: 1 / 1;
}

.uma-sos-dot {
  position: relative;
  z-index: var(--z-sos-dot);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sos-dot-size);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-circle);
  background: var(--tomato);
  color: var(--bright-white);
  font-size: var(--heading-size-lg);
  font-weight: var(--font-weight-bold);
}

.uma-sos-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1 / 1;
  border: var(--stroke-hairline) solid var(--tomato);
  border-radius: var(--radius-circle);
}

.uma-sos-ring-one {
  width: var(--sos-ring-inner-size);
}

.uma-sos-ring-two {
  width: var(--sos-ring-outer-size);
}

/*the plus that turns the card over, and the cross that turns it back. Both
  are UMA.css circular buttons; these only place them on the card*/
.card-open-button {
  position: absolute;
  bottom: var(--app-default-top-bottom-margin-sm);
  right: var(--app-default-top-bottom-margin-sm);
}

.card-close {
  position: absolute;
  top: var(--app-default-top-bottom-margin-xl);
  right: var(--app-default-top-bottom-margin-xl);
}



/* ===== THE WARNING CARD'S SMALLER EMOJI ===== */
.barrier-emoji-small {
  font-size: var(--heading-size-lg);
}


/* ===== THE CHARITY LOGO ===== */
.charity-card-logo {
  height: var(--charity-logo-height);
  width: auto;
  max-width: 100%;
  margin: 0 0 var(--app-default-top-bottom-margin-sm) 0;
  object-fit: contain;
  object-position: left center;
  align-self: flex-start;
}


/* ===== THE DIAGRAM THAT OPENS FULL SCREEN =====
   The image on the page takes a zoom-in pointer. Pressed, it opens in a dark
   full screen layer; the page's script shows and hides the layer. */
.trauma-overlap-image {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

.image-modal-overlay {
  display: none;
  position: fixed;
  z-index: var(--z-image-modal);
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--t-modal-backdrop);
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
}

.image-modal-content {
  margin: auto;
  display: block;
  max-width: var(--image-modal-max-size);
  max-height: var(--image-modal-max-size);
  border-radius: var(--app-default-radius-sm);
}

/*the close button is a UMA.css circular button; this only places it*/
.image-modal-close {
  position: absolute;
  top: var(--app-default-top-bottom-margin-lg);
  right: var(--app-default-top-bottom-margin-xl);
}


/* ===== THE FILM'S LINKEDIN MARK ===== */
.li-logo {
  display: block;
  margin-top: var(--app-default-top-bottom-margin-md);
}


/* ===== TEXT LEFT, BLOCK CENTRED ===== */
.center-align-left-aligned-text {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}



/* ===== BURNOUT: WHAT IS STRESS =====
   Two lists either side of a see-saw: low resources rises, high demands
   sinks. Each list names its colour once, as --stress-accent, and its
   heading, rule and title all read it. */
.stress-section {
  width: 100%;
  background-color: var(--t-page-bg);
  color: var(--t-page-text);
}

.stress-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--max-body-content-width);
  margin: 0 auto;
  padding: var(--app-default-top-bottom-margin-xxxxl) var(--default-left-right-desk-body-padding);
}

.stress-intro {
  max-width: var(--golden-width-large);
  margin-bottom: var(--app-default-top-bottom-margin-xxl);
}

.stress-balance {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stress-halves-gap);
}

.stress-seesaw {
  display: block;
  width: 100%;
  height: auto;
  order: -1;
  max-width: var(--stress-seesaw-max-width);
  margin: 0 auto;
}

.stress-seesaw-beam,
.stress-seesaw-tray,
.stress-seesaw-fulcrum {
  fill: var(--red-dark);
}

.stress-seesaw-weight-resources {
  fill: var(--stress-resources-accent);
}

.stress-seesaw-weight-demands {
  fill: var(--stress-demands-accent);
}

.stress-list {
  min-width: 0;
}

.stress-list-raised {
  align-self: start;
  order: 2;
  --stress-accent: var(--stress-resources-accent);
  --stress-accent-text: var(--t-stress-resources-text);
}

.stress-list-lowered {
  align-self: end;
  order: 1;
  --stress-accent: var(--stress-demands-accent);
  --stress-accent-text: var(--t-stress-demands-text);
}

.stress-list-title {
  font-size: var(--heading-size-xl);
  line-height: var(--default-line-height-x-small);
  color: var(--stress-accent-text);
  margin: 0 0 var(--app-default-top-bottom-margin-lg) 0;
}

.stress-list-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--stress-column-min-width), 1fr));
  gap: var(--app-default-top-bottom-margin-xxl) var(--app-default-top-bottom-margin-xl);
  align-items: start;
}

/*UMA.css has .brain-body-stack for the brain body pages, scoped to that
  family; this is the Learn pages' own, scoped the same way*/
:where(.page-learn) .brain-body-stack {
  padding-top: 0;
  min-width: 0;
}

.brain-body-stack-heading {
  font-size: var(--stress-heading-size);
  font-weight: var(--font-weight-semi-bold);
  color: var(--stress-accent-text);
  margin: 0 0 var(--stress-heading-space-below);
}

.brain-body-stack-rule {
  height: var(--stress-rule-height);
  width: 100%;
  background: var(--stress-accent);
  margin-bottom: var(--stress-rule-space-below);
  border-radius: var(--stress-rule-radius);
}

.brain-body-stack-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.brain-body-stack-item {
  font-size: var(--body-text-xs);
  line-height: var(--default-line-height-compact);
  color: var(--t-page-text);
  margin-bottom: var(--app-default-top-bottom-margin-xxs);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-regular);
}

.brain-body-stack-text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .stress-balance {
    gap: var(--app-default-top-bottom-margin-lg);
  }

  .stress-list-raised {
    align-self: stretch;
  }

  .stress-list-lowered {
    align-self: stretch;
  }
}

@media (max-width: 600px) {
  .stress-list-box {
    grid-template-columns: 1fr;
    gap: var(--app-default-top-bottom-margin-xl);
  }

  .stress-inner {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }
}


/* ===== BURNOUT: BURNOUT AND DEPRESSION SIDE BY SIDE =====
   A bright blue band, words in mid white. */
:where(.page-learn) .section-panel-bright-blue {
  width: 100%;
  background-color: var(--bright-blue);
  color: var(--mid-white);
}

.split-panel {
  display: flex;
  gap: var(--gap-xl);
  align-items: flex-start;
}

.split-left,
.split-right {
  flex: 1 1 0;
  min-width: 0;
}

.split-panel-lists {
  list-style: disc;
  padding-left: var(--gap-lg);
}

.split-panel-list-item {
  margin-bottom: var(--gap-xs);
  font-size: var(--app-section-para-text);
  line-height: var(--default-line-height-small);
}

.panel-introduction-text--space-below {
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}

/*the depression symptoms as a row of pills*/
.list-of-symptoms {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--app-default-top-bottom-margin-xxxl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.symptom-pill {
  background: var(--symptom-pill-bg);
  color: var(--light-white);
  border-radius: var(--radius-pill);
  padding: 0 var(--btn-padding-x);
  height: var(--button-size-md);
  display: inline-flex;
  align-items: center;
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--default-line-height-single);
  user-select: none;
}

@media (max-width: 900px) {
  .split-panel {
    flex-direction: column;
  }
}


/* ===== BURNOUT: THE EUSTRESS CHART =====
   A white panel so the chart reads the same in light and dark. The chart
   draws its own key; below 600 that key cannot wrap, so it is switched off
   in the page script and this list is shown instead. */
.eustress-panel {
  background: var(--pure-white);
  padding: var(--app-default-top-bottom-margin-xl) 0;
  display: block;
}

.eustress-panel-title {
  text-align: center;
  line-height: var(--default-line-height-x-small);
  color: var(--mid-charcoal);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
}

.eustress-chart-scroll {
  width: 100%;
  align-self: stretch;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
  scroll-padding-left: var(--default-left-right-desk-body-padding);
  scroll-padding-right: var(--default-left-right-desk-body-padding);
  box-sizing: border-box;
}

.eustress-chart-scroll::-webkit-scrollbar {
  display: none;
}

.eustress-chart-container {
  width: 100%;
  max-width: var(--eustress-chart-max-width);
  aspect-ratio: var(--eustress-chart-ratio);
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--eustress-key-space-below);
}

/*Chart.js writes its own width and height onto the canvas as inline styles.
  The only way to make the canvas fill its box instead is to outrank them,
  which is what !important is for here and nowhere else in this block*/
.eustress-chart {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.eustress-legend {
  display: none;
  list-style: none;
  margin: var(--app-default-top-bottom-margin-md) auto var(--eustress-key-space-below) auto;
  padding: 0 var(--default-left-right-desk-body-padding);
  max-width: var(--eustress-chart-max-width);
}

.eustress-legend-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-xs);
  font-size: var(--body-text-xs);
  line-height: var(--default-line-height-small);
  color: var(--mid-charcoal);
  margin-bottom: var(--gap-xs);
}

.eustress-legend-swatch {
  flex: 0 0 auto;
  width: var(--gap-lg);
  height: var(--gap-xs);
  margin-top: var(--gap-xxs);
  border-radius: var(--app-default-radius-xs);
}

.eustress-legend-swatch-boredom {
  background: var(--bright-teal);
}

.eustress-legend-swatch-eustress {
  background: var(--bright-green);
}

.eustress-legend-swatch-overload {
  background: var(--orange);
}

.eustress-legend-swatch-distress {
  background: var(--tomato);
}

@media (max-width: 900px) {
  .eustress-chart-container {
    min-width: var(--chart-scroll-min-width);
    aspect-ratio: var(--eustress-chart-ratio-narrow);
  }
}

@media (max-width: 600px) {
  .eustress-chart-scroll {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
    scroll-padding-left: var(--default-left-right-mob-body-padding);
    scroll-padding-right: var(--default-left-right-mob-body-padding);
  }

  .eustress-chart-container {
    margin-bottom: 0;
  }

  .eustress-panel-title {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }

  .eustress-legend {
    display: block;
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }
}


/* ===== THE SMALLER HEADINGS, AND LINKS ON A COLOURED GROUND ===== */
.panel-h3-heading {
  line-height: var(--default-line-height-x-small);
}

.link-on-colour {
  color: var(--white-text-default);
}

.link-on-colour:hover {
  color: var(--bright-teal);
}



/* ===== SHE'S HORMONAL: THE MONTHLY ROLLERCOASTER CHART =====
   The chart runs edge to edge; the scroller and the key carry their own
   side padding so the plot and the key stay off the screen edge. */
/*the panel also carries the trigeminal image wrap for its place in the
  section; the chart runs edge to edge, so the wrap's side padding comes off.
  After the trigeminal rules, so it wins at every width*/
.cycle-chart-panel {
  background-color: var(--mid-white);
  padding: 0;
}

.cycle-chart-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding: var(--default-left-right-desk-body-padding) 0;
}

.cycle-chart-scroll {
  width: 100%;
  align-self: stretch;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  box-sizing: border-box;
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
  scroll-padding-left: var(--default-left-right-desk-body-padding);
  scroll-padding-right: var(--default-left-right-desk-body-padding);
}

.cycle-chart-scroll::-webkit-scrollbar {
  display: none;
}

.cycle-chart-box {
  position: relative;
  width: 100%;
  aspect-ratio: var(--chart-ratio-wide);
}

.cycle-chart-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/*the key above the chart*/
.cycle-legend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
  margin-bottom: var(--app-default-top-bottom-margin-xxxs);
  border-radius: var(--app-default-radius-md);
  padding: var(--gap-sm) var(--gap-lg);
  width: 100%;
}

.cycle-legend-on-card {
  background: var(--t-chart-key-bg);
  margin-bottom: var(--app-default-top-bottom-margin-sm);
  box-sizing: border-box;
}

.cycle-legend-fit-graph {
  width: auto;
  align-self: stretch;
  margin-left: calc(var(--default-left-right-desk-body-padding) + var(--body-text-xxs) * var(--chart-key-left-inset));
  margin-right: calc(var(--default-left-right-desk-body-padding) + var(--body-text-xxs));
}

.cycle-legend-row {
  display: flex;
  justify-content: center;
  gap: var(--gap-xl);
}

.cycle-legend-row-wrap {
  flex-wrap: wrap;
  row-gap: var(--gap-xs);
}

.cycle-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  font-size: var(--body-text-xs);
  font-weight: var(--font-weight-normal);
  color: var(--t-text-secondary);
}

.cycle-legend-emoji {
  opacity: var(--opacity-visible);
  color: var(--t-page-text);
}

.cycle-legend-shape {
  height: var(--button-icon-lg);
  width: auto;
  flex: none;
  overflow: visible;
  filter: drop-shadow(0 var(--stroke-thin) var(--chart-mark-shadow-blur) rgba(var(--black-rgb), var(--opacity-low)));
}

.cycle-legend-shape-period {
  fill: var(--red);
}

.cycle-legend-shape-egg {
  fill: var(--bright-white);
}

.cycle-legend-egg-outline {
  stroke: var(--t-egg-edge);
  stroke-width: var(--stroke-thin);
  vector-effect: non-scaling-stroke;
}

/*the five hormone buttons. Each names its colour once; pressed on, the dot
  fills and the words take the colour*/
.chart-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: var(--gap-xl);
  row-gap: 0;
}

.chart-key-button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--body-text-xs);
  padding: var(--app-default-top-bottom-margin-xxs) 0;
  display: inline-flex;
  align-items: center;
  gap: var(--app-default-top-bottom-margin-xxs);
  color: var(--t-text-secondary);
  --key-fill: transparent;
}

.chart-key-button::before {
  content: "";
  display: inline-block;
  width: var(--app-default-top-bottom-margin-sm);
  height: var(--app-default-top-bottom-margin-sm);
  border-radius: var(--radius-circle);
  flex-shrink: 0;
  border: var(--stroke-thick) solid var(--key-colour);
  background: var(--key-fill);
  transition: background-color var(--transition-base) ease;
}

.chart-key-button-yellow {
  --key-colour: var(--yellow);
  --key-colour-text: var(--mustard);
}

.chart-key-button-orange {
  --key-colour: var(--orange);
  --key-colour-text: var(--orange);
}

.chart-key-button-red {
  --key-colour: var(--red);
  --key-colour-text: var(--red);
}

.chart-key-button-bright-teal {
  --key-colour: var(--bright-teal);
  --key-colour-text: var(--bright-teal);
}

.chart-key-button-light-sage-green {
  --key-colour: var(--light-sage-green);
  --key-colour-text: var(--light-sage-green);
}

/*a hormone that is showing on the chart. After the rules above so it wins*/
.chart-key-button-on {
  color: var(--key-colour-text);
  --key-fill: var(--key-colour);
}

/*a heading in the three columns stays with the paragraph under it*/
:where(.page-learn) .keep-with-next {
  break-after: avoid;
  break-inside: avoid;
}

@media (max-width: 900px) {
  .cycle-chart-box {
    min-width: var(--chart-scroll-min-width);
    aspect-ratio: var(--chart-ratio-narrow);
  }
}

@media (max-width: 600px) {
  .cycle-chart-inner {
    padding: var(--default-left-right-mob-body-padding) 0;
  }

  .cycle-chart-scroll {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
    scroll-padding-left: var(--default-left-right-mob-body-padding);
    scroll-padding-right: var(--default-left-right-mob-body-padding);
  }

  .cycle-chart-box {
    min-width: var(--chart-scroll-min-width);
  }

  .cycle-legend-fit-graph {
    margin-left: var(--default-left-right-mob-body-padding);
    margin-right: var(--default-left-right-mob-body-padding);
  }
}


/* ===== SHE'S HORMONAL: THE HPG AXIS DIAGRAM =====
   Words and lines in the text colour on the red panel. */
.hpg-text-col {
  padding-right: 0;
}

.hpg-tile {
  width: var(--golden-tile-width-wide);
  max-width: var(--golden-tile-max-width-wide);
  aspect-ratio: auto;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: flex-start;
}

.hpg-diagram {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

.hpg-diagram-sign {
  font-size: var(--hpg-sign-size);
}

.hpg-diagram-label {
  font-size: var(--hpg-label-size);
}

.hpg-diagram-kern {
  letter-spacing: var(--hpg-kern-tight);
}

.hpg-diagram-line {
  fill: none;
  stroke: var(--white-text-default);
  stroke-miterlimit: var(--hpg-line-miter);
}

.hpg-diagram-line-round {
  fill: none;
  stroke: var(--white-text-default);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--stroke-thick);
}

.hpg-diagram-line-dashed {
  fill: none;
  stroke: var(--white-text-default);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--stroke-thick);
  stroke-dasharray: var(--hpg-dash);
}

@media (max-width: 900px) {
  .hpg-tile {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: center;
  }
}




/* ===== THE HOMEPAGE: TOKENS =====
   Scoped to the homepage with :where(), which adds no weight. The dark
   block below swaps only the themed ones. */
:root:where(.page-home) {
  --t-card: var(--mid-white);
  --t-card-rgb: 242, 237, 234;
  --t-card-panel: var(--mid-white);
  --t-surface: var(--bright-white);
  --t-chart-track: var(--light-mushroom);
  --t-control-bg: var(--dark-white);
  --t-selected-bg: var(--navy);
  --t-selected-text: var(--bright-white);
  --t-score-met: var(--bright-green);

  /*the donut and radar borrowed from the profile and diagnostic pages read
    these; the homepage names them for itself*/
  --caption-text-sm: 0.85rem;
  --donut-centre-gap: 0.15rem;
  --donut-diameter-ratio: 60%;
  --severity-dot-size: 1.1rem;
  --sev-dot-offset: calc((var(--heading-size-sm) * var(--default-line-height-x-small) - var(--severity-dot-size)) / 2);
  --sev-dot-offset-mob: calc((var(--heading-size-xs) * var(--default-line-height-x-small) - var(--severity-dot-size)) / 2);
  --transition-card: 0.35s;
  --transition-fade: 0.6s;
  --z-card-face: 1;
  --z-card-mask: 2;
  --chart-tooltip-max-width: 300px;
  --chart-tooltip-background-rgb: 25, 25, 25;
  --chart-tooltip-swatch-size: 0.75rem;
  --chart-tooltip-swatch-radius: 2px;
  --chart-tooltip-fade-duration: 0.15s;
  --z-chart-tooltip: 9999;
  --t-home-tile: var(--light-white);
  --t-home-tile-rgb: var(--light-white-rgb);
  --t-home-heading: var(--dark-charcoal);
  --t-home-body: var(--mid-charcoal);
  --t-home-muted: var(--light-charcoal);
  --t-home-eyebrow: var(--mid-charcoal);
  --t-review-card: var(--bright-white);
  --t-review-card-rgb: var(--bright-white-rgb);
  --t-stat-dark-card: var(--dark-charcoal);
  --t-stat-on-light-red: var(--campaign-red);
  --t-stat-on-light-dark: var(--dark-charcoal);
  --t-circle-wash: var(--dark-white);
  --t-circle-wash-blur: none;
  --t-circle-mark: var(--mid-charcoal);
  --t-circle-mark-hover: var(--dark-charcoal);
  --t-tab-bg: var(--dark-white);
  --t-tab-text: var(--navy);
  --t-tab-divider: var(--navy);
  --t-tab-selected-bg: var(--navy);
  --t-tab-selected-text: var(--bright-white);
  --t-carousel-control: var(--lightest-charcoal);
  --t-carousel-control-off: var(--lightest-charcoal);
  --t-nav-frost-home: rgba(var(--bright-white-rgb), var(--opacity-high));
  --t-nav-line-home: var(--dark-white);
  --t-footer-ground: var(--mid-white);

  --campaign-red: #B23020;
  --campaign-hot-pink: #E4256A;
  --opacity-subtle: 0.1;
  --opacity-play-glass: 0.15;
  --video-rest-brightness: 0.55;
  --video-scrim: rgba(var(--black-rgb), 0.45);
  --hero-video-space-above: 8rem;
  --hero-title-size: 4rem;
  --hero-title-size-narrow: 3.5rem;
  --play-hover-scale: 1.08;
  --plus-button-inset: 0.9rem;
  --transition-plus-press: 0.15s;
  --transition-card-scale: 0.35s;
  --ease-card: cubic-bezier(0.4, 0, 0.2, 1);
  --button-size-video-control: 2.1875rem;
  --counter-size: 8.5rem;
  --counter-font: 'Helvetica Neue', 'Arial Narrow', sans-serif;
  --counter-label-font: 'Helvetica Neue', 'Arial', sans-serif;
  --counter-letter-spacing: 0.1em;
  --stat-narrative-font: 'Helvetica Neue Condensed', 'Arial Narrow', sans-serif;
  --stat-narrative-line-height: 0.96;
  --heading-size-xxxxl: 3.5rem;
  --stat-heading-baseline-offset: calc(0.236 * var(--default-card-left-right-padding) + var(--app-default-top-bottom-margin-sm) + 0.31 * var(--heading-size-xxxxl));
  --campaign-share-top: 66%;
  --heading-size-long-word-min: 1rem;
  --long-word-line-ratio: 13.392;

  --icon-disc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle fill='black' cx='20' cy='20' r='20'/></svg>");
  --icon-play-disc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m20,0C8.95,0,0,8.95,0,20s8.95,20,20,20,20-8.95,20-20S31.05,0,20,0Zm8.24,21.05l-11.18,6.84c-.38.23-.86.24-1.26.02-.39-.22-.63-.63-.63-1.07v-13.68c0-.45.24-.86.63-1.07.39-.22.87-.21,1.26.02l11.18,6.84c.37.22.59.62.59,1.05,0,.43-.22.83-.59,1.05Z'/></svg>");
  --icon-pause-disc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m20,0C8.95,0,0,8.95,0,20s8.95,20,20,20,20-8.95,20-20S31.05,0,20,0Zm-1.24,26.21c0,.69-.56,1.24-1.24,1.24h-3.1c-.69,0-1.24-.56-1.24-1.24v-12.41c0-.69.56-1.24,1.24-1.24h3.1c.69,0,1.24.56,1.24,1.24v12.41Zm8.07,0c0,.69-.56,1.24-1.24,1.24h-3.1c-.69,0-1.24-.56-1.24-1.24v-12.41c0-.69.56-1.24,1.24-1.24h3.1c.69,0,1.24.56,1.24,1.24v12.41Z'/></svg>");
  --icon-plus-disc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m20,0C8.95,0,0,8.95,0,20s8.95,20,20,20,20-8.95,20-20S31.05,0,20,0Zm7.81,21.06h-6.74v6.74c0,.59-.48,1.06-1.06,1.06s-1.06-.48-1.06-1.06v-6.74h-6.74c-.59,0-1.06-.48-1.06-1.06s.48-1.06,1.06-1.06h6.74v-6.74c0-.59.48-1.06,1.06-1.06s1.06.48,1.06,1.06v6.74h6.74c.59,0,1.06.48,1.06,1.06s-.48,1.06-1.06,1.06Z'/></svg>");
  --icon-plus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m28.87,20c0,.59-.48,1.06-1.06,1.06h-6.74v6.74c0,.59-.48,1.06-1.06,1.06s-1.06-.48-1.06-1.06v-6.74h-6.74c-.59,0-1.06-.48-1.06-1.06s.48-1.06,1.06-1.06h6.74v-6.74c0-.59.48-1.06,1.06-1.06s1.06.48,1.06,1.06v6.74h6.74c.59,0,1.06.48,1.06,1.06Z'/></svg>");
  --icon-close: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m26.27,26.27c-.42.42-1.09.42-1.51,0l-4.77-4.77-4.77,4.77c-.42.42-1.09.42-1.51,0s-.42-1.09,0-1.51l4.77-4.77-4.77-4.77c-.42-.42-.42-1.09,0-1.51s1.09-.42,1.51,0l4.77,4.77,4.77-4.77c.42-.42,1.09-.42,1.51,0s.42,1.09,0,1.51l-4.77,4.77,4.77,4.77c.42.42.42,1.09,0,1.51Z'/></svg>");
  --icon-sound-on-disc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m20,0C8.95,0,0,8.95,0,20s8.95,20,20,20,20-8.95,20-20S31.05,0,20,0Zm-5.28,23.41c0,.17-.14.31-.31.31h-2.17c-.69,0-1.24-.56-1.24-1.24v-4.97c0-.69.56-1.24,1.24-1.24h2.17c.17,0,.31.14.31.31v6.83Zm7.45,4.01c0,.23-.11.44-.3.56-.22.13-.5.11-.7-.04l-5.09-3.96c-.07-.06-.12-.15-.12-.24v-7.47c0-.1.04-.19.12-.24l5.09-3.96c.23-.18.55-.17.78.01.14.12.23.31.22.5v14.85Zm2.95-5.37s0,0-.01.01c-.23.25-.62.27-.88.04-.25-.23-.27-.62-.04-.88.62-.7.62-1.76,0-2.46,0,0,0,0,0,0-.23-.26-.2-.65.06-.88h0s0,0,0,0c.26-.23.65-.2.88.06,1.03,1.17,1.03,2.93,0,4.1Zm2.3,2.09s-.02.02-.03.03c-.24.25-.63.26-.88.02s-.26-.63-.02-.88c1.69-1.88,1.69-4.74,0-6.62,0,0-.02-.02-.03-.03-.22-.26-.19-.65.08-.87.26-.22.65-.19.87.08,2.11,2.36,2.11,5.92,0,8.28Z'/></svg>");
  --icon-sound-off-disc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m20,0C8.95,0,0,8.95,0,20s8.95,20,20,20,20-8.95,20-20S31.05,0,20,0Zm4.25,17.87c.26-.22.66-.18.87.08,1.03,1.17,1.03,2.93,0,4.1-.23.26-.62.28-.88.05-.26-.23-.28-.62-.06-.88.62-.7.62-1.76,0-2.46,0,0-.02-.02-.03-.03-.22-.26-.18-.66.08-.87Zm-6.43-3.19l3.36-2.61c.23-.18.55-.17.78.01.14.12.23.31.22.5v6.59c0,.09-.04.18-.11.24-.13.11-.32.1-.44-.03l-3.85-4.24s-.01-.01-.02-.02c-.11-.14-.08-.33.05-.44Zm-3.09,8.74c0,.17-.14.31-.31.31h-2.17c-.69,0-1.24-.56-1.24-1.24v-4.97c0-.69.56-1.24,1.24-1.24h2.17c.17,0,.31.14.31.31v6.83Zm11.6,3.87c-.25.23-.64.22-.88-.03,0,0,0,0-.01-.01l-3.26-3.59v3.77c0,.23-.11.44-.3.56-.22.13-.5.11-.7-.04l-5.09-3.96c-.07-.06-.12-.15-.12-.24v-6.91l-2.94-3.24c-.23-.25-.22-.64.03-.88.25-.23.64-.22.88.03,0,0,0,0,.01.01l12.41,13.66c.23.25.22.64-.03.88Zm1.1-3.15s-.02.02-.03.03c-.24.25-.63.26-.88.02s-.26-.63-.02-.88c1.69-1.88,1.69-4.74,0-6.62,0,0-.02-.02-.03-.03-.22-.26-.19-.65.08-.87.26-.22.65-.19.87.08,2.11,2.36,2.11,5.92,0,8.28Z'/></svg>");
  --icon-play: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m28.83,20c0,.43-.22.83-.59,1.05l-11.18,6.84c-.38.24-.86.24-1.26.02-.39-.22-.63-.63-.63-1.07v-13.68c0-.45.24-.86.63-1.07.39-.22.87-.21,1.26.02l11.18,6.84c.37.22.59.62.59,1.05Z'/></svg>");
  --icon-pause: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m26.83,13.79v12.41c0,.69-.56,1.24-1.24,1.24h-3.1c-.69,0-1.24-.56-1.24-1.24v-12.41c0-.69.56-1.24,1.24-1.24h3.1c.69,0,1.24.56,1.24,1.24Zm-9.31-1.24h-3.1c-.69,0-1.24.56-1.24,1.24v12.41c0,.69.56,1.24,1.24,1.24h3.1c.69,0,1.24-.56,1.24-1.24v-12.41c0-.69-.56-1.24-1.24-1.24Z'/></svg>");
}

:root[data-theme="dark"]:where(.page-home) {
  --t-card-rgb: 35, 47, 75;
  --t-home-tile: var(--t-card);
  --t-home-tile-rgb: var(--t-card-rgb);
  --t-home-heading: var(--t-page-text);
  --t-home-body: var(--t-page-text);
  --t-home-muted: var(--t-text-secondary);
  --t-home-eyebrow: var(--t-text-secondary);
  --t-review-card: var(--t-card);
  --t-review-card-rgb: var(--t-card-rgb);
  --t-stat-dark-card: var(--navy-60);
  --t-stat-on-light-red: var(--t-page-text);
  --t-stat-on-light-dark: var(--t-page-text);
  --t-circle-wash: rgba(var(--bright-white-rgb), var(--opacity-play-glass));
  --t-circle-wash-blur: blur(var(--blur-md));
  --t-circle-mark: var(--bright-white);
  --t-circle-mark-hover: var(--bright-white);
  --t-tab-bg: rgba(var(--bright-white-rgb), var(--opacity-play-glass));
  --t-tab-text: var(--bright-white);
  --t-tab-divider: rgba(var(--bright-white-rgb), var(--opacity-low));
  --t-tab-selected-bg: var(--bright-white);
  --t-tab-selected-text: var(--navy);
  --t-carousel-control: var(--t-page-text);
  --t-carousel-control-off: var(--t-text-muted);
  --t-nav-frost-home: rgba(var(--navy-60-rgb), var(--opacity-very-high));
  --t-nav-line-home: rgba(var(--bright-white-rgb), var(--opacity-low));
  --t-footer-ground: var(--t-page-bg);
}


/* ===== THE HOMEPAGE: THE HEADER OVER THE HERO =====
   Clear over the navy hero, frosted once the page scrolls. The page script
   swaps the two. */
.main-header--transparent {
  background-color: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.main-header--scrolled {
  background-color: var(--t-nav-frost-home);
  backdrop-filter: blur(var(--blur-lg));
  border-bottom-color: var(--t-nav-line-home);
}


/* ===== THE HOMEPAGE: THE HERO =====
   Navy, the words centred, the launch film behind them once it plays. */
.section-panel-dark-navy {
  width: 100%;
  background-color: var(--navy-dark);
  color: var(--light-white);
}

.hero-section-with-video {
  position: relative;
  width: 100%;
  max-width: var(--max-body-wrapper-width);
  aspect-ratio: 16 / 9;
  height: auto;
  padding-top: var(--hero-video-space-above);
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.hero-h1 {
  width: 100%;
  max-width: var(--golden-width-large);
  margin-top: 0;
  font-size: var(--hero-title-size);
  line-height: var(--default-line-height-x-small);
  font-weight: var(--font-weight-medium);
  color: rgba(var(--bright-white-rgb), var(--opacity-near-full));
}

.hero-intro-para-text {
  width: 100%;
  max-width: var(--max-content-width-golden-section-large);
  margin-top: 0;
  text-wrap: pretty;
  font-size: var(--body-text-xl);
  color: rgba(var(--bright-white-rgb), var(--opacity-high));
}

.strong-highlighted-text {
  color: rgba(var(--bright-white-rgb), var(--opacity-near-full));
  font-weight: var(--font-weight-medium);
}

/*the launch film fills the hero behind the words*/
.hero-launch-video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  z-index: -1;
}

@media (max-width: 800px) {
  .hero-section-with-video {
    padding-top: var(--app-default-top-bottom-margin-xxxxxl);
  }
}

@media (max-width: 600px) {
  .hero-section-with-video {
    aspect-ratio: 1 / 1;
    padding-top: calc(var(--app-default-top-bottom-margin-xxxxl) + var(--app-default-top-bottom-margin-xl));
  }

  .hero-h1 {
    font-size: var(--hero-title-size-narrow);
  }
}


/* ===== THE HOMEPAGE: PLAY, PLUS AND CLOSE MARKS =====
   Each mark is a shape cut out of a disc: the ::before is the mark, the
   ::after the frosted disc behind it. The icon shapes are tokens. */
.circular-play-button-on-dark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: var(--button-size-xxl);
  height: var(--button-size-xxl);
  padding: 0;
  border: none;
  border-radius: var(--radius-circle);
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  isolation: isolate;
  transition: opacity var(--transition-base) ease, transform var(--transition-base) ease;
}

.circular-play-button-on-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius-circle);
  background: var(--bright-white);
  mask-image: var(--icon-play-disc);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.circular-play-button-on-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(var(--bright-white-rgb), var(--opacity-play-glass));
  backdrop-filter: blur(var(--blur-md));
  mask-image: var(--icon-disc);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.circular-play-button-on-dark:hover {
  transform: translate(-50%, -50%) scale(var(--play-hover-scale));
}

.circular-play-button-on-dark--pause::before {
  mask-image: var(--icon-pause-disc);
}

.circular-play-button-on-dark--hidden {
  opacity: var(--opacity-hidden);
  pointer-events: none;
}

/*in the hero the mark sits in the flow under the words*/
.hero-launch-play {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  margin-top: var(--app-default-top-bottom-margin-lg);
}

.hero-launch-play:hover {
  transform: scale(var(--play-hover-scale));
}

.circular-plus-btn-on-dark,
.circular-plus-btn-on-light {
  position: absolute;
  bottom: var(--plus-button-inset);
  right: var(--plus-button-inset);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--button-size-md);
  height: var(--button-size-md);
  padding: 0;
  border: none;
  border-radius: var(--radius-circle);
  background: transparent;
  cursor: pointer;
  transition: opacity var(--transition-base) ease, transform var(--transition-plus-press) ease;
}

.circular-plus-btn-on-dark {
  isolation: isolate;
}

.circular-plus-btn-on-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius-circle);
  background: var(--bright-white);
  mask-image: var(--icon-plus-disc);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.circular-plus-btn-on-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(var(--bright-white-rgb), var(--opacity-play-glass));
  backdrop-filter: blur(var(--blur-md));
  mask-image: var(--icon-disc);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.circular-close-btn-on-light {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--button-size-md);
  height: var(--button-size-md);
  padding: 0;
  border: none;
  border-radius: var(--radius-circle);
  background: transparent;
  cursor: pointer;
}

/*the light plus and the close: a pale disc, the mark cut into a second layer*/
.circular-plus-btn-on-light::before,
.circular-close-btn-on-light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-circle);
  background: var(--t-circle-wash);
  backdrop-filter: var(--t-circle-wash-blur);
}

.circular-plus-btn-on-light::after,
.circular-close-btn-on-light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius-circle);
  background: var(--t-circle-mark);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.circular-plus-btn-on-light::after {
  mask-image: var(--icon-plus);
}

.circular-close-btn-on-light::after {
  mask-image: var(--icon-close);
}

.circular-plus-btn-on-light:hover::after,
.circular-close-btn-on-light:hover::after {
  background: var(--t-circle-mark-hover);
}

/*the icon font glyph inside each mark is for when the masks cannot load*/
.circular-mark-glyph {
  display: none;
}


/* ===== THE HOMEPAGE: THE CORNER FILM CONTROLS =====
   The page script adds these to each film: pause or play, sound on or off.
   On a pale film the mark sits dark on a pale disc. */
.video-controls-row {
  position: absolute;
  top: var(--app-default-top-bottom-margin-lg);
  right: var(--app-default-top-bottom-margin-lg);
  z-index: 4;
  display: flex;
  flex-direction: row;
  gap: var(--gap-sm);
  opacity: var(--opacity-hidden);
  pointer-events: none;
  transition: opacity var(--transition-base) ease;
}

.video-controls-row--visible {
  opacity: var(--opacity-visible);
  pointer-events: auto;
}

.video-control-btn {
  width: var(--button-size-video-control);
  height: var(--button-size-video-control);
  padding: 0;
  border: none;
  cursor: pointer;
  background-color: var(--bright-white);
  opacity: var(--opacity-very-high);
  transition: opacity var(--transition-base) ease;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.video-control-btn:hover {
  opacity: var(--opacity-visible);
}

.video-control-btn--pause {
  mask-image: var(--icon-pause-disc);
}

.video-control-btn--play {
  mask-image: var(--icon-play-disc);
}

.video-control-btn--sound-on {
  mask-image: var(--icon-sound-on-disc);
}

.video-control-btn--sound-off {
  mask-image: var(--icon-sound-off-disc);
}

.video-control-btn-on-light {
  position: relative;
  background-color: var(--dark-white);
  border-radius: var(--radius-circle);
  mask-image: none;
}

.video-control-btn-on-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--mid-charcoal);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.video-control-btn-on-light-pause::before {
  mask-image: var(--icon-pause);
}

.video-control-btn-on-light-play::before {
  mask-image: var(--icon-play);
}

/*a dark wash over a film while its play mark shows*/
.video-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-color: var(--video-scrim);
  opacity: var(--opacity-hidden);
  pointer-events: none;
  transition: opacity var(--transition-base) ease;
}

.video-scrim--visible {
  opacity: var(--opacity-visible);
}


/* ===== THE HOMEPAGE: MISSION LATE-DISCOVERY =====
   The words on new white beside the red counter. The split itself is the
   mission-split and mission-text-col rules above. */
.mission-backdrop {
  background: linear-gradient(to right, var(--t-what-is-text-bg) 0 50%, var(--campaign-red) 50% 100%);
}

.section--no-top-gap {
  padding-top: 0;
  margin-top: 0;
}

.section--no-bottom-gap {
  padding-bottom: 0;
  margin-bottom: 0;
}

.mission-heading {
  margin-top: 0;
  font-size: var(--heading-size-xxl);
  line-height: var(--default-line-height-x-small);
  color: var(--t-home-heading);
}

.mission-para-txt {
  margin: 0 0 var(--app-default-top-bottom-margin-sm) 0;
  font-size: var(--body-text-lg);
  line-height: var(--default-line-height-large);
  color: var(--t-home-body);
}

/*the long label beside the counter, the short one when stacked*/
.mission-cta--full {
  display: inline-flex;
}

.mission-cta--short {
  display: none;
}

.mission-counter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  text-align: center;
  background-color: var(--campaign-red);
  padding: var(--default-section-whitespace-top) var(--default-left-right-desk-body-padding);
}

.counter-status-para-txt,
.counter-caption-para-txt {
  font-size: var(--body-text-sm);
  font-family: var(--counter-label-font);
  font-weight: var(--font-weight-bold);
  color: var(--white-text-default);
  opacity: var(--opacity-high);
}

.counter-status-para-txt {
  margin: 0 0 var(--app-default-top-bottom-margin-xs) 0;
  letter-spacing: var(--counter-letter-spacing);
}

.counter-caption-para-txt {
  margin: var(--app-default-top-bottom-margin-xs) 0 0 0;
}

.counter-display-para-txt {
  margin: 0;
  font-size: var(--counter-size);
  font-family: var(--counter-font);
  font-weight: var(--font-weight-bold);
  font-stretch: condensed;
  line-height: var(--default-line-height-single);
  color: var(--white-text-default);
  opacity: var(--opacity-near-full);
}

.counter-meta-para-txt {
  margin: var(--app-default-top-bottom-margin-sm) 0 0 0;
  font-size: var(--body-text-sm);
  color: var(--white-text-default);
  opacity: var(--opacity-moderate);
}

@media (max-width: 900px) {
  .mission-counter {
    order: -1;
    aspect-ratio: 1 / 1;
    padding: var(--default-section-whitespace-top-mob) var(--default-left-right-mob-body-padding) var(--default-section-whitespace-bottom-mob);
  }

  .mission-cta--full {
    display: none;
  }

  .mission-cta--short {
    display: inline-flex;
  }
}

@media (max-width: 750px) {
  .mission-backdrop {
    background: var(--t-what-is-text-bg);
  }
}


/* ===== THE HOMEPAGE: #STOPMAKINGWOMENWAIT =====
   A carousel of 9 by 16 cards: a big line, or a number with its source
   under it, on red, pink, charcoal or light. Films and pictures fill the
   card behind the words. */
.heading-long-word-box {
  container-type: inline-size;
}

/*the one-word hashtag heading shrinks to fit the width instead of breaking*/
.panel-h2-heading-long-word {
  overflow-wrap: normal;
  font-size: clamp(var(--heading-size-long-word-min), calc((100cqi - 2 * var(--default-left-right-mob-body-padding)) / var(--long-word-line-ratio)), var(--heading-size-xxl));
}

.campaign-download-link {
  color: var(--orange);
}

.non-flippable-9-16-card {
  position: relative;
  flex: 0 0 var(--carouselle-card-lg);
  width: var(--carouselle-card-lg);
  aspect-ratio: 9 / 16;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--default-card-left-right-padding);
  border-radius: var(--app-default-radius-lg);
  overflow: hidden;
  scroll-snap-align: start;
}

/*a number over its source: the number sits on the golden line*/
.non-flippable-9-16-card-stat {
  grid-template-rows: calc(var(--golden-ratio-large-percentage) + var(--stat-heading-baseline-offset)) auto;
  align-content: start;
}

.non-flippable-9-16-card--dark {
  background-color: var(--t-stat-dark-card);
}

.non-flippable-9-16-card--red {
  background-color: var(--campaign-red);
}

.non-flippable-9-16-card--pink {
  background-color: var(--campaign-hot-pink);
}

.non-flippable-9-16-card--light {
  background-color: var(--t-home-tile);
}

/*a card with a film or picture behind its words*/
.non-flippable-9-16-card-media {
  place-content: center;
}

.stat-card-video,
.stat-card-background-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}

.stat-card-background-image {
  filter: brightness(var(--video-rest-brightness));
}

.stat-heading {
  position: relative;
  z-index: 1;
  align-self: end;
  margin: 0 0 var(--app-default-top-bottom-margin-sm) 0;
  font-size: var(--heading-size-xxxxl);
  font-family: var(--counter-font);
  font-weight: var(--font-weight-bold);
  font-stretch: condensed;
  line-height: var(--default-line-height-x-small);
  text-align: center;
  text-transform: uppercase;
  color: var(--bright-white);
  opacity: var(--opacity-near-full);
}

.stat-heading--dark {
  color: var(--t-stat-on-light-dark);
}

.stat-dark-para-txt {
  position: relative;
  z-index: 1;
  align-self: start;
  margin: 0;
  font-size: var(--body-text-lg);
  line-height: var(--default-line-height-large);
  text-align: center;
  color: var(--white-text-default);
  opacity: var(--opacity-very-high);
}

.stat-light-para-txt--dark {
  color: var(--t-stat-on-light-dark);
  opacity: var(--opacity-visible);
}

.stat-narrative {
  grid-row: 1 / -1;
  align-self: center;
  margin: 0;
  font-family: var(--stat-narrative-font);
  font-weight: var(--font-weight-bold);
  font-size: var(--heading-size-xxxl);
  line-height: var(--stat-narrative-line-height);
  text-transform: uppercase;
  text-align: center;
  color: rgba(var(--bright-white-rgb), var(--opacity-near-full));
}

.stat-narrative--red {
  color: var(--t-stat-on-light-red);
  opacity: var(--opacity-near-full);
}

.stat-narrative--dark {
  color: var(--t-stat-on-light-dark);
  opacity: var(--opacity-near-full);
}

.stat-link {
  color: inherit;
  text-decoration: none;
}

.stat-link:hover {
  color: var(--orange);
  text-decoration: underline;
}

/*the share row that comes up when the campaign film ends*/
.campaign-share-block {
  position: absolute;
  top: var(--campaign-share-top);
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  opacity: var(--opacity-hidden);
  pointer-events: none;
  transition: opacity var(--transition-base) ease;
}

.campaign-share-block--visible {
  opacity: var(--opacity-visible);
  pointer-events: auto;
}

.campaign-share-label {
  margin: 0;
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--bright-white);
}

.campaign-share-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--gap-md);
}

/*social marks over a film*/
.card-socials-overlay {
  position: absolute;
  bottom: var(--gap-md);
  left: var(--gap-md);
  z-index: 5;
  display: flex;
  flex-direction: row;
  gap: var(--gap-md);
  opacity: var(--opacity-hidden);
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.card-socials-overlay--visible {
  opacity: var(--opacity-visible);
  pointer-events: auto;
}

.card-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--heading-size-xl);
  color: var(--bright-white);
  text-decoration: none;
  opacity: var(--opacity-visible);
  transition: opacity var(--transition-base) ease;
}

.card-social-icon:hover {
  opacity: var(--opacity-high);
}

.campaign-share-link:hover {
  opacity: var(--opacity-moderate);
}

/*while a film plays, the words and marks over it step back*/
.playing-steps-back {
  opacity: var(--opacity-hidden);
  pointer-events: none;
  transition: opacity var(--transition-base) ease;
}

@media (max-width: 449px) {
  .non-flippable-9-16-card {
    flex: 0 0 var(--carouselle-card-width-mobile);
    width: var(--carouselle-card-width-mobile);
  }
}

@media (min-width: 600px) {
  .non-flippable-9-16-card {
    flex: 0 0 var(--carouselle-card-xl);
    width: var(--carouselle-card-xl);
  }

  .panel-h2-heading-long-word {
    font-size: clamp(var(--heading-size-long-word-min), calc((100cqi - 2 * var(--default-left-right-desk-body-padding)) / var(--long-word-line-ratio)), var(--heading-size-xxl));
  }
}

@media (min-width: 900px) {
  .non-flippable-9-16-card {
    flex: 0 0 var(--carouselle-card-xxl);
    width: var(--carouselle-card-xxl);
  }
}

@media (max-width: 899px) {
  .stat-narrative {
    font-size: var(--heading-size-xxl-narrow);
  }
}

@media (hover: none) {
  .card-socials-overlay {
    opacity: var(--opacity-visible);
    pointer-events: auto;
  }
}


/* ===== THE HOMEPAGE: SECTION HEADINGS =====
   The homepage's section headings are a size up from the Learn pages'.
   Centred sections centre the heading and the line under it; in a section
   whose carousel runs to the edges they keep the body padding too. */
.home-section-heading {
  font-size: var(--section-title-font-size);
}

.section-heading-centred {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.carousel-heading-centred {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
}

@media (max-width: 600px) {
  .carousel-heading-centred {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }
}

@media (min-width: 1280px) {
  .carousel-heading-centred {
    padding-left: 0;
    padding-right: 0;
  }
}




/* ===== THE HOMEPAGE: SECTION INTRO LINE =====
   The line under a centred heading, when the section has no carousel. */
.home-section-intro {
  width: 100%;
  max-width: var(--max-content-width-golden-section-large);
  text-wrap: pretty;
  font-size: var(--body-text-xl);
  line-height: var(--default-line-height-large);
  color: var(--t-page-text);
}


/* ===== THE HOMEPAGE: HOW SCREENING WORKS =====
   A column of tiles. Each landscape tile is the words beside a graphic,
   split on the golden ratio; from 950 down it stacks into a portrait card
   that grows to fit its words. The tile names its padding once, as
   --tile-padding, and its two halves read it. */
:root:where(.page-home) {
  --chart-tile-copy-max-width: 650px;
  --chart-disc-size: 252px;
  --chart-disc-web-share: 0.84;
  --home-canvas-inset-total: 2rem;
  --radar-card-head-room: 5.5rem;
  --radar-card-head-room-narrow: 3rem;
  --radar-disc-cap: 252px;
  --pixel-snap: 1px;
  --donut-canvas-max-size: 300px;
  --donut-well-width-narrow: 240px;
  --sensory-chart-width-standing-up: 380px;
  --sensory-chart-height-standing-up: 264px;
  --sensory-chart-height-lying-down: 320px;
  --sensory-chart-height-landscape: 440px;
  --report-page-ratio: 210 / 297;
  --report-preview-shadow: 0 6px 24px rgba(var(--black-rgb), var(--opacity-very-low));
  --report-dots-area-height: 6rem;
  --swipe-dot-size: 14px;
  --tile-ratio-landscape: 16 / 9;
  --tile-ratio-portrait: 9 / 16;
  --tile-ratio-tall: 4 / 5;
}

@media (min-width: 851px) {
  :root:where(.page-home) {
    --chart-disc-size: 420px;
  }
}

@media (max-width: 800px) {
  :root:where(.page-home) {
    --chart-disc-size: 200px;
  }
}

.tile-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  gap: var(--gap-lg);
  margin-left: auto;
  margin-right: auto;
}

.landscape-tile {
  --tile-padding: var(--app-default-top-bottom-margin-xxxl);
  position: relative;
  width: 100%;
  aspect-ratio: var(--tile-ratio-landscape);
  background-color: var(--t-home-tile);
  border-radius: var(--app-default-radius-lg);
  overflow: hidden;
}

.golden-section-landscape-tile-square-left {
  display: grid;
  grid-template-columns: var(--golden-ratio-small-percentage) var(--golden-ratio-large-percentage);
}

/*the words half and the graphic half of a golden tile*/
.golden-tile-text {
  padding-top: var(--tile-padding);
  padding-bottom: var(--tile-padding);
  padding-left: var(--tile-padding);
}

.golden-tile-graphic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--tile-padding);
}

/*the donut fills its half edge to edge*/
.golden-tile-graphic-flush {
  padding: 0;
  align-items: stretch;
}

/*the tile grows to fit its words once stacked*/
.tile-grows-to-fit {
  overflow: clip;
}

.mini-heading {
  margin-top: 0;
  margin-bottom: var(--app-default-top-bottom-margin-xxxs);
  font-size: var(--heading-size-xs);
  line-height: var(--default-line-height-small);
  font-weight: var(--font-weight-semi-bold);
}

.mini-heading-inline {
  font-size: var(--heading-size-xs);
  font-weight: var(--font-weight-semi-bold);
}

:where(.page-home) .default-card-paragraph-text {
  margin-top: 0;
  font-size: var(--body-text-sm);
  line-height: var(--default-line-height-large);
  color: var(--tile-text-colour);
}

.pointer-desktop {
  display: inline;
}

.pointer-mobile {
  display: none;
}

/*the bar chart tile: the words across the top, the chart under them*/
.chart-tile-stacked {
  display: flex;
  flex-direction: column;
}

.stacked-tile-text {
  flex: 0 0 auto;
  min-height: 0;
  padding-right: var(--tile-padding);
  padding-bottom: 0;
}

.stacked-tile-graphic {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  justify-content: stretch;
  padding-top: var(--app-default-top-bottom-margin-xl);
  padding-bottom: var(--app-default-top-bottom-margin-sm);
  container-type: inline-size;
  container-name: chart-card;
}

.bar-chart-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: var(--sensory-chart-width-standing-up);
  height: var(--sensory-chart-height-standing-up);
  margin-left: 0;
  margin-right: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.bar-chart-wrapper::-webkit-scrollbar {
  display: none;
}

.bar-chart-canvas {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

@container chart-card (max-width: 600px) {
  .bar-chart-wrapper {
    max-width: 100%;
    height: var(--sensory-chart-height-lying-down);
    overflow-x: hidden;
  }
}

/*the radar tile: the diagnostic radar, sized to the room the tile leaves*/
.threshold-tile-graphic {
  min-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

.homepage-chart-scope {
  width: 100%;
}

.radar-chart-scope {
  max-width: calc(var(--chart-disc-size) / var(--chart-disc-web-share) + var(--home-canvas-inset-total));
  margin-left: auto;
  margin-right: auto;
}

.radar-canvas-snapped {
  width: round(down, calc(100% - var(--home-canvas-inset-total)), var(--pixel-snap));
}

/*the donut tile: the donut on the tile, its label along the bottom*/
.donut-split {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.donut-split-chart {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--app-default-top-bottom-margin-lg);
}

.donut-split-well {
  display: flex;
  justify-content: center;
  width: var(--carouselle-card-xs);
  max-width: 100%;
}

.donut-split-label {
  flex: 0 0 auto;
  background-color: transparent;
  padding: var(--default-card-left-right-padding);
}

.donut-wrap-split {
  width: round(down, min(100%, var(--chart-disc-size)), var(--pixel-snap));
}

.donut-chart-split {
  margin: 0;
  max-width: var(--donut-canvas-max-size);
}

.donut-heading-split {
  justify-content: center;
}

.sev-dot-first {
  order: -1;
}

/*the page script adds this once the donut scrolls into view*/
.donut-part-shown {
  opacity: var(--opacity-visible);
}

/*the self-report preview beside the download tile*/
.two-card-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: var(--gap-lg);
  align-items: flex-start;
}

.portrait-tile-report-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(50% - (var(--gap-lg) / 2));
  aspect-ratio: var(--report-page-ratio);
  height: auto;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.report-preview-frame {
  flex: 0 1 auto;
  width: 100%;
  min-height: 0;
  aspect-ratio: var(--report-page-ratio);
  padding: var(--app-default-top-bottom-margin-xxxl) var(--app-default-top-bottom-margin-xxxl) 0;
}

.report-preview-img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--report-page-ratio);
  object-fit: contain;
  box-shadow: var(--report-preview-shadow);
}

.swipe-dots-row {
  display: flex;
  flex-direction: row;
  gap: var(--gap-sm);
}

.report-preview-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--report-dots-area-height);
  min-height: 0;
  align-items: center;
  justify-content: center;
}

.swipe-dot--current,
.swipe-dot--not-selected {
  position: relative;
  width: var(--swipe-dot-size);
  min-width: 0;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: var(--stroke-hairline) solid var(--t-emphasis);
  border-radius: var(--radius-circle);
}

.swipe-dot--current {
  background: var(--t-emphasis);
}

.swipe-dot--not-selected {
  background: transparent;
}

/*each dot answers a finger the size of the minimum target*/
.swipe-dot--current::after,
.swipe-dot--not-selected::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--target-size-min);
  height: var(--target-size-min);
}

:where(.page-home) .portrait-tile-single-row {
  --tile-padding: var(--app-default-top-bottom-margin-xxxl);
  display: flex;
  flex-direction: column;
  width: calc(50% - (var(--gap-lg) / 2));
  aspect-ratio: var(--report-page-ratio);
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: var(--tile-padding);
  background-color: var(--t-home-tile);
  color: var(--t-page-text);
  border-radius: var(--app-default-radius-lg);
  overflow: hidden;
}

.portrait-tile-text {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.portrait-tile-button {
  margin-top: auto;
}

@media (min-width: 851px) {
  .golden-tile-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .stacked-tile-text {
    max-width: calc(var(--chart-tile-copy-max-width) + (2 * var(--app-default-top-bottom-margin-xxxl)));
  }

  .donut-split-well {
    width: 100%;
  }
}

@media (min-width: 951px) {
  .bar-chart-wrapper {
    height: var(--sensory-chart-height-landscape);
  }

  .threshold-tile-graphic {
    container-type: size;
    padding: var(--app-default-top-bottom-margin-sm) 0;
  }

  .radar-chart-scope {
    max-width: min(100%, calc(100cqh - var(--radar-card-head-room) + var(--home-canvas-inset-total)), calc(var(--radar-disc-cap) / var(--chart-disc-web-share) + var(--home-canvas-inset-total)));
  }

  .donut-pct-large {
    font-size: var(--heading-size-xxl);
  }

  .donut-sev-large {
    font-size: var(--body-text-sm);
  }
}

@media (max-width: 950px) {
  .golden-section-landscape-tile-square-left {
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--tile-ratio-portrait);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .golden-tile-text {
    padding-right: var(--tile-padding);
  }

  .golden-tile-graphic {
    padding-top: 0;
  }

  .golden-tile-graphic-flush {
    padding: 0;
  }

  .tile-grows-to-fit {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr;
    aspect-ratio: auto;
  }

  /*a shape behind both halves keeps the portrait card its size at least*/
  .tile-grows-to-fit::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .tile-grows-to-fit-text {
    grid-column: 1;
    grid-row: 1;
  }

  .tile-grows-to-fit-graphic {
    grid-column: 1;
    grid-row: 2;
  }

  .stacked-tile-graphic {
    justify-content: flex-end;
    padding-top: var(--app-default-top-bottom-margin-xl);
  }

  .threshold-tile-graphic {
    padding: 0 0 var(--app-default-top-bottom-margin-xxxl);
  }

  .step-description-inline {
    display: inline;
  }

  .pointer-desktop {
    display: none;
  }

  .pointer-mobile {
    display: inline;
  }

  .two-card-row {
    flex-direction: column;
  }

  .portrait-tile-report-preview {
    width: 100%;
    max-width: 100%;
    aspect-ratio: auto;
  }

  .report-preview-frame {
    padding: 0;
  }

  .report-preview-dots {
    position: static;
    flex: 0 0 var(--report-dots-area-height);
  }

  :where(.page-home) .portrait-tile-single-row {
    width: 100%;
    max-width: 100%;
  }
}

@media (min-width: 801px) and (max-width: 950px) {
  .golden-section-landscape-tile-square-left {
    min-height: fit-content;
    max-width: min(100%, var(--golden-width-small));
  }

  :where(.page-home) .portrait-tile-single-row {
    aspect-ratio: var(--tile-ratio-tall);
    min-height: fit-content;
    max-width: min(100%, var(--golden-width-small));
  }

  .tile-grows-to-fit::before {
    aspect-ratio: var(--tile-ratio-tall);
  }

  .threshold-tile-text {
    display: block;
  }
}

@media (min-width: 601px) and (max-width: 950px) {
  .portrait-tile-report-preview {
    max-width: min(100%, var(--golden-width-small));
  }
}

@media (max-width: 800px) {
  .golden-section-landscape-tile-square-left,
  :where(.page-home) .portrait-tile-single-row {
    --tile-padding: var(--app-default-top-bottom-margin-xl);
    width: var(--carouselle-card-lg);
    max-width: var(--carouselle-card-xl);
    aspect-ratio: var(--tile-ratio-portrait);
    min-height: 0;
    overflow: hidden;
  }

  .portrait-tile-report-preview {
    width: var(--carouselle-card-lg);
    max-width: var(--carouselle-card-xl);
  }

  .tile-grows-to-fit::before {
    aspect-ratio: var(--tile-ratio-portrait);
  }

  .stacked-tile-graphic {
    padding-left: var(--app-default-top-bottom-margin-sm);
    padding-right: var(--app-default-top-bottom-margin-sm);
  }

  .threshold-tile-text {
    padding-bottom: var(--app-default-top-bottom-margin-md);
  }

  .threshold-tile-graphic {
    container-type: size;
  }

  .radar-chart-scope {
    --radar-card-head-room: var(--radar-card-head-room-narrow);
    max-width: min(100%, calc(100cqh - var(--radar-card-head-room) + var(--home-canvas-inset-total)), calc(var(--chart-disc-size) / var(--chart-disc-web-share) + var(--home-canvas-inset-total)));
  }

  .radar-heading-hidden-narrow {
    display: none;
  }

  .donut-split-chart {
    flex: 0 0 auto;
    padding: var(--app-default-top-bottom-margin-sm);
  }

  .donut-split-well {
    align-items: center;
    height: auto;
  }

  .donut-wrap-split {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .donut-heading-split {
    align-items: center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .sev-dot-first {
    align-self: baseline;
  }

  .donut-name-split {
    flex: 0 1 auto;
    text-align: left;
    text-wrap: balance;
  }

  .donut-split-label {
    padding: var(--app-default-top-bottom-margin-sm);
  }
}

@media (min-width: 600px) and (max-width: 800px) {
  .golden-section-landscape-tile-square-left,
  .portrait-tile-report-preview,
  :where(.page-home) .portrait-tile-single-row {
    width: var(--carouselle-card-xl);
  }
}

@media (max-width: 600px) {
  .golden-section-landscape-tile-square-left,
  .portrait-tile-report-preview,
  :where(.page-home) .portrait-tile-single-row {
    max-width: var(--carouselle-card-lg);
  }
}

@media (max-width: 450px) {
  .golden-section-landscape-tile-square-left,
  .portrait-tile-report-preview,
  :where(.page-home) .portrait-tile-single-row {
    max-width: var(--carouselle-card-xs);
  }
}

@media (max-width: 449px) {
  .golden-section-landscape-tile-square-left,
  .portrait-tile-report-preview,
  :where(.page-home) .portrait-tile-single-row {
    width: var(--carouselle-card-width-mobile);
  }

  .donut-split-well {
    width: var(--donut-well-width-narrow);
  }

  .threshold-tile-graphic {
    container-type: normal;
  }

  .radar-chart-scope {
    max-width: min(100%, calc(var(--chart-disc-size) / var(--chart-disc-web-share) + var(--home-canvas-inset-total)));
  }
}

@media (min-width: 600px) and (max-width: 850px) {
  .donut-split-well {
    width: var(--carouselle-card-lg);
  }
}


/* ===== THE HOMEPAGE: THE CHART TOOLTIP =====
   The page script builds one tooltip for the bar chart and the radar and
   moves it with the pointer. UMA.css has these for the diagnostic pages,
   scoped to that family; these are the homepage's, scoped the same way. */
:where(.page-home) .chart-tooltip {
  position: fixed;
  z-index: var(--z-chart-tooltip);
  max-width: var(--chart-tooltip-max-width);
  padding: var(--app-default-top-bottom-margin-sm);
  border-radius: var(--app-default-radius-sm);
  background: rgba(var(--chart-tooltip-background-rgb), var(--opacity-near-full));
  color: var(--bright-white);
  font-family: inherit;
  pointer-events: none;
  transition: opacity var(--chart-tooltip-fade-duration) var(--button-transition-ease);
}

:where(.page-home) .chart-tooltip-title {
  margin-bottom: var(--gap-xxs);
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-bold);
}

:where(.page-home) .chart-tooltip-row {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-xs);
}

:where(.page-home) .chart-tooltip-swatch {
  display: inline-block;
  flex-shrink: 0;
  width: var(--chart-tooltip-swatch-size);
  height: var(--chart-tooltip-swatch-size);
  margin-top: var(--app-default-top-bottom-margin-xxxxs);
  border-radius: var(--chart-tooltip-swatch-radius);
  background: var(--chart-tooltip-swatch-colour, var(--lightest-charcoal));
}

:where(.page-home) .chart-tooltip-text {
  font-size: var(--body-text-xs);
}

@media (prefers-reduced-motion: reduce) {
  :where(.page-home) .chart-tooltip {
    transition: none;
  }
}


/*on a phone the tile sections drop the inner wrapper's side padding: the
  section already carries it*/
@media (max-width: 600px) {
  .inner-content-wrapper-flush-narrow {
    padding-left: 0;
    padding-right: 0;
  }
}




/* ===== THE HOMEPAGE: THE FLIP CARDS =====
   Value proposition cards. The front is a title over a film, a picture or
   the brain animation; the plus opens a back panel of words over the whole
   card. A card with media sets its words white through the two colour
   properties below; the back sets them back. */
:root:where(.page-home) {
  --card-eyebrow-colour: var(--t-home-muted);
  --vp-title-colour: var(--t-home-body);
  --vp-title-space-below: 0;
  --vp-title-space-right: 0;
  --vp-title-line-height: var(--default-line-height-x-small);
  --back-panel-ground: var(--t-card);
  --back-panel-ground-rgb: var(--t-card-rgb);
  --back-panel-fade-height: var(--app-default-top-bottom-margin-xxxl);
  --back-panel-text-max-width: var(--golden-width-small);
  --line-height-title-wrap: 1.3;
  --status-tag-height: 1.875rem;
  --status-tag-padding-x: 0.75rem;
  --status-tag-letter-spacing: 0.06em;
  --card-back-bullet-dot-size: 8px;
  --z-back-panel: 3;
  --z-back-panel-fade: 4;
  --tile-text-colour: var(--t-page-text);
}

@media (min-width: 951px) {
  :root:where(.page-home) {
    --back-panel-text-max-width: var(--max-content-width-golden-section-large);
  }
}

.flippable-9-16-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--carouselle-card-lg);
  width: var(--carouselle-card-lg);
  min-height: 0;
  aspect-ratio: 9 / 16;
  border-radius: var(--app-default-radius-lg);
  overflow: hidden;
  scroll-snap-align: start;
  background-color: var(--t-card);
  transform-origin: center center;
  transition: transform var(--transition-card-scale) var(--ease-card);
}

.flippable-9-16-card--has-media {
  --card-eyebrow-colour: var(--bright-white);
  --vp-title-colour: var(--bright-white);
  background-color: var(--navy-dark);
}

.flippable-9-16-card-front {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: var(--app-default-top-bottom-margin-xl) var(--default-card-left-right-padding) var(--default-card-left-right-padding);
  text-align: left;
}

.card-eyebrow {
  position: relative;
  z-index: 1;
  color: var(--card-eyebrow-colour);
  transition: opacity var(--transition-base) ease;
}

.vp-title {
  position: relative;
  z-index: 1;
  margin: 0 0 var(--vp-title-space-below) 0;
  padding-right: var(--vp-title-space-right);
  font-size: var(--heading-size-md);
  font-weight: var(--font-weight-light);
  line-height: var(--vp-title-line-height);
  text-align: left;
  color: var(--vp-title-colour);
  transition: opacity var(--transition-base) ease;
}

.flippable-9-16-card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.flippable-9-16-card-media--dimmed {
  filter: brightness(var(--video-rest-brightness));
  transition: filter var(--transition-base) ease;
}

/*the fronts that carry a film or a photograph behind their words*/
.tracker-card-front,
.light-photo-card-front {
  position: relative;
  overflow: hidden;
}

.tracker-card-film,
.light-photo-card-picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}

/*the brain animation card*/
.brain-card-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

.brain-card-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.brain-card-copy {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.coming-soon-tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: var(--status-tag-height);
  margin-top: var(--app-default-top-bottom-margin-sm);
  padding-left: var(--status-tag-padding-x);
  padding-right: var(--status-tag-padding-x);
  border-radius: var(--app-default-radius-sm);
  background-color: var(--yellow);
  color: var(--navy);
  font-size: var(--body-text-xxs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--status-tag-letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity var(--transition-base) ease;
}

.coming-soon-tag--on-dark {
  background-color: var(--bright-white);
  color: rgb(var(--black-rgb));
  mix-blend-mode: screen;
}

/*the plus that opens the back*/
:where(.page-home) .flippable-9-16-card-info-btn {
  position: absolute;
  bottom: var(--app-default-top-bottom-margin-lg);
  right: var(--app-default-top-bottom-margin-lg);
  z-index: 2;
}

/*the back panel. Its right padding keeps the words to a readable measure
  on a wide tile; a fade at the foot shows there is more to scroll*/
:where(.page-home) .flippable-9-16-card-back {
  --card-eyebrow-colour: var(--t-text-secondary);
  --vp-title-colour: var(--t-home-body);
  --vp-title-space-below: var(--app-default-top-bottom-margin-sm);
  --vp-title-space-right: var(--app-default-top-bottom-margin-xxxxxl);
  --vp-title-line-height: var(--line-height-title-wrap);
  position: absolute;
  inset: 0;
  z-index: var(--z-back-panel);
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--app-default-top-bottom-margin-xxxl);
  padding-right: max(var(--app-default-top-bottom-margin-xxxl), calc(100% - var(--app-default-top-bottom-margin-xxxl) - var(--back-panel-text-max-width)));
  background-color: var(--back-panel-ground);
  background-image: linear-gradient(to top, var(--back-panel-ground), var(--back-panel-ground)), linear-gradient(to top, var(--back-panel-ground), rgba(var(--back-panel-ground-rgb), var(--opacity-hidden)));
  background-repeat: no-repeat, no-repeat;
  background-size: 100% var(--back-panel-fade-height), 100% var(--back-panel-fade-height);
  background-position: bottom, bottom;
  background-attachment: local, scroll;
}

/*the page script adds this when the plus is pressed*/
.flippable-9-16-card-back-open {
  display: flex;
}

:where(.page-home) .flippable-9-16-card-close {
  position: absolute;
  top: var(--app-default-top-bottom-margin-lg);
  right: var(--app-default-top-bottom-margin-lg);
}

/*the back's paragraphs sit a line's gap apart. UMA.css gives the last
  paragraph in a block a gap below with p:last-of-type, so this names
  :last-of-type too to take it away*/
.back-panel-text {
  margin: 0 0 var(--app-default-top-bottom-margin-sm) 0;
  line-height: var(--default-line-height-large);
}

.back-panel-text:last-of-type {
  margin-bottom: 0;
}

.back-panel-button {
  flex-shrink: 0;
  margin-top: auto;
}

.mini-screen-pill-row {
  gap: var(--gap-sm);
  margin-top: var(--app-default-top-bottom-margin-lg);
  margin-bottom: var(--app-default-top-bottom-margin-lg);
}

.card-back-bullet-list {
  display: flex;
  flex-direction: column;
  gap: var(--app-default-top-bottom-margin-xxs);
  list-style: none;
  margin-top: 0;
  margin-bottom: var(--app-default-top-bottom-margin-sm);
  padding-left: 0;
}

.card-back-bullet-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-md);
  line-height: var(--default-line-height-large);
}

.card-back-bullet-list-item::before {
  content: "";
  flex: 0 0 auto;
  width: var(--card-back-bullet-dot-size);
  aspect-ratio: 1 / 1;
  margin-top: calc((1em * var(--default-line-height-large) - var(--card-back-bullet-dot-size)) / 2);
  border-radius: var(--radius-circle);
  background: var(--campaign-red);
}

@media (max-width: 449px) {
  .flippable-9-16-card {
    flex: 0 0 var(--carouselle-card-width-mobile);
    width: var(--carouselle-card-width-mobile);
  }
}

@media (min-width: 600px) {
  .flippable-9-16-card {
    flex: 0 0 var(--carouselle-card-xl);
    width: var(--carouselle-card-xl);
  }
}

@media (min-width: 900px) {
  .flippable-9-16-card {
    flex: 0 0 var(--carouselle-card-xxl);
    width: var(--carouselle-card-xxl);
  }
}


/* ===== THE HOMEPAGE: WHAT UMA COSTS =====
   Two price cards side by side; from 1000 down they become a one-card
   carousel with dots under it. */
:root:where(.page-home) {
  --pricing-card-max-width: var(--golden-width-small);
  --default-column-gap: var(--gap-regular);
  --card-hover-lift: -5px;
  --pricing-tag-lift: calc(-0.25em - 3px);
  --included-reports-size: 1.25rem;
  --pricing-title-size: 1.5rem;
  --included-reports-space-below: 0.3rem;
  --list-icon-nudge-up: -1px;
  --check-icon-space: 14px;
  --report-icon-space: 10.5px;
}

.uma-two-grid-to-carousel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  column-gap: var(--default-column-gap);
  row-gap: var(--default-row-gap);
  width: 100%;
  max-width: calc((2 * var(--pricing-card-max-width)) + var(--default-column-gap) + (2 * var(--default-left-right-desk-body-padding)));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
  scroll-padding-inline-start: var(--default-left-right-desk-body-padding);
  scrollbar-width: none;
}

.uma-two-grid-to-carousel::-webkit-scrollbar {
  display: none;
}

.pricing-slide {
  display: contents;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  max-width: var(--pricing-card-max-width);
  padding: var(--default-card-top-padding) var(--default-card-left-right-padding) var(--app-default-top-bottom-margin-lg);
  border-radius: var(--default-radius);
  background: var(--t-home-tile);
  color: var(--t-page-text);
  text-align: left;
  transition: transform var(--transition-base) ease;
}

.pricing-card:hover {
  transform: translateY(var(--card-hover-lift));
}

.pricing-card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-sm);
}

.price {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  margin: 0;
  padding: 0;
  font-size: var(--heading-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--default-line-height-large);
}

.original-price {
  font-size: var(--heading-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--t-home-muted);
  text-decoration: line-through;
}

.pricing-card-tag {
  flex-shrink: 0;
  margin-top: 0;
  transform: translateY(var(--pricing-tag-lift));
}

.pricing-card-tag-full {
  display: inline;
}

.pricing-card-tag-short {
  display: none;
}

.pricing-card-title {
  margin-bottom: var(--gap-sm);
  font-size: var(--pricing-title-size);
  line-height: var(--default-line-height-x-small);
}

.pricing-card-features {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.pricing-feature-list {
  list-style: none;
  margin: var(--app-default-top-bottom-margin-sm) 0 var(--gap-lg) 0;
  padding: 0;
}

.pricing-feature {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--gap-sm);
  font-size: var(--body-text-xs);
  line-height: var(--default-line-height-large);
}

.reports-section {
  margin-bottom: var(--gap-lg);
}

.included-reports {
  margin-bottom: var(--included-reports-space-below);
  font-size: var(--included-reports-size);
  line-height: var(--default-line-height-x-small);
}

.icon-check-stroke {
  position: relative;
  top: var(--list-icon-nudge-up);
  margin-right: var(--check-icon-space);
  font-weight: var(--font-weight-bold);
  font-size: var(--body-text-xxl);
  color: var(--bright-green);
}

.icon-report-stroke {
  position: relative;
  top: var(--list-icon-nudge-up);
  margin-right: var(--report-icon-space);
  font-size: var(--body-text-xxxl);
  color: var(--tomato);
}

.pricing-swipe-dots {
  display: none;
  justify-content: center;
  margin-top: var(--app-default-top-bottom-margin-lg);
}

.pricing-section-tail {
  padding-bottom: var(--app-default-top-bottom-margin-xxxl);
}

@media (min-width: 601px) {
  .pricing-card {
    padding: var(--app-default-top-bottom-margin-xxxl);
  }
}

@media (max-width: 1000px) {
  .uma-two-grid-to-carousel {
    display: flex;
    flex-direction: row;
    gap: var(--default-row-gap);
    width: 100%;
    max-width: 100%;
    padding-top: var(--app-default-top-bottom-margin-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: var(--default-left-right-desk-body-padding);
    scroll-padding-right: var(--default-left-right-desk-body-padding);
  }

  .pricing-slide {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    justify-content: center;
    scroll-snap-align: center;
  }

  .pricing-card {
    width: 100%;
    flex-shrink: 1;
  }

  .pricing-swipe-dots {
    display: flex;
  }
}

@media (max-width: 600px) {
  .uma-two-grid-to-carousel {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
    scroll-padding-left: var(--default-left-right-mob-body-padding);
    scroll-padding-right: var(--default-left-right-mob-body-padding);
    scroll-padding-inline-start: var(--default-left-right-mob-body-padding);
  }

  .pricing-card-tag-full {
    display: none;
  }

  .pricing-card-tag-short {
    display: inline;
  }
}

@media (max-width: 359px) {
  .pricing-card-tag {
    padding-left: var(--gap-sm);
    padding-right: var(--gap-sm);
    letter-spacing: normal;
  }
}


/* ===== THE HOMEPAGE: HEALTH DATA SECURITY =====
   A red landscape tile with the lock, two portrait tiles, one with the
   phone film and one pink with the logo, and a landscape tile with the
   tablet film. The films come in a light and a dark cut; the theme picks
   one. */
:root:where(.page-home) {
  --lock-width: 340px;
  --lock-width-medium: 280px;
  --lock-width-small: 220px;
  --lock-width-smallest: 200px;
  --lock-ratio: 500 / 381;
  --lock-optical-lift: 3rem;
  --tile-logo-size-medium: 250px;
  --tile-logo-size-small: 220px;
  --tile-logo-size-smallest: 200px;
  --t-film-light-display: block;
  --t-film-dark-display: none;
}

:root[data-theme="dark"]:where(.page-home) {
  --t-film-light-display: none;
  --t-film-dark-display: block;
}

.fifty-fifty-landscape-tile {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.fifty-tile-text {
  padding: var(--tile-padding);
}

.landscape-tile--solid-red {
  --tile-text-colour: var(--pure-white);
  background-color: var(--campaign-red);
}

.mini-heading-inline {
  color: var(--tile-text-colour);
}

.tile-top-right-btn {
  position: absolute;
  top: var(--app-default-top-bottom-margin-xl);
  right: var(--app-default-top-bottom-margin-xl);
  z-index: 2;
}

.tile-top-right-btn:hover {
  background-color: var(--bright-white);
  border-color: var(--bright-white);
  color: var(--campaign-red);
}

.uma-lock-slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.uma-lock-frame {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: var(--app-default-top-bottom-margin-xl);
}

.uma-lock-media {
  display: block;
  flex-shrink: 0;
  width: var(--lock-width);
  height: auto;
  aspect-ratio: var(--lock-ratio);
}

.fifty-fifty-portrait-tile {
  --tile-padding: var(--app-default-top-bottom-margin-xxxl);
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(50% - (var(--gap-lg) / 2));
  aspect-ratio: 9 / 16;
  background-color: var(--t-home-tile);
  border-radius: var(--app-default-radius-lg);
  overflow: hidden;
}

/*the square picture half and the words half of a portrait tile*/
.portrait-tile-picture {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: var(--tile-padding);
}

.portrait-tile-words {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--app-default-top-bottom-margin-xl) var(--tile-padding) var(--tile-padding);
}

.fifty-fifty-portrait-tile--pink {
  --tile-text-colour: var(--pure-white);
  background-color: var(--campaign-hot-pink);
}

.tile-logo-centred {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-logo-centred--pink {
  background-color: var(--campaign-hot-pink);
}

.tile-logo-centred-svg {
  flex-shrink: 0;
  width: var(--carouselle-card-width-small);
  height: auto;
  aspect-ratio: 1 / 1;
}

.security-device-slot {
  min-height: 0;
  padding: 0;
}

.security-device-film {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.security-device-film-phone {
  object-position: center bottom;
}

.security-device-film-tablet {
  object-position: right center;
}

.security-device-film--light {
  display: var(--t-film-light-display);
}

.security-device-film--dark {
  display: var(--t-film-dark-display);
}

/*an open back panel repaints the tile under it, with a fade at the foot*/
.card-with-back-panel {
  transform-origin: center center;
  transition: transform var(--transition-card-scale) var(--ease-card);
}

.card-with-back-panel--pale {
  --back-panel-ground: var(--t-home-tile);
  --back-panel-ground-rgb: var(--t-home-tile-rgb);
}

.card-back-open {
  background-color: var(--back-panel-ground);
}

.card-back-open::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-back-panel-fade);
  height: var(--back-panel-fade-height);
  background: linear-gradient(to top, var(--back-panel-ground), rgba(var(--back-panel-ground-rgb), var(--opacity-hidden)));
  pointer-events: none;
}

@media (min-width: 851px) {
  .fifty-tile-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .uma-lock-frame {
    padding-bottom: calc(var(--app-default-top-bottom-margin-xl) + 2 * var(--lock-optical-lift));
  }
}

@media (max-width: 950px) {
  .fifty-fifty-landscape-tile {
    display: flex;
    flex-direction: column-reverse;
    aspect-ratio: 9 / 16;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .fifty-tile-text,
  .fifty-tile-media {
    flex: 0 0 auto;
    min-height: 0;
  }

  .fifty-tile-text {
    padding-top: 0;
  }

  .fifty-fifty-portrait-tile {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .tile-logo-centred-svg {
    width: var(--tile-logo-size-medium);
  }

  .uma-lock-media {
    width: var(--lock-width-medium);
  }

  .security-device-slot--tablet {
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 900px) {
  .copy-hidden-below-900 {
    display: none;
  }
}

@media (min-width: 801px) and (max-width: 950px) {
  .fifty-fifty-landscape-tile,
  .fifty-fifty-portrait-tile {
    aspect-ratio: var(--tile-ratio-tall);
    min-height: fit-content;
    max-width: min(100%, var(--golden-width-small));
  }

  .portrait-tile-picture {
    flex: 0 0 var(--golden-ratio-large-percentage);
    aspect-ratio: auto;
  }

  .portrait-tile-words {
    flex: 0 0 var(--golden-ratio-small-percentage);
  }
}

@media (max-width: 800px) {
  .fifty-fifty-landscape-tile,
  .fifty-fifty-portrait-tile {
    --tile-padding: var(--app-default-top-bottom-margin-xl);
    width: var(--carouselle-card-lg);
    max-width: var(--carouselle-card-xl);
    aspect-ratio: 9 / 16;
    min-height: 0;
    overflow: hidden;
  }

  .tile-logo-centred-svg {
    width: var(--tile-logo-size-small);
  }

  .uma-lock-media {
    width: var(--lock-width-small);
  }
}

@media (min-width: 600px) and (max-width: 800px) {
  .fifty-fifty-landscape-tile,
  .fifty-fifty-portrait-tile {
    width: var(--carouselle-card-xl);
  }
}

@media (max-width: 600px) {
  .fifty-fifty-landscape-tile,
  .fifty-fifty-portrait-tile {
    max-width: var(--carouselle-card-lg);
  }
}

@media (max-width: 450px) {
  .fifty-fifty-landscape-tile,
  .fifty-fifty-portrait-tile {
    max-width: var(--carouselle-card-xs);
  }

  .tile-logo-centred-svg {
    width: var(--tile-logo-size-smallest);
  }

  .uma-lock-media {
    width: var(--lock-width-smallest);
  }
}

@media (max-width: 449px) {
  .fifty-fifty-landscape-tile,
  .fifty-fifty-portrait-tile {
    width: var(--carouselle-card-width-mobile);
  }
}

/*the tablet tile's words run longer than the shape, so stacked it grows to
  fit them. Last, so it wins at every width it applies to*/
@media (max-width: 950px) {
  .landscape-tile--grows-when-stacked {
    aspect-ratio: auto;
    height: auto;
  }
}




/* ===== THE HOMEPAGE: REVIEWS =====
   Thumbs up or down and a sort menu over a carousel of review cards; Post
   review under it opens the form in place of the reviews. */
:root:where(.page-home) {
  --verdict-tab-height: 40px;
  --verdict-tab-icon-size: 1.3rem;
  --verdict-tab-icon-padding: 1rem;
  --verdict-tab-icon-nudge-up: 0.125rem;
  --verdict-thumbs-up-drop: 0.125rem;
  --verdict-thumbs-down-drop: 0.3125rem;
  --review-fade-gradient-height: 2rem;
  --review-fade-solid-height: 2rem;
  --review-fade-gradient-height-landscape: 3rem;
  --review-fade-solid-height-landscape: 1rem;
  --sort-caret-room: 1rem;
  --star-hover-scale: 1.05;
}

.reviews-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-md);
}

.reviews-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--app-default-top-bottom-margin-lg);
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
}

.verdict-tabs {
  display: inline-flex;
  flex-direction: row;
  height: var(--verdict-tab-height);
  border-radius: var(--app-default-radius-sm);
  overflow: hidden;
  background-color: var(--t-tab-bg);
}

.verdict-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding-left: var(--verdict-tab-icon-padding);
  padding-right: var(--verdict-tab-icon-padding);
  border: none;
  border-radius: 0;
  background-color: var(--t-tab-bg);
  color: var(--t-tab-text);
  font-family: inherit;
  font-size: var(--verdict-tab-icon-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--default-line-height-single);
  cursor: pointer;
  transition: background-color var(--transition-base) ease, color var(--transition-base) ease;
}

.verdict-tab-second {
  border-left: var(--stroke-hairline) solid var(--t-tab-divider);
}

.verdict-tab--selected {
  background-color: var(--t-tab-selected-bg);
  color: var(--t-tab-selected-text);
}

/*the two thumbs sit at different heights in the emoji font, so each is
  nudged onto the same line*/
.verdict-tab-icon--thumbs-up {
  transform: translateY(calc(var(--verdict-thumbs-up-drop) - var(--verdict-tab-icon-nudge-up)));
}

.verdict-tab-icon--thumbs-down {
  transform: translateY(calc(var(--verdict-thumbs-down-drop) - var(--verdict-tab-icon-nudge-up)));
}

.dropdown {
  position: relative;
  display: inline-block;
}

.uma-drawer-reviews-sort {
  appearance: none;
  height: var(--button-size-md);
  padding-left: var(--gap-lg);
  padding-right: calc(var(--gap-lg) + var(--sort-caret-room));
  border: var(--stroke-hairline) solid var(--light-charcoal);
  border-radius: var(--btn-radius);
  background: var(--bright-white);
  color: var(--mid-charcoal);
  font-family: inherit;
  font-size: var(--body-text-xs);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.uma-drawer-reviews-sort:hover {
  border-color: var(--mid-charcoal);
}

.dropdown-caret {
  position: absolute;
  top: 50%;
  right: var(--gap-md);
  transform: translateY(-50%);
  pointer-events: none;
  font-size: var(--body-text-xxs);
  color: var(--light-charcoal);
}

.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-self: flex-start;
  width: var(--carouselle-card-xs);
  aspect-ratio: var(--carouselle-card-ratio-portrait);
  border-radius: var(--default-radius);
  background-color: var(--t-review-card);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  scroll-snap-align: start;
}

.review-card::-webkit-scrollbar {
  display: none;
}

.review-card-header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--gap-sm);
  row-gap: var(--gap-xs);
  padding: var(--default-card-top-padding) var(--default-card-left-right-padding) var(--app-default-top-bottom-margin-sm);
  text-align: left;
}

.review-card-stars {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  gap: var(--gap-xxs);
  margin-right: calc(-1 * var(--gap-xxs));
  letter-spacing: var(--gap-xxs);
  font-size: var(--button-icon-xxl);
  line-height: var(--default-line-height-single);
  color: var(--yellow);
}

.review-card-date {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  margin: 0;
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--t-home-muted);
}

.review-card-name {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--t-home-body);
}

.review-card-avatar,
.review-card-verdict {
  margin-right: var(--gap-xs);
  font-style: normal;
}

.review-card-body {
  flex: 0 0 auto;
  padding: 0 var(--default-card-left-right-padding) var(--review-fade-solid-height);
  text-align: left;
}

.review-card-quote {
  margin: 0;
  font-family: 'Merriweather', serif;
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-medium);
  font-style: italic;
  line-height: var(--default-line-height-large);
  text-align: left;
}

.review-card-quote-text {
  display: inline;
}

/*a fade at the foot of a card whose words run on; the page script shows it
  until the card is scrolled to the end*/
.review-card-fade {
  position: sticky;
  bottom: 0;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  height: calc(var(--review-fade-gradient-height) + var(--review-fade-solid-height));
  margin-top: calc(-1 * (var(--review-fade-gradient-height) + var(--review-fade-solid-height)));
  background: linear-gradient(to bottom, rgba(var(--t-review-card-rgb), var(--opacity-hidden)) 0, var(--t-review-card) var(--review-fade-gradient-height), var(--t-review-card) 100%);
  opacity: var(--opacity-hidden);
  pointer-events: none;
  transition: opacity var(--transition-base) ease;
}

.review-card-fade--visible {
  opacity: var(--opacity-visible);
}

.reviews-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reviews-post-slot {
  margin-left: auto;
  padding-right: var(--default-left-right-desk-body-padding);
  padding-bottom: var(--app-default-top-bottom-margin-xxxl);
}

.uma-drawer-post-btn {
  height: var(--button-size-sm);
  min-height: var(--button-size-sm);
  padding: 0 var(--gap-lg);
  font-size: var(--body-text-xs);
}

/*the page script adds this while the form is open*/
.reviews-hidden-while-writing {
  display: none;
}

/*the form*/
.uma-product-drawer-panel-write {
  position: relative;
  padding-left: var(--default-left-right-mob-body-padding);
  padding-right: var(--default-left-right-mob-body-padding);
  scroll-margin-top: calc(var(--fixed-header-height) + var(--app-default-top-bottom-margin-xl));
}

.review-form-close {
  position: absolute;
  top: 0;
  right: var(--default-left-right-mob-body-padding);
}

.uma-drawer-write-heading {
  margin: 0 0 var(--app-default-top-bottom-margin-md);
  font-size: var(--heading-size-md);
  font-weight: var(--font-weight-light);
  text-align: left;
  color: var(--t-home-body);
}

.uma-chrome-feedback-star-svg {
  width: 100%;
  height: 100%;
  color: var(--dark-white);
  transition: color var(--transition-fast) ease, transform var(--transition-fast) ease;
}

.uma-chrome-feedback-star-svg:hover {
  color: var(--navy);
  transform: scale(var(--star-hover-scale));
}

/*the page script adds this to each star up to the rating*/
.star-svg-filled,
.star-svg-filled:hover {
  color: var(--yellow);
}

.uma-drawer-review-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap-md);
  width: 100%;
  margin-top: var(--gap-md);
}

.review-action-button {
  flex: 1 1 0;
}

.uma-drawer-review-cancel {
  display: none;
}

.btn-submit-constrained {
  width: 100%;
  max-width: var(--golden-width-small);
}

@media (min-width: 450px) {
  .review-card {
    width: var(--carouselle-card-315);
  }
}

@media (min-width: 600px) {
  .review-card {
    width: var(--carouselle-card-xxxl);
    aspect-ratio: var(--carouselle-card-ratio-landscape);
  }

  .review-card-body {
    padding-bottom: var(--review-fade-solid-height-landscape);
  }

  .review-card-fade {
    height: calc(var(--review-fade-gradient-height-landscape) + var(--review-fade-solid-height-landscape));
    margin-top: calc(-1 * (var(--review-fade-gradient-height-landscape) + var(--review-fade-solid-height-landscape)));
    background: linear-gradient(to bottom, rgba(var(--t-review-card-rgb), var(--opacity-hidden)) 0, var(--t-review-card) var(--review-fade-gradient-height-landscape), var(--t-review-card) 100%);
  }
}

@media (min-width: 1000px) {
  .review-card {
    width: var(--carouselle-card-420);
  }
}

@media (min-width: 1280px) {
  .reviews-controls {
    padding-left: calc(((100% - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding));
    padding-right: calc(((100% - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding));
  }

  .reviews-post-slot {
    padding-right: calc(((100% - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding));
  }
}

@media (max-width: 600px) {
  .reviews-title-row {
    display: block;
  }

  .reviews-controls {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }

  .reviews-post-slot {
    padding-right: var(--default-left-right-mob-body-padding);
  }
}

@media (max-width: 599px) {
  .uma-drawer-post-btn {
    height: var(--button-size-xs);
    min-height: var(--button-size-xs);
  }
}


/* ===== FOCUS =====
   The focus rules already in this file do the work: every browser ring is
   off, a click into a .field leaves only the cursor, and .keyboard-focus
   turns an element's own stroke orange after Tab. The one thing missing is
   an element with no stroke of its own (a text link, a filled button): an
   orange stroke there draws nothing. The keyboard script gives those
   .keyboard-focus-no-stroke as well, and this puts an orange outline the
   width of a UMA.css stroke exactly where a border would be, no gap. */
.keyboard-focus-no-stroke:focus-visible:where(:not(.uma-input-pointer *)) { /* used: auth */
  outline: var(--stroke-thin) solid var(--orange);
  outline-offset: 0;
}


/* ===== NO BLINKING TEXT BAR OUTSIDE A FIELD ===== */
.text-cursor-hidden {
  caret-color: transparent;
}

:where(input, textarea, [contenteditable="true"]) { /* used: auth */
  caret-color: auto;
}


/* ==========================================================================
   NEW STYLES: auth, 30 Sep 2026, for: /sign-up, /verify-email, /set-pin,
   /security-setup, /log-in, /reset-pin, /log-out, /contact, /add-your-video-bio

   Every selector is a new class of these pages. Nothing here restyles a class
   another block owns. No IDs, no !important. Every value is a UMA.css token or
   one of the new tokens below; layout values (100%, 50%, 1fr, 0) stay as they
   are. Buttons are UMA.css .btn buttons; these classes only size and place them.

   FOCUS. The chrome's Tab script puts keyboard-focus (and keyboard-focus-no-stroke
   on things with no stroke) on whatever Tab lands on, and the rules already in
   this file turn that stroke orange. Section 16 only adds the three boxes that
   draw their edge round a button or field inside them, the same way the chrome
   block does for .field-action.
   ========================================================================== */

/* ---------- 1. NEW TOKENS ---------- */
:root {
  /* Colour and layering */
  --navy-60: #0E131E;
  --z-auth-overlay: 9999;
  --z-panel-close: 10;

  /* Uma animation screens */
  --auth-animation-width: 16rem;
  --auth-animation-ratio: 500 / 381;
  --auth-cream-fade-duration: 0.8s;

  /* PIN and code tiles */
  --pin-field-width: 80%;
  --pin-tile-edge-padding: 0.1875rem;
  --pin-digit-size: calc(var(--heading-size-lg) * 0.8);

  /* Small press on submit */
  --press-scale-subtle: 0.97;
  --press-duration-subtle: 220ms;

  /* Terms, timer and Resend */
  --terms-open-duration: 0.4s;
  --timer-resend-button-width: 9rem;
  --letter-spacing-wide: 0.02em;

  /* Autofill */
  --autofill-cover-spread: 1000px;
  --autofill-hold-duration: 5000s;

  /* Waving hand */
  --wave-duration: 2s;
  --wave-count: 2;
  --wave-pivot: 70% 70%;

  /* Video bio panels */
  --panel-emoji-size: 5rem;
  --panel-close-inset: 2rem;
  --hit-area-comfort: 2.75rem;
  --upload-zone-width: 20rem;
  --upload-plus-size: 2.5rem;
  --upload-plus-circle-size: 5rem;
  --upload-status-bar-padding: 0.75rem 1rem;
  --upload-plus-hover-scale: 1.06;
  --profile-pic-square-size: 17.5rem;
  --transition-plus: 0.25s;
  --identity-square-size: 13.75rem;
  --identity-letter-size: 1.75rem;
  --identity-letter-top: 0.625rem;
  --identity-letter-left: 0.75rem;
  --identity-square-fade-offset: -0.625rem;

  /* Opacities */
  --opacity-soft: 0.15;
  --opacity-medium-low: 0.4;
  --opacity-medium-high: 0.6;
  --opacity-strong: 0.75;
  --opacity-very-strong: 0.85;
}


/* ---------- 2. PAGE LAYOUT ---------- */
/* 3rem above the logo on phones held sideways, so the field stays above the keyboard */
@media (orientation: landscape) and (pointer: coarse) {
  .phone-sideways-top-space { padding-top: var(--app-default-top-bottom-margin-xxxl); }
}
/* Keeps the logo, heading and text spacing when a page swaps between its screens */
.screen-column { display: flex; flex-direction: column; }
/* Headings that wrap onto two lines get 1.3 line height */
.line-height-x-small { line-height: var(--default-line-height-x-small); }
/* "for free" drops out of the sign-up heading on small phones */
@media (max-width: 480px) {
  .hidden-on-small-mobile { display: none; }
}
/* 1rem more space between the contact intro line and the form */
.contact-form { padding-top: var(--gap-regular); }
/* 2rem gap between "Your PIN" and "Repeat your PIN" */
.form-wide-gap { gap: var(--gap-xxl); }


/* ---------- 3. FIELDS ---------- */
/* First and last name side by side, stacked on small phones */
.name-fields-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--form-item-gap); }
@media (max-width: 480px) {
  .name-fields-row { grid-template-columns: minmax(0, 1fr); }
}
/* Icon or "+44 (0)" on the left of a field */
.field-action-prefix { display: flex; align-items: center; flex-shrink: 0; padding-left: var(--field-padding-x); color: var(--light-charcoal); white-space: nowrap; }
.field-action-prefix-icon { font-size: var(--button-icon-md); }
/* Autofill keeps the field's own colours instead of the browser's blue */
.autofill-keeps-colours:-webkit-autofill { -webkit-box-shadow: 0 0 0 var(--autofill-cover-spread) var(--bright-white) inset; -webkit-text-fill-color: var(--mid-charcoal); caret-color: var(--mid-charcoal); transition: background-color var(--autofill-hold-duration) ease-in-out 0s; }
/* The arrow that looks disabled but still takes the click browsers need to release an autofilled email */
.field-action-button-looks-disabled { background: var(--dark-white); border-color: var(--dark-white); color: var(--light-charcoal); cursor: not-allowed; }
/* Small left aligned message under a field */
.field-note { margin: 0; text-align: left; font-size: var(--body-text-xs); }
.external-link-icon { font-size: var(--body-text-xs); vertical-align: middle; }
/* The address or number a link or code was sent to */
.sent-to-address { color: var(--orange); font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
/* Country dropdown (the select is a UMA.css .field; this adds the caret and room for it) */
.country-select { position: relative; width: 100%; }
.country-select-input { appearance: none; -webkit-appearance: none; padding-right: calc(var(--field-padding-x) * 3); cursor: pointer; }
.country-select-chevron { position: absolute; top: 50%; right: var(--field-padding-x); transform: translateY(-50%); font-size: var(--button-icon-md); color: var(--mid-charcoal); pointer-events: none; }
/* The "OR" rows sit 2rem below the field or button above them */
.form-alt-link--below-form { margin-top: var(--app-default-top-bottom-margin-sm); }
/* "Reset PIN" sits exactly 2rem below the PIN tiles */
.form-alt-link--spaced { margin-top: calc(var(--gap-xxl) - var(--app-default-top-bottom-margin-xxxs)); }
/* Small press on submit */
.submit-pressed { animation: field-press var(--press-duration-subtle) ease; }
@keyframes field-press { 50% { transform: scale(var(--press-scale-subtle)); } }


/* ---------- 4. PIN AND CODE TILES ----------
   Masked and error states set custom properties, so the tiles need no nested selector */
.pin-field {
  --pin-digit-security: none;
  --pin-digit-border-color: rgba(var(--black-rgb), var(--opacity-low));
  --pin-digit-border-width: var(--stroke-hairline);
  --pin-digit-focus-border-color: transparent;
  width: 100%;
}
.pin-field-masked { --pin-digit-security: disc; }
.pin-field-error {
  --pin-digit-border-color: var(--error);
  --pin-digit-border-width: var(--field-border-active);
  --pin-digit-focus-border-color: var(--error);
}
/* The group holding the tiles is 80% wide and centred, so its label, eye and error line up with the tiles */
.form-group--pin { width: var(--pin-field-width); margin-inline: auto; }
.pin-field--tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); padding: 0 var(--pin-tile-edge-padding); }
/* Text message codes are 6 digits (after the 4 column rule so it wins) */
.pin-field--six-digits { grid-template-columns: repeat(6, 1fr); }
.pin-field-digit { width: 100%; min-width: 0; aspect-ratio: 1 / 1; padding: 0; text-align: center; font-family: inherit; font-size: var(--pin-digit-size); color: var(--mid-charcoal); caret-color: var(--mid-charcoal); background: var(--bright-white); border: var(--pin-digit-border-width) solid var(--pin-digit-border-color); border-radius: var(--field-radius); -webkit-text-security: var(--pin-digit-security); }
/* A clicked tile hides its stroke (shows only the cursor); an error tile stays red */
.pin-field-digit:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--pin-digit-focus-border-color); }


/* ---------- 5. TIMER AND RESEND ROW ----------
   One box split in two, timer first */
.timer-resend-row { display: flex; align-items: stretch; width: 100%; height: var(--button-size-xl); background: var(--bright-white); border: var(--stroke-hairline) solid rgba(var(--black-rgb), var(--opacity-low)); border-radius: var(--field-radius); overflow: hidden; }
.timer-resend-text { flex: 1; min-width: 0; padding: 0 var(--field-padding-x); color: var(--mid-charcoal); font-family: inherit; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--button-size-xl); }
.timer-panel { flex: 1 1 50%; width: 50%; justify-content: center; }
.timer-readout { font-size: var(--heading-size-md); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; letter-spacing: var(--letter-spacing-wide); color: var(--navy); }
/* The Resend half. It is a UMA.css .btn; this sets its place in the box and its hover,
   which goes darker like the other navy outline buttons, never a navy fill */
.timer-resend-button { flex-shrink: 0; width: var(--timer-resend-button-width); display: inline-flex; justify-content: center; background: transparent; border: none; border-left: var(--stroke-hairline) solid rgba(var(--black-rgb), var(--opacity-low)); color: var(--navy); padding: 0 var(--field-action-btn-padding-x); font-size: var(--body-text-sm); font-weight: var(--font-weight-medium); font-family: inherit; cursor: pointer; transition: background var(--button-transition-duration) var(--button-transition-ease), color var(--button-transition-duration) var(--button-transition-ease), border-color var(--button-transition-duration) var(--button-transition-ease); }
.timer-resend-button:hover { background: var(--hover-overlay-dark); color: var(--navy-dark); border-left-color: var(--hover-overlay-dark); }
/* For 2 seconds after a resend it shows a tick and the "sent" wording */
.timer-resend-button-done:hover { background: var(--bright-green); color: var(--mid-white); border-left-color: var(--bright-green); }
.resend-panel { flex: 1 1 50%; width: 50%; }


/* ---------- 6. BUTTONS ---------- */
/* Full width button (Sign up, Send, Change your email, Change your number, Use membership card instead) */
.btn-full-width { width: 100%; justify-content: center; gap: var(--gap-xs); }


/* ---------- 7. TERMS CONCERTINA (sign-up) ----------
   Open and closed set custom properties, so the body and inner need no nested selector */
.terms-concertina {
  --terms-rows: 0fr;
  --terms-visibility: hidden;
  --terms-visibility-delay: var(--terms-open-duration);
  --terms-inner-padding: 0;
  display: flex;
  flex-direction: column;
}
.terms-concertina-open {
  --terms-rows: 1fr;
  --terms-visibility: visible;
  --terms-visibility-delay: 0s;
  --terms-inner-padding: var(--app-default-top-bottom-margin-sm);
}
.terms-concertina-header { display: flex; justify-content: flex-start; gap: var(--gap-xs); align-items: center; width: 100%; min-height: var(--button-size-lg); padding: 0; background: transparent; border: none; font-family: inherit; font-size: var(--form-label-size); font-weight: var(--font-weight-medium); color: var(--mid-charcoal); text-align: left; cursor: pointer; }
.terms-concertina-icon { font-size: var(--button-icon-md); }
.terms-concertina-body { display: grid; grid-template-rows: var(--terms-rows); visibility: var(--terms-visibility); text-align: left; transition: grid-template-rows var(--terms-open-duration) ease, visibility 0s linear var(--terms-visibility-delay); }
.terms-concertina-inner { display: flex; flex-direction: column; gap: var(--gap-regular); min-height: 0; overflow: hidden; padding-bottom: var(--terms-inner-padding); }
.terms-intro { margin: 0; font-size: var(--body-text-xs); line-height: var(--default-line-height-small); }
.terms-switch-row { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-regular); font-size: var(--body-text-xs); }
/* Terms switch colours, written the way UMA.css writes .switch--calm and .switch--voice */
.switch--terms .switch-track { background: var(--dark-white); }
.switch--terms input:checked ~ .switch-track { background: var(--bright-teal); }


/* ---------- 8. TEMPORARY MOBILE MENU (sign-up, until the chrome is added) ----------
   The two icon buttons use UMA.css .btn .btn-square .btn-lg; these classes only place them and size the icon */
.nav-menu-button { display: none; }
@media (max-width: 600px) {
  .nav-menu-button { position: absolute; top: var(--app-default-top-bottom-margin-sm); right: var(--default-left-right-mob-body-padding); display: inline-flex; font-size: var(--button-icon-xxxl); color: var(--navy); }
}
.nav-overlay { position: fixed; inset: 0; z-index: var(--z-auth-overlay); display: none; flex-direction: column; gap: var(--gap-xl); padding: var(--app-default-top-bottom-margin-sm) var(--default-left-right-mob-body-padding); background: var(--mid-white); }
.nav-overlay-open { display: flex; }
.nav-overlay-close-button { align-self: flex-end; font-size: var(--button-icon-xxxl); color: var(--navy); }
.nav-overlay-links { display: flex; flex-direction: column; gap: var(--gap-regular); margin: 0; padding: 0; list-style: none; font-size: var(--heading-size-sm); }


/* ---------- 9. NAVY UMA ANIMATION SCREENS (log-in, log-out, reset-pin, security-setup) ----------
   Covers the whole window; Uma sits 3rem above the text and the group is raised */
.animation-overlay { position: fixed; inset: 0; z-index: var(--z-auth-overlay); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--app-default-top-bottom-margin-xxxl); padding: 0 var(--default-left-right-mob-body-padding) calc(var(--app-default-top-bottom-margin-xxxxl) * 3); background: var(--navy-60); text-align: center; transition: background var(--auth-cream-fade-duration) ease; }
/* The screen fades to cream before Uma opens */
.animation-overlay-cream { background: var(--mid-white); }
/* UMA.css reserves a scrollbar strip on html and body, which showed down the right edge of the
   navy screen. The page puts this class on html and body when the screen opens */
.no-scrollbar-gutter { scrollbar-gutter: auto; }
.animation-overlay-video { width: var(--auth-animation-width); max-width: 100%; height: auto; aspect-ratio: var(--auth-animation-ratio); }
.animation-overlay-message { margin: 0; font-size: var(--heading-size-lg); color: var(--mid-white); }
/* Keeps the button's text mid white on hover (UMA.css turns every link orange on hover) */
.animation-overlay-button:hover { color: var(--mid-white); text-decoration: none; }


/* ---------- 10. WAVING HAND (contact) ---------- */
@keyframes wave-animation {
0%   { transform: rotate(0deg); }
10%  { transform: rotate(-10deg); }
20%  { transform: rotate(12deg); }
30%  { transform: rotate(-10deg); }
40%  { transform: rotate(9deg); }
50%  { transform: rotate(-5deg); }
60%  { transform: rotate(3deg); }
70%  { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
/* The hand waves twice when the heading comes into view, and again on hover:
   both set --wave-name, so no nested selector is needed */
.waving-hand-emoji { display: block; width: fit-content; margin-left: auto; margin-right: auto; margin-bottom: var(--app-default-top-bottom-margin-sm); font-size: var(--button-icon-xxxxl); line-height: var(--default-line-height-single); animation: var(--wave-name, none) var(--wave-duration) ease-in-out var(--wave-count); transform-origin: var(--wave-pivot); }
.waving-hand-emoji-waving,
.wave-heading:hover { --wave-name: wave-animation; }


/* ---------- 11. ADD YOUR VIDEO BIO: PANELS ---------- */
.panel-default-padding {
  position: relative;
  padding: 0 var(--default-left-right-desk-body-padding) var(--app-default-top-bottom-margin-xxxxxl);
}
/* The red and white panels make their fields 60px tall with 10px corners */
.red-panel {
  background: var(--red);
  --field-height: var(--button-size-xl);
  --field-radius: var(--app-default-radius-md);
}
.bright-white-panel {
  background: var(--bright-white);
  --field-height: var(--button-size-xl);
  --field-radius: var(--app-default-radius-md);
}
.panel-column {
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  margin: 0 auto var(--app-default-top-bottom-margin-xxl);
  padding: var(--app-default-top-bottom-margin-xxxxxl) 0 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-sizing: border-box;
}
.panel-emoji {
  font-size: var(--panel-emoji-size);
  line-height: var(--default-line-height-single);
  text-align: center;
  margin: 0 0 var(--app-default-top-bottom-margin-xl);
}
.panel-heading {
  font-size: var(--heading-size-xl);
  line-height: var(--default-line-height-x-small);
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}
.panel-heading-on-red { color: var(--bright-white); }
.form-label-on-red { color: var(--bright-white); }

/* Close (x) button, top right. It is a UMA.css .btn .btn-circular; this places it, sets its
   size and white outline, and the ::after widens what a finger can hit */
.video-inline-player-close {
  position: absolute;
  top: var(--panel-close-inset);
  right: var(--panel-close-inset);
  width: var(--back-next-button-diameter);
  height: var(--back-next-button-diameter);
  color: var(--bright-white);
  border: var(--stroke-hairline) solid var(--bright-white);
  transition: background var(--transition-base);
  z-index: var(--z-panel-close);
}
.video-inline-player-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, var(--hit-area-comfort));
  height: max(100%, var(--hit-area-comfort));
}
.video-inline-player-close:hover { background: rgba(var(--white-rgb), var(--opacity-soft)); }
.video-inline-player-close-on-white {
  color: var(--light-charcoal);
  border-color: var(--light-charcoal);
}
.video-inline-player-close-on-white:hover {
  background: var(--hover-overlay-light);
  color: var(--mid-charcoal);
  border-color: var(--mid-charcoal);
}
.video-inline-player-close-icon {
  font-size: var(--button-icon-md);
  line-height: var(--default-line-height-single);
}

/* Panel buttons (all UMA.css .btn buttons; these classes only size and place them,
   and give the two red-panel buttons their hover) */
.panel-cta {
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--app-default-top-bottom-margin-xxxl);
  margin-bottom: 0;
}
/* The second of two stacked buttons sits close under the first */
.panel-cta-second { margin-top: var(--gap-sm); }
.btn-arrow-icon { margin-left: var(--gap-xs); }
/* White outline button on red: fills white with red text on hover, never navy */
.btn-secondary-white-on-red:hover {
  background: var(--bright-white);
  color: var(--red);
  border-color: var(--bright-white);
}
/* Navy buttons on the red panels keep a navy edge (the disabled style still wins when disabled) */
.btn-primary-navy-on-red { border-color: var(--navy); }
.btn-cta { min-width: var(--carouselle-card-xs); }

/* The letter squares and the picture are not buttons or links, so the rings UMA.css
   switches off do not cover them */
.identity-square:focus,
.profile-pic-preview:focus { outline: none; }


/* ---------- 12. ADD YOUR VIDEO BIO: IDENTITY SQUARES (step 1) ----------
   Selecting a square fills it white; its letter turns red */
.identity-squares {
  display: grid;
  grid-template-columns: min(var(--identity-square-size), calc((100% - var(--gap-regular)) / 2));
  gap: var(--gap-regular);
  justify-content: center;
  width: 100%;
  margin: 0;
}
.identity-square {
  --identity-letter-bg: transparent;
  --identity-letter-color: var(--bright-white);
  --identity-letter-border: var(--bright-white);
  position: relative;
  width: 100%;
  max-width: var(--identity-square-size);
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gap-regular);
  border-radius: var(--default-radius);
  background: transparent;
  border: var(--stroke-hairline) solid var(--bright-white);
  color: var(--bright-white);
  text-align: center;
  cursor: pointer;
  transition: background var(--transition-plus), color var(--transition-plus), border-color var(--transition-plus);
  opacity: 0;
  animation: identity-square-fade-in var(--transition-base) ease-out both;
}
@keyframes identity-square-fade-in {
  from { opacity: 0; transform: translateX(var(--identity-square-fade-offset)); }
  to { opacity: 1; transform: translateX(0); }
}
.identity-square:hover { border-color: rgba(var(--bright-white-rgb), var(--opacity-high)); }
.identity-square-selected {
  --identity-letter-bg: var(--red);
  --identity-letter-color: var(--bright-white);
  --identity-letter-border: var(--red);
  background: var(--bright-white);
  border-color: var(--bright-white);
  color: var(--red);
  opacity: 1;
}
.identity-square-letter {
  position: absolute;
  top: var(--identity-letter-top);
  left: var(--identity-letter-left);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--identity-letter-size);
  height: var(--identity-letter-size);
  border-radius: var(--radius-square-letter);
  border: var(--stroke-hairline) solid var(--identity-letter-border);
  background: var(--identity-letter-bg);
  color: var(--identity-letter-color);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}
.identity-square-label {
  margin-top: 0;
  line-height: var(--default-line-height-small);
}
@media (min-width: 820px) {
  .identity-squares { grid-template-columns: repeat(3, min(var(--identity-square-size), calc((100% - var(--gap-regular)) / 2))); }
}
@media (min-width: 900px) {
  .identity-squares {
    --identity-row-width: calc(3 * var(--identity-square-size) + 2 * var(--gap-regular));
    grid-template-columns: repeat(3, var(--identity-square-size));
    width: var(--identity-row-width);
    max-width: var(--identity-row-width);
    margin-left: calc((100% - var(--identity-row-width)) / 2);
  }
}


/* ---------- 13. ADD YOUR VIDEO BIO: SOCIAL LINK FIELDS (step 2) ----------
   Focusing a field turns its Paste button navy, through the two custom
   properties below, so no nested selector is needed. Clicking shows only the cursor */
.uma-add-fields {
  display: flex;
  flex-direction: column;
  gap: var(--app-default-top-bottom-margin-md);
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  margin-inline: auto;
}
.uma-add-amazon-field {
  --paste-bg: transparent;
  --paste-color: var(--mid-charcoal);
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  height: var(--field-height);
  background: var(--bright-white);
  border: var(--stroke-hairline) solid rgba(var(--black-rgb), var(--opacity-low));
  border-radius: var(--app-default-radius-md);
  overflow: hidden;
  transition: none;
}
.uma-add-amazon-field:focus-within {
  --paste-bg: var(--navy);
  --paste-color: var(--bright-white);
  border-color: transparent;
}
.uma-add-amazon-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-left: var(--field-padding-x);
  font-size: var(--button-icon-xxl);
  color: var(--lightest-charcoal);
}
.uma-add-amazon-input {
  flex: 1 1 0%;
  min-width: 0;
  padding: 0 var(--field-action-btn-padding-x);
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--body-text-sm);
}
.uma-add-amazon-input:focus { caret-color: var(--navy); }
.uma-add-amazon-input::placeholder { color: var(--light-charcoal); }
.uma-add-amazon-paste {
  flex-shrink: 0;
  padding: 0 var(--app-default-top-bottom-margin-lg);
  border: none;
  border-left: var(--stroke-hairline) solid rgba(var(--black-rgb), var(--opacity-low));
  background: var(--paste-bg);
  color: var(--paste-color);
  font-family: inherit;
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--button-transition-duration) var(--button-transition-ease);
}
.uma-add-amazon-paste:hover {
  background: var(--navy);
  color: var(--bright-white);
  border-left-color: var(--mid-charcoal);
}


/* ---------- 14. ADD YOUR VIDEO BIO: UPLOAD SQUARES (steps 3 and 4) ---------- */
.uma-featured-upload-zone {
  display: flex;
  flex-direction: column;
  width: var(--upload-zone-width);
  max-width: 100%;
  aspect-ratio: var(--carouselle-card-ratio-book);
  margin: 0 auto var(--app-default-top-bottom-margin-xxl);
  border: var(--stroke-thick) dashed rgba(var(--white-rgb), var(--opacity-medium-low));
  border-radius: var(--app-default-radius-lg);
  overflow: hidden;
}
.uma-featured-upload-inner {
  --upload-plus-scale: 1;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--app-default-top-bottom-margin-md);
  padding: var(--app-default-top-bottom-margin-xxxl) var(--app-default-top-bottom-margin-lg);
  border-radius: inherit;
  cursor: pointer;
}
.uma-featured-upload-inner:hover,
.uma-featured-upload-inner:focus-visible {
  --upload-plus-scale: var(--upload-plus-hover-scale);
  background: rgba(var(--white-rgb), var(--opacity-faint));
}
/* The + sits in a white circle and is red */
.uma-featured-upload-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--upload-plus-circle-size);
  height: var(--upload-plus-circle-size);
  border-radius: var(--radius-circle);
  background: var(--bright-white);
  font-size: var(--upload-plus-size);
  line-height: var(--default-line-height-single);
  color: var(--red);
  scale: var(--upload-plus-scale);
  transition: scale var(--transition-plus);
}
.uma-featured-upload-preview {
  position: relative;
  width: 100%;
  height: 100%;
}
.uma-featured-upload-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.uma-featured-upload-status-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  padding: var(--upload-status-bar-padding);
  background: linear-gradient(to top, rgba(var(--black-rgb), var(--opacity-strong)), rgba(var(--black-rgb), var(--opacity-hidden)));
  color: var(--bright-white);
}
.uma-featured-upload-status-label {
  color: var(--bright-white);
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-medium);
}
.uma-featured-upload-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--uma-xs);
  height: var(--uma-xs);
  padding: 0;
  border: none;
  border-radius: var(--radius-circle);
  background: rgba(var(--black-rgb), var(--opacity-medium-high));
  color: var(--bright-white);
  font-size: var(--body-text-xxl);
  cursor: pointer;
  transition: background var(--transition-fast) ease;
}
.uma-featured-upload-remove:hover { background: rgba(var(--black-rgb), var(--opacity-very-strong)); }
.uma-featured-upload-progress {
  display: flex;
  flex-direction: column;
  gap: var(--gap-regular);
  padding: var(--app-default-top-bottom-margin-lg);
}
.uma-featured-progress-bar {
  width: 100%;
  height: var(--link-line-height);
  background: rgba(var(--white-rgb), var(--opacity-low));
  border-radius: var(--radius-pill);
}
.uma-featured-progress-fill {
  width: 0%;
  height: 100%;
  background: var(--bright-white);
  border-radius: var(--radius-pill);
  transition: width var(--transition-base) ease;
}
.uma-featured-upload-status {
  margin: 0 0 var(--app-default-top-bottom-margin-xl);
  color: var(--bright-white);
  font-size: var(--body-text-sm);
  line-height: var(--default-line-height-large);
  text-align: center;
}
/* Profile picture square (step 4): drag the picture to choose what shows */
.profile-pic-zone {
  width: var(--profile-pic-square-size);
  height: var(--profile-pic-square-size);
  margin: 0 auto;
}
.profile-pic-preview {
  overflow: hidden;
  border-radius: var(--app-default-radius-lg);
  cursor: grab;
  touch-action: none;
}
.profile-pic-preview-dragging { cursor: grabbing; }
.profile-pic-img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--profile-pic-x, 50%) var(--profile-pic-y, 50%);
  pointer-events: none;
}


/* ---------- 15. ADD YOUR VIDEO BIO: TICK LISTS AND SMALL SCREENS ---------- */
/* White ticks under the upload squares (steps 3 and 4) */
.uma-featured-criteria-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xxs);
  margin: 0;
  padding-left: 0;
  list-style: none;
  text-align: left;
  font-size: var(--body-text-sm);
  color: rgba(var(--white-rgb), var(--opacity-very-high));
}
.profile-pic-criteria-list {
  width: var(--profile-pic-square-size);
  max-width: 100%;
  margin: var(--gap-lg) auto 0;
}
/* Green ticks on the white end screen */
.uma-featured-steps {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  text-align: left;
  color: var(--mid-charcoal);
}
.tick-list-item {
  display: flex;
  align-items: baseline;
  gap: var(--gap-xs);
  font-size: var(--body-text-lg);
}
.tick-list-item-tight { line-height: var(--default-line-height-small); }
.tick-list-item-roomy { line-height: var(--default-line-height-large); }
.tick-list-icon {
  flex-shrink: 0;
  align-self: baseline;
  font-size: var(--body-text-lg);
  line-height: inherit;
}
.tick-list-icon-green { color: var(--bright-green); }
/* Space above the emoji follows the auth pages' logo: 6rem, 4rem up to 900px,
   3rem up to 600px and on phones held sideways */
@media (max-width: 900px) {
  .panel-column { padding-top: var(--app-default-top-bottom-margin-xxxxl); }
}
@media (max-width: 600px) {
  .panel-default-padding {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
    padding-bottom: var(--app-default-top-bottom-margin-xxxxl);
  }
  .panel-column {
    padding-top: var(--app-default-top-bottom-margin-xxxl);
    margin-left: 0;
    margin-right: 0;
  }
  .btn-cta { min-width: 0; }
}
@media (orientation: landscape) and (pointer: coarse) {
  .panel-column { padding-top: var(--app-default-top-bottom-margin-xxxl); }
}
@media (min-width: 600px) {
  .panel-column { --field-height: var(--button-size-xl); }
}


/* ---------- 16. MOTION SET TO STILL AND TAB FOCUS ----------
   Motion: an attribute on <html>, so these cannot be single classes. */
:root[data-motion="still"] .terms-concertina-body,
:root[data-motion="still"] .timer-resend-button,
:root[data-motion="still"] .animation-overlay { transition: none; }
:root[data-motion="still"] .waving-hand-emoji { animation: none; }

/* Tab: these three boxes draw their edge round the control inside them, so the
   box's own edge turns orange, the same way the chrome block does for .field-action */
.timer-resend-row:has(.keyboard-focus),
.uma-add-amazon-field:has(.keyboard-focus),
.uma-featured-upload-zone:has(.keyboard-focus) { border-color: var(--orange); }
/* PIN and code tiles: the tile Tab lands on takes the orange through the tiles' own focus colour */
.pin-field:has(.keyboard-focus) { --pin-digit-focus-border-color: var(--orange); }
/* The control inside one of those boxes draws no ring of its own, so there is only ever one */
.uma-add-amazon-input.keyboard-focus-no-stroke:focus,
.uma-add-amazon-paste.keyboard-focus-no-stroke:focus,
.timer-resend-button.keyboard-focus-no-stroke:focus,
.uma-featured-upload-inner.keyboard-focus-no-stroke:focus,
.field-action-input.keyboard-focus-no-stroke:focus,
.field-action-button.keyboard-focus-no-stroke:focus { outline: none; }

/* NEW STYLES: homepage and Learn restore, 30 Sep 2026, for: /, /glossary, /about-cptsd, /burnout-depression, /she-s-hormonal */

/* Her design from before the relay, put back under its own classes.
   Sources: the homepage as index v38, the white crisis card back as
   about-cptsd v4, the glossary search box as block 2 (30 Sep 2026, v1).
   Flat single-class rules. Three rules name a second class or state of
   their own: the crisis card's slide handle, which the chrome writes into
   the card; the dimmed picture, which brightens only while its card is under
   the pointer; and the search box, which keeps its edge off on a click but
   leaves the Tab ring to UMA.css. No !important, no IDs. */

/* ===== TOKENS ===== */
/*the search box's own ground and edge, as block 2 had them, and the crisis
  card back's text colour as numbers, so the crisis pane's rgba() rules can
  read it, and the review quotes' letter spacing*/
:root:where(.page-home, .page-learn) {
  --t-field-bg: var(--bright-white); /* used: learn-pages-homepage-legal */
  --t-field-edge: rgba(var(--black-rgb), var(--opacity-low)); /* used: learn-pages-homepage-legal */
  --t-crisis-back-text-rgb: 51, 50, 50; /* used: learn-pages-homepage-legal */
  --review-quote-letter-spacing: 0.5px; /* used: learn-pages-homepage-legal */
}

:root[data-theme="dark"]:where(.page-home, .page-learn) {
  --t-field-bg: var(--navy-40); /* used: learn-pages-homepage-legal */
  --t-field-edge: rgba(var(--bright-white-rgb), var(--opacity-low)); /* used: learn-pages-homepage-legal */
  --t-crisis-back-text-rgb: 242, 237, 234; /* used: learn-pages-homepage-legal */
}


/* ===== 1. THE CRISIS CARD BACK IS A WHITE CARD, LIKE ITS FRONT ===== */
/*the back sits on the card's own ground instead of the pane's dark teal.
  The crisis pane's words and controls are the chrome's own classes, filled
  in by the chrome, and they colour themselves from --bright-white, so the
  back hands them the light surface colours through those tokens: headings,
  highlights and control edges in the emphasis colour, words in the page
  text colour. In dark mode the card is navy, so the same tokens give the
  light colours.*/
.crisis-card-back-white { /* used: learn-pages-homepage-legal */
  background-color: transparent;
  color: var(--t-page-text);
  --bright-white: var(--t-emphasis);
  --bright-white-rgb: var(--t-crisis-back-text-rgb);
  --opacity-very-high: var(--opacity-visible);
}

/*the slide to call handle is tomato in every theme, so its icon keeps the
  white the page set before the back changed the token*/
.crisis-card-back-white .crisis-pane-slider-handle { /* used: learn-pages-homepage-legal */
  color: var(--white-text-default);
}


/* ===== 2. LOG IN STAYS IN THE PHONE HEADER ===== */
/*once the page scrolls past the hero, the page script swaps Log in to its
  on light look. UMA.css hides .btn-secondary-navy-on-white inside
  .login-buttons below 600, so the homepage uses this class for that look
  instead. .themed-secondary-button beside it gives the colours.*/
.header-login-on-light { /* used: learn-pages-homepage-legal */
  background: transparent;
  border: var(--stroke-hairline) solid;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.header-login-on-light:hover { /* used: learn-pages-homepage-legal */
  background: var(--hover-overlay-dark);
}


/* ===== 3. PARAGRAPH SPACING ===== */
/*the line spacing the homepage's shorter paragraphs had: the hero, the
  counter, the share label, the review names and dates, the FAQ and
  reference paragraphs and the copyright lines*/
.paragraph-spacing-compact { /* used: learn-pages-homepage-legal */
  line-height: var(--default-line-height-small);
}

/*the same, for a block whose paragraphs all take it (the reference list).
  The block hands its paragraphs the smaller line height through the token
  UMA.css's p rule reads.*/
.paragraph-spacing-compact-group { /* used: learn-pages-homepage-legal */
  --default-line-height-large: var(--default-line-height-small);
}

/*a last paragraph that sat flush with what follows. UMA.css's
  p:last-of-type reads --app-default-top-bottom-margin-xl, so the paragraph
  sets that token to nothing for itself*/
.paragraph-spacing-last-flush { /* used: learn-pages-homepage-legal */
  --app-default-top-bottom-margin-xl: 0px;
}

/*a tile paragraph that follows another one, one step below it*/
.paragraph-spacing-above { /* used: learn-pages-homepage-legal */
  margin-top: var(--app-default-top-bottom-margin-sm);
}

/*the lists in the FAQ answers and the pricing cards*/
.list-spacing-compact { /* used: learn-pages-homepage-legal */
  line-height: var(--default-line-height-small);
}

.faq-list-spacing { /* used: learn-pages-homepage-legal */
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}

/*an FAQ paragraph followed by another paragraph in the same answer*/
.faq-paragraph-spacing { /* used: learn-pages-homepage-legal */
  margin-bottom: var(--app-default-top-bottom-margin-sm);
}

/*the words on a card back. One step between paragraphs, and the last one
  keeps the xl step UMA.css's p:last-of-type gives it, so the button and the
  list below never touch the words*/
.card-back-paragraph { /* used: learn-pages-homepage-legal */
  margin: 0 0 var(--app-default-top-bottom-margin-sm) 0;
  line-height: var(--default-line-height-large);
}

/*the paragraph above the mini screen pills: the pill row's own lg margin is
  the whole gap*/
.card-back-paragraph-before-row { /* used: learn-pages-homepage-legal */
  margin-bottom: 0;
}

/*the review quotes' letter spacing*/
.review-quote-spacing { /* used: learn-pages-homepage-legal */
  letter-spacing: var(--review-quote-letter-spacing);
}


/* ===== 4. CARDS GROW AND BRIGHTEN UNDER THE POINTER ===== */
/*reaching for the plus grows the card a touch. The card classes already
  carry the transform transition.*/
.card-hover-grow:has(.flippable-9-16-card-info-btn:hover) { /* used: learn-pages-homepage-legal */
  transform: scale(var(--card-hover-scale));
}

/*the dimmed picture goes back to its own brightness while its card is under
  the pointer. The dimmed class already carries the filter transition.*/
.card-hover-grow:hover .card-hover-brighten { /* used: learn-pages-homepage-legal */
  filter: none;
}


/* ===== 5. THE GLOSSARY SEARCH BOX ===== */
/*a pill with the bold Phosphor magnifying glass inside it on the left, on
  the field colours of the theme*/
.search-field { /* used: learn-pages-homepage-legal */
  width: 100%;
  height: var(--field-height);
  padding: 0 var(--field-padding-x) 0 calc(var(--field-padding-x) + var(--button-icon-md) + var(--gap-xs));
  font-family: inherit;
  font-size: var(--body-text-sm);
  color: var(--t-page-text);
  background-color: var(--t-field-bg);
  border: var(--stroke-hairline) solid var(--t-field-edge);
  border-radius: var(--radius-pill);
  box-sizing: border-box;
}

.search-field::placeholder { /* used: learn-pages-homepage-legal */
  color: var(--t-text-muted);
}

/*a click takes the edge off and leaves only the cursor. After Tab the box
  carries .keyboard-focus, and UMA.css's .keyboard-focus:focus ring takes the
  edge's place, so this leaves that case alone*/
.search-field:focus:not(.keyboard-focus) { /* used: learn-pages-homepage-legal */
  border-color: transparent;
}


/* ===== 8. PAGE WIDTH ===== */
/*the mission split runs the full width of the page instead of stopping at
  the body wrapper width*/
.page-width-full { /* used: learn-pages-homepage-legal */
  max-width: none;
}

/*below 450 the step tiles take their mobile card width without the 300
  ceiling*/
@media (max-width: 449px) {
  .page-width-tile { /* used: learn-pages-homepage-legal */
    max-width: 100%;
  }
}


/* NEW STYLES: chrome, onboarding and profile, 1 Oct 2026, for: every page that carries the chrome (uma-chrome.js), /uma-onboarding, /profile */

/* CHROME. The web app chrome and the website chrome: top bar, sidebar, flyout
   menu, alerts, feedback, SOS, upgrade panel, wishlist drawer, profile modal,
   page kinds. Pages: uma-web-app-chrome, uma-website-chrome, and every page
   that carries the chrome. 30 September 2026. */

/* ===== TOKENS ===== */
:root { /* used: chrome */
  --chrome-frost-opacity: 0.85;
  --chrome-header-border: #EAEAEA;
  --chrome-header-blur: 20px;
  --chrome-quick: 0.25s;
  --chrome-slide: 0.4s;
  --chrome-fade-slow: 0.35s;
  --chrome-reduced: 0.15s;
  --chrome-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --chrome-backdrop: rgba(var(--black-rgb), 0.4);
  --chrome-panel-shadow: 0 8px 32px var(--shadow-overlay);
  --chrome-tab-shadow: -2px 0 8px var(--shadow-overlay);
  --chrome-slide-shadow: 0 4px 20px rgba(var(--black-rgb), var(--opacity-very-low));
  --chrome-dropdown-shadow: 0 4px 12px var(--shadow-overlay);
  --chrome-thumb-shadow: 0 2px 4px rgba(var(--black-rgb), var(--opacity-low));
  --chrome-sidebar-icon-size: 1.8rem;
  --chrome-sidebar-icon-step: calc(var(--button-size-md) + var(--gap-lg));
  --chrome-voice-thumb-shadow-offset: 0 2px 4px;
  --chrome-logo-dark-opacity: 0.8;
  --chrome-auth-pad-x: 1.1rem;
  --uma-hero-min-height: 80vh;
  --uma-hero-title-size: 3.5rem;
  --uma-hero-title-size-md: 3rem;
  --uma-hero-title-measure: 25ch;
  --uma-hero-video-focus: 25% center;
  --uma-hero-video-filter: brightness(0.45) saturate(0.9);
  --chrome-sidebar-calm-slot: 2;
  --chrome-sidebar-heart-slot: 4;
  --chrome-hover-scale: 1.08;
  --chrome-sos-hover-scale: 1.12;
  --chrome-tooltip-padding-x: 0.75rem;
  --chrome-badge-size: 1rem;
  --chrome-badge-font-size: 0.65rem;
  --chrome-tag-letter-spacing: 0.06em;
  --chrome-tab-letter-spacing: 0.03em;
  --chrome-icon-em: 1em;
  --chrome-hit-area: 2.75rem;
  --chrome-hit-area-touch: 44px;
  --chrome-initial-gap: 0.8rem;
  --chrome-hamburger-size: 32px;
  --chrome-flyout-nudge: 1.5px;
  --uma-crisis-stage-ratio: 1 / 1;
  --uma-crisis-height-small: 46%;
  --uma-crisis-height-large: 72%;
  --chrome-title-tag-gap: 2px;
  --chrome-voice-hover: #101828;
  --chrome-voice-glyph-left: 36px;
  --chrome-voice-glyph-left-on: 8px;
  --chrome-menu-link-short: 1.1rem;
  --chrome-menu-button-pad-x: 30px;
  --chrome-menu-button-pad-y: 7px;
  --chrome-power-nudge: 0.05rem;
  --chrome-feedback-close-size: 32px;
  --chrome-feedback-tab-pad-y: 1.25rem;
  --chrome-feedback-tab-pad-x: 0.5rem;
  --chrome-feedback-tab-pad-hover: 0.75rem;
  --chrome-feedback-min-height: 600px;
  --chrome-rating-gap: 0.25rem;
  --chrome-rating-size: clamp(2rem, 14cqw, 4.5rem);
  --chrome-rating-icon-scale: 1.05;
  --chrome-rating-star-size: 85%;
  --chrome-screenshot-width: 96px;
  --chrome-screenshot-height: 72px;
  --chrome-screenshot-remove: 36px;
  --chrome-thanks-icon: 3.5rem;
  --chrome-thanks-min-width: 12rem;
  --chrome-pill-bar-height: 40px;
  --chrome-pill-height: 32px;
  --chrome-pill-bar-pad: 4px;
  --chrome-pill-z: 800;
  --chrome-pill-indicator-z: 801;
  --chrome-pill-item-z: 802;
  --z-chrome-flyout: 10000003;
  --z-chrome-sidebar-icons: 10000005;
  --z-chrome-drawer: 10000006;
  --z-chrome-profile: 10000008;
  --z-chrome-feedback-raised: 10000009;
  --z-chrome-upgrade: 10000010;
  --z-chrome-upgrade-close: 10000011;
  --z-chrome-tooltip: 10000010;
  --z-chrome-close: 10000020;
  --z-chrome-header: 1000;
  --z-chrome-badge: 1;
  --z-chrome-layer-1: 1;
  --z-chrome-layer-2: 2;
  --z-chrome-layer-3: 3;
  --z-chrome-layer-4: 4;
  --z-chrome-layer-5: 5;
  --z-chrome-layer-10: 10;
  --z-alerts-panel: calc(var(--z-feedback-panel) + 2);
  --alerts-panel-width: 22rem;
  --alerts-thumb-size: 2.75rem;
  --alerts-logo-size: 70%;
  --status-tag-height: 1.875rem;
  --status-tag-padding-x: 0.75rem;
  --sos-button-font-size: 1.25rem;
  --font-family-condensed: "HelveticaNeue-CondensedBold", "Helvetica Neue", "Arial Narrow", Inter, sans-serif;
  --link-underline-offset: 7px;
  --chrome-inline-icon-nudge: -0.05em;
  --chrome-inline-icon-gap: 0.15em;
  --upgrade-preview-max-width: 340px;
  --upgrade-text-min-width: 300px;
  --upgrade-text-content-width: clamp(var(--upgrade-text-min-width), calc(100vw - 2 * var(--mirror-right-padding) - var(--upgrade-preview-max-width) - var(--default-left-right-desk-body-padding)), var(--golden-width-small));
  --upgrade-text-column-width: calc(var(--upgrade-text-content-width) + 2 * var(--mirror-right-padding));
  --upgrade-preview-height-ratio: 0.75;
  --upgrade-swipe-dot-size: 14px;
  --upgrade-small-preview-max-width: 450px;
  --upgrade-pricing-tag-lift: calc(-0.25em - 3px);
  --upgrade-mobile-bottom-pad: 3rem;

  /* colours that change with the theme */
  --chrome-pill-track: var(--dark-white);
  --chrome-pill-text: var(--dark-charcoal);
  --chrome-pill-selected-text: var(--white-text-default);
  --chrome-pill-indicator: var(--navy);
  --chrome-feedback-panel-bg: var(--mid-white);
  --chrome-feedback-strong: var(--navy);
  --chrome-feedback-field-bg: var(--bright-white);
  --chrome-feedback-field-text: var(--mid-charcoal);
  --chrome-feedback-field-edge-rgb: var(--black-rgb);
  --chrome-feedback-placeholder: var(--light-charcoal);
  --chrome-autofill-cover: 1000px;
  --chrome-autofill-delay: 5000s;
  --chrome-feedback-star: var(--dark-white);
  --chrome-feedback-star-hover: var(--navy);
  --chrome-feedback-star-number-hover: var(--bright-white);
  --chrome-feedback-primary-bg: var(--navy);
  --chrome-feedback-primary-text: var(--bright-white);
  --chrome-feedback-primary-hover: var(--navy-dark);
  --chrome-feedback-disabled-bg: var(--hover-overlay-dark);
  --chrome-feedback-disabled-text: var(--light-charcoal);
  --chrome-feedback-secondary-text: var(--navy);
  --chrome-feedback-secondary-border: var(--navy);
  --chrome-feedback-secondary-hover-bg: var(--hover-overlay-dark);
  --chrome-feedback-secondary-hover-border: var(--navy-dark);
  --chrome-feedback-secondary-hover-text: var(--navy-dark);
  --chrome-feedback-preview-bg: var(--bright-white);
  --chrome-feedback-remove: var(--light-charcoal);
  --chrome-feedback-remove-hover-bg: var(--hover-overlay-light);
  --chrome-feedback-remove-hover: var(--mid-charcoal);
  --chrome-feedback-tab-text: var(--white-text-default);
  --chrome-farewell-tab-text: var(--bright-white);
  --chrome-beta-text: var(--white-text-default);
  --chrome-header-icon-bg: var(--mid-white);
  --chrome-header-icon-text: var(--navy);
  --chrome-alerts-bg: var(--bright-white);
  --chrome-alerts-text: var(--navy);
  --chrome-alerts-border: var(--dark-white);
  --chrome-alerts-hover: var(--hover-overlay-light);
  --chrome-alerts-thumb-bg: var(--navy);
  --chrome-wishlist-panel-bg: var(--mid-white);
  --chrome-wishlist-panel-text: var(--mid-charcoal);
  --chrome-wishlist-header-bg: transparent;
  --chrome-wishlist-title: var(--dark-navy);
  --chrome-wishlist-empty: var(--lightest-charcoal);
  --chrome-wishlist-close: var(--mid-charcoal);
}

/* dark: the chrome is on every page, so its own colour tokens change with
   the theme on every page; the page tokens further down are for the two
   chrome pages only */
:root[data-theme="dark"] { /* used: chrome */
  --chrome-pill-track: var(--navy);
  --chrome-pill-text: var(--bright-white);
  --chrome-pill-selected-text: var(--navy);
  --chrome-pill-indicator: var(--bright-white);
  --chrome-feedback-panel-bg: var(--navy-40);
  --chrome-feedback-panel-text: var(--bright-white);
  --chrome-feedback-strong: var(--bright-white);
  --chrome-feedback-label: var(--bright-white);
  --chrome-feedback-field-bg: var(--navy-dark);
  --chrome-feedback-field-text: var(--bright-white);
  --chrome-feedback-field-edge-rgb: var(--bright-white-rgb);
  --chrome-feedback-field-caret: var(--bright-white);
  --chrome-feedback-placeholder: rgba(var(--bright-white-rgb), var(--opacity-moderate));
  --chrome-feedback-star: rgba(var(--bright-white-rgb), var(--opacity-low));
  --chrome-feedback-star-hover: var(--bright-white);
  --chrome-feedback-star-number: var(--bright-white);
  --chrome-feedback-star-number-hover: var(--navy);
  --chrome-feedback-primary-bg: var(--bright-white);
  --chrome-feedback-primary-text: var(--navy);
  --chrome-feedback-primary-hover: var(--bright-white);
  --chrome-feedback-disabled-bg: rgba(var(--bright-white-rgb), var(--opacity-low));
  --chrome-feedback-disabled-text: rgba(var(--bright-white-rgb), var(--opacity-moderate));
  --chrome-feedback-secondary-text: var(--bright-white);
  --chrome-feedback-secondary-border: rgba(var(--bright-white-rgb), var(--opacity-moderate));
  --chrome-feedback-secondary-hover-bg: transparent;
  --chrome-feedback-secondary-hover-border: rgba(var(--bright-white-rgb), var(--opacity-moderate));
  --chrome-feedback-secondary-hover-text: var(--bright-white);
  --chrome-feedback-preview-bg: rgba(var(--bright-white-rgb), var(--opacity-low));
  --chrome-feedback-remove: rgba(var(--bright-white-rgb), var(--opacity-high));
  --chrome-feedback-remove-hover-bg: rgba(var(--bright-white-rgb), var(--opacity-low));
  --chrome-feedback-remove-hover: var(--bright-white);
  --chrome-feedback-tab-text: var(--navy);
  --chrome-farewell-tab-text: var(--navy);
  --chrome-beta-text: var(--navy);
  --chrome-header-icon-bg: var(--t-border);
  --chrome-header-icon-text: var(--t-page-text);
  --chrome-alerts-bg: var(--navy);
  --chrome-alerts-text: var(--bright-white);
  --chrome-alerts-border: rgba(var(--bright-white-rgb), var(--opacity-low));
  --chrome-alerts-hover: rgba(var(--bright-white-rgb), var(--opacity-very-low));
  --chrome-alerts-thumb-bg: rgba(var(--bright-white-rgb), var(--opacity-low));
  --chrome-wishlist-panel-bg: var(--navy);
  --chrome-wishlist-panel-text: var(--bright-white);
  --chrome-wishlist-header-bg: var(--navy-dark);
  --chrome-wishlist-title: var(--bright-white);
  --chrome-wishlist-empty: rgba(var(--bright-white-rgb), var(--opacity-moderate));
  --chrome-wishlist-close: var(--bright-white);
}

/* the two chrome pages' own theme tokens */
:root:where(.page-uma-app-chrome, .page-uma-website-chrome) { /* used: chrome */
  --navy-40: #151C2D;
  --navy-60: #0E131E;
  --navy-60-rgb: 14, 19, 30;
  --t-page-bg: var(--mid-white);
  --t-page-text: var(--mid-charcoal);
  --t-band: var(--mid-white);
  --t-band-alt: var(--new-white);
  --t-surface: var(--light-white);
  --t-card: var(--mid-white);
  --t-text-strong: var(--dark-charcoal);
  --t-text-secondary: var(--light-charcoal);
  --t-border: var(--dark-white);
  --t-divider: var(--dark-white);
  --t-selected-bg: var(--navy);
  --t-selected-text: var(--bright-white);
  --t-header-bg: var(--light-white);
  --t-nav-frost: rgba(var(--bright-white-rgb), var(--chrome-frost-opacity));
  --t-header-logo: var(--navy);
  --t-header-border: var(--chrome-header-border);
}
:root[data-theme="dark"]:where(.page-uma-app-chrome, .page-uma-website-chrome) { /* used: chrome */
  --bright-white: var(--mid-white);
  --bright-white-rgb: 242, 237, 234;
  --t-header-bg: var(--navy-60);
  --t-nav-frost: rgba(var(--navy-60-rgb), var(--opacity-very-high));
  --t-header-border: rgba(var(--bright-white-rgb), var(--opacity-faint));
  --t-header-logo: var(--bright-white);
  --t-page-bg: var(--navy-60);
  --t-page-text: var(--bright-white);
  --t-band: var(--navy-60);
  --t-band-alt: var(--navy-40);
  --t-surface: var(--navy);
  --t-card: var(--navy);
  --t-text-strong: var(--bright-white);
  --t-text-secondary: rgba(var(--bright-white-rgb), var(--opacity-high));
  --t-border: rgba(var(--bright-white-rgb), var(--opacity-low));
  --t-divider: rgba(var(--bright-white-rgb), var(--opacity-faint));
  --t-selected-bg: var(--bright-white);
  --t-selected-text: var(--navy);
}

/* The website chrome has only the mode button and the heart in its sidebar
   stack, so they sit in the first two places. */
:root:where(.page-uma-website-chrome) { /* used: chrome */
  --chrome-sidebar-calm-slot: 0;
  --chrome-sidebar-heart-slot: 1;
}

/* ===== PAGE FRAME ===== */
.uma-chrome-scrollbar-hidden { scrollbar-width: none; -ms-overflow-style: none; } /* used: chrome */
.uma-chrome-scrollbar-hidden::-webkit-scrollbar { display: none; width: 0; } /* used: chrome */
.uma-chrome-page { background-color: var(--t-page-bg); color: var(--t-page-text); overscroll-behavior: none; } /* used: chrome */
.uma-chrome-content-band { background: var(--t-band-alt); } /* used: chrome */
/* The inner content wrapper keeps UMA.css's uma-chrome-inner-content-wrapper;
   her room at the foot on phones and her column between 600px and 1100px are
   on this class, since UMA.css's wrapper has neither. */
@media (min-width: 600px) and (max-width: 1100px) {
  .uma-chrome-content-inner { height: 100%; display: flex; flex-direction: column; } /* used: chrome */
}
@media (max-width: 600px) {
  .uma-chrome-content-inner { padding-bottom: var(--app-default-top-bottom-margin-xxxl); } /* used: chrome */
}
.uma-sunset-filter-holder { position: absolute; width: 0; height: 0; overflow: hidden; } /* used: chrome, onboarding */

/* ===== BUTTONS =====
   The chrome's buttons keep UMA.css's btn classes. Where her chrome differs
   from them, the difference is set as a token on the button itself, so no
   rule of UMA.css is overridden. */
.uma-chrome-bright-text { --text-on-colour: var(--bright-white); } /* used: chrome */
.uma-chrome-menu-button { --btn-padding-x: var(--chrome-menu-button-pad-x); --body-text-sm: var(--body-text-xs); } /* used: chrome */
.uma-chrome-button-icon { margin-left: var(--gap-xs); } /* used: chrome */

/* ===== TOP BAR ===== */
.uma-chrome-top-bar { background: var(--t-nav-frost, var(--t-header-bg)); backdrop-filter: blur(var(--chrome-header-blur)); -webkit-backdrop-filter: blur(var(--chrome-header-blur)); border-bottom: var(--stroke-thin) solid var(--t-header-border, var(--t-divider)); position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-chrome-header); transition: background var(--transition-base) ease, border-color var(--transition-base) ease, color var(--transition-base) ease; } /* used: chrome */
.uma-chrome-top-bar-left { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } /* used: chrome */
.uma-chrome-top-bar-right { display: flex; align-items: center; gap: var(--gap-lg); } /* used: chrome */
.uma-chrome-hamburger { display: none; background: transparent; color: var(--t-page-text); border: var(--stroke-hairline) solid var(--light-charcoal); } /* used: chrome */
.uma-chrome-hamburger:hover { background: transparent; border-color: transparent; } /* used: chrome */
.uma-chrome-logo-svg { fill: var(--t-header-logo); transition: fill var(--transition-base) ease; } /* used: chrome */
:where(.uma-chrome-logo:hover) .uma-chrome-logo-svg { fill: var(--navy-dark); } /* used: chrome */
.uma-chrome-beta-tag { background-color: var(--yellow); color: var(--chrome-beta-text); font-weight: var(--font-weight-bold); margin: 0 var(--gap-lg) 0 var(--gap-xs); flex-shrink: 0; padding: 0 var(--gap-md); border-radius: var(--radius-tooltip-large); height: var(--button-size-xs); display: inline-flex; align-items: center; line-height: var(--default-line-height-single); } /* used: chrome */
/* UMA.css gives the last paragraph in a box a large bottom margin through
   p:last-of-type, which outweighs a class; the line is set to none through
   the token that rule reads. */
.beta-text { margin: 0; --app-default-top-bottom-margin-xl: 0; } /* used: chrome */
@media (max-width: 600px) {
  .uma-chrome-hamburger { margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; height: var(--button-size-sm); width: auto; border: none; cursor: pointer; } /* used: chrome */
  .uma-chrome-hamburger-icon { font-size: var(--chrome-hamburger-size); line-height: var(--default-line-height-single); } /* used: chrome */
  .uma-chrome-logo { display: none; } /* used: chrome */
  .uma-chrome-beta-tag { display: none; } /* used: chrome */
}
@media (prefers-reduced-motion: reduce) {
  .uma-chrome-top-bar { transition-duration: var(--chrome-reduced); } /* used: chrome */
}
.app-main-nav { max-width: 100%; width: calc(100% - var(--sidebar-width)); margin: 0 0 0 var(--sidebar-width); padding: 0 var(--default-left-right-desk-body-padding); height: var(--fixed-header-height); display: flex; align-items: center; justify-content: space-between; } /* used: chrome */
@media (max-width: 600px) {
  .app-main-nav { width: 100%; margin-left: 0; padding-left: var(--gap-xl); padding-right: var(--gap-xl); } /* used: chrome */
  .beta-text { display: none; } /* used: chrome */
}
.uma-chrome-header-icons { display: none; align-items: center; gap: var(--gap-lg); } /* used: chrome */
@media (max-width: 600px) {
  .uma-chrome-header-icons { display: flex; } /* used: chrome */
}
.uma-chrome-header-icon { background: var(--chrome-header-icon-bg); color: var(--chrome-header-icon-text); border: none; padding: 0; width: var(--button-size-sm); height: var(--button-size-sm); min-width: var(--button-size-sm); aspect-ratio: 1 / 1; border-radius: var(--radius-circle); transition: background var(--chrome-quick) ease, color var(--chrome-quick) ease; display: flex; align-items: center; justify-content: center; } /* used: chrome */
.uma-chrome-header-icon:hover { background: var(--navy-dark); color: var(--bright-white); } /* used: chrome */
.uma-chrome-header-hit { position: relative; } /* used: chrome */
.uma-chrome-header-hit::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100%, var(--chrome-hit-area)); height: max(100%, var(--chrome-hit-area)); } /* used: chrome */
.uma-chrome-header-icon-glyph { font-size: var(--button-icon-xxl); } /* used: chrome */
.uma-chrome-header-icon-glyph-small { font-size: var(--button-icon-lg); } /* used: chrome */
.uma-chrome-header-icon-glyph-power { font-size: var(--button-icon-xxl); position: relative; top: var(--chrome-power-nudge); } /* used: chrome */
.uma-chrome-header-profile { background: var(--navy); color: var(--bright-white); border: none; padding: 0; width: var(--button-size-sm); height: var(--button-size-sm); min-width: var(--button-size-sm); aspect-ratio: 1 / 1; border-radius: var(--radius-circle); font-weight: var(--font-weight-semi-bold); font-size: var(--body-text-xs); transition: background var(--chrome-quick) ease; display: flex; align-items: center; justify-content: center; position: relative; } /* used: chrome */
.uma-chrome-header-profile:hover { background: var(--navy-dark); } /* used: chrome */
.uma-chrome-header-profile::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100%, var(--chrome-hit-area)); height: max(100%, var(--chrome-hit-area)); } /* used: chrome */
.uma-chrome-header-badge { position: absolute; top: calc(-1 * var(--gap-xs)); right: calc(-1 * var(--chrome-tooltip-padding-x)); min-width: var(--chrome-badge-size); height: var(--chrome-badge-size); padding: 0 var(--gap-xs); border-radius: var(--app-default-radius-xs); background: var(--tomato); color: var(--bright-white); font-size: var(--chrome-badge-font-size); font-weight: var(--font-weight-bold); line-height: var(--chrome-badge-size); letter-spacing: var(--chrome-tag-letter-spacing); text-align: center; display: none; transition: opacity var(--transition-fast) ease; z-index: var(--z-chrome-badge); pointer-events: none; } /* used: chrome */
.mode-moon-icon { width: var(--chrome-icon-em); height: var(--chrome-icon-em); display: block; } /* used: chrome */

/* ===== SIDEBAR ===== */
.uma-chrome-sidebar-icon { position: fixed; left: calc((var(--sidebar-width) - var(--button-size-md)) / 2); width: var(--button-size-md); height: var(--button-size-md); z-index: var(--z-chrome-sidebar-icons); display: flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; padding: 0; } /* used: chrome */
.uma-chrome-sidebar-icon-initial { bottom: var(--flyout-padding-bottom-desktop); background-color: transparent; } /* used: chrome */
.uma-chrome-sidebar-icon-logout { bottom: calc(var(--flyout-padding-bottom-desktop) + var(--chrome-sidebar-icon-step)); } /* used: chrome */
.uma-chrome-sidebar-icon-calm { bottom: calc(var(--flyout-padding-bottom-desktop) + var(--chrome-sidebar-icon-step) * var(--chrome-sidebar-calm-slot)); } /* used: chrome */
.uma-chrome-sidebar-icon-bell { bottom: calc(var(--flyout-padding-bottom-desktop) + var(--chrome-sidebar-icon-step) * 3); } /* used: chrome */
.uma-chrome-sidebar-icon-heart { bottom: calc(var(--flyout-padding-bottom-desktop) + var(--chrome-sidebar-icon-step) * var(--chrome-sidebar-heart-slot)); } /* used: chrome */
@media (max-width: 600px) {
  .uma-chrome-sidebar-icon { display: none; visibility: hidden; } /* used: chrome */
}
.uma-chrome-sidebar-circle { width: var(--button-size-md); height: var(--button-size-md); border-radius: var(--radius-circle); display: flex; align-items: center; justify-content: center; background: transparent; color: var(--bright-white); font-size: var(--chrome-sidebar-icon-size); transition: background var(--chrome-quick) ease, color var(--chrome-quick) ease, transform var(--chrome-quick) ease; } /* used: chrome */
.uma-chrome-sidebar-circle-heart { font-size: var(--button-icon-xxl); } /* used: chrome */
.uma-chrome-sidebar-circle-bell { position: relative; } /* used: chrome */
:where(.uma-chrome-sidebar-icon:hover) .uma-chrome-sidebar-circle { background: rgba(var(--bright-white-rgb), var(--opacity-near-full)); color: var(--navy); transform: scale(var(--chrome-hover-scale)); } /* used: chrome */
.uma-chrome-sidebar-tooltip { position: absolute; left: calc(100% + (var(--sidebar-width) - var(--button-size-md)) / 2 + var(--gap-xs)); top: 50%; transform: translateY(-50%); background: var(--mid-charcoal); color: var(--bright-white); font-size: var(--body-text-sm); padding: 0 var(--chrome-tooltip-padding-x); border-radius: var(--radius-tooltip-large); white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; z-index: var(--z-chrome-tooltip); transition: opacity var(--transition-fast) ease, visibility var(--transition-fast) ease; height: var(--button-size-md); line-height: var(--button-size-md); display: flex; align-items: center; } /* used: chrome */
.uma-chrome-sidebar-tooltip-alert { transition: opacity var(--transition-fast) ease, visibility var(--transition-fast) ease, background var(--transition-fast) ease; } /* used: chrome */
:where(.uma-chrome-sidebar-icon:hover) .uma-chrome-sidebar-tooltip { opacity: 1; visibility: visible; } /* used: chrome */
.uma-chrome-sidebar-tooltip-showing { opacity: 1; visibility: visible; } /* used: chrome */
.uma-chrome-sidebar-tooltip-has-alerts { background: var(--tomato); } /* used: chrome */
.uma-chrome-sidebar-tooltip-hidden { opacity: 0; visibility: hidden; } /* used: chrome */
.uma-chrome-sidebar-badge { position: absolute; top: calc(-1 * var(--gap-xs)); right: 0; min-width: var(--chrome-badge-size); height: var(--chrome-badge-size); padding: 0 var(--gap-xs); border-radius: var(--app-default-radius-xs); background: var(--tomato); color: var(--bright-white); font-size: var(--chrome-badge-font-size); font-weight: var(--font-weight-bold); line-height: var(--chrome-badge-size); letter-spacing: var(--chrome-tag-letter-spacing); text-align: center; display: none; transition: opacity var(--transition-fast) ease; z-index: var(--z-chrome-badge); pointer-events: none; } /* used: chrome */
:where(.uma-chrome-sidebar-icon:hover) .uma-chrome-sidebar-badge { opacity: 0; } /* used: chrome */
.uma-chrome-badge-showing { display: block; } /* used: chrome */
.uma-chrome-sidebar-initial { margin: 0; background-color: var(--bright-white); color: var(--navy); width: var(--button-size-md); height: var(--button-size-md); min-width: var(--button-size-md); min-height: var(--button-size-md); border-radius: var(--radius-circle); display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; flex-shrink: 0; font-weight: var(--font-weight-semi-bold); vertical-align: middle; font-size: var(--body-text-lg); transition: background-color var(--transition-base) var(--button-transition-ease); } /* used: chrome */

/* ===== THE MENU (the flyout) ===== */
.uma-chrome-menu-pane { display: block; position: fixed; top: 0; left: 0; z-index: var(--z-chrome-flyout); height: 100vh; width: calc((var(--max-body-content-width) * var(--golden-ratio-small)) + var(--sidebar-width) + var(--default-left-right-desk-body-padding)); transform: translateX(calc(-1 * ((var(--max-body-content-width) * var(--golden-ratio-small)) + var(--sidebar-width) + var(--default-left-right-desk-body-padding)))); transition: transform var(--chrome-slide) ease-in-out, visibility 0s linear var(--chrome-slide); background-color: var(--navy); color: var(--white-text-default); padding-top: var(--gap-lg); overflow: hidden; visibility: hidden; } /* used: chrome */
.uma-chrome-menu-pane-open { transform: translateX(0); visibility: visible; transition: transform var(--chrome-slide) ease-in-out, visibility 0s; } /* used: chrome */
@media (max-width: 600px) {
  .uma-chrome-menu-pane { width: 100%; transform: translateX(-100%); overflow-y: auto; overflow-x: hidden; } /* used: chrome */
  .uma-chrome-menu-pane-open { transform: translateX(0); } /* used: chrome */
}
@media (prefers-reduced-motion: reduce) {
  .uma-chrome-menu-pane { transition: opacity var(--transition-base) ease, visibility 0s linear var(--transition-base); transform: none; opacity: 0; } /* used: chrome */
  .uma-chrome-menu-pane-open { transition: opacity var(--transition-base) ease, visibility 0s; opacity: var(--opacity-visible); } /* used: chrome */
}
.uma-chrome-menu-header { width: 100%; height: var(--fixed-header-height); display: flex; flex-direction: row; justify-content: flex-end; align-items: center; overflow-x: auto; position: absolute; left: 0; top: 0; padding-left: var(--flyout-padding-left-desktop); padding-right: var(--flyout-padding-right); } /* used: chrome */
.uma-chrome-menu-icon-button { cursor: pointer; color: var(--white-text-default); margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; height: var(--button-size-sm); width: auto; background-color: transparent; border: none; font-size: var(--button-size-sm); line-height: var(--default-line-height-single); } /* used: chrome */
.uma-chrome-menu-back { display: block; margin-bottom: var(--app-default-top-bottom-margin-lg); } /* used: chrome */
.uma-chrome-menu-logo-box { margin-top: var(--app-default-top-bottom-margin-xxxxl); padding-left: var(--flyout-padding-left-desktop); padding-right: var(--flyout-padding-right); } /* used: chrome */
.uma-chrome-menu-logo { margin-bottom: var(--uma-logo-flyout-margin-bot); width: var(--uma-flyout-logo-size); height: var(--uma-flyout-logo-size); } /* used: chrome */
.uma-chrome-menu-slider { display: flex; flex-direction: row; width: 100%; flex-shrink: 0; } /* used: chrome */
.uma-chrome-menu-slider-opening { transform: translateX(-100%); transition: transform var(--chrome-slide) ease-in-out; } /* used: chrome */
.uma-chrome-menu-slider-closing { transform: translateX(0%); transition: transform var(--chrome-slide) ease-in-out; } /* used: chrome */
.uma-chrome-menu-main, .uma-chrome-menu-sub { width: 100%; flex-shrink: 0; padding-left: var(--flyout-padding-left-desktop); padding-right: var(--flyout-padding-right); } /* used: chrome */
.uma-chrome-menu-title { display: block; font-size: var(--uma-title-flyout-font-size); font-weight: var(--font-weight-medium); line-height: var(--default-line-height-single); color: var(--white-text-default); } /* used: chrome */
.uma-chrome-menu-title-small { font-size: var(--heading-size-xl); } /* used: chrome */
.uma-chrome-menu-title-tag { font-weight: var(--font-weight-normal); margin-left: var(--chrome-title-tag-gap); vertical-align: super; text-transform: uppercase; font-size: var(--body-text-xs); } /* used: chrome */
.uma-chrome-menu-links { list-style: none; padding: 0; margin-left: 0; margin-top: var(--app-default-top-bottom-margin-xxl); margin-bottom: var(--app-default-top-bottom-margin-xxxxl); } /* used: chrome */
.uma-chrome-menu-link { display: block; margin-bottom: var(--app-default-top-bottom-margin-md); text-decoration: none; color: var(--white-text-default); transition: color var(--transition-base) ease; font-size: var(--body-text-xl); line-height: var(--default-line-height-single); } /* used: chrome */
.uma-chrome-menu-link:hover { color: var(--orange); text-decoration: none; } /* used: chrome */
.uma-chrome-menu-lock { position: relative; top: var(--chrome-flyout-nudge); } /* used: chrome */
:where(.user-paid) .uma-chrome-menu-lock { display: none; } /* used: chrome */
.uma-chrome-menu-bottom { position: absolute; bottom: 0; left: 0; width: 100%; padding: var(--gap-regular) var(--flyout-padding-right) var(--flyout-padding-bottom-desktop) var(--flyout-padding-left-desktop); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--gap-xxs); box-sizing: border-box; } /* used: chrome */
.uma-chrome-account-button { flex-shrink: 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: auto; white-space: nowrap; padding: var(--chrome-menu-button-pad-y) var(--chrome-menu-button-pad-x) var(--chrome-menu-button-pad-y) 0; border-radius: var(--radius-pill); background-color: transparent; border: var(--stroke-hairline) solid transparent; color: var(--inverted-pill-dim-text); font-family: inherit; font-size: var(--body-text-xs); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-single); cursor: pointer; transition: border-color var(--transition-base) var(--button-transition-ease), color var(--transition-base) var(--button-transition-ease); } /* used: chrome */
.uma-chrome-account-button:hover { border-color: var(--white-text-default); color: var(--white-text-default); } /* used: chrome */
.uma-chrome-account-initial { flex-shrink: 0; margin-right: var(--chrome-initial-gap); background-color: var(--white-text-default); color: var(--navy); border-radius: var(--radius-circle); width: var(--button-size-md); height: var(--button-size-md); aspect-ratio: 1 / 1; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--font-weight-semi-bold); vertical-align: middle; font-size: var(--body-text-lg); transition: background-color var(--transition-base) var(--button-transition-ease); } /* used: chrome */
.uma-chrome-menu-voice { margin-left: auto; margin-right: var(--chrome-tooltip-padding-x); } /* used: chrome */
.uma-chrome-switch-input { z-index: var(--z-chrome-layer-4); } /* used: chrome */
.uma-chrome-menu-voice-track { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--navy-dark); transition: background var(--transition-base) ease; overflow: hidden; } /* used: chrome */
:where(.uma-chrome-menu-voice:hover) .uma-chrome-menu-voice-track { background: var(--chrome-voice-hover); } /* used: chrome */
.uma-chrome-menu-voice-track-on { background: var(--dark-teal); } /* used: chrome */
.uma-chrome-menu-voice-thumb { position: absolute; top: var(--switch-thumb-inset); left: var(--switch-thumb-inset); width: var(--switch-lg-thumb); height: var(--switch-lg-thumb); border-radius: var(--radius-circle); background: var(--bright-white); box-shadow: var(--chrome-voice-thumb-shadow-offset) var(--shadow-overlay); transition: left var(--chrome-quick) ease; z-index: var(--z-chrome-layer-2); } /* used: chrome */
.uma-chrome-menu-voice-thumb-on { left: calc(100% - var(--switch-lg-thumb) - var(--switch-thumb-inset)); } /* used: chrome */
.uma-chrome-menu-voice-glyph { position: absolute; top: 50%; left: var(--chrome-voice-glyph-left); transform: translateY(-50%); z-index: var(--z-chrome-layer-3); pointer-events: none; color: var(--bright-white); display: flex; align-items: center; justify-content: center; font-size: var(--button-icon-lg); width: var(--switch-lg-thumb); text-align: center; transition: left var(--chrome-quick) ease; } /* used: chrome */
.uma-chrome-menu-voice-glyph-on { left: var(--chrome-voice-glyph-left-on); } /* used: chrome */
@media (max-width: 600px) {
  .uma-chrome-menu-header, .uma-chrome-menu-logo-box, .uma-chrome-menu-main, .uma-chrome-menu-sub { padding-left: var(--flyout-padding-left-mobile); } /* used: chrome */
  .uma-chrome-menu-bottom { padding-left: var(--flyout-padding-left-mobile); padding-bottom: var(--flyout-padding-bottom-mobile); } /* used: chrome */
  .uma-chrome-menu-voice { margin-right: 0; } /* used: chrome */
}
@media (max-width: 380px) {
  .uma-chrome-account-button { display: none; } /* used: chrome */
}
@media (max-height: 700px) {
  .uma-chrome-menu-logo { width: var(--uma-sm); height: var(--uma-sm); } /* used: chrome */
  .uma-chrome-menu-logo-box { margin-top: var(--gap-regular); } /* used: chrome */
  .uma-chrome-menu-link { margin-bottom: var(--gap-md); font-size: var(--chrome-menu-link-short); } /* used: chrome */
  .uma-chrome-menu-title { font-size: var(--heading-size-lg); } /* used: chrome */
  .uma-chrome-menu-title-small { font-size: var(--heading-size-xl); } /* used: chrome */
}
@media (max-height: 600px) {
  .uma-chrome-menu-pane { padding-top: var(--gap-xs); } /* used: chrome */
  .uma-chrome-menu-logo { width: var(--button-size-md); height: var(--button-size-md); } /* used: chrome */
  .uma-chrome-menu-logo-box { margin-top: var(--gap-xs); } /* used: chrome */
  .uma-chrome-menu-link { margin-bottom: var(--gap-sm); font-size: var(--body-text-sm); } /* used: chrome */
  .uma-chrome-menu-title { font-size: var(--body-text-xxxl); } /* used: chrome */
  .uma-chrome-menu-title-small { font-size: var(--heading-size-xl); } /* used: chrome */
}
.uma-chrome-menu-disabled { pointer-events: none; opacity: var(--opacity-moderate); cursor: default; } /* used: chrome */
.uma-chrome-menu-link-pointer { cursor: pointer; } /* used: chrome */
.uma-chrome-coming-soon-tag { background-color: var(--bright-white); color: var(--navy); font-weight: var(--font-weight-bold); font-size: var(--body-text-xxs); text-transform: uppercase; letter-spacing: var(--chrome-tag-letter-spacing); padding: 0 var(--gap-md); border-radius: var(--radius-tooltip-large); height: var(--button-size-xs); display: inline-flex; align-items: center; line-height: var(--default-line-height-single); margin-left: var(--gap-xs); vertical-align: middle; white-space: nowrap; flex-shrink: 0; } /* used: chrome */

/* ===== FEEDBACK ===== */
.uma-feedback-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); transform-origin: center; z-index: var(--z-feedback-tab); background: var(--yellow); color: var(--chrome-feedback-tab-text); border: none; padding: var(--chrome-feedback-tab-pad-y) var(--chrome-feedback-tab-pad-x); border-radius: var(--app-default-radius-md) 0 0 var(--app-default-radius-md); cursor: pointer; font-size: var(--button-font-size); font-weight: var(--font-weight-bold); writing-mode: vertical-rl; letter-spacing: var(--chrome-tab-letter-spacing); box-shadow: var(--chrome-tab-shadow); transition: background var(--transition-base) var(--button-transition-ease), padding var(--transition-base) var(--button-transition-ease); } /* used: chrome */
.uma-feedback-tab:hover { padding-right: var(--chrome-feedback-tab-pad-hover); } /* used: chrome */
/* The profile's goodbye screen shows its own feedback tab, which keeps
   UMA.css's uma-chrome-feedback-tab. While it is up the profile puts this
   state on it: the tab sits above the goodbye layer, and in dark its text is
   navy. Both are set as the tokens that UMA.css's tab rule reads. */
.uma-chrome-feedback-tab-elevated { --z-feedback-tab: var(--z-chrome-feedback-raised); --white-text-default: var(--chrome-farewell-tab-text); } /* used: chrome */
.uma-feedback-backdrop { display: none; position: fixed; inset: 0; z-index: var(--z-chrome-flyout); background: transparent; } /* used: chrome */
.uma-feedback-backdrop-open { display: block; } /* used: chrome */
.uma-feedback-panel { position: fixed; top: var(--feedback-panel-margin); right: var(--feedback-panel-margin); bottom: var(--feedback-panel-margin); min-height: var(--chrome-feedback-min-height); width: var(--feedback-panel-width); z-index: var(--z-feedback-panel); background: var(--chrome-feedback-panel-bg); color: var(--chrome-feedback-panel-text, inherit); border-radius: var(--app-default-radius-md); box-shadow: var(--chrome-panel-shadow); display: flex; flex-direction: column; overflow: hidden; transform: translateX(calc(100% + var(--feedback-panel-margin))); visibility: hidden; transition: transform var(--chrome-slide) ease-in-out, visibility 0s linear var(--chrome-slide); } /* used: chrome */
.uma-feedback-panel-open { transform: translateX(0); visibility: visible; transition: transform var(--chrome-slide) ease-in-out, visibility 0s; } /* used: chrome */
@media (max-width: 600px) {
  .uma-feedback-panel { top: 0; right: 0; bottom: 0; left: 0; width: 100%; border-radius: 0; box-shadow: none; transform: translateX(100%); } /* used: chrome */
  .uma-feedback-panel-open { transform: translateX(0); } /* used: chrome */
}
@media (prefers-reduced-motion: reduce) {
  .uma-feedback-tab, .uma-feedback-backdrop, .uma-feedback-panel { transition-duration: var(--chrome-reduced); } /* used: chrome */
  .uma-feedback-panel { transform: none; } /* used: chrome */
}
@media print {
  .uma-feedback-tab, .uma-feedback-backdrop, .uma-feedback-panel { display: none; } /* used: chrome */
}
.uma-feedback-header { background: var(--navy); color: var(--bright-white); height: var(--fixed-header-height); padding: 0 var(--gap-xl); display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; } /* used: chrome */
.uma-feedback-heading { font-size: var(--heading-size-sm); font-weight: var(--font-weight-normal); margin: 0; text-align: center; color: var(--bright-white); } /* used: chrome */
.uma-feedback-close { position: absolute; top: 50%; right: var(--gap-regular); transform: translateY(-50%); background: transparent; border: none; cursor: pointer; width: var(--chrome-feedback-close-size); height: var(--chrome-feedback-close-size); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-circle); color: var(--bright-white); transition: background var(--transition-fast) ease, color var(--transition-fast) ease; } /* used: chrome */
.uma-feedback-body { padding: var(--gap-regular); overflow-y: auto; flex: 1 1 auto; min-height: 0; position: relative; } /* used: chrome */
@media (max-width: 600px) {
  .uma-feedback-body { padding: var(--gap-lg); } /* used: chrome */
}
.uma-feedback-panel-tab { display: none; } /* used: chrome */
.uma-feedback-panel-tab-active { display: block; } /* used: chrome */
.uma-feedback-field { margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: chrome */
.uma-feedback-label { display: flex; align-items: center; gap: var(--gap-xs); font-size: var(--body-text-xs); font-weight: var(--font-weight-medium); margin-bottom: var(--app-default-top-bottom-margin-sm); color: var(--chrome-feedback-label, inherit); } /* used: chrome */
.uma-feedback-emoji { font-size: var(--body-text-lg); line-height: var(--default-line-height-single); } /* used: chrome */
/* The text boxes keep field and field-multiline, so UMA.css's own focus
   look for fields still applies. Her smaller type and her dark colours are
   set as tokens on the box. */
.uma-feedback-textarea { --font-size-base: var(--body-text-xs); --bright-white: var(--chrome-feedback-field-bg); --mid-charcoal: var(--chrome-feedback-field-text); --black-rgb: var(--chrome-feedback-field-edge-rgb); --light-charcoal: var(--chrome-feedback-placeholder); caret-color: var(--chrome-feedback-field-caret, auto); } /* used: chrome */
.uma-feedback-textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 var(--chrome-autofill-cover) var(--bright-white) inset; -webkit-text-fill-color: var(--mid-charcoal); caret-color: var(--mid-charcoal); transition: background-color var(--chrome-autofill-delay) ease-in-out 0s; } /* used: chrome */
/* The filled button keeps btn, btn-pill, btn-md and btn-primary-navy; her
   dark colours are set as tokens on it. The outline button's border and text
   differ in dark, which one UMA.css token cannot carry, so it has its own
   class in place of btn and btn-secondary-navy-on-white. */
.uma-feedback-button { width: 100%; gap: var(--gap-xs); margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: chrome */
.uma-feedback-button:last-child { margin-bottom: 0; } /* used: chrome */
.uma-feedback-button-primary { --navy: var(--chrome-feedback-primary-bg); --bright-white: var(--chrome-feedback-primary-text); --navy-dark: var(--chrome-feedback-primary-hover); } /* used: chrome */
.uma-feedback-button-primary:disabled { --chrome-feedback-primary-bg: var(--chrome-feedback-disabled-bg); --chrome-feedback-primary-text: var(--chrome-feedback-disabled-text); --chrome-feedback-primary-hover: var(--chrome-feedback-disabled-bg); } /* used: chrome */
.uma-feedback-button-outline { display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; border: var(--stroke-hairline) solid var(--chrome-feedback-secondary-border); background: transparent; color: var(--chrome-feedback-secondary-text); font-family: inherit; font-size: var(--body-text-sm); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-single); cursor: pointer; flex-shrink: 0; text-decoration: none; transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base); } /* used: chrome */
.uma-feedback-button-outline:hover { background: var(--chrome-feedback-secondary-hover-bg); border-color: var(--chrome-feedback-secondary-hover-border); color: var(--chrome-feedback-secondary-hover-text); text-decoration: none; } /* used: chrome */
.uma-feedback-button-icon { --button-icon-md: var(--button-icon-lg); margin-left: var(--gap-xs); } /* used: chrome */
.uma-feedback-screenshot-preview { display: none; align-items: center; gap: var(--chrome-tooltip-padding-x); margin-bottom: var(--app-default-top-bottom-margin-lg); padding: var(--chrome-tooltip-padding-x); border-radius: var(--app-default-radius-md); background: var(--chrome-feedback-preview-bg); } /* used: chrome */
.uma-feedback-screenshot-preview-active { display: flex; } /* used: chrome */
.uma-feedback-screenshot-image { flex: 0 0 auto; width: var(--chrome-screenshot-width); height: var(--chrome-screenshot-height); object-fit: cover; border-radius: var(--app-default-radius-xs); } /* used: chrome */
.uma-feedback-screenshot-filename { flex: 1; font-size: var(--body-text-xs); } /* used: chrome */
.uma-feedback-screenshot-remove { position: relative; background: transparent; border: none; color: var(--chrome-feedback-remove); cursor: pointer; width: var(--chrome-screenshot-remove); height: var(--chrome-screenshot-remove); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-circle); flex-shrink: 0; font-size: var(--body-text-lg); } /* used: chrome */ /* HIT AREA 6 OCT: position relative keeps the invisible touch area on this button (it covered the whole panel on a phone) */
.uma-feedback-screenshot-remove:hover { background: var(--chrome-feedback-remove-hover-bg); color: var(--chrome-feedback-remove-hover); } /* used: chrome */
@media (hover: none) {
  .uma-feedback-close::after, .uma-feedback-screenshot-remove::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: var(--chrome-hit-area-touch); min-height: var(--chrome-hit-area-touch); } /* used: chrome */
}
.uma-feedback-rating-block { margin-bottom: var(--app-default-top-bottom-margin-md); } /* used: chrome */
.uma-feedback-rating-summary { display: block; text-align: center; font-size: var(--body-text-lg); color: var(--chrome-feedback-strong); font-weight: var(--font-weight-normal); margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: chrome */
.uma-feedback-rating-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--chrome-rating-gap); width: 100%; container-type: inline-size; } /* used: chrome */
.uma-feedback-star { background: transparent; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; position: relative; aspect-ratio: 1; width: 100%; overflow: visible; font-size: var(--chrome-rating-size); } /* used: chrome */
.uma-feedback-star:hover { --star-ink: var(--chrome-feedback-star-hover); --star-transform: scale(var(--chrome-rating-icon-scale)); --star-number: var(--chrome-feedback-star-number-hover); } /* used: chrome */
.uma-feedback-star-filled, .uma-feedback-star-filled:hover { --star-ink: var(--yellow); --star-number: var(--navy); } /* used: chrome */
.uma-feedback-star-svg { width: var(--chrome-rating-star-size); height: var(--chrome-rating-star-size); display: block; color: var(--star-ink, var(--chrome-feedback-star)); transform: var(--star-transform, none); transition: color var(--transition-fast) ease, transform var(--chrome-reduced) ease; } /* used: chrome */
.uma-feedback-star-number { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--body-text-sm); font-weight: var(--font-weight-bold); pointer-events: none; transition: color var(--transition-fast) ease; color: var(--star-number, var(--chrome-feedback-star-number, inherit)); } /* used: chrome */
.uma-feedback-thanks { display: none; text-align: center; padding: var(--gap-xl); } /* used: chrome */
.uma-feedback-thanks-active { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; inset: 0; } /* used: chrome */
.uma-feedback-thanks-icon { color: var(--bright-green); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: chrome */
.uma-feedback-thanks-glyph { font-size: var(--chrome-thanks-icon); } /* used: chrome */
.uma-feedback-thanks-title { font-size: var(--body-text-lg); font-weight: var(--font-weight-normal); margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-xxs); } /* used: chrome */
.uma-feedback-thanks-action { width: auto; min-width: var(--chrome-thanks-min-width); margin-top: var(--app-default-top-bottom-margin-lg); margin-bottom: 0; text-decoration: none; } /* used: chrome */
.uma-feedback-tab-bar { max-width: 100%; width: auto; height: auto; overflow-x: visible; z-index: var(--chrome-pill-z); display: flex; justify-content: center; margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: chrome */
/* States the feedback script puts on its own parts: a part put away while
   the thanks shows or once a screenshot is taken, and the panel and its
   backdrop kept out of the picture while the screenshot is taken. */
.uma-feedback-part-hidden { display: none; } /* used: chrome */
.uma-feedback-capture-hidden { visibility: hidden; } /* used: chrome */
.uma-chrome-pill-bar { background-color: var(--chrome-pill-track); height: var(--chrome-pill-bar-height); border-radius: calc(var(--chrome-pill-bar-height) / 2); display: inline-flex; width: max-content; padding-left: var(--chrome-pill-bar-pad); padding-right: var(--chrome-pill-bar-pad); align-items: center; position: relative; justify-content: center; z-index: var(--chrome-pill-z); transform: translateZ(0); will-change: transform; } /* used: chrome */
@media (max-width: 599px) {
  .uma-chrome-pill-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } /* used: chrome */
}
.uma-chrome-pill-item { color: var(--chrome-pill-text); font-size: var(--body-text-xs); text-decoration: none; height: var(--chrome-pill-height); line-height: var(--chrome-pill-height); border-radius: calc(var(--chrome-pill-height) / 2); position: relative; display: flex; align-items: center; justify-content: center; z-index: var(--chrome-pill-item-z); transform: translateZ(0); will-change: transform; cursor: pointer; padding: 0 var(--nav-link-padding-horizontal); transition: color var(--transition-base); white-space: nowrap; } /* used: chrome */
.uma-wishlist-pill-item { color: inherit; border: none; background: transparent; font-family: inherit; -webkit-appearance: none; appearance: none; text-align: inherit; } /* used: chrome */
.uma-chrome-pill-item:hover { color: var(--orange); text-decoration: none; } /* used: chrome */
.uma-chrome-pill-item-selected, .uma-chrome-pill-item-selected:hover { color: var(--chrome-pill-selected-text); text-decoration: none; } /* used: chrome */
.uma-chrome-pill-indicator { align-items: center; position: absolute; left: 0; height: var(--chrome-pill-height); background-color: var(--chrome-pill-indicator); line-height: var(--chrome-pill-height); border-radius: calc(var(--chrome-pill-height) / 2); transition: all var(--transition-base) ease; z-index: var(--chrome-pill-indicator-z); transform: translateZ(0); will-change: transform; } /* used: chrome */

/* ===== ALERTS ===== */
.uma-alerts-panel { position: fixed; top: var(--alerts-panel-top, var(--fixed-header-height)); left: var(--alerts-panel-left, var(--gap-regular)); z-index: var(--z-alerts-panel); width: var(--alerts-panel-width); max-width: calc(100vw - var(--gap-regular) * 2); max-height: calc(100dvh - var(--alerts-panel-top, var(--fixed-header-height)) - var(--gap-regular)); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; background: var(--chrome-alerts-bg); color: var(--chrome-alerts-text); border: var(--stroke-hairline) solid var(--chrome-alerts-border); border-radius: var(--app-default-radius-lg); box-shadow: var(--chrome-panel-shadow); animation: uma-alerts-fade-in var(--transition-fast) ease-out; } /* used: chrome */
:where([data-motion="still"]) .uma-alerts-panel { animation: none; } /* used: chrome */
@keyframes uma-alerts-fade-in { from { opacity: var(--opacity-hidden); } to { opacity: var(--opacity-visible); } } /* used: chrome */
.uma-alerts-list { list-style: none; margin: 0; padding: 0; } /* used: chrome */
.uma-alerts-item:not(:first-child) { border-top: var(--stroke-hairline) solid var(--chrome-alerts-border); } /* used: chrome */
.uma-alerts-link { display: grid; grid-template-columns: var(--alerts-thumb-size) minmax(0, 1fr) auto; align-items: center; gap: var(--gap-md); padding: var(--gap-md) var(--gap-regular); color: inherit; text-decoration: none; } /* used: chrome */
.uma-alerts-link:hover { background: var(--chrome-alerts-hover); text-decoration: none; color: inherit; } /* used: chrome */
.uma-alerts-thumb { width: var(--alerts-thumb-size); height: var(--alerts-thumb-size); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--chrome-alerts-thumb-bg); color: var(--bright-white); border-radius: var(--app-default-radius-sm); font-size: var(--button-icon-lg); } /* used: chrome */
.uma-alerts-thumb-person { border-radius: var(--radius-circle); background: var(--alerts-thumb-colour, var(--dark-white)); } /* used: chrome */
.uma-alerts-thumb-image { width: 100%; height: 100%; object-fit: cover; display: block; } /* used: chrome */
.uma-alerts-thumb-logo { width: var(--alerts-logo-size); height: var(--alerts-logo-size); fill: currentColor; } /* used: chrome */
.uma-alerts-text { display: block; margin: 0; font-size: var(--body-text-sm); line-height: var(--default-line-height-x-small); overflow-wrap: anywhere; } /* used: chrome */
.uma-alerts-arrow { font-size: var(--button-icon-md); } /* used: chrome */
.uma-alerts-empty { margin: 0; padding: var(--gap-regular); font-size: var(--body-text-sm); } /* used: chrome */

/* ===== SOS AND THE CRISIS PANE ===== */
.uma-chrome-sos { display: inline-flex; align-items: center; justify-content: center; position: fixed; bottom: var(--app-default-top-bottom-margin-xxxl); right: var(--app-default-top-bottom-margin-xxl); z-index: var(--z-chrome); height: var(--button-size-xl); width: auto; aspect-ratio: 1 / 1; padding: 0; border: none; border-radius: var(--radius-pill); background: var(--tomato); color: var(--mid-white); font-family: var(--font-family-condensed); font-size: var(--sos-button-font-size); font-weight: var(--font-weight-bold); line-height: var(--default-line-height-single); cursor: pointer; flex-shrink: 0; transition: transform var(--chrome-quick) var(--chrome-spring), background var(--transition-base); } /* used: chrome */
.uma-chrome-sos:hover { transform: scale(var(--chrome-sos-hover-scale)); } /* used: chrome */
@media (max-width: 600px) {
  .uma-chrome-sos { bottom: var(--app-default-top-bottom-margin-xl); right: var(--app-default-top-bottom-margin-xl); height: var(--button-size-lg); } /* used: chrome */
}
.uma-crisis-pane { --flood-color: var(--dark-teal); position: fixed; top: 0; right: 0; bottom: 0; left: var(--sidebar-width); z-index: var(--crisis-pane-z); display: none; overflow-y: auto; background: var(--dark-teal); color: var(--bright-white); } /* used: chrome */
.uma-crisis-pane-open { display: flex; align-items: flex-start; animation: crisis-pane-fade-in var(--transition-base) ease-out; } /* used: chrome */
:where([data-motion="still"]) .uma-crisis-pane-open { animation: none; } /* used: chrome */
@media (max-width: 600px) {
  .uma-crisis-pane { left: 0; } /* used: chrome */
}
.uma-crisis-close:hover { background: var(--bright-white); } /* used: chrome */
/* The breathing box keeps crisis-pane-breath-stage and crisis-pane-breath-rect.
   UMA.css changes their shape tokens on the root at some widths; the chrome's
   box keeps its own shape by setting those tokens on the box itself. */
.uma-crisis-breath-stage { --crisis-pane-breath-stage-ratio: var(--uma-crisis-stage-ratio); } /* used: chrome */
.uma-crisis-breath-rect { --crisis-pane-breath-height-small: var(--uma-crisis-height-small); --crisis-pane-breath-height-large: var(--uma-crisis-height-large); } /* used: chrome */
.uma-crisis-slider-handle { position: absolute; left: 0; top: 0; margin: var(--app-default-top-bottom-margin-xxxxs); height: calc(100% - (2 * var(--app-default-top-bottom-margin-xxxxs))); aspect-ratio: 1 / 1; border-radius: var(--radius-circle); background: var(--tomato); color: var(--bright-white); display: flex; align-items: center; justify-content: center; z-index: var(--z-chrome-layer-2); cursor: grab; transition: left var(--transition-base) ease-out, background var(--transition-base); } /* used: chrome */
.uma-crisis-slider-handle:hover { background: var(--red-dark); } /* used: chrome */
.uma-crisis-slider-handle-dragging { cursor: grabbing; transition: none; } /* used: chrome */
.crisis-pane-slider-label-icon { vertical-align: middle; margin-left: var(--gap-xs); } /* used: chrome */

/* ===== UPGRADE PANEL ===== */
.uma-upgrade-overlay { display: none; opacity: 0; transition: opacity var(--chrome-fade-slow) ease; position: fixed; top: 0; left: 0; width: 100dvw; height: 100dvh; background: var(--new-white); z-index: var(--z-chrome-upgrade); overflow-y: auto; } /* used: chrome */
.uma-upgrade-overlay-open { display: block; opacity: var(--opacity-visible); } /* used: chrome */
.uma-upgrade-frame { width: 100%; margin-left: 0; border-top: var(--stroke-hairline) solid transparent; display: flex; flex-direction: column; box-sizing: border-box; background: var(--t-band-alt); } /* used: chrome */
.uma-upgrade-frame-inner { width: 100%; max-width: var(--max-body-wrapper-width); padding-left: 0; padding-right: 0; margin-top: 0; } /* used: chrome */
@media (max-width: 600px) {
  .uma-upgrade-frame-inner { max-width: 100%; padding-bottom: var(--upgrade-mobile-bottom-pad); } /* used: chrome */
}
@media (min-width: 600px) and (max-width: 1100px) {
  .uma-upgrade-frame-inner { height: 100%; display: flex; flex-direction: column; } /* used: chrome */
}
.uma-upgrade-layout { display: grid; grid-template-columns: var(--upgrade-text-column-width) 1fr; column-gap: 0; row-gap: 0; align-items: start; } /* used: chrome */
.uma-upgrade-offer-column { grid-column: 1; max-width: var(--upgrade-text-content-width); margin-left: var(--mirror-right-padding); margin-right: var(--mirror-right-padding); padding-left: 0; padding-right: 0; padding-top: var(--app-default-top-bottom-margin-xxxl); padding-bottom: var(--app-default-top-bottom-margin-xxxxxl); box-sizing: border-box; height: auto; overflow-y: visible; } /* used: chrome */
.uma-upgrade-preview-column { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; position: fixed; top: 0; left: var(--upgrade-text-column-width); right: auto; width: calc(var(--upgrade-preview-max-width) + var(--default-left-right-desk-body-padding)); height: 100dvh; padding-top: 0; padding-left: 0; padding-right: var(--default-left-right-desk-body-padding); box-sizing: border-box; } /* used: chrome */
.uma-upgrade-close-button-wrap { height: auto; display: flex; flex-direction: row; justify-content: flex-end; align-self: flex-end; position: absolute; top: var(--app-default-top-bottom-margin-xxxl); right: var(--default-left-right-desk-body-padding); } /* used: chrome */
.pseudo-gap-upgrade-heading { display: none; } /* used: chrome */
.uma-upgrade-preview-track-wrap { margin-top: calc(var(--app-default-top-bottom-margin-xxxl) + var(--heading-size-xxl) + var(--app-default-top-bottom-margin-lg)); width: min(100%, calc((100dvh - var(--app-default-top-bottom-margin-xxxl) - var(--heading-size-xxl) - var(--app-default-top-bottom-margin-lg) - var(--app-default-top-bottom-margin-xxxl)) * var(--upgrade-preview-height-ratio))); max-width: var(--upgrade-preview-max-width); overflow: hidden; border-radius: 0; } /* used: chrome */
.uma-upgrade-preview-dots { display: flex; justify-content: center; gap: var(--gap-sm); margin-top: var(--app-default-top-bottom-margin-md); width: min(100%, calc((100dvh - var(--app-default-top-bottom-margin-xxxl) - var(--heading-size-xxl) - var(--app-default-top-bottom-margin-lg) - var(--app-default-top-bottom-margin-xxxl)) * var(--upgrade-preview-height-ratio))); max-width: var(--upgrade-preview-max-width); } /* used: chrome */
@media (max-width: 951px) {
  .uma-upgrade-layout { display: flex; flex-direction: column; gap: var(--gap-xxl); } /* used: chrome */
  .uma-upgrade-offer-column, .uma-upgrade-preview-column { display: contents; } /* used: chrome */
  .uma-upgrade-close-button-wrap { position: fixed; top: var(--app-default-top-bottom-margin-xxxl); right: var(--default-left-right-mob-body-padding); z-index: var(--z-chrome-upgrade-close); order: 1; } /* used: chrome */
  .uma-upgrade-offer-heading { padding-top: calc(var(--back-next-button-diameter) + var(--app-default-top-bottom-margin-xl)); order: 2; text-align: center; width: min(var(--golden-width-small), calc(100% - 2 * var(--default-left-right-mob-body-padding))); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } /* used: chrome */
  .uma-upgrade-intro { margin-left: auto; margin-right: auto; } /* used: chrome */
  .uma-upgrade-preview-track-wrap { order: 3; width: min(var(--golden-width-small), calc(100% - 2 * var(--default-left-right-mob-body-padding))); max-width: var(--upgrade-small-preview-max-width); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } /* used: chrome */
  .uma-upgrade-preview-dots { order: 4; width: min(var(--golden-width-small), calc(100% - 2 * var(--default-left-right-mob-body-padding))); max-width: var(--upgrade-small-preview-max-width); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } /* used: chrome */
  .uma-upgrade-offer-body { order: 5; width: min(var(--golden-width-small), calc(100% - 2 * var(--default-left-right-mob-body-padding))); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } /* used: chrome */
}
@media (max-width: 900px) {
  .uma-upgrade-offer-body { align-self: stretch; min-width: 0; } /* used: chrome */
  .uma-upgrade-preview-column { order: 3; } /* used: chrome */
  .uma-upgrade-preview-track-wrap { margin-top: 0; width: 100%; max-width: var(--max-content-width-golden-section-small); } /* used: chrome */
  .uma-upgrade-preview-dots { width: 100%; max-width: var(--max-content-width-golden-section-small); } /* used: chrome */
}
.upgrade-page-heading-h1 { font-size: var(--heading-size-lg); line-height: var(--default-line-height-single); margin-top: var(--app-default-top-bottom-margin-xxxl); margin-bottom: var(--app-default-top-bottom-margin-lg); letter-spacing: var(--heading-letter-spacing-tight); } /* used: chrome */
.uma-upgrade-intro { font-size: var(--body-text-sm); margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-lg); line-height: var(--default-line-height-small); text-wrap: balance; } /* used: chrome */
.uma-upgrade-price-block { margin-top: var(--app-default-top-bottom-margin-xxxxl); margin-bottom: var(--app-default-top-bottom-margin-lg); } /* used: chrome */
.uma-upgrade-product-name { font-size: var(--body-text-xl); font-weight: var(--font-weight-medium); margin-bottom: var(--app-default-top-bottom-margin-xxxs); } /* used: chrome */
.uma-upgrade-price { display: flex; align-items: baseline; gap: var(--gap-sm); margin: 0; } /* used: chrome */
.uma-upgrade-price-now { font-size: var(--heading-size-xl); font-weight: var(--font-weight-medium); line-height: var(--default-line-height-single); } /* used: chrome */
.uma-upgrade-price-was { font-size: var(--body-text-sm); color: var(--light-charcoal); text-decoration: line-through; font-weight: var(--font-weight-normal); } /* used: chrome */
.uma-upgrade-list { list-style: none; margin-bottom: var(--app-default-top-bottom-margin-lg); padding: 0; } /* used: chrome */
.uma-upgrade-list-reports { margin-bottom: var(--app-default-top-bottom-margin-xxxl); } /* used: chrome */
.uma-upgrade-list-item { display: flex; align-items: flex-start; gap: var(--gap-md); margin-bottom: var(--app-default-top-bottom-margin-xxs); line-height: var(--default-line-height-x-large); font-size: var(--body-text-xs); text-wrap: pretty; } /* used: chrome */
.uma-upgrade-list-icon { flex-shrink: 0; font-size: var(--button-icon-md); line-height: var(--default-line-height-small); position: relative; top: calc(-1 * var(--stroke-thin)); } /* used: chrome */
.uma-upgrade-list-icon-green { color: var(--bright-green); } /* used: chrome */
.uma-upgrade-list-icon-red { color: var(--tomato); } /* used: chrome */
.upgrade-subheading-h3 { font-size: var(--heading-size-sm); font-weight: var(--font-weight-medium); margin-top: var(--app-default-top-bottom-margin-xxl); margin-bottom: var(--app-default-top-bottom-margin-xs); } /* used: chrome */
.uma-upgrade-discount { margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: chrome */
.uma-upgrade-discount-feedback { font-size: var(--body-text-xs); margin: 0; min-height: 0; } /* used: chrome */
.uma-upgrade-discount-feedback:not(:empty) { margin-bottom: var(--app-default-top-bottom-margin-xxs); } /* used: chrome */
.uma-upgrade-discount-feedback-valid { color: var(--success); } /* used: chrome */
.uma-upgrade-discount-feedback-invalid { color: var(--error); } /* used: chrome */
.uma-upgrade-payment { margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: chrome */
.uma-upgrade-payment-message { font-size: var(--body-text-xs); margin: 0; } /* used: chrome */
.uma-upgrade-payment-message:not(:empty) { margin-bottom: var(--app-default-top-bottom-margin-xs); } /* used: chrome */
.uma-upgrade-payment-message-error { color: var(--error); } /* used: chrome */
.uma-upgrade-pay-button { --btn-padding-x: var(--btn-padding-x-default); --button-icon-xl: var(--button-font-size); --text-on-colour: var(--bright-white); width: 100%; gap: var(--gap-xs); margin-bottom: var(--app-default-top-bottom-margin-sm); justify-content: center; } /* used: chrome */
.uma-upgrade-close-button { color: var(--light-charcoal); } /* used: chrome */
.uma-upgrade-close-button:hover { background: var(--hover-overlay-light); color: var(--mid-charcoal); } /* used: chrome */
.uma-upgrade-tag { display: inline-flex; align-items: center; flex-shrink: 0; height: var(--status-tag-height); margin-top: 0; padding-left: var(--status-tag-padding-x); padding-right: var(--status-tag-padding-x); border-radius: var(--app-default-radius-sm); background-color: var(--yellow); color: var(--navy); font-size: var(--body-text-xxs); font-weight: var(--font-weight-medium); letter-spacing: var(--chrome-tag-letter-spacing); text-transform: uppercase; white-space: nowrap; transform: translateY(var(--upgrade-pricing-tag-lift)); } /* used: chrome */
@media (max-width: 359px) {
  .uma-upgrade-tag { padding-left: var(--gap-sm); padding-right: var(--gap-sm); letter-spacing: normal; } /* used: chrome */
}
.uma-upgrade-fineprint { font-size: var(--body-text-xs); color: var(--light-charcoal); line-height: var(--default-line-height-x-large); margin-bottom: var(--app-default-top-bottom-margin-xxxxl); text-wrap: pretty; } /* used: chrome */
.uma-upgrade-fineprint-link { color: var(--orange); text-decoration: underline; transition: text-decoration-color var(--chrome-slide) ease, color var(--chrome-slide) ease, text-decoration var(--chrome-slide) ease; } /* used: chrome */
.uma-upgrade-fineprint-link:hover { color: var(--orange); text-decoration: underline; text-underline-offset: var(--link-underline-offset); } /* used: chrome */
.uma-upgrade-fineprint-icon { font-size: var(--button-icon-md); vertical-align: var(--chrome-inline-icon-nudge); margin-left: var(--chrome-inline-icon-gap); } /* used: chrome */
.uma-upgrade-preview-track { display: flex; transition: transform var(--chrome-slide) ease; will-change: transform; } /* used: chrome */
.uma-upgrade-preview-slide { flex: 0 0 100%; aspect-ratio: var(--carouselle-card-ratio-portrait); background: var(--bright-white); border-radius: 0; overflow: hidden; box-shadow: var(--chrome-slide-shadow); } /* used: chrome */
.uma-upgrade-preview-image { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; -webkit-user-drag: none; user-select: none; pointer-events: none; } /* used: chrome */
.uma-upgrade-preview-dot { width: var(--upgrade-swipe-dot-size); height: var(--upgrade-swipe-dot-size); min-width: 0; aspect-ratio: 1 / 1; border-radius: var(--radius-circle); background: transparent; border: none; color: inherit; font-family: inherit; font-size: inherit; text-align: inherit; cursor: pointer; padding: 0; transition: background var(--chrome-quick) ease; } /* used: chrome */
.uma-upgrade-preview-dot:hover { background: var(--hover-overlay-light); } /* used: chrome */
.uma-upgrade-preview-dot-active, .uma-upgrade-preview-dot-active:hover { background: var(--navy); } /* used: chrome */
@media (prefers-reduced-motion: reduce) {
  .uma-upgrade-preview-track, .uma-upgrade-close-button { transition-duration: var(--chrome-reduced); } /* used: chrome */
}

/* ===== THE OLD WISHLIST PANEL (nothing opens it now; kept as it was) ===== */
.uma-chrome-wishlist-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--chrome-backdrop); z-index: var(--z-feedback-panel); display: none; } /* used: chrome */
.uma-chrome-wishlist-backdrop-open { display: block; } /* used: chrome */
.uma-chrome-wishlist-panel { position: fixed; top: var(--feedback-panel-margin); right: var(--feedback-panel-margin); bottom: var(--feedback-panel-margin); width: var(--feedback-panel-width); z-index: calc(var(--z-feedback-panel) + 1); background: var(--chrome-wishlist-panel-bg); color: var(--chrome-wishlist-panel-text); border-radius: var(--app-default-radius-md); box-shadow: var(--chrome-panel-shadow); display: flex; flex-direction: column; overflow: hidden; transform: translateX(calc(100% + var(--feedback-panel-margin))); visibility: hidden; transition: transform var(--chrome-slide) ease-in-out, visibility 0s linear var(--chrome-slide); } /* used: chrome */
.uma-chrome-wishlist-panel-open { transform: translateX(0); visibility: visible; transition: transform var(--chrome-slide) ease-in-out, visibility 0s; } /* used: chrome */
@media (max-width: 600px) {
  .uma-chrome-wishlist-panel { top: 0; right: 0; bottom: 0; left: 0; width: 100%; border-radius: 0; transform: translateX(100%); } /* used: chrome */
  .uma-chrome-wishlist-panel-open { transform: translateX(0); } /* used: chrome */
}
.uma-chrome-wishlist-panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--app-default-top-bottom-margin-md) var(--app-default-top-bottom-margin-md) 0; background: var(--chrome-wishlist-header-bg); } /* used: chrome */
.uma-chrome-wishlist-panel-title { font-size: var(--heading-size-sm); font-weight: var(--font-weight-semi-bold); color: var(--chrome-wishlist-title); margin: 0; } /* used: chrome */
.uma-chrome-wishlist-panel-body { flex: 1; overflow-y: auto; padding: var(--app-default-top-bottom-margin-md); } /* used: chrome */
.uma-chrome-wishlist-empty-msg { color: var(--chrome-wishlist-empty); font-size: var(--body-text-sm); text-align: center; padding: var(--app-default-top-bottom-margin-xl) 0; } /* used: chrome */
.uma-chrome-wishlist-close { color: var(--chrome-wishlist-close); } /* used: chrome */

/* ===== WISHLIST DRAWER ===== */
:root { /* used: chrome */
  --wishlist-drawer-width: 700px;
  --wishlist-drawer-width-lg: 800px;
  --wishlist-tile-image-lg: 200px;
  --wishlist-tile-image-sm: 180px;
  --wishlist-tile-image-xs: 140px;
  --wishlist-tile-image-xxs: 120px;
  --wishlist-bin-size: 32px;
  --wishlist-scope-height: 44px;
  --wishlist-toggle-radius: 12px;
  --wishlist-tile-name-line-height: var(--default-line-height-x-small);
  --wishlist-brand-hit: 24px;
  --wishlist-buy-mobile-width: 80px;
  --wishlist-dropdown-max: min(90vw, 480px);
  --wishlist-dropdown-narrow: calc(100vw - 4rem);
  --wishlist-promo-emoji: 3.5rem;
  --wishlist-media-button-inset: 0.9rem;
  --wishlist-app-button-inset: calc(var(--app-default-top-bottom-margin-xxxl) - 10px);
  --wishlist-seg-option-min: calc(var(--button-size-md) * 1.4);
  --wishlist-thumb-width: 280px;
  --wishlist-thumb-width-md: 300px;
  --wand-earmark-size: 75px;
  --wand-icon-right: 11px;
  --wand-icon-top: 11px;
  --radius-app-icon: 22%;
  --carouselle-card-md: 320px;
  --carouselle-card-ratio-video: 16 / 9;
  --chrome-drawer-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --chrome-orange-wash: rgba(234, 113, 0, 0.08);
  --chrome-light-edge: rgba(var(--bright-white-rgb), 0.4);
  --chrome-play-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'><path fill='white' fill-rule='evenodd' d='M180,0A180,180,0,1,0,360,180,180,180,0,0,0,180,0ZM292,180a15.74,15.74,0,0,1-7.6,13.51L140.32,281.65a16,16,0,0,1-16.2,.3A15.86,15.86,0,0,1,116,268.13V91.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L284.4,166.49A15.74,15.74,0,0,1,292,180Z'/></svg>");
  --chrome-plus-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'><path fill='black' fill-rule='evenodd' d='M180,0A180,180,0,1,0,360,180,180,180,0,0,0,180,0ZM280,180a12,12,0,0,1-12,12H192v76a12,12,0,0,1-24,0V192H92a12,12,0,0,1,0-24h76V92a12,12,0,0,1,24,0v76h76A12,12,0,0,1,280,180Z'/></svg>");
  --chrome-search-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'><path fill='black' fill-rule='evenodd' d='M180,0A180,180,0,1,0,360,180,180,180,0,0,0,180,0ZM284.49,267.51,237,220a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM96,164a68,68,0,1,1,68,68A68.07,68.07,0,0,1,96,164Z'/></svg>");

  --wishlist-white: var(--bright-white);
  --wishlist-white-rgb: var(--bright-white-rgb);
  --wishlist-media-white: var(--bright-white);
  --wishlist-media-white-rgb: var(--bright-white-rgb);
  --wishlist-drawer-bg: var(--bright-white);
  --wishlist-drawer-text: var(--navy);
  --wishlist-footer-bg: var(--bright-white);
  --wishlist-footer-border: var(--dark-white);
  --wishlist-tile-bg: var(--new-white);
  --wishlist-tile-hover-bg: var(--light-white);
  --wishlist-name: var(--navy);
  --wishlist-name-hover: var(--orange);
  --wishlist-muted: var(--light-charcoal);
  --wishlist-muted-strong: var(--light-charcoal);
  --wishlist-price: var(--navy);
  --wishlist-bin: var(--light-charcoal);
  --wishlist-chip-text: var(--navy);
  --wishlist-chip-border: var(--navy);
  --wishlist-chip-hover-bg: var(--hover-overlay-dark);
  --wishlist-chip-hover-text: var(--navy-dark);
  --wishlist-chip-hover-border: var(--navy-dark);
  --wishlist-cta-text: var(--navy);
  --wishlist-cta-border: var(--navy);
  --wishlist-promo-bg: var(--mid-white);
  --wishlist-promo-text: inherit;
  --wishlist-scope-text: var(--navy);
  --wishlist-scope-active-bg: var(--navy);
  --wishlist-scope-active-text: var(--bright-white);
  --wishlist-scope-border: var(--stroke-hairline) solid var(--navy);
  --wishlist-scope-bg: transparent;
  --wishlist-seg-bg: var(--new-white);
  --wishlist-seg-border: var(--stroke-hairline) solid var(--dark-white);
  --wishlist-seg-text: var(--navy);
  --wishlist-seg-active-bg: var(--navy);
  --wishlist-seg-active-text: var(--bright-white);
  --wishlist-book-title: var(--mid-charcoal);
  --wishlist-card-title: var(--navy);
  --wishlist-fav-hover-opacity: var(--opacity-moderate);
  --wishlist-close-text: var(--navy);
  --wishlist-close-icon: var(--navy);
}
:root[data-theme="dark"] { /* used: chrome */
  --wishlist-white: var(--mid-white);
  --wishlist-white-rgb: 242, 237, 234;
  --wishlist-media-white: var(--pure-white);
  --wishlist-media-white-rgb: var(--white-rgb);
  --wishlist-drawer-bg: var(--navy-40);
  --wishlist-drawer-text: var(--wishlist-white);
  --wishlist-footer-bg: var(--navy-40);
  --wishlist-footer-border: rgba(var(--wishlist-white-rgb), var(--opacity-low));
  --wishlist-tile-bg: var(--navy);
  --wishlist-tile-hover-bg: var(--navy);
  --wishlist-name: var(--wishlist-white);
  --wishlist-name-hover: var(--wishlist-white);
  --wishlist-muted: rgba(var(--wishlist-white-rgb), var(--opacity-high));
  --wishlist-muted-strong: var(--wishlist-white);
  --wishlist-price: var(--wishlist-white);
  --wishlist-bin: var(--wishlist-white);
  --wishlist-chip-text: var(--wishlist-white);
  --wishlist-chip-border: rgba(var(--wishlist-white-rgb), var(--opacity-moderate));
  --wishlist-chip-hover-bg: transparent;
  --wishlist-chip-hover-text: var(--wishlist-white);
  --wishlist-chip-hover-border: rgba(var(--wishlist-white-rgb), var(--opacity-moderate));
  --wishlist-cta-text: var(--wishlist-white);
  --wishlist-cta-border: rgba(var(--wishlist-white-rgb), var(--opacity-moderate));
  --wishlist-promo-bg: var(--navy);
  --wishlist-promo-text: var(--wishlist-white);
  --wishlist-scope-text: var(--wishlist-white);
  --wishlist-scope-active-bg: var(--wishlist-white);
  --wishlist-scope-active-text: var(--navy);
  --wishlist-scope-border: none;
  --wishlist-scope-bg: var(--navy);
  --wishlist-seg-bg: var(--navy);
  --wishlist-seg-border: none;
  --wishlist-seg-text: var(--wishlist-white);
  --wishlist-seg-active-bg: var(--wishlist-white);
  --wishlist-seg-active-text: var(--navy);
  --wishlist-book-title: var(--wishlist-white);
  --wishlist-card-title: var(--wishlist-white);
  --wishlist-fav-hover-opacity: var(--opacity-visible);
  --wishlist-close-text: var(--wishlist-white);
  --wishlist-close-icon: var(--wishlist-white);
}
.uma-wishlist-drawer-backdrop { display: none; position: fixed; inset: 0; background: var(--chrome-backdrop); z-index: var(--z-chrome-sidebar-icons); } /* used: chrome */
.uma-wishlist-drawer-backdrop-open { display: block; } /* used: chrome */
.uma-wishlist-drawer { --bright-white: var(--wishlist-white); --bright-white-rgb: var(--wishlist-white-rgb); position: fixed; top: 0; right: 0; bottom: 0; width: var(--wishlist-drawer-width); min-width: var(--wishlist-drawer-width); max-width: var(--wishlist-drawer-width); z-index: var(--z-chrome-drawer); background: var(--wishlist-drawer-bg); color: var(--wishlist-drawer-text); display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; visibility: hidden; transform: translateX(100%); transition: transform var(--chrome-slide) ease-in-out, visibility 0s linear var(--chrome-slide); font-family: var(--chrome-drawer-font); } /* used: chrome */
.uma-wishlist-drawer-open { transform: translateX(0); visibility: visible; transition: transform var(--chrome-slide) ease-in-out, visibility 0s; } /* used: chrome */
@media (max-width: 699px) {
  .uma-wishlist-drawer { width: 100vw; min-width: 0; max-width: 100vw; } /* used: chrome */
}
@media (min-width: 800px) {
  .uma-wishlist-drawer { width: var(--wishlist-drawer-width-lg); min-width: var(--wishlist-drawer-width-lg); max-width: var(--wishlist-drawer-width-lg); } /* used: chrome */
}
.uma-wishlist-drawer-header { flex-shrink: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--app-default-top-bottom-margin-lg) var(--gap-lg); } /* used: chrome */
.uma-wishlist-scope-toggle { display: inline-flex; margin: 0 auto; border: var(--wishlist-scope-border); border-radius: var(--wishlist-toggle-radius); overflow: hidden; background: var(--wishlist-scope-bg); } /* used: chrome */
.uma-wishlist-scope-btn { display: flex; align-items: center; justify-content: center; height: var(--wishlist-scope-height); min-height: var(--wishlist-scope-height); max-height: var(--wishlist-scope-height); padding: 0 var(--gap-lg); margin: 0; background: transparent; color: var(--wishlist-scope-text); border: none; border-radius: 0; font-family: inherit; font-size: var(--body-text-sm); font-weight: var(--font-weight-medium); line-height: var(--default-line-height-single); cursor: pointer; transition: background var(--chrome-reduced) ease, color var(--chrome-reduced) ease; white-space: nowrap; box-sizing: border-box; -webkit-appearance: none; appearance: none; } /* used: chrome */
.uma-wishlist-scope-btn:hover { background: var(--hover-overlay-dark); } /* used: chrome */
.uma-wishlist-scope-btn-active, .uma-wishlist-scope-btn-active:hover { background: var(--wishlist-scope-active-bg); color: var(--wishlist-scope-active-text); } /* used: chrome */
.scope-label-full { display: inline; } /* used: chrome */
.scope-label-short { display: none; } /* used: chrome */
@media (max-width: 599px) {
  .uma-wishlist-drawer-header { padding: 0; margin: 0; } /* used: chrome */
  .uma-wishlist-scope-toggle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; margin: 0; border: none; border-radius: 0; } /* used: chrome */
  .uma-wishlist-scope-btn { flex: 1; } /* used: chrome */
  .uma-wishlist-scope-btn-favourites { padding-right: calc(var(--button-size-md) + var(--gap-md)); } /* used: chrome */
  .scope-label-full { display: none; } /* used: chrome */
  .scope-label-short { display: inline; } /* used: chrome */
}
.uma-wishlist-drawer-tabs { flex-shrink: 0; display: flex; justify-content: center; padding: 0 var(--default-left-right-mob-body-padding) var(--gap-md); } /* used: chrome */
.uma-wishlist-drawer-tabs-hidden { display: none; } /* used: chrome */
.uma-wishlist-pill-wrapper { max-width: 100%; width: auto; height: auto; overflow-x: visible; z-index: var(--chrome-pill-z); display: flex; } /* used: chrome */
.uma-wishlist-pill-bar { justify-content: safe center; } /* used: chrome */
@media (max-width: 599px) {
  .uma-wishlist-drawer-tabs { padding: 0; margin-top: 0; } /* used: chrome */
  .uma-wishlist-pill-wrapper { flex: 1 1 auto; width: 100%; max-width: none; padding: 0; margin: 0; border-radius: 0; } /* used: chrome */
  .uma-wishlist-pill-bar { overflow-y: hidden; width: 100%; border-radius: 0; } /* used: chrome */
  .uma-wishlist-pill-bar::-webkit-scrollbar { display: none; } /* used: chrome */
}
.wishlist-tab-short { display: none; } /* used: chrome */
@media (max-width: 899px) {
  .wishlist-tab-short { display: inline; } /* used: chrome */
  .wishlist-tab-full { display: none; } /* used: chrome */
}
.uma-wishlist-close { display: none; position: fixed; top: var(--gap-regular); right: var(--gap-regular); background: transparent; border: none; border-radius: 0; cursor: pointer; width: auto; height: var(--button-size-sm); align-items: center; justify-content: center; color: var(--wishlist-close-text); font-family: inherit; font-size: var(--gap-lg); line-height: var(--default-line-height-single); padding: 0; z-index: var(--z-chrome-close); flex-shrink: 0; } /* used: chrome */
.uma-wishlist-close-showing { display: inline-flex; } /* used: chrome */
.uma-wishlist-close-icon { color: var(--wishlist-close-icon); font-size: var(--heading-size-xl); margin-left: var(--gap-xs); } /* used: chrome */
@media (hover: none) {
  .uma-wishlist-close::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: var(--chrome-hit-area-touch); min-height: var(--chrome-hit-area-touch); } /* used: chrome */
}
@media (max-width: 599px) {
  .uma-wishlist-close { top: calc((var(--wishlist-scope-height) - var(--button-size-md)) / 2); right: var(--gap-sm); } /* used: chrome */
  .uma-wishlist-close-on-favourites { color: var(--wishlist-white); --wishlist-close-icon: var(--wishlist-white); } /* used: chrome */
}
.uma-wishlist-drawer-body { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; padding: var(--gap-lg) 0 0; } /* used: chrome */
@media (min-width: 900px) {
  .uma-wishlist-drawer-body { padding-right: 0; } /* used: chrome */
}
.uma-wishlist-panel { display: none; min-width: 0; width: 100%; box-sizing: border-box; padding-bottom: var(--app-default-top-bottom-margin-xxl); } /* used: chrome */
.uma-wishlist-panel-active { display: block; } /* used: chrome */
.uma-wishlist-panel-with-promo { padding-bottom: 0; } /* used: chrome */
.uma-wishlist-group { margin-bottom: var(--app-default-top-bottom-margin-xxxl); padding: 0 var(--default-left-right-mob-body-padding); } /* used: chrome */
.uma-wishlist-group:last-child { margin-bottom: 0; } /* used: chrome */
.uma-wishlist-group-heading { text-align: left; margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-lg); line-height: var(--default-line-height-x-small); font-size: var(--heading-size-sm); color: inherit; } /* used: chrome */
.uma-wishlist-empty { text-align: center; color: var(--wishlist-muted-strong); padding: var(--gap-lg) 0; margin: 0; font-size: var(--body-text-sm); line-height: var(--default-line-height-large); } /* used: chrome */
.uma-wishlist-empty-cta { display: block; margin: var(--app-default-top-bottom-margin-md) auto 0; height: var(--button-size-md); padding: 0 var(--btn-padding-x); border: var(--stroke-hairline) solid var(--wishlist-cta-border); border-radius: var(--radius-pill); background: transparent; color: var(--wishlist-cta-text); font-family: inherit; font-size: var(--body-text-sm); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-single); cursor: pointer; flex-shrink: 0; transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base); } /* used: chrome */
.uma-wishlist-empty-cta:hover { background: var(--wishlist-chip-hover-bg); border-color: var(--wishlist-chip-hover-border); color: var(--wishlist-chip-hover-text); } /* used: chrome */
.uma-wishlist-empty-cta[hidden] { display: none; } /* used: chrome */
.uma-wishlist-promo { background: var(--wishlist-promo-bg); color: var(--wishlist-promo-text); padding: var(--app-default-top-bottom-margin-lg) var(--default-left-right-mob-body-padding); margin-bottom: var(--app-default-top-bottom-margin-xxxl); text-align: left; } /* used: chrome */
.uma-wishlist-promo-last { margin-bottom: 0; } /* used: chrome */
.uma-wishlist-promo-emoji { font-size: var(--wishlist-promo-emoji); line-height: var(--default-line-height-single); margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: chrome */
.uma-wishlist-promo-heading { font-size: var(--heading-size-sm); color: var(--wishlist-promo-text); } /* used: chrome */
.uma-wishlist-promo-text { font-size: var(--body-text-sm); line-height: var(--default-line-height-large); margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-sm); color: var(--wishlist-promo-text); } /* used: chrome */
.uma-wishlist-drawer-footer { flex: 0 0 auto; z-index: var(--z-chrome-layer-3); padding: var(--gap-lg) var(--default-left-right-mob-body-padding); border-top: var(--stroke-hairline) solid var(--wishlist-footer-border); background: var(--wishlist-footer-bg); color: var(--wishlist-drawer-text); } /* used: chrome */
.uma-wishlist-drawer-footer-hidden { display: none; } /* used: chrome */
.uma-wishlist-totals { display: flex; flex-direction: column; gap: var(--gap-xs); margin-bottom: var(--gap-md); } /* used: chrome */
.uma-wishlist-total-row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--body-text-sm); color: var(--wishlist-price); } /* used: chrome */
.uma-wishlist-total-row-gross { font-weight: var(--font-weight-medium); } /* used: chrome */
.uma-wishlist-total-value { font-variant-numeric: tabular-nums; } /* used: chrome */

/* the tiles */
.uma-wishlist-tile { position: relative; display: flex; background: var(--wishlist-tile-bg); border-radius: var(--app-default-radius-lg); margin-bottom: var(--gap-md); min-height: var(--wishlist-tile-image-lg); transition: background var(--transition-fast) ease; } /* used: chrome */
.uma-wishlist-tile:hover { background: var(--wishlist-tile-hover-bg); --wishlist-bin-opacity: var(--opacity-visible); } /* used: chrome */
.uma-wishlist-tile:last-child { margin-bottom: 0; } /* used: chrome */
.uma-wishlist-tile:has(.uma-wishlist-tile-bin:hover) { background: var(--tomato); --wishlist-ink: var(--wishlist-white); --wishlist-bin-visibility: hidden; --wishlist-bin-after: none; } /* used: chrome */
.uma-wishlist-tile-product { overflow: hidden; z-index: var(--z-chrome-badge); } /* used: chrome */
.uma-wishlist-tile-flipped { z-index: var(--z-chrome-layer-2); --wishlist-bin-display: none; } /* used: chrome */
.uma-wishlist-tile-image { position: relative; flex-shrink: 0; align-self: stretch; aspect-ratio: 1 / 1; min-width: var(--wishlist-tile-image-sm); max-width: var(--wishlist-tile-image-sm); background: var(--pure-white); border-top-left-radius: var(--app-default-radius-lg); border-bottom-left-radius: var(--app-default-radius-lg); overflow: hidden; } /* used: chrome */
.uma-wishlist-tile-picture { width: 100%; height: 100%; object-fit: contain; display: block; } /* used: chrome */
.uma-wishlist-tile-type { position: absolute; top: var(--gap-regular); left: var(--gap-regular); color: var(--wishlist-white); font-size: var(--button-icon-lg); z-index: var(--z-chrome-layer-2); } /* used: chrome */
.uma-wishlist-tile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: var(--app-default-top-bottom-margin-xl) var(--default-left-right-mob-body-padding); } /* used: chrome */
.card-front { display: flex; flex-direction: column; flex: 1; width: auto; height: auto; border-radius: var(--app-default-radius-lg); overflow: visible; transition: opacity var(--transition-base) ease; } /* used: chrome */
.card-front-flipped { opacity: 0; pointer-events: none; } /* used: chrome */
.uma-wishlist-flip-hidden { opacity: 0; pointer-events: none; } /* used: chrome */
.card-back-savings { position: absolute; top: 0; right: 0; bottom: 0; left: var(--wishlist-tile-image-lg); display: none; flex-direction: column; justify-content: space-between; border-radius: 0 var(--app-default-radius-lg) var(--app-default-radius-lg) 0; background: var(--dark-teal); color: var(--wishlist-white); padding: var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-xxxxl) var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-sm); opacity: 0; pointer-events: none; transition: opacity var(--transition-base) ease; box-sizing: border-box; z-index: var(--z-chrome-layer-10); } /* used: chrome */
.card-back-savings-active { display: flex; } /* used: chrome */
.card-back-savings-flipped { opacity: var(--opacity-visible); pointer-events: auto; } /* used: chrome */
.card-back-close-row { display: flex; justify-content: flex-end; flex-shrink: 0; position: absolute; top: var(--gap-regular); right: var(--gap-regular); z-index: var(--z-chrome-layer-3); margin: 0; } /* used: chrome */
.uma-wishlist-card-close { width: var(--button-size-md); height: var(--button-size-md); border-radius: var(--radius-circle); background: transparent; color: var(--wishlist-white); border: var(--stroke-hairline) solid var(--chrome-light-edge); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--button-icon-sm); flex-shrink: 0; line-height: var(--default-line-height-single); padding: 0; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base); } /* used: chrome */
.uma-wishlist-card-close:hover { background: rgba(var(--white-rgb), var(--opacity-faint)); color: var(--wishlist-white); border-color: var(--wishlist-white); } /* used: chrome */
.card-back-body { flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 0; overflow: visible; } /* used: chrome */
.card-back-text { font-size: var(--body-text-xs); line-height: var(--default-line-height-small); color: var(--wishlist-white); margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: chrome */
.card-back-actions { display: flex; flex-direction: column; gap: var(--gap-sm); flex-shrink: 0; align-items: flex-start; margin-top: auto; } /* used: chrome */
.uma-wishlist-card-back-button { display: inline-flex; align-items: center; justify-content: center; height: var(--button-size-md); min-height: 0; padding: 0 var(--gap-md); border: none; border-radius: var(--radius-pill); font-family: inherit; font-size: var(--body-text-sm); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-single); cursor: pointer; flex-shrink: 0; width: auto; white-space: nowrap; background: transparent; color: var(--navy); transition: background var(--transition-base), color var(--transition-base); } /* used: chrome */
.uma-wishlist-card-back-button:hover { background: var(--bright-white); color: var(--navy-dark); } /* used: chrome */
.uma-wishlist-card-back-icon { font-size: var(--button-icon-sm); } /* used: chrome */
.card-back-btn-code { min-width: max-content; } /* used: chrome */
.card-back-btn-code-copied, .card-back-btn-code-copied:hover { background: var(--bright-green); color: var(--wishlist-white); border-color: var(--bright-green); transition: none; } /* used: chrome */
@media (max-width: 799px) {
  .card-back-savings { left: var(--wishlist-tile-image-sm); } /* used: chrome */
}
@media (max-width: 599px) {
  .uma-wishlist-card-back-button { height: var(--button-size-sm); font-size: var(--body-text-xs); } /* used: chrome */
}
@media (max-width: 699px) {
  .card-back-savings { left: var(--wishlist-tile-image-xs); } /* used: chrome */
}
@media (max-width: 499px) {
  .card-back-savings { left: var(--wishlist-tile-image-xxs); } /* used: chrome */
}
.uma-wishlist-tile-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap-md); margin-bottom: var(--app-default-top-bottom-margin-xxs); line-height: var(--default-line-height-single); } /* used: chrome */
.uma-wishlist-tile-row-before-subtitle { margin-bottom: var(--app-default-top-bottom-margin-xxxxs); } /* used: chrome */
.card-brand { display: flex; justify-content: space-between; align-items: baseline; color: var(--wishlist-ink, var(--wishlist-muted)); font-size: var(--body-text-xs); margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-xxs); line-height: var(--default-line-height-single); transition: color var(--transition-fast) ease; } /* used: chrome */
.uma-wishlist-tile-brand { line-height: var(--default-line-height-small); --app-default-top-bottom-margin-sm: var(--app-default-top-bottom-margin-xxs); --app-default-top-bottom-margin-xl: var(--app-default-top-bottom-margin-xxs); } /* used: chrome */
.brand-link { position: relative; color: inherit; text-decoration: none; cursor: pointer; transition: color var(--transition-fast) ease; background: transparent; border: none; padding: 0; margin: 0; font: inherit; letter-spacing: inherit; text-align: inherit; -webkit-appearance: none; appearance: none; } /* used: chrome */
.brand-link:hover { color: var(--orange); text-decoration: none; } /* used: chrome */
.brand-link::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--wishlist-brand-hit); transform: translateY(-50%); } /* used: chrome */
.uma-wishlist-tile-name { font-size: var(--heading-size-sm); font-weight: var(--font-weight-light); color: var(--wishlist-ink, var(--wishlist-name)); line-height: var(--wishlist-tile-name-line-height); margin-top: 0; margin-bottom: 0; padding-right: 0; cursor: pointer; transition: color var(--transition-fast) ease; } /* used: chrome */
.uma-wishlist-tile-name:hover { color: var(--wishlist-ink, var(--wishlist-name-hover)); } /* used: chrome */
.uma-wishlist-tile-buy-btn { display: contents; color: var(--orange); font-family: inherit; line-height: var(--default-line-height-single); pointer-events: none; cursor: pointer; } /* used: chrome */
.uma-wishlist-buy-inner { display: flex; align-items: first baseline; gap: var(--gap-sm); line-height: var(--default-line-height-single); height: min-content; align-self: flex-start; padding: 0; margin: 0; } /* used: chrome */
.card-price-discounted { font-size: var(--heading-size-sm); font-weight: var(--font-weight-light); line-height: var(--default-line-height-single); color: var(--wishlist-ink, var(--wishlist-price)); margin: 0; white-space: nowrap; transition: color var(--transition-fast) ease; } /* used: chrome */
.card-price-original { font-size: var(--body-text-sm); color: var(--wishlist-ink, var(--wishlist-muted)); text-decoration: line-through; font-weight: var(--font-weight-normal); line-height: var(--default-line-height-single); margin: 0; transition: color var(--transition-fast) ease; } /* used: chrome */
.uma-wishlist-tile-subtitle { text-wrap: pretty; line-height: var(--default-line-height-small); margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-lg); font-size: var(--body-text-sm); font-weight: var(--font-weight-normal); color: var(--wishlist-ink, var(--wishlist-muted)); padding-right: var(--app-default-top-bottom-margin-xxl); } /* used: chrome */
.card-good-for { display: flex; flex-wrap: wrap; gap: var(--gap-xxs); margin-bottom: 0; } /* used: chrome */
.uma-chip-discount, .uma-chip-vat { display: inline-flex; align-items: center; justify-content: center; height: var(--button-size-xs); padding: 0 var(--gap-md); border: var(--stroke-hairline) solid var(--wishlist-ink, var(--wishlist-chip-border)); border-radius: var(--radius-pill); background: transparent; color: var(--wishlist-ink, var(--wishlist-chip-text)); font-family: inherit; font-size: var(--body-text-xs); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-single); cursor: pointer; flex-shrink: 0; transition: border-color var(--transition-fast) ease, color var(--transition-fast) ease, background var(--transition-fast) ease; } /* used: chrome */
.uma-chip-discount:hover, .uma-chip-vat:hover { background: var(--wishlist-chip-hover-bg); border-color: var(--wishlist-ink, var(--wishlist-chip-hover-border)); color: var(--wishlist-ink, var(--wishlist-chip-hover-text)); } /* used: chrome */
.uma-wishlist-tile-buy-row-mobile { display: flex; justify-content: flex-end; margin-top: var(--app-default-top-bottom-margin-xxs); visibility: var(--wishlist-bin-visibility, inherit); } /* used: chrome */
.uma-wishlist-tile-buy-mobile { height: var(--button-size-md); width: var(--wishlist-buy-mobile-width); padding: 0; border: none; border-radius: var(--radius-pill); background: var(--orange); color: var(--wishlist-white); font-family: inherit; font-size: var(--body-text-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: background var(--transition-fast) ease; visibility: var(--wishlist-bin-visibility, inherit); } /* used: chrome */
.uma-wishlist-tile-buy-mobile:hover { background: var(--orange-dark); } /* used: chrome */
.uma-wishlist-tile-bin { position: absolute; top: var(--gap-regular); right: var(--gap-regular); z-index: var(--z-chrome-layer-2); width: var(--wishlist-bin-size); height: var(--wishlist-bin-size); padding: 0; background: transparent; border: none; color: var(--wishlist-bin); cursor: pointer; display: var(--wishlist-bin-display, inline-flex); align-items: center; justify-content: center; font-size: var(--button-icon-sm); opacity: var(--wishlist-bin-opacity, 0); transition: opacity var(--transition-fast) ease, color var(--transition-fast) ease; } /* used: chrome */
.uma-wishlist-tile-bin:hover { color: var(--wishlist-white); } /* used: chrome */
@media (hover: none) {
  .uma-wishlist-tile-bin { opacity: var(--opacity-visible); } /* used: chrome */
}
@media (max-width: 599px) {
  .uma-wishlist-tile-bin { opacity: var(--opacity-visible); } /* used: chrome */
}

/* the split buy button on book tiles */
.uma-wishlist-split { position: relative; display: flex; width: max-content; min-width: min-content; max-width: 100%; height: var(--button-size-md); border: var(--stroke-hairline) solid transparent; background: var(--orange); color: var(--wishlist-white); border-radius: var(--radius-pill); overflow: visible; box-sizing: border-box; font-size: var(--body-text-lg); visibility: var(--wishlist-bin-visibility, inherit); } /* used: chrome */
.uma-wishlist-split-main { flex: 1; min-width: 0; height: 100%; padding: 0 var(--btn-padding-x); background: transparent; border: none; color: var(--wishlist-white); cursor: pointer; font-family: inherit; font-size: var(--body-text-lg); border-radius: var(--radius-pill) 0 0 var(--radius-pill); display: flex; align-items: center; justify-content: center; line-height: var(--default-line-height-single); } /* used: chrome */
.uma-wishlist-split-main:hover { background: var(--chrome-orange-wash); } /* used: chrome */
.uma-wishlist-split-label { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 0; overflow: hidden; font-size: inherit; text-align: left; } /* used: chrome */
.uma-wishlist-split-text { color: var(--text-on-colour); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: inherit; text-align: left; } /* used: chrome */
.uma-wishlist-split-arrow { flex-shrink: 0; width: var(--button-size-lg); background: transparent; border: none; border-left: var(--stroke-hairline) solid currentColor; color: var(--wishlist-white); cursor: pointer; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; display: flex; align-items: center; justify-content: center; padding: 0; } /* used: chrome */
.uma-wishlist-split-arrow-icon { font-size: var(--body-text-sm); } /* used: chrome */
.drawer-buy-dropdown { position: absolute; top: calc(100% + var(--gap-xs)); left: auto; right: 0; min-width: 100%; width: max-content; max-width: var(--wishlist-dropdown-max); background: var(--wishlist-white); border: var(--stroke-hairline) solid var(--dark-white); border-radius: var(--app-default-radius-md); box-shadow: var(--chrome-dropdown-shadow); z-index: var(--z-chrome-layer-10); overflow: hidden; } /* used: chrome */
.drawer-buy-dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); width: 100%; min-height: var(--button-size-md); padding: 0 var(--btn-padding-x); border: none; background: transparent; color: var(--navy); cursor: pointer; text-align: left; transition: background var(--chrome-reduced) ease; font-size: var(--body-text-lg); white-space: nowrap; } /* used: chrome */
.drawer-buy-dropdown-item:hover { background: var(--mid-white); } /* used: chrome */
.drawer-buy-dropdown-item:not(:first-child) { border-top: var(--stroke-hairline) solid var(--dark-white); } /* used: chrome */
.drawer-buy-dropdown-item-label { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: visible; text-overflow: clip; } /* used: chrome */
.drawer-buy-dropdown-item-price { flex-shrink: 0; text-align: right; font-weight: var(--font-weight-medium); } /* used: chrome */
@media (min-width: 800px) {
  .uma-wishlist-tile-image { min-width: var(--wishlist-tile-image-lg); max-width: var(--wishlist-tile-image-lg); } /* used: chrome */
}
@media (max-width: 899px) {
  .card-brand { font-size: var(--body-text-xs); } /* used: chrome */
  .uma-wishlist-tile-subtitle { font-size: var(--body-text-xs); } /* used: chrome */
  .uma-wishlist-split { font-size: var(--body-text-sm); } /* used: chrome */
  .uma-wishlist-split-main { font-size: var(--body-text-sm); } /* used: chrome */
  .uma-wishlist-split-arrow { width: var(--button-size-md); } /* used: chrome */
  .drawer-buy-dropdown-item { font-size: var(--body-text-sm); } /* used: chrome */
}
@media (max-width: 699px) {
  .uma-wishlist-tile-image { min-width: var(--wishlist-tile-image-xs); max-width: var(--wishlist-tile-image-xs); } /* used: chrome */
}
@media (max-width: 599px) {
  .uma-wishlist-tile-name { font-size: var(--heading-size-xs); } /* used: chrome */
  .card-price-discounted { font-size: var(--heading-size-xs); } /* used: chrome */
  .card-price-original { font-size: var(--body-text-xs); } /* used: chrome */
  .uma-wishlist-tile-buy-row-mobile { justify-content: flex-start; } /* used: chrome */
  .uma-wishlist-tile-buy-mobile { height: var(--button-size-sm); font-size: var(--body-text-xs); } /* used: chrome */
  .uma-wishlist-split { height: var(--button-size-sm); font-size: var(--body-text-xs); } /* used: chrome */
  .uma-wishlist-split-main { font-size: var(--body-text-xs); padding: 0 var(--gap-md); } /* used: chrome */
  .uma-wishlist-split-arrow { width: var(--button-size-sm); } /* used: chrome */
  .drawer-buy-dropdown { left: 0; right: auto; } /* used: chrome */
  .drawer-buy-dropdown-item { font-size: var(--body-text-xs); min-height: var(--button-size-sm); padding: 0 var(--gap-md); } /* used: chrome */
}
@media (max-width: 549px) {
  .drawer-buy-dropdown { width: var(--wishlist-dropdown-narrow); min-width: 0; max-width: var(--wishlist-dropdown-narrow); } /* used: chrome */
}
@media (max-width: 499px) {
  .uma-wishlist-tile-image { min-width: var(--wishlist-tile-image-xxs); max-width: var(--wishlist-tile-image-xxs); } /* used: chrome */
  .uma-wishlist-tile-info { display: flex; flex-direction: column; align-items: flex-start; } /* used: chrome */
  .uma-wishlist-tile-row { display: contents; } /* used: chrome */
  .uma-wishlist-buy-inner { align-self: flex-start; flex-direction: row; align-items: baseline; margin-top: var(--app-default-top-bottom-margin-xs); margin-bottom: var(--app-default-top-bottom-margin-xs); } /* used: chrome */
  .uma-wishlist-buy-inner-late { order: 5; } /* used: chrome */
  .uma-wishlist-tile-buy-row-late { order: 6; } /* used: chrome */
  .card-price-discounted { order: 1; } /* used: chrome */
  .card-price-original { order: 2; } /* used: chrome */
  .uma-wishlist-buy-inner-ebook::after { content: "(ebook)"; } /* used: chrome */
  .uma-wishlist-buy-inner-audiobook::after { content: "(audiobook)"; } /* used: chrome */
  .uma-wishlist-buy-inner-ebook::after, .uma-wishlist-buy-inner-audiobook::after { display: var(--wishlist-bin-after, inline); font-size: var(--body-text-sm); color: var(--light-charcoal); margin-left: 0; align-self: baseline; order: 99; } /* used: chrome */
  .uma-wishlist-split-text { font-size: 0; } /* used: chrome */
  .uma-wishlist-split-text::before { content: attr(data-short); font-size: var(--body-text-xs); } /* used: chrome */
}

/* favourites: voices, pods, books, apps, episodes */
.uma-wishlist-fav-grid { display: grid; gap: var(--gap-regular); } /* used: chrome */
.uma-wishlist-fav-grid-voices, .uma-wishlist-fav-grid-pods { grid-template-columns: repeat(3, 1fr); } /* used: chrome */
.uma-wishlist-fav-grid-books, .uma-wishlist-fav-grid-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* used: chrome */
.uma-wishlist-fav-grid-episodes { display: flex; flex-direction: column; gap: var(--gap-md); } /* used: chrome */
@media (max-width: 600px) {
  .uma-wishlist-fav-grid-voices, .uma-wishlist-fav-grid-pods { grid-template-columns: repeat(2, 1fr); } /* used: chrome */
  .uma-wishlist-fav-grid-books, .uma-wishlist-fav-grid-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* used: chrome */
}
.uma-wishlist-fav-card { position: relative; cursor: pointer; text-align: left; } /* used: chrome */
.uma-wishlist-fav-card:hover { --wishlist-fav-image-opacity: var(--wishlist-fav-hover-opacity); --wishlist-fav-reveal: var(--opacity-visible); } /* used: chrome */
.uma-wishlist-fav-card:focus-within { --wishlist-fav-reveal: var(--opacity-visible); } /* used: chrome */
.uma-wishlist-fav-card-media { --bright-white: var(--wishlist-media-white); --bright-white-rgb: var(--wishlist-media-white-rgb); position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--app-default-radius-lg); } /* used: chrome */
.uma-wishlist-fav-card-media-books { aspect-ratio: var(--carouselle-card-ratio-book); } /* used: chrome */
.uma-wishlist-fav-card-media-apps { border-radius: var(--radius-app-icon); } /* used: chrome */
@media (hover: hover) {
  .uma-wishlist-fav-card-media:hover { --wishlist-media-reveal: var(--opacity-visible); } /* used: chrome */
}
.uma-wishlist-fav-card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--wishlist-fav-image-opacity, 1); transition: opacity var(--transition-fast) ease; } /* used: chrome */
.uma-wishlist-fav-card-name { font-size: var(--body-text-xs); font-weight: var(--font-weight-normal); margin-top: var(--gap-sm); margin-bottom: var(--app-default-top-bottom-margin-sm); line-height: var(--default-line-height-x-small); color: var(--wishlist-card-title); } /* used: chrome */
.uma-wishlist-fav-empty { color: inherit; font-size: var(--body-text-sm); line-height: var(--default-line-height-large); text-align: center; margin: 0 0 var(--app-default-top-bottom-margin-sm); padding: var(--uma-xxl) 0; } /* used: chrome */
.uma-wishlist-fav-episodes-header { display: flex; align-items: center; justify-content: flex-end; margin-bottom: var(--gap-regular); } /* used: chrome */
.uma-library-card-body { height: auto; display: flex; flex-direction: column; padding: var(--app-default-top-bottom-margin-lg) 0 0; text-align: left; } /* used: chrome */
.uma-library-card-title { font-size: var(--body-text-xxl); font-weight: var(--font-weight-light); line-height: var(--default-line-height-x-small); color: var(--wishlist-book-title); margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-xxs); display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-sm); padding-right: 0; } /* used: chrome */
.uma-wishlist-episode-title { color: var(--wishlist-card-title); } /* used: chrome */
.uma-wishlist-card-subtitle { text-wrap: pretty; line-height: var(--default-line-height-small); margin-top: 0; margin-bottom: 0; font-size: var(--body-text-sm); font-weight: var(--font-weight-normal); color: var(--wishlist-muted-strong); padding-right: 0; } /* used: chrome */
.uma-wishlist-episode-subtitle { font-size: var(--body-text-sm); margin-bottom: var(--app-default-top-bottom-margin-lg); color: var(--wishlist-muted-strong); } /* used: chrome */
.uma-library-card-meta-right { flex-shrink: 0; font-size: var(--body-text-xs); color: var(--wishlist-muted-strong); white-space: nowrap; margin-left: var(--gap-sm); position: relative; font-weight: var(--font-weight-normal); } /* used: chrome */
@media (max-width: 899px) {
  .uma-wishlist-episode-subtitle { font-size: var(--body-text-xs); } /* used: chrome */
}
.drawer-brand-link { color: inherit; text-decoration: none; cursor: pointer; transition: color var(--transition-fast) ease; } /* used: chrome */
.drawer-brand-link:hover { color: var(--orange); text-decoration: none; } /* used: chrome */

/* the round buttons on a favourite's picture */
.card-circular-plus-btn-on-dark, .card-circular-search-btn-on-dark { position: absolute; bottom: var(--wishlist-media-button-inset); right: var(--wishlist-media-button-inset); width: var(--button-size-md); height: var(--button-size-md); border-radius: 0; background: var(--bright-white); border: none; cursor: pointer; z-index: var(--z-chrome-layer-3); padding: 0; opacity: var(--wishlist-media-reveal, 0); transition: opacity var(--transition-base) ease, filter var(--transition-base) ease; display: flex; align-items: center; justify-content: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* used: chrome */
.card-circular-plus-btn-on-dark { -webkit-mask-image: var(--chrome-plus-mask); mask-image: var(--chrome-plus-mask); } /* used: chrome */
.card-circular-search-btn-on-dark { -webkit-mask-image: var(--chrome-search-mask); mask-image: var(--chrome-search-mask); } /* used: chrome */
.card-circular-plus-btn-on-dark:focus-visible, .card-circular-search-btn-on-dark:focus-visible { opacity: var(--opacity-visible); } /* used: chrome */
.uma-wishlist-media-button-app { bottom: var(--wishlist-app-button-inset); right: var(--wishlist-app-button-inset); } /* used: chrome */
.uma-wishlist-media-button-icon { display: none; } /* used: chrome */
@media (hover: none) {
  .card-circular-plus-btn-on-dark, .card-circular-search-btn-on-dark { opacity: var(--opacity-visible); } /* used: chrome */
}

/* the heart and the follow bell in the corner */
.uma-wishlist-earmark { position: absolute; top: 0; right: 0; width: var(--wand-earmark-size); height: var(--wand-earmark-size); padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; z-index: var(--z-chrome-layer-4); overflow: hidden; border-top-right-radius: var(--app-default-radius-lg); opacity: 0; transition: opacity var(--transition-base) ease; } /* used: chrome */
.uma-wishlist-earmark-visible, .uma-wishlist-earmark-added { opacity: var(--opacity-visible); } /* used: chrome */
.uma-wishlist-earmark-icon { position: absolute; top: var(--wand-icon-top); right: var(--wand-icon-right); color: var(--bright-white); font-size: var(--button-icon-xl); line-height: var(--default-line-height-single); z-index: var(--z-chrome-layer-5); transition: opacity var(--transition-fast) ease; } /* used: chrome */
@media (hover: none) {
  .uma-wishlist-earmark { overflow: visible; } /* used: chrome */
  .uma-wishlist-earmark-added { display: block; overflow: hidden; } /* used: chrome */
  .uma-wishlist-earmark::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: var(--chrome-hit-area-touch); min-height: var(--chrome-hit-area-touch); } /* used: chrome */
}
.drawer-show-episode-earmark { position: absolute; top: 0; right: 0; z-index: var(--z-chrome-layer-5); opacity: var(--opacity-visible); pointer-events: auto; } /* used: chrome */
.uma-follow-earmark { position: absolute; top: var(--app-default-top-bottom-margin-sm); left: var(--app-default-top-bottom-margin-sm); padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; z-index: var(--z-chrome-layer-4); width: var(--switch-mini-width); height: var(--switch-mini-height); opacity: var(--wishlist-fav-reveal, 0); transition: opacity var(--transition-base) ease; } /* used: chrome */
.uma-follow-earmark-added { opacity: var(--opacity-visible); --follow-track: var(--yellow); --follow-blur: none; --follow-thumb-left: calc(100% - var(--switch-mini-thumb) - var(--switch-thumb-inset)); --follow-icon-left: var(--switch-thumb-inset); --follow-icon-right: auto; } /* used: chrome */
.uma-follow-earmark-track { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--follow-track, rgba(var(--black-rgb), var(--opacity-low))); backdrop-filter: var(--follow-blur, blur(var(--blur-md))); -webkit-backdrop-filter: var(--follow-blur, blur(var(--blur-md))); transition: background var(--transition-base) ease; overflow: hidden; display: block; } /* used: chrome */
.uma-follow-earmark-thumb { position: absolute; top: var(--switch-thumb-inset); left: var(--follow-thumb-left, var(--switch-thumb-inset)); width: var(--switch-mini-thumb); height: var(--switch-mini-thumb); border-radius: var(--radius-circle); background: var(--bright-white); box-shadow: var(--chrome-thumb-shadow); transition: left var(--chrome-quick) ease, background var(--chrome-quick) ease; z-index: var(--z-chrome-layer-2); } /* used: chrome */
.uma-follow-earmark-icon { position: absolute; top: 50%; transform: translateY(-50%); left: var(--follow-icon-left, auto); right: var(--follow-icon-right, var(--switch-thumb-inset)); color: var(--bright-white); font-size: var(--button-icon-sm); z-index: var(--z-chrome-layer-3); transition: left var(--chrome-quick) ease, right var(--chrome-quick) ease, color var(--chrome-quick) ease; pointer-events: none; display: flex; align-items: center; justify-content: center; width: var(--switch-mini-thumb); height: var(--switch-mini-thumb); } /* used: chrome */

/* episodes */
.drawer-show-episode { background: var(--platform-spotify); border-radius: var(--app-default-radius-md); overflow: hidden; height: auto; min-height: 0; position: relative; } /* used: chrome */
.drawer-show-episode-video { background: transparent; display: flex; flex-direction: row; gap: var(--gap-lg); padding: var(--gap-sm) 0; align-items: flex-start; border-radius: 0; width: 100%; max-width: none; } /* used: chrome */
.drawer-show-episode-player { position: relative; background: var(--platform-spotify); height: auto; min-height: 0; width: 100%; line-height: 0; } /* used: chrome */
.drawer-show-episode-frame { display: block; width: 100%; border: none; height: var(--platform-spotify-height-compact); } /* used: chrome */
.drawer-show-episode-video-thumb { position: relative; flex: 0 0 auto; width: var(--wishlist-thumb-width); aspect-ratio: var(--carouselle-card-ratio-video); border-radius: var(--app-default-radius-md); overflow: hidden; background: var(--dark-white); } /* used: chrome */
.drawer-show-episode-video-thumb:hover, .drawer-show-episode-video-thumb:focus-within { --wishlist-play-reveal: var(--opacity-visible); --wishlist-play-events: auto; } /* used: chrome */
.drawer-show-episode-thumb-image { width: 100%; height: 100%; object-fit: cover; display: block; } /* used: chrome */
.drawer-show-episode-video-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-xs); padding: 0; height: auto; text-align: left; } /* used: chrome */
.card-circular-play-btn-on-dark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: var(--z-chrome-layer-3); width: var(--button-size-xxl); height: var(--button-size-xxl); border-radius: var(--radius-circle); background-color: transparent; background-image: var(--chrome-play-icon); background-size: 100% 100%; background-repeat: no-repeat; border: none; cursor: pointer; opacity: var(--wishlist-play-reveal, 0); transition: opacity var(--transition-fast), filter var(--transition-base) ease; pointer-events: var(--wishlist-play-events, none); padding: 0; backdrop-filter: blur(var(--blur-md)) brightness(var(--opacity-moderate)); -webkit-backdrop-filter: blur(var(--blur-md)) brightness(var(--opacity-moderate)); } /* used: chrome */
@media (hover: none) {
  .card-circular-play-btn-on-dark { opacity: var(--opacity-visible); pointer-events: auto; } /* used: chrome */
}
@media (min-width: 900px) {
  .drawer-show-episode-video-thumb { width: var(--wishlist-thumb-width-md); } /* used: chrome */
}
@media (min-width: 1280px) {
  .drawer-show-episode-video-thumb { width: var(--carouselle-card-md); } /* used: chrome */
}
@media (max-width: 599px) {
  .drawer-show-episode-video { flex-direction: column; } /* used: chrome */
  .drawer-show-episode-video-thumb { width: var(--carouselle-card-md); } /* used: chrome */
}
@media (max-width: 449px) {
  .drawer-show-episode-video-thumb { width: var(--wishlist-thumb-width-md); } /* used: chrome */
}

/* the audio and video switch */
.uma-segmented-toggle { display: inline-flex; background: var(--wishlist-seg-bg); border: var(--wishlist-seg-border); border-radius: var(--app-default-radius-md); overflow: hidden; align-items: stretch; height: var(--button-size-md); box-sizing: border-box; } /* used: chrome */
.uma-segmented-toggle-option { display: inline-flex; align-items: center; justify-content: center; min-width: var(--wishlist-seg-option-min); height: 100%; padding: 0 var(--gap-md); border: 0; background: transparent; color: var(--wishlist-seg-text); border-radius: 0; cursor: pointer; font-size: inherit; transition: background var(--transition-fast) ease, color var(--transition-fast) ease; } /* used: chrome */
.uma-segmented-toggle-option-active { background: var(--wishlist-seg-active-bg); color: var(--wishlist-seg-active-text); } /* used: chrome */
.uma-segmented-toggle-icon { font-size: var(--button-icon-lg); line-height: var(--default-line-height-single); color: inherit; } /* used: chrome */

/* ===== THE WEBSITE CHROME'S OWN PARTS =====
   The logged-out site: Log in and Try Uma in the top bar and in the menu, the
   bar over a dark section, and the demonstration hero under it. */
.uma-chrome-header-auth { display: flex; align-items: center; gap: var(--gap-sm); } /* used: chrome */
/* Height through the token btn-sm reads, so UMA.css's btn-sm stays. */
/* The buttons fade between their two looks with UMA.css's own button
   transitions; her separate transition line would have overridden them. */
.uma-chrome-header-auth-btn { --button-size-sm: var(--button-size-xs); --btn-padding-x: var(--chrome-auth-pad-x); white-space: nowrap; } /* used: chrome */
/* The menu's Log in has a firmer white edge than btn-secondary-white-on-dark. */
.uma-chrome-flyout-login-btn { --stroke-hairline: var(--stroke-thin); } /* used: chrome */
/* Over a dark section: the script puts these on the bar and on each mark. */
.uma-chrome-top-bar-dark { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } /* used: chrome */
.uma-chrome-logo-svg-dark { fill: var(--bright-white); opacity: var(--chrome-logo-dark-opacity); } /* used: chrome */
.uma-chrome-beta-tag-dark { background-color: var(--bright-white); color: var(--navy); } /* used: chrome */
.uma-chrome-beta-text-dark { display: none; } /* used: chrome */
/* The demonstration hero */
.uma-hero { width: 100%; min-height: var(--uma-hero-min-height); display: flex; align-items: center; justify-content: center; background: var(--navy); padding-top: var(--app-default-top-bottom-margin-xxxxl); padding-bottom: var(--app-default-top-bottom-margin-xxxxxl); position: relative; } /* used: chrome */
.uma-hero::before { content: ""; position: absolute; inset: 0; background: var(--navy); } /* used: chrome */
.uma-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--uma-hero-video-focus); z-index: 0; filter: var(--uma-hero-video-filter); pointer-events: none; } /* used: chrome */
/* The toggle keeps btn-secondary-white-on-dark but has no edge, as now. */
.uma-hero-video-toggle { --stroke-hairline: 0; position: absolute; bottom: var(--app-default-top-bottom-margin-xl); right: var(--app-default-top-bottom-margin-xl); z-index: var(--z-chrome-layer-2); } /* used: chrome */
@media (prefers-reduced-motion: reduce) {
  .uma-hero-video { display: none; } /* used: chrome */
}
.uma-hero-content { position: relative; z-index: var(--z-chrome-layer-1); } /* used: chrome */
.uma-hero-title { color: rgba(var(--bright-white-rgb), var(--opacity-near-full)); font-size: var(--uma-hero-title-size); line-height: var(--default-line-height-x-small); font-weight: var(--font-weight-normal); max-width: var(--uma-hero-title-measure); margin-left: auto; margin-right: auto; } /* used: chrome */
@media (max-width: 900px) {
  .uma-hero-title { font-size: var(--uma-hero-title-size-md); } /* used: chrome */
}
@media (max-width: 600px) {
  .uma-hero-title { font-size: var(--heading-size-xxl); } /* used: chrome */
}
.uma-hero-text { color: rgba(var(--bright-white-rgb), var(--opacity-very-high)); max-width: var(--max-content-width-golden-section-large); margin-left: auto; margin-right: auto; } /* used: chrome */
.uma-marketplace-hero-intro { font-size: var(--body-text-xl); } /* used: chrome */
@media (max-width: 600px) {
  .uma-hero-cta { --carouselle-card-xs: 0; width: 100%; } /* used: chrome */
}

/* ===== PROFILE MODAL ===== */
.uma-chrome-profile-overlay { display: none; position: fixed; inset: 0; z-index: var(--z-chrome-profile); background: var(--t-page-bg); } /* used: chrome */
.uma-chrome-profile-overlay-open { display: block; } /* used: chrome */
.uma-chrome-profile-frame { width: 100%; height: 100%; border: 0; display: block; } /* used: chrome */
.uma-chrome-profile-open { overflow: hidden; } /* used: chrome */

/* ===== STATES THE CHROME PUTS ON ITS OWN PARTS ===== */
.uma-chrome-side-bar-strip:hover { background-color: var(--navy-dark); } /* used: chrome */
@media (max-width: 600px) {
  .uma-chrome-side-bar-strip { display: none; } /* used: chrome */
}
.uma-chrome-scroll-locked, .uma-upgrade-modal-open { overflow: hidden; } /* used: chrome */
.uma-chrome-main-header-over-hero { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } /* used: chrome */
.uma-chrome-main-header-hidden { transform: translateY(-100%); } /* used: chrome */
.uma-chrome-part-off, .uma-chrome-part-full-screen, .uma-chrome-part-flyout-open, .uma-chrome-part-upgrade-open { display: none; } /* used: chrome */
.uma-chrome-content-no-topbar { margin-top: 0; } /* used: chrome */
.uma-chrome-content-no-sidebar { margin-left: 0; width: 100%; } /* used: chrome */
.is-hidden { display: none; } /* used: chrome */


/* ==========================================================================
   ONBOARDING, 30 September 2026. Page: /uma-onboarding
   (uma-onboarding-css-rewrite-30sep2026-vN.html). The page is bare, with no
   chrome around it. <html> carries page-onboarding.

   How it is built
   - Light values sit in :root:where(.page-onboarding); dark values in
     :root[data-theme="dark"]:where(.page-onboarding). The sleep screen keeps
     its night look in every mode, so the same dark values are repeated on
     .onb-night-screen, which the page script puts on <body> while it shows.
   - The page script puts one onb-screen-type-* class on <body> for the screen
     that is showing, and onb-warm-screen / onb-night-screen /
     onb-light-bg-screen where they apply. Those classes only set custom
     properties, so no rule below reaches into a parent.
   - A chosen answer is the shared is-selected class on the element itself.
     Its letter circle and tick read custom properties that the chosen
     element sets, so the circle needs no nested selector.
   ========================================================================== */

:root:where(.page-onboarding) { /* used: onboarding */
  /* Page values that differ from the UMA.css :root */
  --button-icon-xxxl: 4rem;
  --field-radius: 10px;
  --pill-marker-gap: var(--gap-md);
  --answer-gap: var(--gap-md);
  --focus-outline-width: 2.5px;
  --app-default-para-text: 1rem;
  --app-section-para-text: 1.1rem;
  --button-transition-duration: 0.3s;
  --default-row-gap: 1rem;
  --button-radius: var(--default-radius);
  --text-on-colour: var(--bright-white);

  /* Page sizes */
  --cycle-slider-track-height: 6px;
  --cycle-slider-track-radius: 3px;
  --cycle-slider-thumb-width: 24px;
  --cycle-slider-thumb-height: 32px;
  --icon-size-inline: var(--button-icon-md);
  --chrome-control-bar-margin-bottom: var(--app-default-top-bottom-margin-lg);
  --chrome-control-bar-margin-bottom-mask: var(--chrome-control-bar-margin-top);
  --progress-and-controls-height: calc(var(--chrome-control-bar-margin-top) + var(--chrome-progress-bar-height) + var(--app-default-top-bottom-margin-sm) + var(--button-size-md) + var(--chrome-control-bar-margin-bottom) + var(--chrome-control-bar-margin-bottom-mask));
  --continue-area-button-height-mobile: var(--button-size-lg);
  --continue-area-button-height-desktop: var(--button-size-xl);
  --continue-area-gap-above-button: var(--app-default-top-bottom-margin-xxxxl);
  --continue-area-pad-below-mobile: var(--app-default-top-bottom-margin-lg);
  --continue-area-pad-below-desktop: var(--app-default-top-bottom-margin-xxxxl);
  --continue-area-height-mobile: calc(var(--continue-area-gap-above-button) + var(--continue-area-button-height-mobile) + var(--continue-area-pad-below-mobile));
  --continue-area-height-desktop: calc(var(--continue-area-gap-above-button) + var(--continue-area-button-height-desktop) + var(--continue-area-pad-below-desktop));
  --app-default-heading-bottom-margin-xl: 2rem;
  --app-default-heading-bottom-margin-xxxl: 3rem;
  --onb-code-digit-size: 2rem;
  --navy-rgb: 35, 47, 75;
  --mid-charcoal-rgb: 51, 50, 50;
  --dark-teal-rgb: 0, 101, 112;
  --overlay-medium: rgba(var(--black-rgb), 0.18);
  --overlay-strong: rgba(var(--black-rgb), 0.28);
  --onb-uma-logo-sizing: 100px;
  --list-row-gap: 1rem;
  --list-column-gap: 1rem;
  --onb-answer-gap: 0.625rem;
  --onb-square-size: var(--identity-square-size);
  --tile-gap: var(--gap-regular);
  --onb-form-gap: 4rem;
  --motion-fade: 0.45s;
  --motion-fade-ease: ease;
  --picker-dot-size: 2.1875rem;
  --membership-card-ratio: 1.586 / 1;
  --membership-card-colour: var(--navy);
  --membership-card-padding: 6cqi;
  --membership-card-logo-size: 14cqi;
  --membership-card-label-size: 3.6cqi;
  --membership-card-value-size: 4.8cqi;
  --membership-card-gap: 4cqi;
  --membership-card-stack-gap: 2.5cqi;
  --membership-card-field-gap: 1cqi;
  --wallet-button-height: 3.5rem;
  --navy-40: #151C2D;
  --navy-60-rgb: 14, 19, 30;
  --moon-cream-rgb: 253, 251, 231;
  --onb-answer-glass-rgb: 249, 249, 249;
  --sun-core: #ffd479;
  --sun-glow: #f4b860;

  /* New values the page's own rules need (listed in the notes) */
  --onb-font-stack: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --onb-mono-stack: ui-monospace, monospace;
  --onb-viewport-height: 100vh;
  --onb-viewport-height-dynamic: 100dvh;
  --onb-viewport-width-dynamic: 100dvw;
  --onb-screen-fade: 0.4s;
  --onb-slide-offset: 24px;
  --onb-slide-duration: 0.35s;
  --onb-word-duration: 0.3s;
  --onb-word-blur: 1px;
  --onb-stagger-duration: 0.3s;
  --onb-stagger-step: 0.05s;
  --onb-pop-duration: 0.26s;
  --onb-pop-scale: 0.93;
  --onb-press-scale: 0.98;
  --onb-press-scale-small: 0.96;
  --onb-press-scale-textarea: 0.99;
  --onb-press-duration: 0.12s;
  --onb-press-duration-fast: 0.08s;
  --onb-fade-fast: 0.15s;
  --onb-fade-medium: 0.25s;
  --onb-why-duration: 0.3s;
  --onb-overlay-fade: 0.9s;
  --onb-roller-duration: 0.4s;
  --onb-roller-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --onb-drop-ease: cubic-bezier(.34, 1.56, .64, 1);
  --onb-twinkle-duration: 3s;
  --onb-fly-a-duration: 26s;
  --onb-fly-b-duration: 32s;
  --onb-wave-duration: 1.5s;
  --onb-wave-delay: 0.5s;
  --onb-hover-grow: 1.1;
  --onb-press-shrink: 0.94;
  --onb-centre-scale: 1.12;
  --onb-z-overlay: 9999;
  --onb-z-head: 30;
  --onb-z-typeahead: 10;
  --onb-z-typeahead-country: 30;
  --onb-z-progress-track: 1000;
  --onb-z-progress-fill: 1001;
  --onb-progress-duration: 0.4s;
  --onb-z-raised: 2;
  --onb-z-voice-icon: 3;
  --onb-circle-gap: 0.75rem;
  --onb-voice-icon-inset: 10px;
  --onb-z-lifted: 1;
  --onb-sun-size: 130px;
  --onb-sun-top: 180px;
  --onb-scene-inset: 24px;
  --onb-moon-size: 120px;
  --onb-moon-top: 168px;
  --onb-moon-glow: 20px;
  --onb-star-size: 3px;
  --onb-birds-top: 215px;
  --onb-birds-height: 140px;
  --onb-bird-width: 32px;
  --onb-bird-height: 16px;
  --onb-bird-2-width: 23px;
  --onb-bird-3-width: 27px;
  --onb-bird-4-width: 19px;
  --onb-bird-start: -12%;
  --onb-bird-2-delay: 4s;
  --onb-bird-3-delay: 9s;
  --onb-bird-4-delay: 16s;
  --onb-tumbler-height: 260px;
  --onb-tumbler-col-width: 100px;
  --onb-tumbler-frame-width: 220px;
  --onb-meter-sub-height: 20px;
  --onb-bigval-size: 11.3cqi;
  --onb-centre-subtitle-size: 4.44cqi;
  --onb-centre-subtitle-gap: 0.8cqi;
  --onb-centre-top: 47.3%;
  --onb-roller-line: 1.2em;
  --onb-iris-size: 84px;
  --onb-swatch-height: 64px;
  --onb-bottle-ratio: 84 / 264;
  --onb-ring-ratio: 124 / 148;
  --onb-vessel-default-bottle: 280px;
  --onb-vessel-default-large: 450px;
  --onb-vessel-default-cup: 250px;
  --onb-legend-icon-offset: -0.15em;
  --onb-legend-egg-shadow: 0 1px 1.5px rgba(var(--black-rgb), var(--opacity-soft));
  --onb-thumb-shadow: 0 2px 8px rgba(var(--black-rgb), 0.25);
  --onb-letter-spacing-tight: -.02em;
  --onb-pill-added-padding-right: 3.5rem;
  --onb-pill-delete-inset: 0.625rem;
  --onb-typeahead-offset: 0.25rem;
  --onb-typeahead-offset-country: 0.35rem;
  --onb-picker-list-rows: 8;
  --onb-picker-list-rows-mobile: 6;
  --onb-country-input-padding-right: 2.5rem;
  --onb-text-input-padding-right: 3rem;
  --onb-textarea-min-height: 110px;
  --onb-textarea-padding: 0.875rem 1.25rem;
  --onb-helper-inset: 0.25rem;
  --onb-counter-gap: 0.25rem;
  --onb-counter-line: 1.2em;
  --onb-noshare-gap: 0.625rem;
  --onb-faster-key-size: 2rem;
  --onb-faster-key-padding: 0.5rem;
  --onb-faster-em-padding: 1px 6px;
  --onb-faster-em-radius: 4px;
  --onb-start-lock-width: 16rem;
  --onb-start-lock-ratio: 500 / 381;
  --onb-wide-button-min: 18.75rem;
  --onb-completion-width: 560px;
  --onb-digit-clip: 1ch;
  --onb-question-mobile-step: 0.2rem;
  --onb-wave-pivot: var(--wave-pivot);
  --onb-dropdown-caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1 L6 6 L11 1' stroke='%23333232' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  --onb-dropdown-caret-inset: 1rem;
  --onb-plus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cline x1='40' y1='128' x2='216' y2='128' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='128' y1='40' x2='128' y2='216' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E");
  --onb-minus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cline x1='40' y1='128' x2='216' y2='128' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E");
  --onb-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cline x1='40' y1='128' x2='216' y2='128' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpolyline points='144 56 216 128 144 200' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3C/svg%3E");
  --onb-tumbler-fade: linear-gradient(transparent, var(--pure-white) 28%, var(--pure-white) 72%, transparent);

  /* Skin, hair and eye swatches */
  --skin-very-fair: #f6e3d3;
  --skin-fair: #ecc8a8;
  --skin-medium: #d8a878;
  --skin-olive: #b67e50;
  --skin-brown: #8a5634;
  --skin-deep-brown: #56341f;
  --skin-black: #2e1d12;
  --hair-light-blonde: #e8d4a0;
  --hair-dark-blonde: #c9a866;
  --hair-red: #a8341a;
  --hair-light-brown: #8a6240;
  --hair-dark-brown: #4d3422;
  --hair-black: #211a17;
  --iris-blue: radial-gradient(circle at 50% 50%, #1a1a1a 16%, #3f7fb0 17%, #7fb8d8 60%, #dfeef5 75%);
  --iris-grey: radial-gradient(circle at 50% 50%, #1a1a1a 16%, #7d8a93 17%, #aab4ba 60%, #e6eaec 75%);
  --iris-green: radial-gradient(circle at 50% 50%, #1a1a1a 16%, #4f7a44 17%, #7ba35c 60%, #d6e3c2 75%);
  --iris-hazel: radial-gradient(circle at 50% 50%, #141414 17%, #7a4a1e 18%, #a06a2c 33%, #9c8a3a 50%, #6f7d3e 66%, #566b34 80%);
  --iris-light-brown: radial-gradient(circle at 50% 50%, #1a1a1a 16%, #7a5326 17%, #a87a45 60%, #d8c2a0 78%);
  --iris-dark-brown: radial-gradient(circle at 50% 50%, #0a0a0a 18%, #3d2614 19%, #5e3d20 60%, #8a6440 80%);

  /* Light look */
  --t-page-bg: var(--mid-white);
  --t-page-bg-deep: var(--dark-white);
  --t-page-text: var(--mid-charcoal);
  --t-text-secondary: var(--light-charcoal);
  --t-text-muted: var(--lightest-charcoal);
  --t-text-empty: rgba(var(--mid-charcoal-rgb), var(--opacity-medium-low));
  --t-heading: var(--mid-charcoal);
  --t-surface: var(--pure-white);
  --t-border: var(--dark-white);
  --t-border-strong: var(--light-charcoal);
  --t-input-text: var(--mid-charcoal);
  --t-card-selected-bg: var(--pure-white);
  --t-card-selected-text: var(--navy);
  --bottle-empty: var(--dark-white);

  --onb-option-bg: transparent;
  --onb-option-border: var(--navy);
  --onb-option-text: var(--navy);
  --onb-option-hover-bg: var(--hover-overlay-light);
  --onb-option-hover-border: var(--navy);
  --onb-option-selected-bg: var(--navy);
  --onb-option-selected-border: var(--navy);
  --onb-option-selected-text: var(--bright-white);
  --onb-circle-border: var(--navy);
  --onb-circle-text: var(--navy);
  --onb-circle-selected-text: var(--navy);
  --onb-tick-selected: var(--navy);
  --onb-added-circle-bg: var(--bright-white);
  --onb-added-circle-border: var(--bright-white);
  --onb-added-circle-text: var(--navy);
  --onb-reset-bg: var(--hover-overlay-light);
  --onb-reset-hover-bg: var(--hover-overlay-light-strong);
  --onb-describe-hover-bg: var(--hover-overlay-light);
  --onb-reset-border: var(--navy);
  --onb-reset-text: var(--navy);
  --onb-reset-circle-border: var(--navy);
  --onb-reset-circle-text: var(--navy);
  --onb-reset-selected-bg: var(--navy);
  --onb-reset-selected-border: var(--navy);
  --onb-reset-selected-text: var(--bright-white);
  --onb-describe-text: var(--mid-charcoal);
  --onb-describe-border: var(--navy);
  --onb-describe-circle-border: var(--navy);
  --onb-describe-circle-text: var(--navy);
  --onb-why-colour: var(--mid-charcoal);
  --onb-typeahead-border: var(--navy);
  --onb-typeahead-text: var(--navy);
  --onb-typeahead-active-bg: var(--navy);
  --onb-typeahead-active-border: var(--navy);
  --onb-typeahead-active-text: var(--bright-white);
  --onb-role-chip-border: var(--navy);
  --onb-role-chip-text: var(--navy);
  --onb-role-chip-hover-bg: var(--hover-overlay-dark);
  --onb-role-chip-hover-border: var(--navy-dark);
  --onb-role-chip-hover-text: var(--navy-dark);
  --onb-role-chip-selected-bg: var(--navy);
  --onb-role-chip-selected-border: var(--navy);
  --onb-role-chip-selected-text: var(--bright-white);
  --onb-search-placeholder: var(--t-text-empty);
  --onb-swatch-dark-text: var(--bright-white);
  --onb-swatch-dark-marker: var(--bright-white);
  --onb-swatch-dark-selected-tick: var(--navy);
  --onb-swatch-light-border: none;
  --onb-noshare-swatch-bg: var(--hover-overlay-light);
  --onb-noshare-swatch-text: var(--navy);
  --onb-noshare-swatch-marker: var(--navy);
  --onb-noshare-swatch-tick: var(--bright-white);
  --onb-iris-pill-bg: transparent;
  --onb-iris-pill-border: var(--light-charcoal);
  --onb-iris-selected-bg: var(--navy);
  --onb-iris-selected-border: var(--navy);
  --onb-iris-selected-text: var(--bright-white);
  --onb-iris-noshare-bg: var(--hover-overlay-light);
  --onb-iris-noshare-border: var(--navy);
  --onb-iris-noshare-text: var(--navy);
  --onb-legend-bg: rgba(var(--black-rgb), 0.03);
  --onb-legend-text: var(--light-charcoal);
  --onb-slider-track: rgba(var(--dark-teal-rgb), var(--opacity-low));
  --onb-slider-thumb: var(--dark-teal);
  --onb-slider-label: var(--mid-charcoal);
  --onb-slider-value: var(--mid-charcoal);
  --onb-tooltip-bg: var(--dark-white);
  --onb-tooltip-title: var(--mid-charcoal);
  --onb-tooltip-body: var(--light-charcoal);
  --onb-ring-subtitle: var(--mid-charcoal);
  --onb-cup-colour: var(--dark-teal);
  --onb-community-count: var(--mid-charcoal);
  --onb-swipe-dot: var(--navy);
  --onb-key-bg: var(--mid-white);
  --onb-key-border: var(--dark-white);
  --onb-key-text: var(--t-input-text);
  --onb-voice-track: var(--dark-white);
  --onb-voice-icon: var(--navy);
  --onb-progress-track: var(--dark-white);
  --onb-progress-fill: var(--yellow);
  --onb-nav-label: var(--light-charcoal);
  --onb-nav-button-text: var(--mid-charcoal);
  --onb-nav-button-border: var(--light-charcoal);
  --onb-nav-button-hover-bg: var(--hover-overlay-light);
  --onb-nav-button-hover-text: var(--mid-charcoal);
  --onb-nav-button-hover-border: var(--mid-charcoal);
  --onb-answer-bg: transparent;
  --onb-answer-border: var(--navy);
  --onb-answer-text: var(--navy);
  --onb-answer-hover-bg: var(--hover-overlay-light);
  --onb-answer-hover-border: var(--navy);
  --onb-answer-selected-bg: var(--navy);
  --onb-answer-selected-border: var(--navy);
  --onb-answer-selected-text: var(--bright-white);
  --onb-answer-noshare-bg: var(--hover-overlay-light);
  --onb-answer-noshare-hover-bg: var(--hover-overlay-light-strong);
  --onb-answer-noshare-border: var(--navy);
  --onb-answer-noshare-text: var(--navy);
  --onb-answer-none-bg: var(--hover-overlay-light);
  --onb-answer-none-hover-bg: var(--hover-overlay-light-strong);
  --onb-answer-none-border: var(--navy);
  --onb-answer-none-hover-border: var(--navy);
  --onb-answer-none-text: var(--navy);
  --onb-marker-border: var(--navy);
  --onb-marker-text: var(--navy);
  --onb-marker-selected-bg: var(--t-page-bg);
  --onb-marker-selected-text: var(--navy);
  --onb-noshare-swatch-hover-bg: var(--hover-overlay-light);
  --onb-iris-noshare-hover-bg: var(--hover-overlay-light);
}

:root[data-theme="dark"]:where(.page-onboarding), /* used: onboarding */
.onb-night-screen { /* used: onboarding */
  --bright-white: var(--mid-white);
  --bright-white-rgb: 242, 237, 234;
  --text-on-colour: var(--bright-white);
  --t-page-bg: var(--navy-60);
  --t-page-bg-deep: var(--navy-dark);
  --t-page-text: var(--bright-white);
  --t-text-secondary: rgba(var(--bright-white-rgb), var(--opacity-high));
  --t-text-muted: rgba(var(--bright-white-rgb), 0.55);
  --t-text-empty: rgba(var(--bright-white-rgb), var(--opacity-medium-low));
  --t-heading: var(--bright-white);
  --t-surface: rgba(var(--bright-white-rgb), var(--opacity-very-low));
  --t-border: rgba(var(--bright-white-rgb), var(--opacity-low));
  --t-border-strong: rgba(var(--bright-white-rgb), var(--opacity-moderate));
  --t-input-text: var(--mid-charcoal);
  --t-card-selected-bg: var(--bright-white);
  --t-card-selected-text: var(--navy);
  --bottle-empty: rgba(var(--bright-white-rgb), var(--opacity-low));

  --onb-option-bg: var(--t-surface);
  --onb-option-border: var(--t-border);
  --onb-option-text: var(--t-page-text);
  --onb-option-hover-bg: transparent;
  --onb-option-hover-border: var(--t-text-muted);
  --onb-option-selected-bg: var(--t-card-selected-bg);
  --onb-option-selected-border: var(--t-page-text);
  --onb-option-selected-text: var(--t-card-selected-text);
  --onb-circle-border: var(--t-page-text);
  --onb-circle-text: var(--t-page-text);
  --onb-circle-selected-text: var(--t-page-text);
  --onb-tick-selected: var(--t-page-text);
  --onb-added-circle-bg: var(--t-page-bg);
  --onb-added-circle-border: var(--t-page-bg);
  --onb-added-circle-text: var(--t-page-text);
  --onb-reset-bg: var(--overlay-medium);
  --onb-reset-hover-bg: var(--overlay-strong);
  --onb-describe-hover-bg: var(--overlay-strong);
  --onb-reset-border: transparent;
  --onb-reset-text: var(--t-page-text);
  --onb-reset-circle-border: var(--t-text-muted);
  --onb-reset-circle-text: var(--t-page-text);
  --onb-reset-selected-bg: var(--t-card-selected-bg);
  --onb-reset-selected-border: var(--t-page-text);
  --onb-reset-selected-text: var(--t-card-selected-text);
  --onb-describe-text: var(--t-page-text);
  --onb-describe-border: transparent;
  --onb-describe-circle-border: var(--t-border-strong);
  --onb-describe-circle-text: var(--t-page-text);
  --onb-why-colour: var(--t-text-secondary);
  --onb-typeahead-border: var(--t-page-text);
  --onb-typeahead-text: var(--t-page-text);
  --onb-typeahead-active-bg: var(--t-page-text);
  --onb-typeahead-active-border: var(--t-page-text);
  --onb-typeahead-active-text: var(--t-page-bg);
  --onb-role-chip-border: var(--t-page-text);
  --onb-role-chip-text: var(--t-page-text);
  --onb-role-chip-hover-bg: transparent;
  --onb-role-chip-hover-border: var(--t-text-muted);
  --onb-role-chip-hover-text: var(--t-page-text);
  --onb-role-chip-selected-bg: var(--t-card-selected-bg);
  --onb-role-chip-selected-border: var(--t-card-selected-bg);
  --onb-role-chip-selected-text: var(--t-card-selected-text);
  --onb-search-placeholder: rgba(var(--mid-charcoal-rgb), 0.55);
  --onb-swatch-dark-text: var(--t-page-text);
  --onb-swatch-dark-marker: var(--t-page-text);
  --onb-swatch-dark-selected-tick: var(--t-card-selected-text);
  --onb-swatch-light-border: var(--stroke-hairline) solid var(--dark-charcoal);
  --onb-noshare-swatch-bg: var(--overlay-medium);
  --onb-noshare-swatch-text: var(--t-page-text);
  --onb-noshare-swatch-marker: var(--t-page-text);
  --onb-noshare-swatch-tick: var(--bright-white);
  --onb-iris-pill-bg: var(--t-surface);
  --onb-iris-pill-border: var(--t-border);
  --onb-iris-selected-bg: var(--t-card-selected-bg);
  --onb-iris-selected-border: var(--t-page-text);
  --onb-iris-selected-text: var(--t-card-selected-text);
  --onb-iris-noshare-bg: var(--overlay-medium);
  --onb-iris-noshare-border: transparent;
  --onb-iris-noshare-text: var(--t-page-text);
  --onb-legend-bg: var(--t-surface);
  --onb-legend-text: var(--t-text-secondary);
  --onb-slider-track: var(--t-border);
  --onb-slider-thumb: var(--t-card-selected-bg);
  --onb-slider-label: var(--t-text-secondary);
  --onb-slider-value: var(--t-page-text);
  --onb-tooltip-bg: var(--t-border);
  --onb-tooltip-title: var(--t-page-text);
  --onb-tooltip-body: var(--t-text-secondary);
  --onb-ring-subtitle: var(--t-text-secondary);
  --onb-cup-colour: var(--bright-white);
  --onb-community-count: var(--t-text-secondary);
  --onb-swipe-dot: var(--t-page-text);
  --onb-key-bg: rgba(var(--bright-white-rgb), var(--opacity-low));
  --onb-key-border: transparent;
  --onb-key-text: var(--t-page-text);
  --onb-voice-track: rgba(var(--white-rgb), var(--opacity-low));
  --onb-voice-icon: var(--bright-white);
  --onb-progress-track: rgba(var(--white-rgb), var(--opacity-low));
  --onb-progress-fill: rgba(var(--white-rgb), var(--opacity-very-high));
  --onb-nav-label: var(--t-text-secondary);
  --onb-nav-button-text: var(--bright-white);
  --onb-nav-button-border: var(--bright-white);
  --onb-nav-button-hover-bg: var(--t-border);
  --onb-nav-button-hover-text: var(--bright-white);
  --onb-nav-button-hover-border: var(--bright-white);
  --onb-answer-bg: rgba(var(--onb-answer-glass-rgb), var(--opacity-very-low));
  --onb-answer-border: rgba(var(--onb-answer-glass-rgb), var(--opacity-low));
  --onb-tile-bg: rgba(var(--bright-white-rgb), var(--opacity-very-low));
  --onb-tile-border: rgba(var(--bright-white-rgb), var(--opacity-low));
  --onb-answer-text: var(--bright-white);
  --onb-answer-hover-bg: transparent;
  --onb-answer-hover-border: rgba(var(--onb-answer-glass-rgb), var(--opacity-moderate));
  --onb-answer-selected-bg: var(--bright-white);
  --onb-answer-selected-border: var(--bright-white);
  --onb-answer-selected-text: var(--navy);
  --onb-answer-noshare-bg: var(--overlay-medium);
  --onb-answer-noshare-hover-bg: var(--overlay-strong);
  --onb-answer-noshare-border: transparent;
  --onb-answer-noshare-text: var(--bright-white);
  --onb-answer-none-bg: var(--onb-answer-bg);
  --onb-answer-none-hover-bg: var(--onb-answer-hover-bg);
  --onb-answer-none-border: var(--onb-answer-border);
  --onb-answer-none-hover-border: var(--onb-answer-hover-border);
  --onb-answer-none-text: var(--onb-answer-text);
  --onb-marker-border: var(--bright-white);
  --onb-marker-text: var(--bright-white);
  --onb-marker-selected-bg: var(--navy);
  --onb-marker-selected-text: var(--bright-white);
  --onb-noshare-swatch-hover-bg: var(--overlay-strong);
  --onb-iris-noshare-hover-bg: var(--overlay-strong);
}

/* Screens that keep their own look in every mode. The page script sets one of
   these on <body>. */
.onb-screen-type-onboarding-start, /* used: onboarding */
.onb-screen-type-intro, /* used: onboarding */
.onb-screen-type-completion { /* used: onboarding */
  --bright-white: var(--mid-white);
  --bright-white-rgb: 242, 237, 234;
  --text-on-colour: var(--bright-white);
  --onb-head-bg: var(--navy);
  --onb-nav-button-text: var(--bright-white);
  --onb-nav-button-border: rgba(var(--bright-white-rgb), var(--opacity-very-high));
  --onb-continue-disabled-bg: rgba(var(--bright-white-rgb), var(--opacity-low));
  --onb-continue-disabled-text: rgba(var(--bright-white-rgb), var(--opacity-moderate));
  --onb-screen-text: var(--bright-white);
}
.onb-screen-type-onboarding-start { /* used: onboarding */
  --onb-body-bg: var(--navy-60);
  --onb-progress-visibility: hidden;
}
.onb-screen-type-intro { /* used: onboarding */
  --onb-body-bg: var(--navy);
  --onb-progress-track: rgba(var(--white-rgb), var(--opacity-low));
  --onb-progress-fill: rgba(var(--white-rgb), var(--opacity-very-high));
}
.onb-screen-type-completion { /* used: onboarding */
  --onb-body-bg: var(--navy);
  --onb-progress-visibility: hidden;
  --onb-continue-disabled-bg: var(--dark-white);
  --onb-continue-disabled-text: var(--light-charcoal);
  --onb-joined-text: rgba(var(--bright-white-rgb), var(--opacity-very-high));
  --onb-wrapper-justify: center;
}
.onb-screen-type-faster { /* used: onboarding */
  --onb-nav-top: var(--app-default-top-bottom-margin-lg);
}
.onb-screen-type-community-name { /* used: onboarding */
  --onb-explore-align: flex-start;
}
.onb-light-bg-screen { /* used: onboarding */
  --onb-head-bg: var(--mid-white);
  --onb-nav-display: block;
  --onb-nav-width: auto;
  --onb-nav-top: 0;
  --onb-nav-align: normal;
  --onb-intro-align: center;
  --onb-noshare-margin: auto;
  --onb-logo-fill: var(--navy);
}
.onb-warm-screen { /* used: onboarding */
  --onb-body-bg: linear-gradient(180deg, var(--sunrise-amber) 0%, var(--sunrise-gold) 25%, var(--sunrise-peach) 55%, var(--sunrise-cream) 100%);
  --onb-body-text: var(--t-card-selected-text);
  --onb-head-bg: transparent;
  --onb-screen-text: var(--t-card-selected-text);
  --onb-why-colour: var(--t-card-selected-text);
  --onb-scene-bg: transparent;
  --onb-nav-button-text: var(--t-card-selected-text);
  --onb-nav-button-border: var(--t-card-selected-text);
  --onb-nav-button-hover-bg: var(--t-surface);
  --onb-nav-button-hover-text: var(--t-card-selected-text);
  --onb-nav-button-hover-border: var(--t-card-selected-text);
  --onb-progress-track: rgba(var(--black-rgb), var(--opacity-low));
  --onb-progress-fill: var(--navy);
}
.onb-night-screen { /* used: onboarding */
  --onb-body-bg: linear-gradient(180deg, var(--navy-dark), var(--navy) 70%, var(--navy));
  --onb-head-bg: transparent;
  --onb-screen-text: var(--bright-white);
  --onb-why-colour: var(--bright-white);
  --onb-scene-bg: transparent;
}

/* ---------- Page frame ---------- */
.onb-body { /* used: onboarding */
  font-family: var(--onb-font-stack);
  background: var(--onb-body-bg, var(--t-page-bg));
  color: var(--onb-body-text, var(--t-page-text));
  min-height: var(--onb-viewport-height);
  min-height: var(--onb-viewport-height-dynamic);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--onb-screen-fade) ease;
  scrollbar-width: none;
}
.onb-body::-webkit-scrollbar { display: none; } /* used: onboarding */
.page-onboarding { scrollbar-width: none; } /* used: onboarding */
.page-onboarding::-webkit-scrollbar { display: none; } /* used: onboarding */
.nonscrollable-body { /* used: onboarding */
  width: var(--onb-viewport-width-dynamic);
  height: var(--onb-viewport-height-dynamic);
  overflow-y: hidden;
}
.full-screen-wrapper-outer-wrapper { /* used: onboarding */
  width: 100%;
  height: 100%;
}
.full-screen-wrapper-inner-wrapper { /* used: onboarding */
  height: auto;
  width: 100%;
  max-width: var(--max-body-content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
  padding-top: 0;
  padding-bottom: 0;
}
@media (max-width: 600px) {
  .full-screen-wrapper-inner-wrapper { /* used: onboarding */
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
    padding-top: var(--app-default-top-bottom-margin-lg);
    padding-bottom: var(--app-default-top-bottom-margin-xl);
  }
}
.uma-onboard-screen { /* used: onboarding */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  height: var(--onb-viewport-height-dynamic);
  max-height: var(--onb-viewport-height-dynamic);
  scrollbar-width: none;
}
.uma-onboard-screen::-webkit-scrollbar { display: none; } /* used: onboarding */
@media (max-width: 600px) {
  .uma-onboard-screen { /* used: onboarding */
    height: calc(var(--onb-viewport-height-dynamic) - var(--app-default-top-bottom-margin-lg));
    max-height: calc(var(--onb-viewport-height-dynamic) - var(--app-default-top-bottom-margin-lg));
  }
}
.uma-head { /* used: onboarding */
  position: sticky;
  top: 0;
  z-index: var(--onb-z-head);
  background: var(--onb-head-bg, var(--t-page-bg));
  padding-top: var(--app-default-top-bottom-margin-xl);
  padding-bottom: var(--chrome-control-bar-margin-bottom-mask);
}
@media (max-width: 600px) {
  .uma-head { padding-top: var(--chrome-control-bar-margin-top); } /* used: onboarding */
}
.fixed-progress-bar-scrollable-body-area { /* used: onboarding */
  width: 100%;
  overflow-x: hidden;
  scrollbar-width: none;
}
.fixed-progress-bar-scrollable-body-area::-webkit-scrollbar { display: none; } /* used: onboarding */
.onb-wrapper { /* used: onboarding */
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: var(--onb-wrapper-justify, flex-start);
}
.onb-contained { /* used: onboarding */
  margin-left: auto;
  margin-right: auto;
}
.screen-host { /* used: onboarding */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
}
@media (max-width: 599px), (pointer: coarse) {
  .fixed-progress-bar-scrollable-body-area { /* used: onboarding */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
  }
  .onb-wrapper { flex: 1 0 auto; } /* used: onboarding */
  .screen-host { flex: 1 0 auto; } /* used: onboarding */
}

/* ---------- Progress bar and the bar under it ---------- */
.onb-progress-bar { /* used: onboarding */
  height: var(--chrome-progress-bar-height);
  margin-bottom: var(--app-default-top-bottom-margin-sm);
  visibility: var(--onb-progress-visibility, visible);
}
.onb-progress-track { /* used: onboarding */
  background-color: var(--onb-progress-track);
  border-radius: var(--radius-pill);
  width: 100%;
  height: 100%;
  z-index: var(--onb-z-progress-track);
  position: absolute;
  top: 0;
  left: 0;
}
.onb-progress-fill { /* used: onboarding */
  background-color: var(--onb-progress-fill);
  border-radius: var(--radius-pill);
  height: 100%;
  width: 0;
  z-index: var(--onb-z-progress-fill);
  position: absolute;
  top: 0;
  left: 0;
  transition: width var(--onb-progress-duration) ease;
}
.onb-nav-label { color: var(--onb-nav-label); } /* used: onboarding */
.onb-nav-button { /* used: onboarding */
  background: transparent;
  color: var(--onb-nav-button-text);
  border: var(--stroke-hairline) solid var(--onb-nav-button-border);
  transition: background 0.3s;
}
.onb-nav-button:hover { /* used: onboarding */
  background: var(--onb-nav-button-hover-bg);
  color: var(--onb-nav-button-hover-text);
  border-color: var(--onb-nav-button-hover-border);
}

/* ---------- The screen that is showing ---------- */
.onb-screen { /* used: onboarding */
  width: 100%;
  display: none;
}
.onb-question-block { /* used: onboarding */
  margin: 0;
  width: 100%;
  max-width: var(--max-content-width-golden-section-large);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
}
.onb-qnum { /* used: onboarding */
  margin-top: var(--app-default-top-bottom-margin-xl);
  color: var(--onb-screen-text, var(--t-page-text));
  font-size: var(--body-text-sm);
}
@media (max-width: 600px) {
  .onb-qnum { margin-top: 0; } /* used: onboarding */
}
.onb-qnum-close { margin-top: var(--app-default-top-bottom-margin-sm); } /* used: onboarding */
@media (max-width: 600px) {
  .onb-qnum-close { margin-top: 0; } /* used: onboarding */
}
.onb-question { /* used: onboarding */
  font-size: var(--heading-size-lg);
  line-height: var(--default-line-height-small);
  margin-top: 0;
  margin-bottom: var(--app-default-top-bottom-margin-md);
  color: var(--onb-screen-text, var(--t-page-text));
}
@media (max-width: 599px) {
  .onb-question { font-size: calc(var(--heading-size-lg) - var(--onb-question-mobile-step)); } /* used: onboarding */
}
/* The one focus rule here, flagged in the notes: the script moves focus to
   each new screen's heading (or <main>) so screen readers land on it. Without
   this the browser draws its own ring round that heading on every screen. */
.onb-script-focus:focus { outline: none; } /* used: onboarding */
.onb-word { /* used: onboarding */
  display: inline-block;
  opacity: 0;
  filter: var(--onb-still-filter, blur(var(--onb-word-blur)));
  animation: var(--onb-word-animation, onb-word-pop var(--onb-word-duration) ease-out forwards);
  animation-delay: var(--onb-word-delay, var(--word-delay, 0s));
}
:root[data-motion="still"]:where(.page-onboarding) { /* used: onboarding */
  --onb-word-animation: fadeIn var(--motion-fade) var(--motion-fade-ease) both;
  --onb-word-delay: 0s;
  --onb-slide-animation-name: fadeIn;
  --onb-drop-animation: fadeIn var(--motion-fade) var(--motion-fade-ease) both;
  --onb-bird-iterations: 1;
  --onb-still-filter: none;
}
@keyframes onb-word-pop { /* used: onboarding */
  from { opacity: 0; filter: blur(var(--onb-word-blur)); }
  to { opacity: 1; filter: blur(0); }
}
.btn-pop { animation: onb-btn-pop var(--onb-pop-duration) ease; } /* used: onboarding */
@keyframes onb-btn-pop { /* used: onboarding */
  0% { transform: scale(1); }
  45% { transform: scale(var(--onb-pop-scale)); }
  100% { transform: scale(1); }
}

/* "Why Uma is asking this" */
.uma-why { margin-bottom: var(--app-default-top-bottom-margin-xxl); } /* used: onboarding */
@media (max-width: 600px) {
  .uma-why { margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: onboarding */
}
.uma-why-open { /* used: onboarding */
  --onb-why-icon: var(--onb-minus-icon);
  --onb-why-max-height: var(--accordion-open-max-height);
  --onb-why-opacity: var(--opacity-visible);
  --onb-why-top: var(--app-default-top-bottom-margin-xs);
  --onb-why-visibility: visible;
  --onb-why-delay: 0s;
}
.uma-why-toggle { /* used: onboarding */
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  color: var(--onb-why-colour);
  font-size: var(--body-text-sm);
  padding: 0;
  position: relative;
}
.uma-why-toggle::after { /* used: onboarding */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--button-size-xs);
  transform: translateY(-50%);
}
.uma-why-plus { /* used: onboarding */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-icon-md);
  height: var(--button-icon-md);
  flex: none;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat var(--onb-why-icon, var(--onb-plus-icon));
  mask: center / contain no-repeat var(--onb-why-icon, var(--onb-plus-icon));
}
.uma-why-body { /* used: onboarding */
  max-height: var(--onb-why-max-height, 0);
  overflow: hidden;
  opacity: var(--onb-why-opacity, var(--opacity-hidden));
  margin-top: var(--onb-why-top, 0);
  visibility: var(--onb-why-visibility, hidden);
  font-size: var(--body-text-xs);
  line-height: var(--default-line-height-small);
  color: var(--onb-why-colour);
  transition: max-height var(--onb-why-duration) ease, margin var(--onb-why-duration) ease, opacity var(--onb-why-duration) ease, visibility 0s linear var(--onb-why-duration);
  transition-delay: var(--onb-why-delay, 0s, 0s, 0s, var(--onb-why-duration));
}
.uma-why-paragraph { margin-bottom: var(--app-default-top-bottom-margin-xs); } /* used: onboarding */
.uma-why-paragraph:last-child { margin-bottom: 0; } /* used: onboarding */

/* ---------- Continue area ---------- */
.onb-continue-area { /* used: onboarding */
  padding-bottom: var(--app-default-top-bottom-margin-lg);
  width: 100%;
  flex: 0 0 auto;
}
@media (min-width: 600px) {
  .onb-continue-area { padding-bottom: var(--app-default-top-bottom-margin-xxxxl); } /* used: onboarding */
}
@media (max-width: 599px), (pointer: coarse) {
  .onb-continue-area { display: contents; } /* used: onboarding */
}
.onb-continue-area-close { padding-bottom: var(--app-default-top-bottom-margin-lg); } /* used: onboarding */
@media (min-width: 600px) {
  .onb-continue-area-close { padding-bottom: var(--app-default-top-bottom-margin-xxs); } /* used: onboarding */
}
.onb-bottom-nav { /* used: onboarding */
  display: var(--onb-nav-display, flex);
  flex-direction: column;
  gap: var(--gap-xs);
  width: var(--onb-nav-width, 100%);
  margin-top: var(--onb-nav-top, var(--app-default-top-bottom-margin-xxxxl));
  margin-bottom: 0;
  box-sizing: border-box;
}
@media (min-width: 600px) {
  .onb-bottom-nav { align-items: var(--onb-nav-align, flex-start); } /* used: onboarding */
}
@media (max-width: 599px), (pointer: coarse) {
  .onb-bottom-nav { /* used: onboarding */
    margin-top: auto;
    padding-top: var(--gap-lg);
    padding-bottom: calc(var(--gap-lg) + env(safe-area-inset-bottom));
    align-items: var(--onb-nav-align-phone, center);
  }
}
.onb-explore-nav { --onb-nav-align-phone: var(--onb-explore-align, center); } /* used: onboarding */
.onb-completion-nav { margin-top: var(--app-default-top-bottom-margin-xl); } /* used: onboarding */
.faster-nav { /* used: onboarding */
  align-items: center;
  justify-content: center;
}
.onb-continue { /* used: onboarding */
  gap: var(--gap-xs);
  height: var(--continue-area-button-height-mobile);
}
@media (min-width: 600px) {
  .onb-continue { height: var(--continue-area-button-height-desktop); } /* used: onboarding */
}
.onb-continue:disabled { /* used: onboarding */
  background: var(--onb-continue-disabled-bg, var(--dark-white));
  color: var(--onb-continue-disabled-text, var(--light-charcoal));
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
  transition: none;
}
.onb-continue-no-transition { transition: none; } /* used: onboarding */
.onb-continue-icon { /* used: onboarding */
  color: inherit;
  font-size: var(--button-icon-xl);
}
.onb-continue-icon::before { /* used: onboarding */
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: center / contain no-repeat var(--onb-arrow-icon);
  mask: center / contain no-repeat var(--onb-arrow-icon);
}
.onb-nav-continue { display: var(--onb-nav-continue-display, inline-flex); } /* used: onboarding */
.onb-nav-continue:active { transform: scale(var(--onb-press-scale)); } /* used: onboarding */
/* A Continue that is not needed yet: the bar keeps its place, the button goes */
.onb-bottom-nav-waiting { --onb-nav-continue-display: none; } /* used: onboarding */
@media (min-width: 600px) {
  .onb-nav-continue { width: auto; } /* used: onboarding */
}
@media (max-width: 599px), (pointer: coarse) {
  .onb-nav-continue { /* used: onboarding */
    width: var(--button-size-xl);
    height: var(--button-size-xl);
    min-width: 0;
    padding: 0;
    border-radius: var(--radius-circle);
    align-self: center;
  }
  .onb-continue-label { /* used: onboarding */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .onb-continue-icon { font-size: var(--button-icon-xxl); } /* used: onboarding */
}

/* The wide pill buttons: Start onboarding, the card's Continue and Go explore */
.onb-wide-button { /* used: onboarding */
  height: var(--button-size-xl);
  width: auto;
  min-width: var(--onb-wide-button-min);
  max-width: 100%;
  padding: 0 var(--gap-xxl);
  border-radius: var(--radius-pill);
  align-self: var(--onb-explore-align, center);
}
.onb-wide-button-label { /* used: onboarding */
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: nowrap;
}

/* ---------- Start screen ---------- */
.onb-start-screen { /* used: onboarding */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  width: 100%;
  gap: var(--app-default-top-bottom-margin-sm);
}
.onb-start-lock { /* used: onboarding */
  max-width: 100%;
  height: auto;
  display: block;
  width: var(--onb-start-lock-width);
  aspect-ratio: var(--onb-start-lock-ratio);
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}
.onb-start-heading { /* used: onboarding */
  margin: 0;
  color: var(--bright-white);
  font-size: var(--heading-size-xxl);
  font-weight: var(--font-weight-light);
}
.onb-start-subheading { /* used: onboarding */
  margin: 0;
  color: rgba(var(--bright-white-rgb), var(--opacity-very-high));
  font-size: var(--heading-size-md);
  font-weight: var(--font-weight-light);
}

/* The time and question count line */
.onb-meta { /* used: onboarding */
  font-size: var(--body-text-xs);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap-regular);
  flex-wrap: wrap;
  line-height: var(--default-line-height-single);
  margin-bottom: var(--app-default-top-bottom-margin-xxl);
  color: var(--bright-white);
}
.onb-meta-item { /* used: onboarding */
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xxs);
  line-height: var(--default-line-height-single);
}
.onb-meta-icon { /* used: onboarding */
  display: inline-flex;
  align-items: center;
  font-size: var(--button-icon-xxl);
  line-height: var(--default-line-height-single);
}
.onb-meta-intro { margin-top: var(--app-default-top-bottom-margin-xxxl); } /* used: onboarding */
.onb-meta-stacked { /* used: onboarding */
  flex-direction: column;
  align-items: center;
  align-self: center;
  margin-bottom: 0;
}

/* ---------- Section intro ---------- */
.onb-section-intro { /* used: onboarding */
  text-align: left;
  width: 100%;
  max-width: var(--max-content-width-golden-section-large);
  margin-left: 0;
  margin-right: 0;
  align-self: flex-start;
  margin-top: var(--app-default-top-bottom-margin-xxxl);
}
@media (max-width: 600px) {
  .onb-section-intro { margin-top: var(--app-default-top-bottom-margin-xl); } /* used: onboarding */
}
.onb-section-intro-heading { /* used: onboarding */
  color: var(--onb-screen-text, var(--t-page-text));
  margin-bottom: var(--app-default-heading-bottom-margin-xl);
  line-height: var(--default-line-height-single);
  letter-spacing: var(--heading-letter-spacing-tight);
  text-align: left;
}
.onb-section-intro-text { /* used: onboarding */
  line-height: var(--default-line-height-x-large);
  color: var(--onb-screen-text, var(--t-page-text));
  text-align: var(--onb-intro-align, left);
}
.onb-section-intro-text:last-of-type { margin-bottom: 0; } /* used: onboarding */

/* ---------- Answer pills (onb-pill) ---------- */
.onb-options { /* used: onboarding */
  margin-top: 0;
  width: 100%;
  max-width: var(--max-content-width-golden-section-large);
  display: flex;
  flex-direction: column;
  gap: var(--onb-answer-gap);
  transition: opacity var(--onb-fade-medium) ease;
}
.onb-options-hidden { /* used: onboarding */
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
  margin: 0;
}
.onb-cloud { /* used: onboarding */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: var(--list-row-gap);
  column-gap: var(--list-column-gap);
  width: 100%;
  max-width: var(--max-content-width-golden-section-large);
  margin: 0;
  --onb-pill-wrapper-width: auto;
  --onb-pill-wrapper-shrink: 0;
  --onb-pill-width: auto;
  --onb-pill-padding-right: var(--pill-padding-right);
}
.onb-rect-list { /* used: onboarding */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--golden-width-small);
  gap: var(--onb-answer-gap);
  margin-left: 0;
  margin-right: 0;
  --onb-pill-wrapper-width: 100%;
  --onb-pill-wrapper-shrink: 1;
  --onb-pill-width: 100%;
  --onb-pill-padding: var(--pill-rect-padding);
  --onb-pill-padding-right: 1rem;
  --onb-pill-radius: var(--button-radius);
  --onb-circle-radius: var(--radius-square-letter);
}
.onb-rect-extras { /* used: onboarding */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--golden-width-small);
  margin-left: 0;
  margin-right: 0;
  gap: var(--onb-answer-gap);
  margin-top: 0;
  --onb-pill-padding: var(--pill-rect-padding);
  --onb-pill-padding-right: 1rem;
  --onb-pill-radius: var(--button-radius);
}
.onb-reset-pair { /* used: onboarding */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--onb-answer-gap);
  margin-top: 0;
  width: 100%;
  --onb-pill-wrapper-width: auto;
  --onb-pill-wrapper-shrink: 0;
  --onb-pill-width: auto;
  --onb-pill-padding-right: var(--pill-padding-right);
}
.onb-pill-wrapper { /* used: onboarding */
  width: var(--onb-pill-wrapper-width, 100%);
  flex-shrink: var(--onb-pill-wrapper-shrink, 1);
  animation: normal-lozenge-stagger var(--onb-stagger-duration) ease-out both;
  animation-delay: calc(var(--question-delay, 0s) + var(--index, 0) * var(--onb-stagger-step));
  opacity: 0;
}
@media (max-width: 400px) {
  .onb-pill-wrapper { max-width: 100%; } /* used: onboarding */
}
.onb-pill { /* used: onboarding */
  line-height: var(--default-line-height-single);
  position: relative;
  display: inline-flex;
  align-items: center;
  width: var(--onb-pill-width, 100%);
  text-align: left;
  padding: var(--onb-pill-padding, var(--pill-padding));
  padding-right: var(--onb-pill-padding-right, 1rem);
  border-radius: var(--onb-pill-radius, var(--radius-pill));
  cursor: pointer;
  user-select: none;
  transition: background var(--button-transition-duration) var(--button-transition-ease), color var(--button-transition-duration) var(--button-transition-ease), border-color var(--button-transition-duration) var(--button-transition-ease);
  background: var(--onb-option-bg);
  border: var(--stroke-hairline) solid var(--onb-option-border);
  color: var(--onb-option-text);
  font-family: inherit;
}
@media (max-width: 400px) {
  .onb-pill { /* used: onboarding */
    max-width: 100%;
    height: auto;
    white-space: normal;
    --onb-picker-option-height: auto;
  }
}
.onb-pill:hover { /* used: onboarding */
  background: var(--onb-option-hover-bg);
  border-color: var(--onb-option-hover-border);
}
.onb-pill.is-selected { /* used: onboarding */
  background: var(--onb-option-selected-bg);
  border-color: var(--onb-option-selected-border);
  color: var(--onb-option-selected-text);
  opacity: 1;
  --onb-circle-bg-now: var(--t-page-bg);
  --onb-circle-border-now: var(--t-page-bg);
  --onb-circle-text-now: var(--onb-circle-selected-text);
  --onb-letter-display: none;
  --onb-tick-display: inline-block;
  --onb-tick-colour: var(--onb-tick-selected);
}
.onb-pill-circle { /* used: onboarding */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: var(--onb-circle-radius, var(--radius-circle));
  border: var(--stroke-hairline) solid var(--onb-circle-border-now, var(--onb-circle-border));
  background: var(--onb-circle-bg-now, transparent);
  color: var(--onb-circle-text-now, var(--onb-circle-text));
  font-weight: var(--onb-circle-weight, var(--font-weight-medium));
  margin-right: var(--onb-circle-gap);
  flex-shrink: 0;
  text-transform: uppercase;
  transition: all var(--onb-fade-medium) ease;
  font-size: var(--onb-circle-font-size, inherit);
  line-height: var(--onb-circle-line-height, inherit);
}
.onb-pill-letter { display: var(--onb-letter-display, inline); } /* used: onboarding */
.onb-pill-tick { /* used: onboarding */
  display: var(--onb-tick-display, none);
  color: var(--onb-tick-colour, inherit);
}
.onb-pill-label { flex: 1; } /* used: onboarding */
@media (max-width: 400px) {
  .onb-pill-label { /* used: onboarding */
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
/* "I do not want to share": the slash stays when it is chosen */
.onb-pill-reset { /* used: onboarding */
  background: var(--onb-reset-bg);
  border-color: var(--onb-reset-border);
  color: var(--onb-reset-text);
  --onb-circle-border: var(--onb-reset-circle-border);
  --onb-circle-text: var(--onb-reset-circle-text);
  --onb-circle-line-height: var(--default-line-height-single);
}
.onb-pill-reset:hover { /* used: onboarding */
  background: var(--onb-reset-hover-bg);
  border-color: var(--onb-reset-border);
}
.onb-pill-reset.is-selected { /* used: onboarding */
  background: var(--onb-reset-selected-bg);
  border-color: var(--onb-reset-selected-border);
  color: var(--onb-reset-selected-text);
  --onb-letter-display: inline-block;
  --onb-tick-display: none;
}
.onb-pill-describe { /* used: onboarding */
  background: var(--onb-reset-bg);
  border-color: var(--onb-describe-border);
  color: var(--onb-describe-text);
  --onb-circle-border: var(--onb-describe-circle-border);
  --onb-circle-text: var(--onb-describe-circle-text);
  --onb-circle-font-size: var(--button-font-size);
  --onb-circle-line-height: var(--default-line-height-single);
  --onb-circle-weight: var(--font-weight-light);
}
.onb-pill-describe:hover { /* used: onboarding */
  background: var(--onb-describe-hover-bg);
  border-color: var(--onb-describe-border);
}
.onb-pill-added { /* used: onboarding */
  background: var(--onb-option-selected-bg);
  border-color: var(--onb-option-selected-border);
  color: var(--onb-option-selected-text);
  padding-right: var(--onb-pill-added-padding-right);
  position: relative;
  --onb-circle-bg-now: var(--onb-added-circle-bg);
  --onb-circle-border-now: var(--onb-added-circle-border);
  --onb-circle-text-now: var(--onb-added-circle-text);
  --onb-letter-display: none;
  --onb-tick-display: inline-block;
}
.onb-pill-added:hover { /* used: onboarding */
  background: var(--onb-option-selected-bg);
  border-color: var(--onb-option-selected-border);
}
.onb-pill-danger { /* used: onboarding */
  background: var(--tomato);
  border-color: var(--tomato);
  color: var(--bright-white);
  --onb-circle-bg-now: var(--t-card-selected-bg);
  --onb-circle-text-now: var(--tomato);
  --onb-circle-border-now: var(--t-page-text);
}
.onb-pill-danger:hover { /* used: onboarding */
  background: var(--tomato);
  border-color: var(--tomato);
}
.onb-pill-delete { /* used: onboarding */
  position: absolute;
  right: var(--onb-pill-delete-inset);
  top: 50%;
  transform: translateY(-50%);
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: var(--radius-circle);
  background: transparent;
  color: inherit;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: var(--opacity-high);
  transition: transform var(--button-transition-duration) var(--button-transition-ease), color var(--button-transition-duration) var(--button-transition-ease);
}
.onb-pill-delete:hover { /* used: onboarding */
  opacity: 1;
  color: var(--t-page-text);
  transform: translateY(-50%) scale(var(--onb-hover-grow));
}
.onb-pill-delete:active { transform: translateY(-50%) scale(var(--onb-press-shrink)); } /* used: onboarding */

/* "I do not want to share" rows under a field or grid */
.onb-noshare-below, /* used: onboarding */
.onb-noshare-below-narrow { /* used: onboarding */
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  margin-left: 0;
  margin-right: var(--onb-noshare-margin, 0);
  align-self: stretch;
  margin-top: var(--onb-noshare-gap);
}
.onb-noshare-below-wide { /* used: onboarding */
  width: 100%;
  max-width: calc(2 * var(--onb-square-size) + var(--tile-gap));
  margin-left: 0;
  margin-right: var(--onb-noshare-margin, 0);
  margin-top: var(--onb-noshare-gap);
}
.onb-noshare-span-3 { max-width: calc(3 * var(--onb-square-size) + 2 * var(--tile-gap)); } /* used: onboarding */

/* ---------- Letter squares ---------- */
.onb-squares { /* used: onboarding */
  width: 100%;
  max-width: var(--max-content-width-golden-section-large);
  margin: 0;
}
.onb-squares-2, /* used: onboarding */
.onb-squares-3, /* used: onboarding */
.onb-squares-4, /* used: onboarding */
.uma-grid-2, /* used: onboarding */
.uma-grid-3 { /* used: onboarding */
  --tile-size: min(var(--onb-square-size), calc((100% - var(--tile-gap)) / 2));
  display: grid;
  gap: var(--tile-gap);
  justify-content: start;
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(2, var(--tile-size));
}
.onb-squares-3, /* used: onboarding */
.uma-grid-3 { grid-template-columns: var(--tile-size); } /* used: onboarding */
@media (min-width: 820px) {
  .onb-squares-3, /* used: onboarding */
  .uma-grid-3 { grid-template-columns: repeat(3, var(--tile-size)); } /* used: onboarding */
}
@media (max-width: 599px) {
  .onb-squares-2, /* used: onboarding */
  .onb-squares-3, /* used: onboarding */
  .onb-squares-4, /* used: onboarding */
  .uma-grid-2, /* used: onboarding */
  .uma-grid-3 { justify-content: center; } /* used: onboarding */
}
.onb-square { /* used: onboarding */
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: var(--default-radius);
  background: var(--onb-option-bg);
  border: var(--stroke-hairline) solid var(--onb-option-border);
  color: var(--onb-option-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  cursor: pointer;
  transition: background var(--onb-fade-medium) ease, color var(--onb-fade-medium) ease, border-color var(--onb-fade-medium) ease;
  max-width: var(--onb-square-size);
  opacity: 0;
  animation: identity-square-fade-in var(--onb-stagger-duration) ease-out both;
  animation-delay: calc(var(--question-delay, 0s) + var(--index, 0) * var(--onb-stagger-step));
}
.onb-square:hover { /* used: onboarding */
  background: var(--onb-option-hover-bg);
  border-color: var(--onb-option-hover-border);
}
.onb-square.is-selected { /* used: onboarding */
  background: var(--onb-option-selected-bg);
  border-color: var(--onb-option-selected-border);
  color: var(--onb-option-selected-text);
  opacity: 1;
  --onb-circle-bg-now: var(--t-page-bg);
  --onb-circle-border-now: var(--t-page-bg);
  --onb-circle-text-now: var(--onb-circle-selected-text);
}
.onb-square-letter { /* used: onboarding */
  position: absolute;
  top: var(--identity-letter-top);
  left: var(--identity-letter-left);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--identity-letter-size);
  height: var(--identity-letter-size);
  border-radius: var(--radius-square-letter);
  border: var(--stroke-hairline) solid var(--onb-circle-border-now, var(--onb-circle-border));
  background: var(--onb-circle-bg-now, transparent);
  color: var(--onb-circle-text-now, var(--onb-circle-text));
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}
.onb-square-label { /* used: onboarding */
  line-height: var(--default-line-height-small);
  margin-top: 0;
}

/* ---------- Fields ---------- */
.onb-text-input-wrap { /* used: onboarding */
  margin-top: 0;
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  position: relative;
}
.onb-text-input { /* used: onboarding */
  line-height: var(--default-line-height-small);
  width: 100%;
  height: var(--button-size-xl);
  font-size: var(--body-text-lg);
  background: var(--t-card-selected-bg);
  border: var(--stroke-hairline) solid rgba(var(--black-rgb), var(--opacity-low));
  border-radius: var(--field-radius);
  padding: 0 var(--onb-text-input-padding-right) 0 var(--field-padding-x);
  font-family: inherit;
  color: var(--t-input-text);
  outline: none;
  box-sizing: border-box;
  caret-color: var(--t-card-selected-text);
  transition: border-color 0.2s ease;
}
.onb-text-input::placeholder { color: var(--t-text-muted); } /* used: onboarding */
.onb-input-in-box { /* used: onboarding */
  flex: 1;
  min-width: 0;
  width: auto;
  height: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  padding: 0 var(--field-padding-x);
}
.onb-self-describe-takeover { /* used: onboarding */
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  margin-top: var(--onb-form-gap);
  margin-left: var(--onb-noshare-margin, 0);
  margin-right: var(--onb-noshare-margin, 0);
  position: relative;
  display: flex;
  align-items: stretch;
  height: var(--button-size-xl);
  background: var(--t-card-selected-bg);
  background-clip: padding-box;
  border: var(--stroke-hairline) solid transparent;
  border-radius: var(--field-radius);
  overflow: hidden;
  animation: normal-lozenge-stagger var(--onb-stagger-duration) ease-out both;
  transition: transform var(--onb-press-duration) ease;
}
.onb-inline-submit-field { /* used: onboarding */
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  margin-top: 0;
}
.onb-self-describe-takeover-pressed { /* used: onboarding */
  animation: none;
  transform: scale(var(--press-scale-subtle));
}
.onb-self-describe-takeover-submit { /* used: onboarding */
  flex-shrink: 0;
  align-self: stretch;
  aspect-ratio: 1 / 1;
  background-color: var(--orange);
  color: var(--bright-white);
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform var(--onb-press-duration-fast) ease;
}
.onb-self-describe-takeover-submit:active { transform: scale(var(--onb-press-scale-small)); } /* used: onboarding */
.onb-self-describe-takeover-submit:hover { background-color: var(--orange-dark); } /* used: onboarding */
.onb-submit-icon { font-size: var(--body-text-xl); } /* used: onboarding */
.onb-text-input-helper { /* used: onboarding */
  margin-top: var(--gap-xs);
  margin-left: var(--onb-helper-inset);
  margin-right: var(--onb-helper-inset);
  font-family: "Inter", sans-serif;
  font-style: italic;
  color: var(--t-text-secondary);
  text-align: left;
}
.onb-input-error-msg { /* used: onboarding */
  color: var(--tomato);
  margin: var(--gap-xs) 0 0 0;
  text-align: left;
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  display: none;
}
.onb-input-error-msg-visible { display: block; } /* used: onboarding */

/* Country field */
.onb-country-field { /* used: onboarding */
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  margin-left: 0;
  margin-right: auto;
  align-self: stretch;
  position: relative;
  display: flex;
  align-items: stretch;
  height: var(--button-size-xl);
  background: var(--t-card-selected-bg);
  background-clip: padding-box;
  border: var(--stroke-hairline) solid transparent;
  border-radius: var(--field-radius);
  transition: transform var(--onb-press-duration) ease;
  --search-icon-size: var(--button-icon-xl);
}
.onb-country-input-area { /* used: onboarding */
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
}
/* The text box inside the country, colour, animal and job search fields */
.onb-country-input { /* used: onboarding */
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  padding: 0 var(--onb-country-input-padding-right) 0 calc(var(--field-padding-x) * 2 + var(--search-icon-size));
}
.onb-picker-search-field, /* used: onboarding */
.onb-role-search-field { /* used: onboarding */
  margin: 0;
  border-radius: var(--radius-pill);
}
.onb-picker-search-input::placeholder, /* used: onboarding */
.onb-role-search-input::placeholder { /* used: onboarding */
  color: var(--onb-search-placeholder);
  opacity: 1;
}
.onb-picker-search-icon, /* used: onboarding */
.onb-role-search-icon { /* used: onboarding */
  position: absolute;
  left: var(--field-padding-x);
  top: 50%;
  transform: translateY(-50%);
  color: var(--t-text-muted);
  pointer-events: none;
  z-index: var(--onb-z-lifted);
  font-size: var(--search-icon-size);
}
.onb-typeahead-list { /* used: onboarding */
  position: absolute;
  top: calc(100% + var(--onb-typeahead-offset));
  left: 0;
  right: 0;
  z-index: var(--onb-z-typeahead);
  display: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  max-height: calc((var(--button-size-lg) + var(--gap-xs)) * 6 - var(--gap-xs));
  overflow-y: auto;
  scroll-padding-block: var(--gap-md);
}
.onb-typeahead-list-country { /* used: onboarding */
  top: calc(100% + var(--onb-typeahead-offset-country));
  z-index: var(--onb-z-typeahead-country);
}
.onb-typeahead-list.is-visible { /* used: onboarding */
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}
.onb-typeahead-item { /* used: onboarding */
  cursor: pointer;
  transition: background var(--onb-fade-fast) ease;
  display: flex;
  align-items: center;
  height: var(--button-size-lg);
  flex-shrink: 0;
  padding: 0 var(--gap-lg);
  font-size: var(--body-text-sm);
  border: var(--stroke-hairline) solid var(--onb-typeahead-border);
  border-radius: var(--radius-pill);
  background: var(--t-page-bg);
  color: var(--onb-typeahead-text);
}
.onb-typeahead-item:hover, /* used: onboarding */
.onb-typeahead-item.is-highlighted { /* used: onboarding */
  background: var(--onb-typeahead-active-bg);
  border-color: var(--onb-typeahead-active-border);
  color: var(--onb-typeahead-active-text);
}

/* Text area */
.onb-textarea { /* used: onboarding */
  line-height: var(--default-line-height-large);
  margin-top: 0;
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  min-height: var(--onb-textarea-min-height);
  background: var(--t-card-selected-bg);
  border: var(--stroke-hairline) solid rgba(var(--black-rgb), var(--opacity-low));
  border-radius: var(--field-radius);
  padding: var(--onb-textarea-padding);
  font-family: inherit;
  font-size: var(--body-text-lg);
  color: var(--t-input-text);
  outline: none;
  resize: vertical;
  caret-color: var(--t-card-selected-text);
}
.onb-textarea-in-box { /* used: onboarding */
  flex: 1;
  min-width: 0;
  width: auto;
  max-width: none;
  min-height: calc(var(--button-size-xl) * 3);
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  resize: none;
  overflow-y: auto;
}
.onb-textarea-field { /* used: onboarding */
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  margin-left: 0;
  margin-right: auto;
  align-self: stretch;
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--t-card-selected-bg);
  background-clip: padding-box;
  border: var(--stroke-hairline) solid transparent;
  border-radius: var(--field-radius);
  overflow: hidden;
  transition: transform var(--onb-press-duration) ease;
}
.onb-textarea-field-pressed { transform: scale(var(--onb-press-scale-textarea)); } /* used: onboarding */
.onb-textarea-submit { /* used: onboarding */
  flex-shrink: 0;
  align-self: stretch;
  width: var(--button-size-xl);
  background-color: var(--orange);
  color: var(--bright-white);
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc((var(--button-size-xl) - var(--body-text-xl)) / 2);
  cursor: pointer;
  transition: background-color 0.2s ease, transform var(--onb-press-duration-fast) ease;
}
.onb-textarea-submit:active { transform: scale(var(--onb-press-scale-small)); } /* used: onboarding */
.onb-textarea-submit:hover { background-color: var(--orange-dark); } /* used: onboarding */
.onb-textarea-submit:disabled { /* used: onboarding */
  background-color: rgba(var(--black-rgb), var(--opacity-low));
  color: var(--t-text-muted);
  cursor: default;
}
.onb-textarea-counter { /* used: onboarding */
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  text-align: right;
  color: var(--t-text-muted);
  min-height: 0;
}
.onb-textarea-counter:not(:empty) { /* used: onboarding */
  margin-top: var(--onb-counter-gap);
  min-height: var(--onb-counter-line);
}
.onb-textarea-counter-warning { color: var(--t-text-secondary); } /* used: onboarding */
.onb-textarea-counter-over { color: var(--tomato); } /* used: onboarding */

/* Dropdowns (year and month) */
.onb-dropdown-pair { /* used: onboarding */
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
}
.onb-dropdown { /* used: onboarding */
  width: 100%;
  height: var(--button-size-xl);
  background: var(--t-card-selected-bg);
  border: var(--stroke-hairline) solid var(--t-text-muted);
  border-radius: var(--radius-input);
  padding: 0 1.25rem;
  font-family: inherit;
  font-size: var(--body-text-lg);
  color: var(--t-input-text);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: var(--onb-dropdown-caret);
  background-repeat: no-repeat;
  background-position: right var(--onb-dropdown-caret-inset) center;
  padding-right: 2.5rem;
}

/* Number boxes (age) */
.four-digit-code-field { /* used: onboarding */
  display: flex;
  align-items: stretch;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--t-card-selected-bg);
  background-clip: padding-box;
  border: var(--stroke-hairline) solid transparent;
  border-radius: var(--field-radius);
  overflow: hidden;
  margin: var(--app-default-top-bottom-margin-lg) 0 var(--app-default-top-bottom-margin-xxs) 0;
  height: var(--button-size-xxl);
  transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease, transform var(--transition-fast) ease;
}
.four-digit-code-field-pressed { transform: scale(var(--press-scale-subtle)); } /* used: onboarding */
.onb-numbox-field { /* used: onboarding */
  aspect-ratio: 3 / 1;
  width: auto;
  align-self: center;
  margin-top: 0;
}
/* Filled, right and wrong: the field sets these and its arrow button reads them */
.four-digit-code-field.has-input, /* used: onboarding */
.four-digit-code-field.is-valid { /* used: onboarding */
  border-color: var(--orange);
  border-width: var(--field-border-active);
  --onb-code-button-bg: var(--orange);
  --onb-code-button-text: var(--bright-white);
  --onb-code-button-edge: var(--orange);
  --onb-code-button-hover: var(--orange-dark);
}
.four-digit-code-field.is-invalid { /* used: onboarding */
  border-color: var(--error);
  border-width: var(--field-border-active);
  box-shadow: 0 0 0 var(--field-border-active) var(--error);
  --onb-code-button-bg: var(--error);
  --onb-code-button-text: var(--bright-white);
  --onb-code-button-edge: var(--error);
}
.single-digit-input-boxes { /* used: onboarding */
  display: flex;
  align-items: center;
  flex: 2 1 0;
  min-width: 0;
}
.single-digit-input-box { /* used: onboarding */
  font-size: var(--onb-code-digit-size);
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 100%;
  border: none;
  outline: none;
  padding-left: 0;
  padding-right: 0;
  overflow-clip-margin: var(--onb-digit-clip);
  text-align: center;
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  color: var(--t-card-selected-text);
  background: transparent;
}
.single-digit-input-box-first { text-align: right; } /* used: onboarding */
.single-digit-input-box-last { text-align: left; } /* used: onboarding */
.four-digit-code-continue { /* used: onboarding */
  flex-shrink: 0;
  height: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  background: var(--onb-code-button-bg, var(--dark-white));
  color: var(--onb-code-button-text, var(--t-text-secondary));
  border-left: var(--stroke-hairline) solid var(--onb-code-button-edge, rgba(var(--black-rgb), var(--opacity-low)));
  border-radius: 0;
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  font-size: var(--icon-size-inline);
  transition: background var(--transition-fast) ease, color var(--transition-fast) ease, border-left-color var(--transition-fast) ease;
}
.four-digit-code-continue:hover { /* used: onboarding */
  background: var(--onb-code-button-hover, var(--onb-code-button-bg, var(--dark-white)));
  border-left-color: var(--onb-code-button-hover, var(--onb-code-button-edge, rgba(var(--black-rgb), var(--opacity-low))));
}

/* ---------- Lifestyle answers ---------- */
.uma-body { /* used: onboarding */
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}
.full-width-answers { width: 100%; } /* used: onboarding */
.uma-single-wrap { /* used: onboarding */
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}
.uma-exercise-wrap { /* used: onboarding */
  display: flex;
  flex-direction: column;
  gap: var(--answer-gap);
  width: 100%;
}
@media (min-width: 600px) {
  .uma-exercise-wrap { width: fit-content; } /* used: onboarding */
}
.uma-exercise-grid { gap: var(--tile-gap); } /* used: onboarding */
@media (min-width: 600px) and (max-width: 819px) {
  .uma-exercise-grid { grid-template-columns: repeat(2, var(--onb-square-size)); } /* used: onboarding */
}
@media (min-width: 820px) {
  .uma-exercise-grid { grid-template-columns: repeat(3, var(--onb-square-size)); } /* used: onboarding */
}
@media (max-width: 599px) {
  .uma-exercise-grid { /* used: onboarding */
    --tile-size: min(var(--onb-square-size), calc((100% - var(--tile-gap)) / 2));
    grid-template-columns: repeat(2, var(--tile-size));
    justify-content: center;
    width: 100%;
  }
}
.onb-answer-list { /* used: onboarding */
  display: flex;
  flex-direction: column;
  gap: var(--answer-gap);
  width: 100%;
  max-width: var(--golden-width-small);
}
.onb-answer-list-small { max-width: var(--max-content-width-golden-section-small); } /* used: onboarding */
.onb-answer-pill { /* used: onboarding */
  display: inline-flex;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  padding: var(--pill-rect-padding);
  border-radius: var(--radius-rect-pill);
  border: var(--stroke-hairline) solid var(--onb-answer-border);
  background: var(--onb-answer-bg);
  color: var(--onb-answer-text);
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  --onb-marker-gap: var(--pill-marker-gap);
}
.onb-answer-pill:hover { /* used: onboarding */
  background: var(--onb-answer-hover-bg);
  border-color: var(--onb-answer-hover-border);
}
.onb-answer-noshare { /* used: onboarding */
  background: var(--onb-answer-noshare-bg);
  border-color: var(--onb-answer-noshare-border);
  color: var(--onb-answer-noshare-text);
}
.onb-answer-noshare:hover { /* used: onboarding */
  background: var(--onb-answer-noshare-hover-bg);
  border-color: var(--onb-answer-noshare-border);
}
.onb-answer-none { /* used: onboarding */
  background: var(--onb-answer-none-bg);
  border-color: var(--onb-answer-none-border);
  color: var(--onb-answer-none-text);
}
.onb-answer-none:hover { /* used: onboarding */
  background: var(--onb-answer-none-hover-bg);
  border-color: var(--onb-answer-none-hover-border);
}
.onb-answer-pill.is-selected { /* used: onboarding */
  background: var(--onb-answer-selected-bg);
  border-color: var(--onb-answer-selected-border);
  color: var(--onb-answer-selected-text);
  --onb-marker-bg-now: var(--onb-marker-selected-bg);
  --onb-marker-border-now: var(--onb-marker-selected-bg);
  --onb-marker-text-now: var(--onb-marker-selected-text);
  --onb-letter-display: none;
  --onb-tick-display: inline-block;
}
.onb-answer-pill[hidden] { display: none; } /* used: onboarding */
.onb-answer-tile { /* used: onboarding */
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  border-radius: var(--radius-rect-pill);
  border: var(--stroke-hairline) solid var(--onb-tile-border, var(--onb-answer-border));
  background: var(--onb-tile-bg, var(--onb-answer-bg));
  color: var(--onb-answer-text);
  line-height: var(--default-line-height-large);
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  --onb-marker-position: absolute;
  --onb-marker-inset: var(--marker-inset);
}
@media (max-width: 599px) {
  .onb-answer-tile { /* used: onboarding */
    font-size: var(--body-text-xs);
    line-height: var(--default-line-height-small);
  }
}
.onb-answer-tile:hover { /* used: onboarding */
  background: var(--onb-answer-hover-bg);
  border-color: var(--onb-answer-hover-border);
}
.onb-answer-tile.is-selected { /* used: onboarding */
  background: var(--onb-answer-selected-bg);
  border-color: var(--onb-answer-selected-border);
  color: var(--onb-answer-selected-text);
  --onb-marker-bg-now: var(--onb-marker-selected-bg);
  --onb-marker-border-now: var(--onb-marker-selected-bg);
  --onb-marker-text-now: var(--onb-marker-selected-text);
  --onb-letter-display: none;
  --onb-tick-display: inline-block;
}
.onb-answer-full-row { grid-column: 1 / -1; } /* used: onboarding */
.onb-answer-tile-grid { /* used: onboarding */
  display: grid;
  width: 100%;
  max-width: none;
}
.onb-answer-list[hidden], /* used: onboarding */
.cycle-choice-tiles[hidden], /* used: onboarding */
.uma-meter[hidden], /* used: onboarding */
.uma-cup[hidden] { display: none; } /* used: onboarding */
.uma-group-label { /* used: onboarding */
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-normal);
  color: var(--t-page-text);
  margin-top: var(--app-default-top-bottom-margin-lg);
  margin-bottom: var(--app-default-top-bottom-margin-xs);
}
.uma-group-label:first-child { margin-top: 0; } /* used: onboarding */
.uma-chip-sep { height: var(--gap-lg); } /* used: onboarding */
.onb-letter-marker { /* used: onboarding */
  position: var(--onb-marker-position, static);
  top: var(--onb-marker-inset, auto);
  left: var(--onb-marker-inset, auto);
  width: var(--marker-size);
  height: var(--marker-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  border: var(--stroke-hairline) solid var(--onb-marker-border-now, var(--onb-marker-border));
  background: var(--onb-marker-bg-now, transparent);
  color: var(--onb-marker-text-now, var(--onb-marker-text));
  text-transform: uppercase;
  font-weight: var(--font-weight-normal);
  font-size: var(--marker-font-size);
  line-height: var(--default-line-height-single);
  flex-shrink: 0;
  margin-right: var(--onb-marker-gap, 0);
}
.onb-letter-marker-square { border-radius: var(--radius-square-letter); } /* used: onboarding */
.onb-marker-letter { display: var(--onb-letter-display, inline); } /* used: onboarding */
.onb-marker-tick { /* used: onboarding */
  display: var(--onb-tick-display, none);
  font-size: var(--body-text-lg);
  color: var(--onb-tick-colour, inherit);
}

/* Skin and hair swatches */
.uma-swatch-row { /* used: onboarding */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-md);
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
}
.uma-swatch { /* used: onboarding */
  width: 100%;
  height: var(--onb-swatch-height);
  cursor: pointer;
  border: 0;
  border-radius: var(--app-default-radius-md);
  padding: 0 var(--gap-lg);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-lg);
  font-family: inherit;
  background: var(--swatch-bg);
  --onb-marker-gap: 0;
  --onb-swatch-text: var(--onb-swatch-dark-text);
  --onb-marker-border: var(--onb-swatch-dark-marker);
  --onb-marker-text: var(--onb-swatch-dark-marker);
}
.uma-swatch.is-selected { /* used: onboarding */
  --onb-marker-bg-now: var(--t-card-selected-bg);
  --onb-marker-border-now: var(--t-page-text);
  --onb-marker-text-now: transparent;
  --onb-letter-display: none;
  --onb-tick-display: inline-block;
  --onb-tick-colour: var(--onb-swatch-dark-selected-tick);
}
.uma-swatch-light { /* used: onboarding */
  border: var(--onb-swatch-light-border);
  --onb-swatch-text: var(--dark-charcoal);
  --onb-marker-border: var(--dark-charcoal);
  --onb-marker-text: var(--dark-charcoal);
}
.uma-swatch-light.is-selected { /* used: onboarding */
  --onb-marker-bg-now: var(--bright-white);
  --onb-marker-border-now: var(--bright-white);
  --onb-tick-colour: var(--navy);
}
.uma-swatch-noshare { /* used: onboarding */
  background: var(--onb-noshare-swatch-bg);
  --onb-swatch-text: var(--onb-noshare-swatch-text);
  --onb-marker-border: var(--onb-noshare-swatch-marker);
  --onb-marker-text: var(--onb-noshare-swatch-marker);
}
.uma-swatch-noshare:hover { background: var(--onb-noshare-swatch-hover-bg); } /* used: onboarding */
.uma-swatch-noshare.is-selected { /* used: onboarding */
  background: var(--t-card-selected-bg);
  --onb-swatch-text: var(--t-card-selected-text);
  --onb-marker-bg-now: var(--navy);
  --onb-marker-border-now: var(--t-card-selected-text);
  --onb-marker-text-now: var(--bright-white);
  --onb-tick-colour: var(--onb-noshare-swatch-tick);
}
.uma-swatch-dimmed { /* used: onboarding */
  opacity: var(--opacity-moderate);
  transition: opacity var(--onb-fade-fast);
}
.uma-swatch-text { /* used: onboarding */
  font-size: var(--body-text-sm);
  color: var(--onb-swatch-text);
}
.skin-very-fair { --swatch-bg: var(--skin-very-fair); } /* used: onboarding */
.skin-fair { --swatch-bg: var(--skin-fair); } /* used: onboarding */
.skin-medium { --swatch-bg: var(--skin-medium); } /* used: onboarding */
.skin-olive { --swatch-bg: var(--skin-olive); } /* used: onboarding */
.skin-brown { --swatch-bg: var(--skin-brown); } /* used: onboarding */
.skin-deep-brown { --swatch-bg: var(--skin-deep-brown); } /* used: onboarding */
.skin-black { --swatch-bg: var(--skin-black); } /* used: onboarding */
.hair-light-blonde { --swatch-bg: var(--hair-light-blonde); } /* used: onboarding */
.hair-dark-blonde { --swatch-bg: var(--hair-dark-blonde); } /* used: onboarding */
.hair-red { --swatch-bg: var(--hair-red); } /* used: onboarding */
.hair-light-brown { --swatch-bg: var(--hair-light-brown); } /* used: onboarding */
.hair-dark-brown { --swatch-bg: var(--hair-dark-brown); } /* used: onboarding */
.hair-black { --swatch-bg: var(--hair-black); } /* used: onboarding */

/* Eyes */
.uma-iris-grid { /* used: onboarding */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-regular);
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  margin-bottom: var(--app-default-top-bottom-margin-sm);
}
.uma-iris-row { /* used: onboarding */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap-regular);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  --onb-iris-bg-now: var(--onb-iris-pill-bg);
  --onb-iris-border-now: var(--onb-iris-pill-border);
  --onb-iris-text-now: var(--t-page-text);
}
.uma-iris-row-noshare { /* used: onboarding */
  --onb-iris-bg-now: var(--onb-iris-noshare-bg);
  --onb-iris-border-now: var(--onb-iris-noshare-border);
  --onb-iris-text-now: var(--onb-iris-noshare-text);
  --onb-iris-offset: calc(var(--onb-iris-size) + var(--gap-regular));
}
.uma-iris-row-noshare:hover { --onb-iris-bg-now: var(--onb-iris-noshare-hover-bg); } /* used: onboarding */
.uma-iris-row.is-selected { /* used: onboarding */
  --onb-iris-bg-now: var(--onb-iris-selected-bg);
  --onb-iris-border-now: var(--onb-iris-selected-border);
  --onb-iris-text-now: var(--onb-iris-selected-text);
  --onb-marker-bg-now: var(--t-page-bg);
  --onb-marker-border-now: var(--t-page-bg);
  --onb-marker-text-now: var(--navy);
  --onb-letter-display: none;
  --onb-tick-display: inline-block;
}
.uma-iris-row-dimmed { /* used: onboarding */
  opacity: var(--opacity-moderate);
  transition: opacity var(--onb-fade-fast);
}
.uma-iris { /* used: onboarding */
  width: var(--onb-iris-size);
  height: var(--onb-iris-size);
  border-radius: var(--radius-circle);
  border: var(--stroke-thick) solid transparent;
  transition: border-color var(--onb-fade-fast);
  padding: 0;
  flex: none;
  background: var(--iris-bg);
}
.iris-blue { --iris-bg: var(--iris-blue); } /* used: onboarding */
.iris-grey { --iris-bg: var(--iris-grey); } /* used: onboarding */
.iris-green { --iris-bg: var(--iris-green); } /* used: onboarding */
.iris-hazel { --iris-bg: var(--iris-hazel); } /* used: onboarding */
.iris-light-brown { --iris-bg: var(--iris-light-brown); } /* used: onboarding */
.iris-dark-brown { --iris-bg: var(--iris-dark-brown); } /* used: onboarding */
.uma-iris-pill { /* used: onboarding */
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  background: var(--onb-iris-bg-now);
  border: var(--stroke-thin) solid var(--onb-iris-border-now);
  border-radius: var(--radius-pill);
  padding: var(--gap-lg) var(--gap-xl);
  margin-left: var(--onb-iris-offset, 0);
  transition: background var(--onb-fade-fast), border-color var(--onb-fade-fast);
}
.uma-iris-label { /* used: onboarding */
  font-size: var(--body-text-lg);
  color: var(--onb-iris-text-now);
}

/* Water, caffeine and alcohol */
.uma-meter { /* used: onboarding */
  display: flex;
  flex-direction: column;
  gap: var(--gap-xxs);
}
.uma-meter-val { /* used: onboarding */
  display: flex;
  align-items: baseline;
  gap: var(--gap-xs);
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  container-type: inline-size;
}
.uma-bigval { /* used: onboarding */
  font-size: var(--onb-bigval-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--onb-letter-spacing-tight);
}
.uma-bigval-unit { /* used: onboarding */
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--t-text-secondary);
}
.uma-meter-sub { /* used: onboarding */
  font-size: var(--body-text-sm);
  color: var(--t-text-secondary);
  margin-top: var(--app-default-top-bottom-margin-xxxs);
  min-height: var(--onb-meter-sub-height);
}
.uma-vessels { /* used: onboarding */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap-md);
  margin-top: var(--app-default-top-bottom-margin-lg);
  max-width: var(--max-content-width-golden-section-small);
  height: auto;
  align-content: flex-end;
  order: 2;
}
.uma-vessels-caffeine { /* used: onboarding */
  gap: var(--gap-sm);
  align-content: center;
}
.uma-vessels-alcohol { gap: var(--gap-xs); } /* used: onboarding */
.uma-winebottle { /* used: onboarding */
  height: var(--vessel-height, var(--onb-vessel-default-bottle));
  width: auto;
  aspect-ratio: var(--onb-bottle-ratio);
  flex: none;
  position: relative;
}
.uma-vessel-art { /* used: onboarding */
  width: 100%;
  height: 100%;
}
.uma-bottle { position: relative; } /* used: onboarding */
.uma-bottle-art { /* used: onboarding */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.uma-bottle-fill { transition: height var(--onb-fade-medium) ease, y var(--onb-fade-medium) ease; } /* used: onboarding */
.uma-bottle-lg { /* used: onboarding */
  height: var(--vessel-height, var(--onb-vessel-default-large));
  width: auto;
  aspect-ratio: var(--onb-bottle-ratio);
  flex: none;
  min-width: 0;
}
.uma-cup { /* used: onboarding */
  display: inline-flex;
  line-height: var(--default-line-height-single);
  height: var(--vessel-height, var(--onb-vessel-default-cup));
  width: auto;
  flex: none;
  justify-content: flex-start;
  animation: fadeIn var(--onb-fade-medium) ease both;
  color: var(--onb-cup-colour);
}
.uma-cup-art { /* used: onboarding */
  height: 100%;
  width: auto;
}
/* It also carries cycle-slider-group, which reads this gap */
.drink-slider-group { /* used: onboarding */
  --onb-slider-top: var(--app-default-top-bottom-margin-lg);
  max-width: var(--max-content-width-golden-section-small);
  order: 1;
}

/* Cycle */
.cycle-row { /* used: onboarding */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}
.cycle-content-wrapper { /* used: onboarding */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  margin-left: 0;
  margin-right: auto;
}
@media (min-width: 800px) {
  .cycle-content-wrapper { /* used: onboarding */
    flex: 0 0 auto;
    margin-right: 0;
  }
}
.cycle-content-waiting, /* used: onboarding */
.cycle-content-dim { display: none; } /* used: onboarding */
.cycle-chart-wrapper { /* used: onboarding */
  width: 100%;
  max-width: var(--cycle-chart-fit, var(--max-content-width-golden-section-small));
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  container-type: inline-size;
}
.onb-cycle-legend { /* used: onboarding */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
  margin-bottom: var(--app-default-top-bottom-margin-xxxs);
  background: var(--onb-legend-bg);
  border-radius: var(--app-default-radius-md);
  padding: var(--gap-sm) var(--gap-lg);
  width: 100%;
}
@media (min-width: 800px) {
  .onb-cycle-legend-in-column { display: none; } /* used: onboarding */
}
.onb-cycle-legend-aside { display: none; } /* used: onboarding */
@media (min-width: 800px) {
  .onb-cycle-legend-aside { /* used: onboarding */
    display: flex;
    width: auto;
    flex: 0 0 auto;
    align-items: flex-start;
    margin: 0 auto 0 0;
    align-self: flex-start;
    --onb-legend-row-direction: column;
    --onb-legend-row-align: flex-start;
    --onb-legend-row-gap: var(--gap-xs);
    --onb-legend-row-justify: flex-start;
  }
}
.onb-cycle-legend-aside-hidden { display: none; } /* used: onboarding */
.onb-cycle-legend-row { /* used: onboarding */
  display: flex;
  flex-direction: var(--onb-legend-row-direction, row);
  align-items: var(--onb-legend-row-align, normal);
  justify-content: var(--onb-legend-row-justify, center);
  gap: var(--onb-legend-row-gap, var(--gap-xl));
}
.onb-cycle-legend-item { /* used: onboarding */
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  font-size: var(--body-text-xs);
  font-weight: var(--font-weight-normal);
  color: var(--onb-legend-text);
}
.cycle-legend-icon { /* used: onboarding */
  font-size: var(--button-icon-lg);
  flex: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: var(--onb-legend-icon-offset);
  overflow: visible;
}
.cycle-legend-icon-follicular { color: var(--bright-teal); } /* used: onboarding */
.cycle-legend-icon-luteal { color: var(--orange); } /* used: onboarding */
.cycle-legend-icon-ovulation { /* used: onboarding */
  color: var(--bright-white);
  filter: drop-shadow(var(--onb-legend-egg-shadow));
}
.cycle-legend-icon-period { color: var(--red); } /* used: onboarding */
.onb-cycle-legend-emoji { opacity: var(--opacity-visible); } /* used: onboarding */
.cycle-tooltip { /* used: onboarding */
  background: var(--onb-tooltip-bg);
  border-radius: var(--app-default-radius-md);
  padding: var(--gap-sm) var(--gap-lg);
  margin-top: var(--app-default-top-bottom-margin-xxxs);
  margin-bottom: var(--app-default-top-bottom-margin-xxxs);
  width: 100%;
}
.cycle-tooltip[hidden] { display: none; } /* used: onboarding */
.cycle-tooltip-title { /* used: onboarding */
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--onb-tooltip-title);
  margin-bottom: var(--app-default-top-bottom-margin-xs);
}
.cycle-tooltip-body { /* used: onboarding */
  font-size: var(--body-text-sm);
  color: var(--onb-tooltip-body);
  line-height: var(--default-line-height-small);
}
.cycle-ring-chart { /* used: onboarding */
  width: 100%;
  height: auto;
  aspect-ratio: var(--onb-ring-ratio);
}
.cycle-ring-subtitle { fill: var(--onb-ring-subtitle); } /* used: onboarding */
.cycle-blood-drop { /* used: onboarding */
  transform-box: fill-box;
  transform-origin: center;
  animation: var(--onb-drop-animation, fadeIn var(--onb-fade-medium) var(--onb-drop-ease) both);
  color: var(--red);
}
.cycle-centre-overlay { /* used: onboarding */
  position: absolute;
  left: 50%;
  top: var(--onb-centre-top);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  line-height: var(--default-line-height-single);
}
.cycle-centre-digits { /* used: onboarding */
  font-size: var(--onb-bigval-size);
  font-weight: var(--font-weight-medium);
  color: var(--t-page-text);
}
.cycle-centre-subtitle { /* used: onboarding */
  font-size: var(--onb-centre-subtitle-size);
  font-weight: var(--font-weight-normal);
  color: var(--t-text-secondary);
  margin-top: var(--onb-centre-subtitle-gap);
}
.cycle-slider-group { /* used: onboarding */
  width: 100%;
  margin-top: var(--onb-slider-top, calc(var(--app-default-top-bottom-margin-sm) * -1));
}
.cycle-slider-label { /* used: onboarding */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-md);
  font-size: var(--body-text-sm);
  color: var(--onb-slider-label);
  font-weight: var(--font-weight-normal);
  margin-bottom: var(--app-default-top-bottom-margin-xxxs);
}
.cycle-slider-label-spaced { margin-top: var(--app-default-top-bottom-margin-lg); } /* used: onboarding */
.cycle-slider-value { /* used: onboarding */
  color: var(--onb-slider-value);
  font-weight: var(--font-weight-normal);
  font-size: var(--body-text-sm);
}
.cycle-slider { /* used: onboarding */
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  height: var(--cycle-slider-track-height);
  border-radius: var(--cycle-slider-track-radius);
  background: var(--onb-slider-track);
  outline: none;
  margin: 0;
}
.cycle-slider::-webkit-slider-thumb { /* used: onboarding */
  -webkit-appearance: none;
  width: var(--cycle-slider-thumb-width);
  height: var(--cycle-slider-thumb-height);
  border-radius: var(--radius-square-letter);
  background: var(--onb-slider-thumb);
  cursor: grab;
  border: none;
  box-shadow: var(--onb-thumb-shadow);
}
.cycle-slider::-webkit-slider-thumb:active { cursor: grabbing; } /* used: onboarding */
.cycle-slider::-moz-range-thumb { /* used: onboarding */
  width: var(--cycle-slider-thumb-width);
  height: var(--cycle-slider-thumb-height);
  border-radius: var(--radius-square-letter);
  background: var(--onb-slider-thumb);
  cursor: grab;
  border: none;
  box-shadow: var(--onb-thumb-shadow);
}
.digit-roller-wrapper { /* used: onboarding */
  display: inline-flex;
  align-items: baseline;
}
.digit-roller-column { /* used: onboarding */
  display: inline-block;
  height: var(--onb-roller-line);
  overflow: hidden;
  vertical-align: baseline;
  transition: width var(--onb-roller-duration) var(--onb-roller-ease);
}
.digit-roller-column-empty { width: 0; } /* used: onboarding */
.digit-roller-strip { /* used: onboarding */
  display: flex;
  flex-direction: column;
  transition: transform var(--onb-roller-duration) var(--onb-roller-ease);
}
.digit-roller-strip-instant { transition: none; } /* used: onboarding */
.digit-roller-cell { /* used: onboarding */
  height: var(--onb-roller-line);
  line-height: var(--onb-roller-line);
  text-align: center;
}

/* ---------- Wake and sleep ---------- */
.uma-slide { /* used: onboarding */
  flex-direction: column;
  padding-top: var(--gap-xs);
  justify-content: space-between;
  position: relative;
  animation: uma-slide-in var(--onb-slide-duration) ease both;
  animation-name: var(--onb-slide-animation-name, uma-slide-in);
}
@keyframes uma-slide-in { /* used: onboarding */
  from { opacity: var(--opacity-hidden); transform: translateX(var(--onb-slide-offset)); }
  to { opacity: var(--opacity-visible); transform: none; }
}
.uma-slide-body { /* used: onboarding */
  flex: 1;
  justify-content: center;
  overflow: hidden;
}
.uma-slide-layer { /* used: onboarding */
  position: relative;
  z-index: var(--onb-slide-layer, var(--onb-z-raised));
}
.uma-slide-night { --onb-slide-layer: var(--onb-z-lifted); } /* used: onboarding */
.uma-scene { /* used: onboarding */
  position: relative;
  border-radius: var(--app-default-radius-lg);
  overflow: hidden;
  padding: var(--gap-xxl) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 599px) {
  .uma-scene { align-items: flex-start; } /* used: onboarding */
}
.uma-scene-morning { /* used: onboarding */
  background: var(--onb-scene-bg, linear-gradient(180deg, var(--sunrise-peach), var(--sunrise-cream)));
  --onb-tumbler-colour: var(--t-card-selected-text);
}
.uma-scene-evening { /* used: onboarding */
  background: var(--onb-scene-bg, linear-gradient(180deg, var(--t-page-bg-deep), var(--t-page-bg)));
  --onb-tumbler-colour: var(--onb-screen-text, var(--t-page-text));
  --onb-frame-bg: var(--t-border);
}
.uma-sun { /* used: onboarding */
  position: absolute;
  right: var(--onb-scene-inset);
  top: var(--onb-sun-top);
  width: var(--onb-sun-size);
  height: var(--onb-sun-size);
  border-radius: var(--radius-circle);
  background: radial-gradient(circle at 50% 50%, var(--sun-core), var(--sun-glow) 58%, transparent 72%);
  opacity: var(--opacity-near-full);
  z-index: 0;
}
.uma-star { /* used: onboarding */
  position: absolute;
  width: var(--onb-star-size);
  height: var(--onb-star-size);
  border-radius: var(--radius-circle);
  background: var(--t-card-selected-bg);
  opacity: var(--opacity-very-high);
  animation: uma-twinkle var(--onb-twinkle-duration) ease-in-out infinite;
}
@keyframes uma-twinkle { /* used: onboarding */
  0%, 100% { opacity: var(--opacity-low); }
  50% { opacity: var(--opacity-near-full); }
}
.uma-night-stars { /* used: onboarding */
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.uma-night-moon { /* used: onboarding */
  position: absolute;
  right: var(--onb-scene-inset);
  top: var(--onb-moon-top);
  width: var(--onb-moon-size);
  height: var(--onb-moon-size);
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 var(--onb-moon-glow) rgba(var(--moon-cream-rgb), var(--opacity-moderate)));
}
.uma-day-birds { /* used: onboarding */
  position: absolute;
  left: 0;
  right: 0;
  top: var(--onb-birds-top);
  height: var(--onb-birds-height);
  pointer-events: none;
  z-index: var(--onb-z-lifted);
  overflow: hidden;
}
.uma-bird { /* used: onboarding */
  position: absolute;
  width: var(--onb-bird-width);
  height: var(--onb-bird-height);
  opacity: var(--opacity-moderate);
  left: var(--onb-bird-start);
  animation-iteration-count: var(--onb-bird-iterations, infinite);
}
.uma-bird-1 { /* used: onboarding */
  top: 18%;
  animation: uma-fly-a var(--onb-fly-a-duration) linear infinite;
  animation-iteration-count: var(--onb-bird-iterations, infinite);
}
.uma-bird-2 { /* used: onboarding */
  top: 40%;
  width: var(--onb-bird-2-width);
  animation: uma-fly-a var(--onb-fly-a-duration) linear infinite var(--onb-bird-2-delay);
  animation-iteration-count: var(--onb-bird-iterations, infinite);
}
.uma-bird-3 { /* used: onboarding */
  top: 64%;
  width: var(--onb-bird-3-width);
  animation: uma-fly-b var(--onb-fly-b-duration) linear infinite var(--onb-bird-3-delay);
  animation-iteration-count: var(--onb-bird-iterations, infinite);
}
.uma-bird-4 { /* used: onboarding */
  top: 30%;
  width: var(--onb-bird-4-width);
  animation: uma-fly-b var(--onb-fly-b-duration) linear infinite var(--onb-bird-4-delay);
  animation-iteration-count: var(--onb-bird-iterations, infinite);
}
@keyframes uma-fly-a { /* used: onboarding */
  0% { transform: translate(0, 0); }
  50% { transform: translate(60vw, -3vh); }
  100% { transform: translate(120vw, 2vh); }
}
@keyframes uma-fly-b { /* used: onboarding */
  0% { transform: translate(0, 0); }
  50% { transform: translate(60vw, 4vh); }
  100% { transform: translate(120vw, -2vh); }
}
.uma-tumbler { /* used: onboarding */
  position: relative;
  z-index: var(--onb-z-raised);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  gap: var(--gap-xxs);
  height: var(--onb-tumbler-height);
  touch-action: pan-y;
}
.uma-tumbler-frame { /* used: onboarding */
  position: absolute;
  left: 0;
  width: var(--onb-tumbler-frame-width);
  top: calc(50% - var(--field-height) / 2);
  height: var(--field-height);
  z-index: 0;
  background: var(--onb-frame-bg, var(--pure-white));
  box-shadow: none;
  pointer-events: none;
  border-radius: var(--app-default-radius-md);
}
.uma-tumbler-col { /* used: onboarding */
  height: var(--onb-tumbler-height);
  width: var(--onb-tumbler-col-width);
  overflow-x: hidden;
  overflow-y: scroll;
  touch-action: pan-y;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  position: relative;
  z-index: var(--onb-z-raised);
  color: var(--onb-tumbler-colour);
  -webkit-mask-image: var(--onb-tumbler-fade);
  mask-image: var(--onb-tumbler-fade);
}
.uma-tumbler-col::-webkit-scrollbar { display: none; } /* used: onboarding */
.uma-tumbler-pad { height: calc((var(--onb-tumbler-height) - var(--field-height)) / 2); } /* used: onboarding */
.uma-tumbler-item { /* used: onboarding */
  height: var(--field-height);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--heading-size-lg);
  font-weight: var(--font-weight-semi-bold);
  font-variant-numeric: tabular-nums;
  scroll-snap-align: center;
  opacity: var(--opacity-low);
  transition: opacity .2s, transform .2s;
}
.uma-tumbler-item-centre { /* used: onboarding */
  opacity: var(--opacity-visible);
  transform: scale(var(--onb-centre-scale));
}
.uma-tumbler-colon { /* used: onboarding */
  font-size: var(--heading-size-lg);
  font-weight: var(--font-weight-semi-bold);
  align-self: center;
  padding-bottom: var(--app-default-top-bottom-margin-xxxxs);
  position: relative;
  z-index: var(--onb-z-raised);
  color: var(--onb-tumbler-colour);
}

/* ---------- Colour, animal and country lists ---------- */
.onb-picker { /* used: onboarding */
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}
.onb-picker-grid { /* used: onboarding */
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  overflow-y: auto;
  margin-top: 0;
  margin-bottom: 0;
  scroll-padding-block: var(--gap-md);
  max-height: calc((var(--button-size-lg) + var(--gap-xs)) * var(--onb-picker-list-rows) - var(--gap-xs));
  padding-bottom: var(--app-default-top-bottom-margin-xxl);
  -webkit-mask-image: linear-gradient(to bottom, var(--pure-white) 0, var(--pure-white) calc(100% - var(--app-default-top-bottom-margin-xxl)), transparent 100%);
  mask-image: linear-gradient(to bottom, var(--pure-white) 0, var(--pure-white) calc(100% - var(--app-default-top-bottom-margin-xxl)), transparent 100%);
}
@media (max-width: 600px) {
  .onb-picker-grid { max-height: calc((var(--button-size-lg) + var(--gap-xs)) * var(--onb-picker-list-rows-mobile) - var(--gap-xs)); } /* used: onboarding */
}
.onb-picker-option { /* used: onboarding */
  gap: var(--gap-md);
  height: var(--onb-picker-option-height, var(--button-size-lg));
  flex-shrink: 0;
  padding: 0 var(--gap-lg);
  font-size: var(--body-text-sm);
}
.onb-picker-option.is-selected { /* used: onboarding */
  --onb-emoji-bg: var(--t-page-bg);
  --onb-emoji-border: var(--t-page-bg);
  --onb-dot-bg: var(--bright-white);
  --onb-dot-colour: var(--swatch-bg);
}
.onb-picker-option.is-highlighted { /* used: onboarding */
  background: var(--onb-typeahead-active-bg);
  border-color: var(--onb-typeahead-active-border);
  color: var(--onb-typeahead-active-text);
  --onb-option-label-colour: var(--onb-typeahead-active-text);
}
.onb-picker-option-colour.is-selected { /* used: onboarding */
  background: var(--swatch-bg);
  border-color: var(--swatch-bg);
  color: var(--bright-white);
  --onb-option-label-colour: var(--bright-white);
  --onb-picker-tick-display: inline-block;
}
.onb-picker-swatch { /* used: onboarding */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--picker-dot-size);
  height: var(--picker-dot-size);
  border-radius: var(--radius-circle);
  background: var(--onb-dot-bg, var(--swatch-bg));
  color: var(--onb-dot-colour, inherit);
  flex-shrink: 0;
}
.onb-picker-emoji { /* used: onboarding */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--picker-dot-size);
  height: var(--picker-dot-size);
  border-radius: var(--radius-circle);
  border: var(--stroke-thin) solid var(--onb-emoji-border, transparent);
  background: var(--onb-emoji-bg, transparent);
  font-size: var(--body-text-lg);
  line-height: var(--default-line-height-single);
  flex-shrink: 0;
}
.onb-picker-option-label { /* used: onboarding */
  flex: 1;
  color: var(--onb-option-label-colour, inherit);
}
.onb-picker-tick { /* used: onboarding */
  display: var(--onb-picker-tick-display, none);
  font-size: var(--body-text-xs);
}

/* ---------- Jobs ---------- */
.onb-role-subtitle { /* used: onboarding */
  margin: 0 0 var(--gap-lg) 0;
  color: var(--t-text-secondary);
  font-size: var(--body-text-sm);
  line-height: var(--default-line-height-small);
}
.onb-role-picker { /* used: onboarding */
  width: 100%;
  max-width: var(--max-content-width-golden-section-large);
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}
.onb-role-picker-searching { --onb-role-group-visibility: hidden; } /* used: onboarding */
.onb-role-group { /* used: onboarding */
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  visibility: var(--onb-role-group-visibility, visible);
}
.onb-role-group-hidden { display: none; } /* used: onboarding */
.onb-role-chip-row { /* used: onboarding */
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}
.onb-role-chip { /* used: onboarding */
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--gap-sm) var(--gap-lg);
  border-radius: var(--radius-pill);
  background: transparent;
  border: var(--stroke-hairline) solid var(--onb-role-chip-border);
  color: var(--onb-role-chip-text);
  transition: background var(--button-transition-duration) var(--button-transition-ease), border-color var(--button-transition-duration) var(--button-transition-ease), color var(--button-transition-duration) var(--button-transition-ease);
}
.onb-role-chip:hover { /* used: onboarding */
  background: var(--onb-role-chip-hover-bg);
  border-color: var(--onb-role-chip-hover-border);
  color: var(--onb-role-chip-hover-text);
}
.onb-role-chip-selected, /* used: onboarding */
.onb-role-chip-selected:hover { /* used: onboarding */
  background: var(--onb-role-chip-selected-bg);
  border-color: var(--onb-role-chip-selected-border);
  color: var(--onb-role-chip-selected-text);
}
.onb-role-chip-danger, /* used: onboarding */
.onb-role-chip-danger:hover { /* used: onboarding */
  background: var(--red);
  border-color: var(--red);
  color: var(--bright-white);
}
.onb-role-chip-label { /* used: onboarding */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: var(--body-text-xs);
  font-weight: var(--font-weight-medium);
  color: inherit;
  cursor: pointer;
}
.onb-role-chip-remove { /* used: onboarding */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: var(--body-text-xs);
  cursor: pointer;
  transition: transform var(--button-transition-duration) var(--button-transition-ease);
}
.onb-role-chip-remove:hover { transform: scale(var(--onb-hover-grow)); } /* used: onboarding */
.onb-role-suggestion-custom { font-weight: var(--font-weight-semi-bold); } /* used: onboarding */
.onb-continue-area-hidden { visibility: hidden; } /* used: onboarding */

/* ---------- Faster ways to answer ---------- */
.faster-page { width: 100%; } /* used: onboarding */
.faster-heading-block { /* used: onboarding */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-items: center;
}
.faster-sections { /* used: onboarding */
  display: grid;
  gap: var(--gap-lg);
  width: 100%;
  max-width: var(--max-content-width-golden-section-large);
  margin-top: var(--app-default-top-bottom-margin-sm);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 600px) {
  .faster-sections { grid-template-columns: 1fr 1fr; } /* used: onboarding */
}
@media (max-width: 599px) {
  .faster-sections { /* used: onboarding */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--gap-md);
    scrollbar-width: none;
  }
  .faster-sections::-webkit-scrollbar { display: none; } /* used: onboarding */
}
.faster-section { /* used: onboarding */
  padding: var(--gap-md) var(--gap-lg);
  border: var(--stroke-hairline) solid var(--t-border);
  border-radius: var(--app-default-radius-md);
  background: var(--t-surface);
}
@media (max-width: 599px) {
  .faster-section { /* used: onboarding */
    flex: 0 0 100%;
    scroll-snap-align: start;
    box-sizing: border-box;
    padding: var(--gap-md);
  }
}
.faster-section-head { /* used: onboarding */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  margin-bottom: var(--app-default-top-bottom-margin-sm);
}
@media (max-width: 599px) {
  .faster-section-head { margin-bottom: var(--app-default-top-bottom-margin-xs); } /* used: onboarding */
}
.faster-section-title { /* used: onboarding */
  margin: 0;
  font-size: var(--body-text-lg);
  font-weight: var(--font-weight-normal);
  color: var(--t-heading);
}
.onb-faster-tips { /* used: onboarding */
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  flex: 1;
}
.onb-faster-shortcuts { /* used: onboarding */
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}
@media (max-width: 599px) {
  .onb-faster-tips, /* used: onboarding */
  .onb-faster-shortcuts { gap: var(--gap-xs); } /* used: onboarding */
}
.onb-faster-shortcut-row { /* used: onboarding */
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  line-height: var(--default-line-height-x-large);
}
.onb-faster-key { /* used: onboarding */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--onb-faster-key-size);
  height: var(--onb-faster-key-size);
  padding: 0 var(--onb-faster-key-padding);
  border-radius: var(--radius-letter-tile);
  background: var(--onb-key-bg);
  border: var(--stroke-hairline) solid var(--onb-key-border);
  font-weight: var(--font-weight-medium);
  color: var(--onb-key-text);
  font-family: var(--onb-mono-stack);
}
.onb-faster-key-desc { color: var(--t-text-secondary); } /* used: onboarding */
.onb-faster-tip { /* used: onboarding */
  color: var(--t-text-secondary);
  line-height: var(--default-line-height-x-large);
  margin: 0;
}
@media (max-width: 599px) {
  .onb-faster-tip, /* used: onboarding */
  .onb-faster-key-desc { font-size: var(--body-text-xs); } /* used: onboarding */
}
.onb-faster-say { /* used: onboarding */
  font-style: normal;
  background: var(--onb-key-bg);
  padding: var(--onb-faster-em-padding);
  border-radius: var(--onb-faster-em-radius);
  font-family: var(--onb-mono-stack);
  color: var(--onb-key-text);
}
/* The voice switch on this card. The chrome draws its own; this one follows
   the card's colours, so it has its own classes. */
.onb-voice-switch { /* used: onboarding */
  position: relative;
  width: var(--switch-lg-width);
  height: var(--switch-lg-height);
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  --onb-voice-track-now: var(--onb-voice-track);
  --onb-voice-icon-now: var(--onb-voice-icon);
  --onb-voice-icon-left: calc(100% - var(--switch-lg-thumb) - var(--switch-thumb-inset));
  --onb-voice-thumb-left: var(--switch-thumb-inset);
}
.onb-voice-switch-on { /* used: onboarding */
  --onb-voice-track-now: var(--bright-teal);
  --onb-voice-icon-now: var(--bright-white);
  --onb-voice-icon-left: var(--onb-voice-icon-inset);
  --onb-voice-thumb-left: calc(100% - var(--switch-lg-thumb) - var(--switch-thumb-inset));
}
.onb-voice-input { /* used: onboarding */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.onb-voice-track { /* used: onboarding */
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: var(--onb-voice-track-now);
  transition: background var(--transition-base) ease;
  overflow: hidden;
}
.onb-voice-icon { /* used: onboarding */
  position: absolute;
  left: var(--onb-voice-icon-left);
  top: 50%;
  transform: translateY(-50%);
  color: var(--onb-voice-icon-now);
  z-index: var(--onb-z-voice-icon);
  pointer-events: none;
  transition: left var(--transition-plus) ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--button-icon-md);
}
.onb-voice-thumb { /* used: onboarding */
  position: absolute;
  top: var(--switch-thumb-inset);
  left: var(--onb-voice-thumb-left);
  width: var(--switch-lg-thumb);
  height: var(--switch-lg-thumb);
  border-radius: var(--radius-circle);
  background: var(--t-card-selected-bg);
  transition: left var(--transition-plus) ease;
  z-index: var(--onb-z-raised);
}
.faster-dots { /* used: onboarding */
  justify-content: center;
  width: 100%;
  margin-top: var(--app-default-top-bottom-margin-sm);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 600px) {
  .faster-dots { display: none; } /* used: onboarding */
}
.onb-swipe-dot { /* used: onboarding */
  width: var(--button-icon-md);
  height: var(--button-icon-md);
  border-radius: var(--radius-circle);
  background: transparent;
  border: var(--stroke-hairline) solid var(--onb-swipe-dot);
  position: relative;
  padding: 0;
  cursor: pointer;
}
.onb-swipe-dot::before { /* used: onboarding */
  content: "";
  position: absolute;
  inset: calc(var(--gap-md) * -1);
}
.onb-swipe-dot-current { /* used: onboarding */
  background: var(--onb-swipe-dot);
  border: none;
}

/* ---------- Welcome aboard and the membership card ---------- */
.onb-community-centred { /* used: onboarding */
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: calc(var(--onb-viewport-height) - var(--fixed-header-height) - var(--app-default-top-bottom-margin-xxl));
}
.onb-community-body { /* used: onboarding */
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-lg);
  min-height: calc(var(--onb-viewport-height) - var(--progress-and-controls-height) - var(--continue-area-height-mobile));
  align-items: flex-start;
  text-align: left;
}
@media (min-width: 600px) {
  .onb-community-body { min-height: calc(var(--onb-viewport-height) - var(--progress-and-controls-height) - var(--continue-area-height-desktop)); } /* used: onboarding */
}
.onb-community-continue-area { /* used: onboarding */
  flex: 0 0 auto;
  margin-top: auto;
}
@media (max-width: 599px) {
  .onb-community-continue-area { /* used: onboarding */
    position: sticky;
    bottom: 0;
    padding-bottom: var(--gap-lg);
    background: var(--t-page-bg);
  }
}
.onb-community-greeting-row { /* used: onboarding */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-md);
  flex-wrap: wrap;
}
.onb-waving-hand { /* used: onboarding */
  display: block;
  font-size: var(--heading-size-xxl);
  line-height: var(--default-line-height-single);
  margin-bottom: 0;
  animation: wave-animation var(--onb-wave-duration) ease-in-out var(--onb-wave-delay) 2;
  transform-origin: var(--onb-wave-pivot);
  width: fit-content;
}
.onb-community-greeting { /* used: onboarding */
  margin: 0;
  color: var(--onb-screen-text, var(--t-heading));
}
.onb-community-count { /* used: onboarding */
  margin: 0;
  color: var(--onb-community-count);
  font-size: var(--body-text-sm);
  line-height: var(--default-line-height-small);
  max-width: var(--max-content-width-golden-section-small);
}
/* On a phone the gap from UMA.css p:last-of-type is taken away, so this
   names :last-of-type too. On a wider screen that gap stays, as it did. */
@media (max-width: 599px) {
  .onb-community-count:last-of-type { margin-bottom: 0; } /* used: onboarding */
}
.onb-community-name { /* used: onboarding */
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  font-size: var(--heading-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--t-heading);
  line-height: var(--default-line-height-x-small);
}
.community-name-box { /* used: onboarding */
  display: flex;
  align-items: center;
  max-width: 100%;
  box-sizing: border-box;
  gap: var(--gap-md);
  padding: var(--gap-md) var(--gap-md) var(--gap-md) var(--gap-lg);
  background: var(--t-surface);
  border: var(--stroke-hairline) solid var(--t-border);
  border-radius: var(--app-default-radius-md);
}
.community-name-smaller { font-size: var(--body-text-sm); } /* used: onboarding */
.community-name-box-stacked { /* used: onboarding */
  flex-direction: column;
  padding: var(--gap-md);
}
.community-name-smallest { font-size: var(--body-text-xs); } /* used: onboarding */
.community-name-copy { /* used: onboarding */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--button-size-sm);
  height: var(--button-size-sm);
  border-radius: var(--radius-circle);
  border: var(--stroke-hairline) solid var(--t-border);
  background: transparent;
  color: var(--t-heading);
  font-size: var(--button-icon-sm);
  cursor: pointer;
}
.community-name-copy:hover { background: var(--t-border); } /* used: onboarding */
.membership-card-section { /* used: onboarding */
  width: 100%;
  max-width: var(--max-content-width-golden-section-small);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  container-type: inline-size;
  margin-top: calc(var(--gap-md) - var(--gap-lg));
}
.membership-card { /* used: onboarding */
  aspect-ratio: var(--membership-card-ratio);
  width: 100%;
  box-sizing: border-box;
  padding: var(--membership-card-padding);
  border: none;
  border-radius: var(--app-default-radius-lg);
  background: var(--membership-card-colour);
  color: var(--bright-white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}
.membership-card-dark-text { color: var(--navy); } /* used: onboarding */
.membership-card-logo { /* used: onboarding */
  width: var(--membership-card-logo-size);
  height: var(--membership-card-logo-size);
  fill: currentColor;
}
.membership-card-row { /* used: onboarding */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--membership-card-gap);
}
.membership-card-stack { /* used: onboarding */
  display: flex;
  flex-direction: column;
  gap: var(--membership-card-stack-gap);
}
.membership-card-field { /* used: onboarding */
  display: flex;
  flex-direction: column;
  gap: var(--membership-card-field-gap);
  min-width: 0;
}
.membership-card-field-right { /* used: onboarding */
  text-align: right;
  margin-left: auto;
  flex-shrink: 0;
}
.membership-card-label { /* used: onboarding */
  margin: 0;
  font-size: var(--membership-card-label-size);
  line-height: var(--default-line-height-single);
  opacity: var(--opacity-very-high);
  white-space: nowrap;
}
.membership-card-value { /* used: onboarding */
  margin: 0;
  font-size: var(--membership-card-value-size);
  line-height: var(--default-line-height-single);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.membership-card-wallet-buttons { /* used: onboarding */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--gap-md);
}
@container (max-width: 22.55rem) { /* used: onboarding */
  .membership-card-wallet-buttons { grid-template-columns: minmax(0, 1fr); } /* used: onboarding */
}
.membership-card-wallet-button { /* used: onboarding */
  width: 100%;
  padding: 0;
  border: none;
  cursor: pointer;
  background: var(--bright-white);
  border-radius: var(--radius-pill);
  height: var(--wallet-button-height);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.membership-card-wallet-badge { /* used: onboarding */
  display: block;
  width: auto;
  height: 100%;
}

/* ---------- Completion ---------- */
.onb-welcome-container { /* used: onboarding */
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.onb-completion { /* used: onboarding */
  text-align: center;
  max-width: var(--onb-completion-width);
  margin-inline: auto;
  justify-content: center;
  --onb-screen-min-height: calc(var(--onb-viewport-height) - var(--fixed-header-height) - var(--inner-wrapper-margin-top-desktop) - var(--app-default-top-bottom-margin-xxxxl));
  gap: var(--app-default-top-bottom-margin-sm);
}
.onb-welcome-logo { /* used: onboarding */
  width: var(--onb-uma-logo-sizing);
  height: var(--onb-uma-logo-sizing);
  aspect-ratio: 1 / 1;
  margin-bottom: var(--app-default-top-bottom-margin-lg);
  fill: var(--onb-logo-fill, var(--bright-white));
}
.onboarding-welcome-heading-h1 { /* used: onboarding */
  margin-bottom: var(--app-default-heading-bottom-margin-xxxl);
  font-size: var(--heading-size-xxl);
  font-weight: var(--font-weight-light);
}
@media (max-width: 600px) {
  .onboarding-welcome-heading-h1 { font-size: var(--heading-size-lg); } /* used: onboarding */
}
.onb-completion-heading { /* used: onboarding */
  line-height: var(--default-line-height-small);
  color: var(--onb-screen-text, var(--t-page-text));
  letter-spacing: var(--heading-letter-spacing-tight);
  margin-bottom: 0;
  font-size: var(--heading-size-xxl);
}
.onb-completion-joined { /* used: onboarding */
  margin: 0 0 var(--app-default-heading-bottom-margin-xxxl) 0;
  color: var(--onb-joined-text, var(--t-page-text));
  font-size: var(--heading-size-md);
  font-weight: var(--font-weight-light);
  line-height: var(--default-line-height-x-large);
}
/* UMA.css gives the last p a gap with p:last-of-type, so this names it too */
.onb-completion-joined:last-of-type { margin-bottom: var(--app-default-heading-bottom-margin-xxxl); } /* used: onboarding */
.onb-completion-fade-overlay { /* used: onboarding */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--mid-white);
  opacity: 0;
  pointer-events: none;
  z-index: var(--onb-z-overlay);
  transition: opacity var(--onb-overlay-fade) ease;
}
.onb-completion-fade-overlay-visible { opacity: 1; } /* used: onboarding */

/* ---------- The screen root (last, so it wins over the container classes) ---------- */
.onb-screen-active { /* used: onboarding */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: var(--onb-screen-min-height, 0);
  width: 100%;
}
@media (max-width: 599px), (pointer: coarse) {
  .onb-screen-active { flex: 1 0 auto; } /* used: onboarding */
}
.onb-screen-container { /* used: onboarding */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.onb-screen-left { align-items: flex-start; } /* used: onboarding */
.onb-completion { flex: 1; } /* used: onboarding */


/* PROFILE. The person's own profile: the card grid, each category's rows and
   edit states, the close account and Support Uma screens, and the goodbye
   screen. Page: profile (profile-css-rewrite). The page's <html> carries
   class="page-user-profile". 30 September 2026. */

/* ===== TOKENS =====
   Every new token is scoped to this page, so nothing here can reach the
   onboarding or chrome pages, which set some of the same names to their own
   values. */
:root:where(.page-user-profile) { /* used: profile */
  --opacity-muted: 0.55;
  --opacity-empty: 0.4;
  --dark-teal-rgb: 0, 101, 112;
  --eighty-twenty-large: 0.8;
  --max-body-content-width-80-20-rule-large: calc((var(--max-body-wrapper-width) - 2 * var(--default-left-right-desk-body-padding)) * var(--eighty-twenty-large));
  --opacity-soft-shadow: 0.25;
  --profile-icon-em: 1em;
  --profile-switch-thumb-shadow: 0 2px 4px var(--shadow-overlay);
  --profile-autofill-cover: 0 0 0 1000px;
  --profile-autofill-hold: 5000s;
  --profile-error-ring-gap: 4px;
  --profile-wave-duration: 1.5s;
  --profile-wave-delay: 0.5s;
  --profile-wave-pivot: 0.75em 0.9em;
  --profile-card-padding-x: 1.75rem;
  --profile-edit-btn-extra: 10px;
  --profile-input-padding-y: 0.85rem;
  --profile-pill-padding-x: 1.1rem;
  --profile-input-icon-space: 2.75rem;
  --profile-select-max-width: 12rem;
  --profile-textarea-min-height: 5rem;
  --profile-dropdown-max-height: 15rem;
  --profile-gap-tiny: 0.25rem;
  --profile-option-padding-y: 0.7rem;
  --profile-slider-height: 3.5rem;
  --profile-slider-label-inset: 4.75rem;
  --profile-hit-area: 2.75rem;
  --profile-dropdown-shadow: 0 8px 24px rgba(var(--black-rgb), var(--opacity-faint));
  --profile-range-thumb-shadow: 0 2px 8px rgba(var(--black-rgb), var(--opacity-soft-shadow));
  --profile-range-track-height: 6px;
  --profile-range-track-radius: 3px;
  --profile-range-thumb-width: 24px;
  --profile-range-thumb-height: 32px;
  --profile-quick: 0.25s;
  --profile-press: 0.15s;
  --profile-tab-fade: 0.18s;
  --profile-stage-fade: 0.4s;
  --profile-theme-fade: 0.8s;
  --profile-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z' fill='%23333'/%3E%3C/svg%3E");
  --z-profile-top: 100;
  --z-profile-dropdown: 50;
  --z-profile-raised: 2;
  --z-profile-lifted: 1;
  /* The membership card sizes. The profile reuses the onboarding section's
     membership-card classes for the logo, rows and fields, and those classes
     read these; onboarding sets them for its own page only. */
  --membership-card-ratio: 1.586 / 1;
  --membership-card-colour: var(--navy);
  --membership-card-padding: 6cqi;
  --membership-card-logo-size: 14cqi;
  --membership-card-label-size: 3.6cqi;
  --membership-card-value-size: 4.8cqi;
  --membership-card-gap: 4cqi;
  --membership-card-stack-gap: 2.5cqi;
  --membership-card-field-gap: 1cqi;
}

/* The profile's own values, light (and sunset, which is light under a warm
   filter). The two UMA values here are the ones the profile has always drawn
   with: a 1280 wrapper and the tighter 1.2 line height. */
:root:where(.page-user-profile) { /* used: profile */
  --max-body-wrapper-width: var(--max-body-content-width);
  --default-line-height-x-small: 1.2;
  --t-page-bg: var(--mid-white);
  --t-page-bg-deep: var(--dark-white);
  --t-page-text: var(--mid-charcoal);
  --t-text-secondary: var(--light-charcoal);
  --t-text-muted: var(--lightest-charcoal);
  --t-profile-empty-value: var(--mid-charcoal);
  --t-profile-farewell-heading: var(--navy);
  --t-surface: var(--pure-white);
  --t-border: var(--dark-white);
  --t-border-strong: var(--light-charcoal);
  --t-divider: var(--dark-white);
  --t-input-text: var(--mid-charcoal);
  --t-card-selected-bg: var(--pure-white);
  --t-card-selected-text: var(--navy);
  --t-profile-heading: var(--navy);
  --t-profile-label: var(--navy);
  --t-profile-share-label: var(--light-charcoal);
  --t-profile-card-bg: transparent;
  --t-profile-card-border: var(--light-charcoal);
  --t-profile-card-text: var(--mid-charcoal);
  --t-profile-card-hover-border: var(--mid-charcoal);
  --t-profile-card-active-bg: var(--hover-overlay-light);
  --t-profile-card-active-border: var(--mid-charcoal);
  --t-profile-card-title: var(--navy);
  --t-profile-card-title-opacity: var(--opacity-visible);
  --t-profile-card-arrow: var(--navy);
  --t-profile-outline-text: var(--mid-charcoal);
  --t-profile-outline-border: var(--light-charcoal);
  --t-profile-outline-hover-bg: var(--hover-overlay-light);
  --t-profile-outline-hover-text: var(--mid-charcoal);
  --t-profile-outline-hover-border: var(--mid-charcoal);
  --t-profile-cancel-hover-border: var(--mid-charcoal);
  --t-profile-edit-text: var(--mid-charcoal);
  --t-profile-edit-border: var(--light-charcoal);
  --t-profile-edit-hover-border: var(--mid-charcoal);
  --t-profile-danger-text: var(--navy);
  --t-profile-danger-border: var(--navy);
  --t-profile-danger-hover-text: var(--bright-white);
  --t-profile-pill-bg: transparent;
  --t-profile-pill-border: var(--navy);
  --t-profile-pill-text: var(--navy);
  --t-profile-pill-hover-bg: var(--hover-overlay-light);
  --t-profile-pill-hover-border: var(--navy);
  --t-profile-pill-selected-bg: var(--navy);
  --t-profile-pill-selected-border: var(--navy);
  --t-profile-pill-selected-text: var(--bright-white);
  --t-profile-pill-danger-text: var(--bright-white);
  --t-profile-switch-off: var(--mid-mushroom);
  --t-profile-tab-bg: var(--dark-white);
  --t-profile-tab-border: var(--dark-white);
  --t-profile-tab-text: var(--mid-charcoal);
  --t-profile-tab-divider: rgba(var(--black-rgb), var(--opacity-faint));
  --t-profile-tab-selected-bg: var(--navy);
  --t-profile-tab-selected-text: var(--bright-white);
  --t-profile-range-track: rgba(var(--dark-teal-rgb), var(--opacity-low));
  --t-profile-range-thumb: var(--dark-teal);
  --t-profile-range-label: var(--light-charcoal);
  --t-profile-range-value: var(--mid-charcoal);
  --t-profile-tile-bg: transparent;
  --t-profile-tile-border: var(--navy);
  --t-profile-tile-text: var(--navy);
  --t-profile-tile-selected-bg: var(--navy);
  --t-profile-tile-selected-border: var(--navy);
  --t-profile-tile-selected-text: var(--bright-white);
  --t-profile-tile-heading-selected: var(--bright-white);
  --t-profile-tile-body-selected: var(--bright-white);
  --t-profile-marker-border: var(--navy);
  --t-profile-marker-text: var(--navy);
  --t-profile-marker-selected-bg: var(--bright-white);
  --t-profile-marker-selected-text: var(--navy);
  --t-profile-slider-border: var(--light-charcoal);
  --t-profile-slider-fill: var(--dark-white);
  --t-profile-slider-label: var(--tomato);
  --t-profile-farewell-bg: var(--new-white);
}

/* Dark: every token that changes. */
:root[data-theme="dark"]:where(.page-user-profile) { /* used: profile */
  --bright-white: var(--mid-white);
  --bright-white-rgb: 242, 237, 234;
  --t-page-bg: var(--navy-60);
  --t-page-bg-deep: var(--navy-dark);
  --t-page-text: var(--bright-white);
  --t-text-secondary: rgba(var(--bright-white-rgb), var(--opacity-high));
  --t-text-muted: rgba(var(--bright-white-rgb), var(--opacity-muted));
  --t-text-empty: rgba(var(--bright-white-rgb), var(--opacity-empty));
  --t-profile-empty-value: var(--t-text-empty);
  --t-profile-farewell-heading: var(--t-input-text);
  --t-surface: rgba(var(--bright-white-rgb), var(--opacity-very-low));
  --t-border: rgba(var(--bright-white-rgb), var(--opacity-low));
  --t-border-strong: rgba(var(--bright-white-rgb), var(--opacity-moderate));
  --t-divider: rgba(var(--bright-white-rgb), var(--opacity-faint));
  --t-card-selected-bg: var(--bright-white);
  --t-profile-heading: var(--t-page-text);
  --t-profile-label: var(--t-text-secondary);
  --t-profile-share-label: var(--t-text-muted);
  --t-profile-card-bg: var(--t-surface);
  --t-profile-card-border: var(--t-border);
  --t-profile-card-text: var(--t-page-text);
  --t-profile-card-hover-border: var(--t-border-strong);
  --t-profile-card-active-bg: var(--t-card-selected-bg);
  --t-profile-card-active-border: var(--t-page-text);
  --t-profile-card-title: var(--t-page-text);
  --t-profile-card-title-opacity: var(--opacity-high);
  --t-profile-card-arrow: var(--t-page-text);
  --t-profile-outline-text: var(--pure-white);
  --t-profile-outline-border: var(--pure-white);
  --t-profile-outline-hover-bg: var(--t-card-selected-bg);
  --t-profile-outline-hover-text: var(--t-card-selected-text);
  --t-profile-outline-hover-border: var(--pure-white);
  --t-profile-cancel-hover-border: var(--t-page-text);
  --t-profile-edit-text: var(--pure-white);
  --t-profile-edit-border: var(--pure-white);
  --t-profile-edit-hover-border: var(--t-page-text);
  --t-profile-danger-text: var(--pure-white);
  --t-profile-danger-border: var(--pure-white);
  --t-profile-danger-hover-text: var(--pure-white);
  --t-profile-pill-bg: var(--t-surface);
  --t-profile-pill-border: var(--t-border);
  --t-profile-pill-text: var(--t-page-text);
  --t-profile-pill-hover-bg: transparent;
  --t-profile-pill-hover-border: var(--t-border-strong);
  --t-profile-pill-selected-bg: var(--t-card-selected-bg);
  --t-profile-pill-selected-border: var(--t-page-text);
  --t-profile-pill-selected-text: var(--t-card-selected-text);
  --t-profile-pill-danger-text: var(--t-card-selected-text);
  --t-profile-switch-off: var(--t-border);
  --t-profile-tab-bg: var(--t-surface);
  --t-profile-tab-border: var(--t-border);
  --t-profile-tab-text: var(--t-page-text);
  --t-profile-tab-divider: var(--t-border);
  --t-profile-tab-selected-bg: var(--t-card-selected-bg);
  --t-profile-tab-selected-text: var(--t-card-selected-text);
  --t-profile-range-track: var(--t-border);
  --t-profile-range-thumb: var(--t-card-selected-bg);
  --t-profile-range-label: var(--t-text-secondary);
  --t-profile-range-value: var(--t-page-text);
  --t-profile-tile-bg: var(--t-surface);
  --t-profile-tile-border: var(--t-border);
  --t-profile-tile-text: var(--t-page-text);
  --t-profile-tile-selected-bg: var(--t-card-selected-bg);
  --t-profile-tile-selected-border: var(--t-page-text);
  --t-profile-tile-selected-text: var(--t-card-selected-text);
  --t-profile-tile-heading-selected: var(--t-card-selected-text);
  --t-profile-tile-body-selected: var(--t-input-text);
  --t-profile-marker-border: var(--bright-white);
  --t-profile-marker-text: var(--bright-white);
  --t-profile-marker-selected-bg: var(--navy);
  --t-profile-marker-selected-text: var(--bright-white);
  --t-profile-slider-border: var(--t-border);
  --t-profile-slider-fill: var(--t-page-bg-deep);
  --t-profile-slider-label: var(--t-text-secondary);
  --t-profile-farewell-bg: transparent;
}

/* ===== PAGE AND OVERLAY ===== */
.uma-profile-body { margin: 0; padding: 0; background: var(--t-page-bg); overflow: auto; height: auto; min-height: 100dvh; line-height: var(--default-line-height-small); transition: background var(--profile-theme-fade) ease; } /* used: profile */
.uma-profile-body-confirmed { background: var(--new-white); } /* used: profile */
.uma-navy-root { position: fixed; inset: 0; display: block; overflow-y: scroll; min-height: 100vh; min-height: 100dvh; font-family: "Inter", sans-serif; font-weight: var(--font-weight-normal); line-height: var(--default-line-height-small); background: var(--t-page-bg); color: var(--t-page-text); opacity: var(--opacity-visible); transition: background var(--profile-theme-fade) ease, color var(--profile-theme-fade) ease; } /* used: profile */
.uma-navy-root-confirmed { background: var(--new-white); color: var(--t-input-text); height: 100%; } /* used: profile */
.uma-profile-screen { display: flex; flex-direction: column; box-sizing: border-box; width: calc(100% - var(--sidebar-width)); margin-left: var(--sidebar-width); margin-top: 0; border-top: var(--stroke-hairline) solid transparent; height: auto; min-height: calc(100vh - var(--fixed-header-height)); min-height: calc(100dvh - var(--fixed-header-height)); background: transparent; overflow: visible; } /* used: profile */
.uma-profile-screen-confirmed { height: 100%; } /* used: profile */
.uma-profile-inner-wrapper { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: var(--max-body-wrapper-width); height: 100%; margin-top: 0; margin-left: auto; margin-right: auto; padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); overflow: visible; } /* used: profile */
.uma-profile-inner-wrapper-confirmed { flex: 1; display: flex; flex-direction: column; height: 100%; } /* used: profile */

/* ===== HEADER: BACK AND CLOSE ===== */
.uma-profile-header { position: sticky; top: 0; z-index: var(--z-profile-top); width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--app-default-top-bottom-margin-xl); padding-top: var(--app-default-top-bottom-margin-xl); padding-bottom: 0; background: none; pointer-events: none; } /* used: profile */
.uma-profile-header-btn { position: relative; pointer-events: auto; background: transparent; color: var(--t-profile-outline-text); border: var(--stroke-hairline) solid var(--t-profile-outline-border); transition: background var(--transition-base); } /* used: profile */
.uma-profile-header-btn:hover { background: var(--t-profile-outline-hover-bg); color: var(--t-profile-outline-hover-text); border-color: var(--t-profile-outline-hover-border); } /* used: profile */
.uma-profile-header-btn::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100%, var(--profile-hit-area)); height: max(100%, var(--profile-hit-area)); } /* used: profile */
.uma-profile-back-btn { display: none; } /* used: profile */
.uma-profile-back-btn-visible { display: inline-flex; } /* used: profile */
.uma-profile-close-btn { display: flex; margin-left: auto; } /* used: profile */
.uma-profile-close-btn-hidden { display: none; } /* used: profile */
.uma-profile-nav-btn-icon { font-size: var(--body-text-lg); } /* used: profile */

/* ===== STAGES ===== */
.uma-profile-stage { display: none; width: 100%; transition: opacity var(--profile-stage-fade) ease; } /* used: profile */
.uma-profile-stage-active { display: block; opacity: var(--opacity-visible); } /* used: profile */
.stage-grid { padding-bottom: var(--app-default-top-bottom-margin-xxxxxl); } /* used: profile */
.uma-profile-stage-close-choice { padding-bottom: var(--app-default-top-bottom-margin-xxxxxl); } /* used: profile */
.profile-page-heading-h1 { width: 100%; margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-lg); font-size: var(--heading-size-xxl); letter-spacing: var(--heading-letter-spacing-tight); text-align: left; color: var(--t-profile-heading); } /* used: profile */
.uma-profile-close-heading { font-size: var(--heading-size-xxl); } /* used: profile */
.uma-profile-page-subheading { width: 100%; margin-bottom: var(--app-default-top-bottom-margin-xxxl); font-size: var(--body-text-lg); line-height: var(--default-line-height-small); text-align: left; color: var(--t-page-text); } /* used: profile */

/* ===== THE CARD GRID ===== */
.uma-profile-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--default-gap); width: 100%; max-width: var(--max-body-content-width-80-20-rule-large); } /* used: profile */
.uma-profile-card { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap-regular); width: 100%; padding: var(--gap-xl) var(--profile-card-padding-x); border: var(--stroke-hairline) solid var(--t-profile-card-border); border-radius: var(--app-default-radius-md); background: var(--t-profile-card-bg); color: var(--t-profile-card-text); font-family: inherit; text-align: left; cursor: pointer; transition: border-color var(--profile-quick) ease, background var(--profile-quick) ease, transform var(--profile-press) ease; } /* used: profile */
.uma-profile-card:hover { border-color: var(--t-profile-card-hover-border); background: transparent; } /* used: profile */
.uma-profile-card:active { background: var(--t-profile-card-active-bg); border-color: var(--t-profile-card-active-border); } /* used: profile */
.uma-profile-card-content { flex: 1; min-width: 0; } /* used: profile */
.uma-profile-card-title { margin-bottom: var(--app-default-top-bottom-margin-sm); font-size: var(--body-text-lg); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-x-small); color: var(--t-profile-card-title); opacity: var(--t-profile-card-title-opacity); } /* used: profile */
.uma-profile-card-summary { margin: 0; font-size: var(--body-text-sm); line-height: var(--default-line-height-x-large); color: var(--t-page-text); word-wrap: break-word; } /* used: profile */
.uma-profile-card-arrow { flex-shrink: 0; align-self: flex-start; font-size: var(--button-icon-md); line-height: var(--default-line-height-x-small); color: var(--t-profile-card-arrow); } /* used: profile */
.profile-mode-summary { display: inline-flex; align-items: center; gap: var(--gap-xs); } /* used: profile */
.profile-mode-summary-moon { display: inline-block; width: var(--profile-icon-em); height: var(--profile-icon-em); } /* used: profile */

/* ===== CLOSE ACCOUNT, UPGRADE AND DONATE BUTTONS ===== */
.profile-home-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--default-gap); width: 100%; max-width: var(--max-body-content-width-80-20-rule-large); margin-top: var(--app-default-top-bottom-margin-xxxxl); } /* used: profile */
.uma-profile-button-row { display: flex; gap: var(--default-gap); width: 100%; max-width: none; height: auto; margin-top: var(--app-default-top-bottom-margin-xxxl); } /* used: profile */
.profile-home-actions-row { grid-column: 1; margin-top: 0; } /* used: profile */
.uma-profile-button { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; align-items: center; height: var(--button-size-lg); padding-left: 0; padding-right: 0; } /* used: profile */
.uma-profile-close-account-btn { background: transparent; color: var(--t-profile-danger-text); border: var(--stroke-hairline) solid var(--t-profile-danger-border); transition: background var(--transition-base); } /* used: profile */
.uma-profile-close-account-btn:hover { background: var(--tomato); color: var(--t-profile-danger-hover-text); border-color: var(--tomato); } /* used: profile */
.uma-profile-primary-btn { background: var(--orange); color: var(--bright-white); border: none; transition: background var(--button-transition-duration) var(--button-transition-ease), border-color var(--button-transition-duration) var(--button-transition-ease), color var(--button-transition-duration) var(--button-transition-ease); } /* used: profile */
.uma-profile-primary-btn:hover { background: var(--orange-dark); } /* used: profile */
.uma-profile-primary-btn:active { background: var(--orange-dark); } /* used: profile */
.uma-profile-primary-btn:disabled { background: var(--dark-white); color: var(--t-text-secondary); border-color: transparent; cursor: not-allowed; pointer-events: none; } /* used: profile */

/* ===== A CATEGORY'S ROWS ===== */
.uma-profile-fields { display: flex; flex-direction: column; gap: var(--gap-xs); width: 100%; max-width: var(--max-content-width-golden-section-small); padding-bottom: var(--app-default-top-bottom-margin-xxxxxl); } /* used: profile */
.profile-field-group-heading-h2 { margin-top: var(--app-default-top-bottom-margin-xl); margin-bottom: var(--app-default-top-bottom-margin-xs); font-size: var(--heading-size-md); } /* used: profile */
.uma-profile-field-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--gap-regular); padding: var(--gap-lg) 0; border-bottom: var(--stroke-hairline) solid var(--t-divider); } /* used: profile */
.uma-profile-field-row:last-child { border-bottom-style: none; } /* used: profile */
.uma-profile-field-row-editing { padding: var(--gap-xl) 0; } /* used: profile */
.uma-profile-field-row-with-switch { padding: var(--gap-xs) 0; } /* used: profile */
.uma-profile-field-info { flex: 1; min-width: 0; } /* used: profile */
.uma-profile-field-label { margin-bottom: var(--app-default-top-bottom-margin-xxxs); font-size: var(--body-text-sm); line-height: var(--default-line-height-small); color: var(--t-profile-label); } /* used: profile */
.uma-profile-field-value { margin: 0; font-size: var(--body-text-sm); line-height: var(--default-line-height-small); color: var(--t-page-text); word-wrap: break-word; } /* used: profile */
.uma-profile-field-value-empty { color: var(--t-profile-empty-value); font-style: italic; } /* used: profile */
.uma-profile-colour-dot { display: inline-block; flex-shrink: 0; width: var(--gap-regular); height: var(--gap-regular); margin-right: var(--gap-xs); border: var(--stroke-hairline) solid rgba(var(--black-rgb), var(--opacity-faint)); border-radius: var(--radius-circle); background: var(--swatch-bg, var(--dark-white)); vertical-align: middle; } /* used: profile */
.uma-profile-field-edit-btn { width: calc(var(--switch-mini-width) + var(--profile-edit-btn-extra)); height: var(--button-size-xs); padding-left: var(--gap-regular); padding-right: var(--gap-regular); font-size: var(--body-text-xs); background: transparent; color: var(--t-profile-edit-text); border: var(--stroke-hairline) solid var(--t-profile-edit-border); transition: opacity var(--transition-fast) ease; } /* used: profile */
.uma-profile-field-edit-btn:hover { background: var(--t-profile-outline-hover-bg); color: var(--t-profile-outline-hover-text); border-color: var(--t-profile-edit-hover-border); } /* used: profile */
.uma-profile-field-edit-btn-hidden { display: none; } /* used: profile */
.uma-profile-field-saved-pill { display: none; flex-shrink: 0; align-items: center; justify-content: center; gap: var(--gap-xs); height: var(--button-size-md); padding: 0 var(--gap-regular); border-radius: var(--radius-pill); background: var(--bright-green); color: var(--bright-white); font-size: var(--body-text-sm); } /* used: profile */
.uma-profile-saved-pill-on-save { display: inline-flex; } /* used: profile */
.uma-profile-edit-btn-on-save { display: none; } /* used: profile */
.uma-profile-field-hidden-on-edit { display: none; } /* used: profile */

/* The share switch under a row */
.uma-profile-share-row { display: flex; align-items: center; justify-content: flex-end; gap: var(--gap-xs); width: 100%; margin-top: var(--app-default-top-bottom-margin-xxxs); } /* used: profile */
.uma-profile-share-label { font-size: var(--body-text-xs); white-space: nowrap; color: var(--t-profile-share-label); } /* used: profile */
.uma-profile-share-hidden-on-edit { display: none; } /* used: profile */
.uma-profile-switch-track { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-pill); background: var(--t-profile-switch-off); transition: background var(--transition-base) ease; } /* used: profile */
.uma-profile-switch-track-on { background: var(--bright-teal); } /* used: profile */
.uma-profile-switch-thumb { position: absolute; top: var(--switch-thumb-inset); left: var(--switch-thumb-inset); z-index: var(--z-profile-raised); width: var(--switch-mini-thumb); height: var(--switch-mini-thumb); border-radius: var(--radius-circle); background: var(--bright-white); box-shadow: var(--profile-switch-thumb-shadow); transition: left var(--profile-quick) ease; } /* used: profile */
.uma-profile-switch-thumb-on { left: calc(100% - var(--switch-mini-thumb) - var(--switch-thumb-inset)); } /* used: profile */

/* The two tab bars: Autism and ADHD, and the three colour modes */
.uma-profile-tab-bar { display: flex; width: 100%; max-width: var(--max-content-width-golden-section-small); height: var(--button-size-lg); margin-bottom: var(--app-default-top-bottom-margin-lg); overflow: hidden; border: var(--stroke-thin) solid var(--t-profile-tab-border); border-radius: var(--app-default-radius-md); background: var(--t-profile-tab-bg); } /* used: profile */
.uma-profile-tab-segment { flex: 1 1 0; padding: 0 var(--gap-xs); border: 0; background: transparent; color: var(--t-profile-tab-text); font-family: inherit; font-size: var(--body-text-sm); font-weight: var(--font-weight-normal); text-align: center; cursor: pointer; transition: background var(--profile-tab-fade), color var(--profile-tab-fade); } /* used: profile */
.uma-profile-tab-segment:first-child { border-right: var(--stroke-thin) solid var(--t-profile-tab-divider); } /* used: profile */
.uma-profile-tab-segment-selected { background: var(--t-profile-tab-selected-bg); color: var(--t-profile-tab-selected-text); } /* used: profile */
.mode-tab-bar { display: flex; flex: 0 0 auto; width: auto; max-width: var(--max-content-width-golden-section-small); height: auto; margin-bottom: 0; overflow: hidden; border: var(--stroke-thin) solid var(--t-profile-tab-border); border-radius: var(--app-default-radius-md); background: var(--t-profile-tab-bg); } /* used: profile */
.mode-tab-segment { display: flex; flex: 0 0 var(--button-size-lg); align-items: center; justify-content: center; width: var(--button-size-lg); height: var(--button-size-lg); padding: 0; border: 0; background: transparent; color: var(--t-profile-tab-text); font-family: inherit; font-size: var(--button-icon-lg); font-weight: var(--font-weight-normal); text-align: center; cursor: pointer; transition: background var(--profile-tab-fade), color var(--profile-tab-fade); } /* used: profile */
.mode-tab-segment:not(:last-child) { border-right: var(--stroke-thin) solid var(--t-profile-tab-divider); } /* used: profile */
.mode-tab-segment-selected { background: var(--t-profile-tab-selected-bg); color: var(--t-profile-tab-selected-text); } /* used: profile */

/* ===== EDITING A ROW ===== */
.uma-profile-field-edit-zone { display: none; flex-direction: column; gap: var(--gap-regular); width: 100%; } /* used: profile */
.uma-profile-edit-zone-on-edit { display: flex; } /* used: profile */
.uma-profile-edit-label { margin: 0; font-size: var(--body-text-sm); line-height: var(--default-line-height-small); color: var(--t-profile-label); } /* used: profile */
.uma-profile-edit-input { width: 100%; max-width: var(--max-content-width-golden-section-small); padding: var(--profile-input-padding-y) var(--gap-regular); border: none; border-radius: var(--app-default-radius-md); outline: none; background: var(--t-card-selected-bg); color: var(--t-input-text); font-family: inherit; font-size: var(--body-text-sm); transition: box-shadow var(--transition-fast) ease; } /* used: profile */
.uma-profile-edit-input::placeholder { color: var(--t-text-muted); } /* used: profile */
.uma-profile-edit-input:-webkit-autofill { -webkit-box-shadow: var(--profile-autofill-cover) var(--t-card-selected-bg) inset; -webkit-text-fill-color: var(--t-input-text); caret-color: var(--t-input-text); transition: background-color var(--profile-autofill-hold) ease-in-out 0s; } /* used: profile */
.uma-profile-edit-input-time { width: auto; min-width: var(--app-default-top-bottom-margin-xxxxxl); min-height: var(--button-size-lg); } /* used: profile */
.uma-profile-edit-input-number { width: auto; min-width: var(--app-default-top-bottom-margin-xxxxxl); } /* used: profile */
.uma-profile-edit-textarea { min-height: var(--profile-textarea-min-height); resize: vertical; line-height: var(--default-line-height-small); } /* used: profile */
.uma-profile-edit-select { appearance: none; width: auto; max-width: var(--profile-select-max-width); padding-right: var(--profile-input-icon-space); background-image: var(--profile-select-chevron); background-repeat: no-repeat; background-position: right var(--gap-regular) center; cursor: pointer; } /* used: profile */
.uma-profile-edit-select-row { display: flex; align-items: center; gap: var(--gap-sm); } /* used: profile */
.uma-profile-edit-input-wrap { position: relative; display: flex; align-items: stretch; width: 100%; } /* used: profile */
.profile-self-describe-field { margin-top: var(--app-default-top-bottom-margin-sm); } /* used: profile */
.profile-self-describe-field[hidden] { display: none; } /* used: profile */
.uma-profile-edit-invalid-icon { position: absolute; top: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: center; width: var(--profile-input-icon-space); padding: 0; border: none; border-top-right-radius: var(--app-default-radius-md); border-bottom-right-radius: var(--app-default-radius-md); background-color: var(--error); color: var(--bright-white); cursor: pointer; transition: background-color var(--transition-fast) ease; } /* used: profile */
.uma-profile-edit-invalid-icon:hover { background-color: var(--red-dark); } /* used: profile */
.uma-profile-edit-invalid-glyph { font-size: var(--button-icon-lg); } /* used: profile */
.uma-profile-edit-error { display: none; margin-top: var(--app-default-top-bottom-margin-xxxxs); font-size: var(--body-text-xs); color: var(--error); } /* used: profile */

/* A row that fails its check. The script puts these four on the parts of the
   row whenever the row is marked as in error, and takes them off again. Her
   design from profile.html, tokenised. */
.uma-profile-invalid-icon-on-error { display: flex; } /* used: profile */
.uma-profile-error-on-error { display: block; } /* used: profile */
.uma-profile-input-on-error { box-shadow: inset 0 0 0 var(--stroke-hairline) var(--tomato); } /* used: profile */
.uma-profile-options-on-error { outline: var(--stroke-hairline) solid var(--tomato); outline-offset: var(--profile-error-ring-gap); border-radius: var(--app-default-radius-md); } /* used: profile */
.uma-profile-edit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); width: fit-content; height: auto; margin-top: var(--app-default-top-bottom-margin-xxs); } /* used: profile */
.uma-profile-edit-actions-hidden { display: none; } /* used: profile */
.uma-profile-btn-cancel { background: transparent; color: var(--t-profile-outline-text); border: var(--stroke-hairline) solid var(--t-profile-outline-border); transition: background var(--transition-base); } /* used: profile */
.uma-profile-btn-cancel:hover { background: var(--t-profile-outline-hover-bg); color: var(--t-profile-outline-hover-text); border-color: var(--t-profile-cancel-hover-border); } /* used: profile */

/* Answer pills, and the chosen job titles with their bin */
.uma-profile-edit-options { display: flex; flex-wrap: wrap; gap: var(--gap-xs); } /* used: profile */
.uma-profile-opt-pill { display: inline-flex; align-items: center; justify-content: center; height: var(--button-size-md); padding: 0 var(--profile-pill-padding-x); border: var(--stroke-hairline) solid var(--t-profile-pill-border); border-radius: var(--radius-pill); background: var(--t-profile-pill-bg); color: var(--t-profile-pill-text); font-family: inherit; font-size: var(--body-text-sm); transition: border-color var(--button-transition-duration) var(--button-transition-ease), background var(--button-transition-duration) var(--button-transition-ease), color var(--button-transition-duration) var(--button-transition-ease); } /* used: profile */
.uma-profile-opt-pill:hover { background: var(--t-profile-pill-hover-bg); border-color: var(--t-profile-pill-hover-border); } /* used: profile */
.uma-profile-opt-pill-selected, .uma-profile-opt-pill-selected:hover { background: var(--t-profile-pill-selected-bg); color: var(--t-profile-pill-selected-text); border-color: var(--t-profile-pill-selected-border); } /* used: profile */
.uma-profile-opt-pill-danger, .uma-profile-opt-pill-danger:hover { background: var(--tomato); color: var(--t-profile-pill-danger-text); border-color: var(--tomato); } /* used: profile */
.uma-profile-role-remove { display: none; align-items: center; margin-left: var(--profile-gap-tiny); padding: 0; border: none; background: transparent; color: var(--bright-white); font-size: var(--body-text-sm); cursor: pointer; } /* used: profile */
.uma-profile-role-remove-shown { display: inline-flex; } /* used: profile */

/* Search boxes: colour, animal and job title */
.uma-profile-roles-wrap { width: 100%; } /* used: profile */
.uma-profile-role-search-wrap { position: relative; margin-top: var(--app-default-top-bottom-margin-sm); margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: profile */
.uma-profile-search-input { padding-right: var(--profile-input-icon-space); } /* used: profile */
.uma-profile-colour-search-input { padding-left: var(--app-default-top-bottom-margin-xxl); padding-right: var(--profile-input-icon-space); } /* used: profile */
.uma-profile-search-icon { position: absolute; top: 0; right: var(--gap-regular); display: flex; align-items: center; height: var(--field-height); color: var(--t-text-muted); pointer-events: none; } /* used: profile */
.uma-profile-search-preview-dot { position: absolute; top: 50%; left: var(--gap-regular); z-index: var(--z-profile-raised); transform: translateY(-50%); } /* used: profile */
.uma-profile-search-preview-dot-hidden { display: none; } /* used: profile */
.uma-profile-role-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-profile-dropdown); display: none; max-height: var(--profile-dropdown-max-height); margin-top: var(--profile-gap-tiny); overflow-y: auto; border: var(--stroke-hairline) solid var(--t-border); border-radius: var(--app-default-radius-md); background: var(--t-card-selected-bg); box-shadow: var(--profile-dropdown-shadow); } /* used: profile */
.uma-profile-role-dropdown-open { display: block; } /* used: profile */
.uma-profile-role-option { padding: var(--profile-option-padding-y) var(--gap-regular); font-size: var(--body-text-sm); color: var(--t-input-text); cursor: pointer; } /* used: profile */
.uma-profile-role-option:hover { background: var(--hover-overlay-light); } /* used: profile */
.uma-profile-role-option-highlighted { background: var(--hover-overlay-light); } /* used: profile */
.uma-profile-role-custom { color: var(--navy); font-weight: var(--font-weight-medium); } /* used: profile */

/* The sliders for water, caffeine, alcohol and the cycle */
.profile-range-group { width: 100%; max-width: var(--max-content-width-golden-section-small); margin-top: 0; } /* used: profile */
.profile-range-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-md); margin-bottom: var(--app-default-top-bottom-margin-xxxs); font-size: var(--body-text-sm); font-weight: var(--font-weight-normal); color: var(--t-profile-range-label); } /* used: profile */
.profile-range-label-spaced { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-md); margin-top: var(--app-default-top-bottom-margin-lg); margin-bottom: var(--app-default-top-bottom-margin-xxxs); font-size: var(--body-text-sm); font-weight: var(--font-weight-normal); color: var(--t-profile-range-label); } /* used: profile */
.profile-range-value { font-size: var(--body-text-sm); font-weight: var(--font-weight-normal); color: var(--t-profile-range-value); } /* used: profile */
.profile-range { appearance: none; width: 100%; max-width: var(--max-content-width-golden-section-small); height: var(--profile-range-track-height); margin: 0; outline: none; border-radius: var(--profile-range-track-radius); background: var(--t-profile-range-track); } /* used: profile */
.profile-range::-webkit-slider-thumb { -webkit-appearance: none; width: var(--profile-range-thumb-width); height: var(--profile-range-thumb-height); border: none; border-radius: var(--radius-square-letter); background: var(--t-profile-range-thumb); box-shadow: var(--profile-range-thumb-shadow); cursor: grab; } /* used: profile */
.profile-range::-webkit-slider-thumb:active { cursor: grabbing; } /* used: profile */
.profile-range::-moz-range-thumb { width: var(--profile-range-thumb-width); height: var(--profile-range-thumb-height); border: none; border-radius: var(--radius-square-letter); background: var(--t-profile-range-thumb); box-shadow: var(--profile-range-thumb-shadow); cursor: grab; } /* used: profile */

/* ===== MEMBERSHIP CARD =====
   The logo, the rows, the fields and the wallet button grid use the
   onboarding section's membership-card classes, which are the same. Only the
   parts the profile draws differently have their own classes here. */
.profile-membership-card-section { display: flex; flex-direction: column; gap: var(--gap-md); width: 100%; max-width: var(--max-content-width-golden-section-small); container-type: inline-size; } /* used: profile */
.membership-card-above-heading { margin-bottom: var(--app-default-top-bottom-margin-xxxl); } /* used: profile */
.profile-membership-card { display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; width: 100%; aspect-ratio: var(--membership-card-ratio); padding: var(--membership-card-padding); border: var(--stroke-hairline) solid var(--t-border); border-radius: var(--app-default-radius-lg); background: var(--membership-card-colour); color: var(--bright-white); text-align: left; } /* used: profile */
.profile-membership-card-dark-text { color: var(--navy); } /* used: profile */
.profile-wallet-button { display: block; width: 100%; padding: 0; border: none; background: transparent; cursor: pointer; } /* used: profile */
.profile-wallet-badge { display: block; width: 100%; height: auto; } /* used: profile */

/* ===== CLOSE ACCOUNT AND SUPPORT UMA TILES ===== */
.uma-profile-close-choices { display: flex; flex-direction: column; align-items: stretch; gap: var(--default-gap); width: 100%; max-width: var(--golden-width-small); } /* used: profile */
.donate-choices { display: flex; flex-direction: column; align-items: stretch; gap: var(--default-gap); width: 100%; max-width: var(--golden-width-small); } /* used: profile */
.uma-profile-close-choice, .donate-tile { appearance: none; box-sizing: border-box; display: flex; flex-direction: row; align-items: flex-start; gap: var(--app-default-top-bottom-margin-md); min-width: 0; height: 100%; padding: var(--app-default-top-bottom-margin-lg) calc(var(--app-default-top-bottom-margin-lg) + var(--marker-size) + var(--app-default-top-bottom-margin-md)) var(--app-default-top-bottom-margin-md) var(--app-default-top-bottom-margin-lg); border: var(--stroke-hairline) solid var(--t-profile-tile-border); border-radius: var(--app-default-radius-md); background: var(--t-profile-tile-bg); color: var(--t-profile-tile-text); font-family: inherit; text-align: left; cursor: pointer; transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease; } /* used: profile */
.uma-profile-close-choice-selected, .donate-tile-selected { background: var(--t-profile-tile-selected-bg); border-color: var(--t-profile-tile-selected-border); color: var(--t-profile-tile-selected-text); } /* used: profile */
.uma-profile-close-choice-content, .donate-tile-content { flex: 1; min-width: 0; } /* used: profile */
.account-closure-choice-heading-h2 { margin: 0 0 var(--app-default-top-bottom-margin-sm) 0; font-size: var(--heading-size-md); line-height: var(--default-line-height-small); text-align: left; } /* used: profile */
.account-closure-choice-heading-selected { color: var(--t-profile-tile-heading-selected); } /* used: profile */
.uma-profile-close-choice-body { margin: 0; font-size: var(--body-text-sm); line-height: var(--default-line-height-small); text-wrap: pretty; color: var(--t-page-text); } /* used: profile */
.uma-profile-close-choice-body-selected { color: var(--t-profile-tile-body-selected); } /* used: profile */
.uma-profile-choice-marker { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--marker-size); height: var(--marker-size); border: var(--stroke-hairline) solid var(--t-profile-marker-border); border-radius: var(--radius-square-letter); background: transparent; color: var(--t-profile-marker-text); font-size: var(--marker-font-size); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-single); text-transform: uppercase; } /* used: profile */
.uma-profile-choice-marker-selected { background: var(--t-profile-marker-selected-bg); border-color: var(--t-profile-marker-selected-bg); color: var(--t-profile-marker-selected-text); } /* used: profile */
.uma-profile-choice-marker-letter-hidden { display: none; } /* used: profile */
.uma-profile-choice-marker-tick { display: none; font-size: var(--body-text-lg); } /* used: profile */
.uma-profile-choice-marker-tick-shown { display: inline-block; } /* used: profile */
.donate-heart-emoji { margin: 0 0 var(--app-default-top-bottom-margin-sm) 0; font-size: var(--heading-size-xxxl); line-height: var(--default-line-height-single); text-align: left; } /* used: profile */

/* The £90 tile's session choice */
.donate-party-time { position: relative; display: block; width: 100%; margin-top: var(--app-default-top-bottom-margin-sm); } /* used: profile */
.donate-party-time-select { appearance: none; box-sizing: border-box; width: 100%; max-width: 100%; height: var(--button-size-lg); padding: 0 var(--app-default-top-bottom-margin-xxl) 0 var(--app-default-top-bottom-margin-sm); border: none; border-radius: var(--app-default-radius-md); background: var(--t-card-selected-bg); color: var(--t-input-text); font-family: inherit; font-size: var(--body-text-sm); cursor: pointer; } /* used: profile */
.donate-party-time-caret { position: absolute; top: 50%; right: var(--app-default-top-bottom-margin-sm); transform: translateY(-50%); font-size: var(--body-text-sm); line-height: var(--default-line-height-single); color: var(--t-input-text); pointer-events: none; } /* used: profile */

/* The typed amount and its Donate button */
.donate-other-amount { display: flex; flex-direction: column; gap: var(--app-default-top-bottom-margin-sm); width: 100%; } /* used: profile */
.donate-other-amount[hidden] { display: none; } /* used: profile */
/* A donation that could not start. The words are the UMA.css field-error-message; this only spans the tiles. */
.donate-error { grid-column: 1 / -1; } /* used: profile */
.donate-submit { flex: none; display: flex; justify-content: center; align-items: center; min-width: 0; height: var(--button-size-lg); padding-left: 0; padding-right: 0; } /* used: profile */

/* The launch party panel */
.donate-launch-party-panel { grid-column: 1 / -1; box-sizing: border-box; width: 100%; max-width: none; margin-top: var(--app-default-top-bottom-margin-xxxl); padding: var(--app-default-top-bottom-margin-xxxl) var(--app-default-top-bottom-margin-xxl); border-radius: var(--app-default-radius-md); background: var(--t-border); } /* used: profile */
.donate-launch-party-title { margin: 0 0 var(--app-default-top-bottom-margin-sm) 0; font-size: var(--heading-size-sm); line-height: var(--default-line-height-small); text-align: center; color: var(--t-page-text); } /* used: profile */
.donate-launch-party-note { box-sizing: border-box; margin: 0; padding: 0; font-size: var(--body-text-xl); line-height: var(--default-line-height-large); text-align: center; text-wrap: pretty; color: var(--t-page-text); } /* used: profile */

/* ===== THE SLIDE TO CLOSE ===== */
.uma-profile-slider { position: relative; box-sizing: border-box; display: flex; align-items: center; width: 100%; height: var(--profile-slider-height); margin-top: var(--app-default-top-bottom-margin-xl); margin-bottom: var(--app-default-top-bottom-margin-xxxxl); overflow: hidden; border: var(--stroke-hairline) solid var(--t-profile-slider-border); border-radius: var(--radius-pill); background: transparent; user-select: none; touch-action: pan-y; } /* used: profile */
.uma-profile-slider-complete { background: var(--bright-green); border-color: var(--bright-green); } /* used: profile */
.uma-profile-slider-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--t-profile-slider-fill); pointer-events: none; transition: width var(--transition-fast) ease-out; } /* used: profile */
.uma-profile-slider-fill-dragging { transition: none; } /* used: profile */
.uma-profile-slider-fill-complete { background: var(--bright-green); } /* used: profile */
.uma-profile-slider-handle { position: absolute; top: 0; left: 0; z-index: var(--z-profile-raised); display: flex; align-items: center; justify-content: center; width: auto; height: calc(100% - (2 * var(--app-default-top-bottom-margin-xxxxs))); aspect-ratio: 1 / 1; margin: var(--app-default-top-bottom-margin-xxxxs); border-radius: var(--radius-circle); background: var(--tomato); color: var(--bright-white); cursor: grab; transition: left var(--transition-fast) ease-out; } /* used: profile */
.uma-profile-slider-handle-dragging { cursor: grabbing; transition: none; } /* used: profile */
.uma-profile-slider-handle-complete { background: var(--bright-white); color: var(--bright-green); } /* used: profile */
.uma-profile-slider-handle-icon { font-size: var(--button-icon-md); } /* used: profile */
.uma-profile-slider-label { z-index: var(--z-profile-lifted); width: 100%; padding: 0 var(--gap-regular) 0 var(--profile-slider-label-inset); font-size: var(--body-text-lg); font-style: italic; line-height: var(--default-line-height-small); text-align: left; color: var(--t-profile-slider-label); pointer-events: none; transition: opacity var(--transition-fast) linear; } /* used: profile */
.uma-profile-slider-label-hidden { opacity: 0; } /* used: profile */
.uma-profile-slider-label-complete { padding-left: var(--app-default-top-bottom-margin-xl); padding-right: var(--profile-slider-label-inset); color: var(--bright-white); font-style: normal; font-weight: var(--font-weight-medium); opacity: var(--opacity-visible); } /* used: profile */

/* ===== THE GOODBYE SCREEN ===== */
.uma-profile-farewell-centred { position: fixed; inset: 0; z-index: var(--z-profile-top); display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; max-width: none; padding: var(--app-default-top-bottom-margin-xl) var(--default-left-right-mob-body-padding); background: var(--t-profile-farewell-bg); } /* used: profile */
.uma-profile-farewell-wave { display: block; width: 100%; max-width: var(--max-content-width-golden-section-large); margin-bottom: var(--app-default-top-bottom-margin-md); font-size: var(--heading-size-xxxl); line-height: var(--default-line-height-single); transform-origin: var(--profile-wave-pivot); animation: wave-animation var(--profile-wave-duration) ease-in-out var(--profile-wave-delay) 2; } /* used: profile */
:root[data-motion="still"] .uma-profile-farewell-wave { animation: none; } /* used: profile */
.uma-profile-farewell-heading { width: 100%; max-width: var(--max-content-width-golden-section-large); color: var(--t-profile-farewell-heading); } /* used: profile */
.uma-profile-farewell-detail { display: block; width: 100%; max-width: var(--max-content-width-golden-section-large); margin-top: var(--app-default-top-bottom-margin-lg); font-size: var(--body-text-lg); line-height: var(--default-line-height-large); color: var(--t-input-text); } /* used: profile */
.uma-profile-farewell-thanks { width: 100%; max-width: var(--max-content-width-golden-section-large); margin-top: var(--app-default-top-bottom-margin-md); margin-bottom: 0; font-size: var(--body-text-lg); line-height: var(--default-line-height-large); color: var(--t-input-text); } /* used: profile */
.uma-profile-farewell-feedback { width: 100%; max-width: var(--max-content-width-golden-section-large); margin-top: var(--app-default-top-bottom-margin-md); margin-bottom: 0; font-size: var(--body-text-lg); line-height: var(--default-line-height-small); color: var(--t-input-text); cursor: pointer; } /* used: profile */
.uma-profile-farewell-close { width: 100%; max-width: var(--max-content-width-golden-section-large); margin-top: var(--app-default-top-bottom-margin-xxl); margin-bottom: 0; font-size: var(--body-text-sm); line-height: var(--default-line-height-small); color: var(--t-text-secondary); } /* used: profile */

/* ===== WIDTHS ===== */
@media (min-width: 600px) {
  .uma-profile-farewell-centred { padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); } /* used: profile */
  .donate-choices { display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; max-width: none; } /* used: profile */
  .donate-tile { flex-direction: column; align-items: flex-start; min-height: fit-content; padding-right: var(--app-default-top-bottom-margin-lg); padding-bottom: var(--app-default-top-bottom-margin-lg); } /* used: profile */
  .donate-tile-content { width: 100%; } /* used: profile */
  .donate-other-amount { grid-column: 2; } /* used: profile */
  .donate-launch-party-panel { padding-left: var(--app-default-top-bottom-margin-xxxxl); padding-right: var(--app-default-top-bottom-margin-xxxxl); } /* used: profile */
}
@media (min-width: 600px) and (max-width: 819px) {
  .donate-choices { display: flex; flex-direction: column; align-items: stretch; } /* used: profile */
  .donate-tile { flex-direction: row; align-items: flex-start; } /* used: profile */
}
@media (min-width: 950px) {
  .uma-profile-close-choices { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; max-width: var(--golden-width-large); } /* used: profile */
  .uma-profile-slider { grid-column: 1; } /* used: profile */
}
@media (min-width: 1110px) {
  .donate-choices { grid-template-columns: repeat(4, 1fr); } /* used: profile */
  .donate-other-amount { grid-column: 4; } /* used: profile */
}
@media (max-width: 900px) {
  .uma-profile-header { margin-bottom: var(--app-default-top-bottom-margin-xxxl); } /* used: profile */
  .uma-profile-stage { padding-top: var(--app-default-top-bottom-margin-xxxl); } /* used: profile */
  .uma-profile-card-grid { grid-template-columns: 1fr; } /* used: profile */
  .profile-home-actions { grid-template-columns: 1fr; } /* used: profile */
}
@media (max-width: 600px) {
  .uma-profile-screen { margin-left: 0; width: 100%; } /* used: profile */
  .uma-profile-inner-wrapper { max-width: 100%; padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); padding-bottom: var(--app-default-top-bottom-margin-xxxxl); } /* used: profile */
  .uma-profile-header { margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: profile */
  .uma-profile-stage { padding-top: 0; } /* used: profile */
  .profile-page-heading-h1 { font-size: var(--heading-size-xl); } /* used: profile */
  .uma-profile-close-heading { font-size: var(--heading-size-lg); } /* used: profile */
  .uma-profile-page-subheading { margin-bottom: var(--app-default-top-bottom-margin-xxl); font-size: var(--body-text-sm); } /* used: profile */
  .uma-profile-button-row { flex-direction: column; gap: var(--app-default-top-bottom-margin-sm); } /* used: profile */
  .uma-profile-button { flex: none; width: 100%; } /* used: profile */
  .donate-submit { width: 100%; } /* used: profile */
  .uma-profile-tab-bar { height: var(--button-size-md); } /* used: profile */
  .uma-profile-tab-segment { font-size: var(--body-text-xs); } /* used: profile */
  .mode-tab-segment { flex-basis: var(--button-size-md); width: var(--button-size-md); height: var(--button-size-md); } /* used: profile */
  .uma-profile-slider-label { font-size: var(--body-text-sm); } /* used: profile */
}

/* Last on purpose: the goodbye screen hides the header, the two cards and the
   slider with this class, and it has to win over the grid the cards take on a
   wide screen above. */
.uma-profile-farewell-hidden { display: none; } /* used: profile */


/* ==========================================================================
   NEW STYLES: challenges-canvases-atw, 30 Sep 2026, for: /adhd-challenges, /autism-challenges, /cptsd-challenges, /masking-challenges, /rsd-challenges, /adhd-strengths, /autism-strengths, /adhd-strategies, /autism-strategies, /burnout-depression-strategies, /nervous-system-strategies, /hormonal-balance-strategies, /access-to-work-assistant, /access-to-work-assistant-front, /sensory-needs-canvas, /how-to-work-with-me-canvas, /job-crafting-canvas, /sensory-needs-canvas-front, /how-to-work-with-me-canvas-front, /job-crafting-canvas-front, /working-with-audhd

   Every one of these pages carries page-support-tools on <html>, except the
   three canvases, which carry page-canvas. Tokens are scoped to these with
   :where(), which adds no weight. Every other selector is
   one class of these pages. Where one of these pages looks different from a
   shared UMA.css class, the page has its own plain-word class for it, so the
   shared class is left as it is. States the page script switches (is-open,
   is-closed, selected) are written as two classes, the way UMA.css writes
   .switch--calm.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root:where(.page-support-tools) { /* used: challenges-canvases-atw */
  /* sizes the Working with AuDHD hero shares with the home page */
  --heading-size-xxxxl: 3.5rem;
  --button-size-video-control: 2.1875rem;
  --icon-play-disc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m20,0C8.95,0,0,8.95,0,20s8.95,20,20,20,20-8.95,20-20S31.05,0,20,0Zm8.24,21.05l-11.18,6.84c-.38.23-.86.24-1.26.02-.39-.22-.63-.63-.63-1.07v-13.68c0-.45.24-.86.63-1.07.39-.22.87-.21,1.26.02l11.18,6.84c.37.22.59.62.59,1.05,0,.43-.22.83-.59,1.05Z'/></svg>");
  --icon-pause-disc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m20,0C8.95,0,0,8.95,0,20s8.95,20,20,20,20-8.95,20-20S31.05,0,20,0Zm-1.24,26.21c0,.69-.56,1.24-1.24,1.24h-3.1c-.69,0-1.24-.56-1.24-1.24v-12.41c0-.69.56-1.24,1.24-1.24h3.1c.69,0,1.24.56,1.24,1.24v12.41Zm8.07,0c0,.69-.56,1.24-1.24,1.24h-3.1c-.69,0-1.24-.56-1.24-1.24v-12.41c0-.69.56-1.24,1.24-1.24h3.1c.69,0,1.24.56,1.24,1.24v12.41Z'/></svg>");
  /* theme, light */
  --t-band: var(--bright-white);
  --t-surface: var(--bright-white);
  --t-work-tile: var(--light-white);
  --t-work-check: var(--bright-green);
  --t-work-split: var(--mid-white);
  --t-drawer-bg: var(--bright-white);
  --t-drawer-body-bg: var(--bright-white);
  --t-drawer-below-bg: var(--mid-white);
  --t-drawer-secondary-text: var(--t-text-secondary);
  --t-drawer-close-icon: var(--mid-charcoal);
  --t-drawer-desc: var(--mid-charcoal);
  --t-drawer-tag-bg: var(--dark-white);
  --t-drawer-tag-text: var(--mid-charcoal);
  --t-drawer-pill-text: var(--mid-charcoal);
  --t-drawer-on-orange: var(--mid-white);
  --t-drawer-stat-name: var(--light-charcoal);
  --t-drawer-stat-figure: var(--dark-charcoal);
  --t-drawer-star: var(--yellow);
  --t-drawer-outline: var(--navy);
  --t-adjustment-plus-disc: var(--dark-white);
  --t-adjustment-plus-icon: var(--mid-charcoal);
  --t-adjustment-plus-icon-hover: var(--dark-charcoal);
  --t-work-quiet-text: var(--light-charcoal);
  --t-work-title-text: var(--mid-charcoal);
  --t-adjustment-pill-text: var(--t-page-text, var(--mid-charcoal));
  --t-adjustment-pill-bg: var(--t-divider, var(--dark-white));
  --t-card-rgb: 242, 237, 234;
  --t-switch-off: rgba(var(--bright-white-rgb), var(--opacity-low));
  --t-egg-edge: var(--dark-white);
  --t-footer-text: var(--t-page-text);
  --t-footer-link: var(--orange);
  --t-footnote-text: var(--t-page-text);
  --t-key-label: var(--t-page-text);
  --t-key-label-words: var(--t-key-label);
  --t-dark-plus-ring: rgba(var(--bright-white-rgb), var(--opacity-soft));
  --t-card-back-text: var(--t-page-text);
  --t-intervention-left: var(--mid-white);
  --t-intervention-gutter: var(--mid-white);
  --t-intervention-stacked: var(--mid-white);
  --t-intervention-title: var(--navy);
  --t-references-button: var(--dark-charcoal);
  --t-references-button-hover: var(--orange);
  --t-footnote: var(--light-charcoal);
  --t-title-card-bg: var(--navy);
  --t-title-card-text: var(--text-on-colour);
  --t-round-button-disc: var(--dark-white);
  --t-round-button-icon: var(--mid-charcoal);
  --t-card-plus-icon: var(--bright-white);
  --t-flip-card-bg: var(--t-card);
  --t-filter-selected-text: var(--text-on-colour);
  --t-helps-pill-bg: var(--t-divider);
  --t-helps-pill-text: var(--t-page-text);
  --t-outline-pill-text: var(--navy);
  --t-outline-pill-edge: var(--navy);
  --t-outline-pill-hover-bg: var(--hover-overlay-dark);
  --t-outline-pill-hover-text: var(--navy-dark);
  --t-outline-pill-hover-edge: var(--navy-dark);
  --t-navy-pill-bg: var(--navy);
  --t-navy-pill-hover-bg: var(--navy-dark);
  --t-navy-pill-text: var(--text-on-colour);
  --t-front-button-bg: var(--navy);
  --t-front-button-text: var(--text-on-colour);
  --t-front-button-edge: transparent;
  --t-assistant-quiet: var(--t-text-secondary);
  --t-assistant-body: var(--t-page-text);
  --t-tool-exit-bg: transparent;
  --t-tool-exit-text: var(--light-charcoal);
  --t-tool-exit-edge: var(--light-charcoal);
  --t-preview-field: var(--dark-white);
  --t-copy-answer-bg: var(--navy);
  --t-copy-answer-text: var(--text-on-colour);
  --t-copy-answer-hover: var(--navy-dark);
  --t-answer-selected-bg: var(--navy);
  --t-answer-selected-text: var(--mid-white);
  --t-copy-list: var(--navy);
  --t-card-eyebrow: var(--light-charcoal);
  --t-assistant-card: var(--t-card);
  --t-assistant-title-card: var(--navy);
  --t-assistant-title-card-text: var(--text-on-colour);
  --t-assistant-nav-edge: var(--t-nav-control);
  --t-assistant-tool-title: var(--navy);

  --focus-outline-color: var(--orange);

  /* NEW TOKENS */
  --status-tag-height: 1.875rem;
  --status-tag-padding-x: 0.75rem;
  --status-tag-letter-spacing: 0.06em;
  --z-section-nav: 999;
  --z-filter-bar: 800;
  --z-filter-selected: 801;
  --z-filter-item: 802;
  --blur-section-nav: 12px;
  --nav-underline-height: 3px;
  --chart-box-height: 500px;
  --chart-box-height-tall: 600px;
  --transition-card: 0.35s;
  --transition-card-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-plus-press: 0.15s;
  --card-hover-scale: 1.015;
  --card-back-bottom-space: 8rem;
  --card-fade-height: 6rem;
  --round-button-inset: 0.9rem;
  --key-box-width: 560px;
  --key-box-bottom-padding: 1.2rem;
  --key-box-narrow-margin: 4rem;
  --tracker-shadow-blur: 1.5px;
  --helps-list-gap: 0.8rem;
  --strategies-title-measure: 15ch;
  /* The Learn pages' .reference-number rule reaches these pages too; here the
     citation numbers keep the size a superscript has always had on them */
  --reference-number-scale: smaller;
}

/* ---------- 2. THE PAGE ---------- */
.tools-content { /* used: challenges-canvases-atw */
  margin-top: calc(var(--fixed-header-height) + var(--subnav-row-height));
}
.tools-band { /* used: challenges-canvases-atw */
  width: 100%;
  background-color: var(--t-page-bg);
}
.tools-band-alt { /* used: challenges-canvases-atw */
  width: 100%;
  background-color: var(--t-band-alt);
}
.tools-footnote-box { /* used: challenges-canvases-atw */
  max-width: var(--max-body-wrapper-width);
  margin-top: 0;
  color: var(--t-footnote-text);
  padding-top: var(--app-default-top-bottom-margin-sm);
  padding-bottom: var(--app-default-top-bottom-margin-sm);
}
.tools-skip-link { /* used: challenges-canvases-atw */
  color: var(--text-on-colour);
}
.tools-intro-text { /* used: challenges-canvases-atw */
  max-width: var(--golden-width-large);
}

/* ---------- 3. THE SUB NAV ---------- */
.tools-nav-bar { /* used: challenges-canvases-atw */
  position: fixed;
  top: var(--fixed-header-height);
  left: 0;
  z-index: var(--z-section-nav);
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: var(--subnav-row-height);
  background: var(--t-nav-frost);
  backdrop-filter: blur(var(--blur-section-nav));
  -webkit-backdrop-filter: blur(var(--blur-section-nav));
  border-bottom: var(--stroke-thin) solid var(--t-divider);
  box-sizing: border-box;
  transition: top var(--transition-base) ease;
}
.tools-nav-bar-raised { /* used: challenges-canvases-atw */
  top: 0;
}
.tools-nav-row { /* used: challenges-canvases-atw */
  box-sizing: border-box;
  width: 100%;
  height: var(--subnav-row-height);
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: 0;
}
.tools-nav-title-box { /* used: challenges-canvases-atw */
  flex: 0 0 auto;
}
.tools-nav-title { /* used: challenges-canvases-atw */
  font-weight: var(--font-weight-medium);
  margin: 0;
  padding: 0;
  line-height: var(--default-line-height-single);
  font-size: var(--heading-size-sm);
  color: var(--t-page-text);
}
.tools-nav-scroller { /* used: challenges-canvases-atw */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-left: var(--default-left-right-desk-body-padding);
}
.tools-nav-scroller::-webkit-scrollbar { /* used: challenges-canvases-atw */
  display: none;
}
.tools-nav-list { /* used: challenges-canvases-atw */
  list-style: none;
  padding: 0;
  margin: 0 0 0 auto;
  height: max-content;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  white-space: nowrap;
  font-size: var(--body-text-sm);
  /* The links inside are UMA.css .section-nav-link, filled in from Firestore.
     These pages draw their underline 3px, not 4px, through the token that
     rule reads. */
  --link-line-height: var(--nav-underline-height);
}
.tools-nav-item { /* used: challenges-canvases-atw */
  font-size: var(--body-text-xs);
}

/* ---------- 4. THE GRAPH FILTER PILL BAR ---------- */
.tools-filter-wrapper { /* used: challenges-canvases-atw */
  max-width: 100%;
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  margin-bottom: var(--default-card-top-padding);
}
.tools-filter-bar { /* used: challenges-canvases-atw */
  background-color: var(--t-switch-bg);
  height: var(--pill-filter-height);
  border-radius: calc(var(--pill-filter-height) / 2);
  display: inline-flex;
  width: max-content;
  max-width: calc(100% - var(--default-left-right-desk-body-padding) * 2);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--filter-bar-left-right-padding);
  padding-right: var(--filter-bar-left-right-padding);
  align-items: center;
  position: relative;
  justify-content: center;
  z-index: var(--z-filter-bar);
}
@media (max-width: 599px) {
  .tools-filter-bar { /* used: challenges-canvases-atw */
    max-width: calc(100% - var(--default-left-right-mob-body-padding) * 2);
  }
}
.tools-filter-bar-overflowing { /* used: challenges-canvases-atw */
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  justify-content: flex-start;
  padding-left: var(--default-left-right-mob-body-padding);
  padding-right: var(--default-left-right-mob-body-padding);
}
.tools-filter-bar-overflowing::-webkit-scrollbar { /* used: challenges-canvases-atw */
  display: none;
}
@media (min-width: 600px) {
  .tools-filter-bar-overflowing { /* used: challenges-canvases-atw */
    padding-left: var(--default-left-right-desk-body-padding);
    padding-right: var(--default-left-right-desk-body-padding);
  }
}
.tools-filter-item { /* used: challenges-canvases-atw */
  color: var(--t-text-strong);
  font-size: var(--body-text-xs);
  font-family: inherit;
  text-decoration: none;
  outline: none;
  border: none;
  background: transparent;
  height: var(--pill-filter-selected-height);
  line-height: var(--pill-filter-selected-height);
  border-radius: calc(var(--pill-filter-selected-height) / 2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-filter-item);
  cursor: pointer;
  padding: 0 var(--nav-link-padding-horizontal);
  transition: color var(--transition-base);
  white-space: nowrap;
}
.tools-filter-item:hover { /* used: challenges-canvases-atw */
  color: var(--orange);
  text-decoration: none;
  cursor: pointer;
}
.tools-filter-item.selected { /* used: challenges-canvases-atw */
  color: var(--t-filter-selected-text);
  text-decoration: none;
}
.tools-filter-selected { /* used: challenges-canvases-atw */
  position: absolute;
  left: 0;
  height: var(--pill-filter-selected-height);
  background-color: var(--t-selected-bg);
  line-height: var(--pill-filter-selected-height);
  border-radius: calc(var(--pill-filter-selected-height) / 2);
  transition: all var(--transition-base) ease;
  z-index: var(--z-filter-selected);
}

/* ---------- 5. THE GRAPH AND ITS KEY ---------- */
.graph-heading-box { /* used: challenges-canvases-atw */
  padding-bottom: var(--default-card-top-padding);
}
.graph-headline { /* used: challenges-canvases-atw */
  line-height: var(--default-line-height-x-small);
  margin-bottom: 0;
  text-align: center;
}
.chart-and-key { /* used: challenges-canvases-atw */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--btn-padding-x-default);
}
@media (max-width: 1000px) {
  .chart-and-key { /* used: challenges-canvases-atw */
    flex-direction: column;
    align-items: center;
  }
}
@media (max-width: 600px) {
  .chart-and-key { /* used: challenges-canvases-atw */
    align-items: flex-start;
  }
}
/* The page script adds one of these two, following the way the graph draws
   its bars: horizontal bars put the key below, vertical bars put it beside */
.chart-and-key-horizontal { /* used: challenges-canvases-atw */
  flex-direction: column;
}
.chart-and-key-vertical { /* used: challenges-canvases-atw */
  flex-direction: row;
  align-items: flex-start;
}
.barChartJS { /* used: challenges-canvases-atw */
  display: block;
  width: 100%;
  height: 100%;
}
.barChartJSWrapper { /* used: challenges-canvases-atw */
  margin-left: auto;
  margin-right: auto;
  width: var(--chart-box-width);
  max-width: 100%;
  height: var(--chart-box-height);
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.barChartJSWrapper::-webkit-scrollbar { /* used: challenges-canvases-atw */
  display: none;
}
@media (max-width: 600px) {
  .barChartJSWrapper { /* used: challenges-canvases-atw */
    margin-left: calc(-1 * var(--default-left-right-mob-body-padding) / 2);
    margin-right: calc(-1 * var(--default-left-right-mob-body-padding) / 2);
    width: calc(100% + var(--default-left-right-mob-body-padding));
    max-width: calc(100% + var(--default-left-right-mob-body-padding));
  }
}
.challenges-key-container { /* used: challenges-canvases-atw */
  background-color: var(--t-card);
  border-radius: var(--default-radius);
  padding: var(--default-card-top-padding) var(--default-card-top-padding) var(--key-box-bottom-padding) var(--default-card-top-padding);
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}
/* ADHD challenges keeps its key at a set width */
.key-box-fixed { /* used: challenges-canvases-atw */
  width: var(--key-box-width);
}
@media (max-width: 1000px) {
  .key-box-fixed { /* used: challenges-canvases-atw */
    width: calc(100% - var(--key-box-narrow-margin));
  }
}
.challenges-severity-key { /* used: challenges-canvases-atw */
  width: 100%;
  margin: 0;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--helps-list-gap) var(--default-card-top-padding);
}
/* The words in each key row take this colour; the page's text swap
   rewrites what is inside the row, so the colour sits on the row itself */
.challenges-key-item { /* used: challenges-canvases-atw */
  white-space: nowrap;
  color: var(--t-key-label);
}
/* the words inside come with the row text from Firestore */
.challenges-key-item .severity-key-label { /* used: challenges-canvases-atw */
  color: var(--t-key-label-words);
}
.severity-key-dot-low { /* used: challenges-canvases-atw */
  background: var(--yellow);
}
.severity-key-dot-moderate { /* used: challenges-canvases-atw */
  background: var(--mustard);
}

/* ---------- 6. THE CARD CATEGORY PILLS AND CAROUSEL CONTROLS ---------- */
.challenges-category-pills { /* used: challenges-canvases-atw */
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: var(--gap-xs);
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-top: 0;
  padding-bottom: var(--field-padding-x);
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
  scroll-behavior: smooth;
  scroll-padding-left: var(--default-left-right-desk-body-padding);
}
.challenges-category-pills::-webkit-scrollbar { /* used: challenges-canvases-atw */
  display: none;
}
@media (min-width: 1280px) {
  .challenges-category-pills { /* used: challenges-canvases-atw */
    padding-left: calc(((100% - var(--default-max-width)) / 2) + var(--default-left-right-desk-body-padding));
    padding-right: calc(((100% - var(--default-max-width)) / 2) + var(--default-left-right-desk-body-padding));
    scroll-padding-left: calc(((100% - var(--default-max-width)) / 2) + var(--default-left-right-desk-body-padding));
  }
}
@media (max-width: 600px) {
  .challenges-category-pills { /* used: challenges-canvases-atw */
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
    scroll-padding-left: var(--default-left-right-mob-body-padding);
  }
}
.tools-pill-selected { /* used: challenges-canvases-atw */
  background: var(--t-navy-pill-bg);
  color: var(--t-navy-pill-text);
}
.tools-pill-selected:hover { /* used: challenges-canvases-atw */
  background: var(--t-navy-pill-hover-bg);
}
.tools-pill-outline { /* used: challenges-canvases-atw */
  background: transparent;
  color: var(--t-outline-pill-text);
  border-color: var(--t-outline-pill-edge);
}
.tools-pill-outline:hover { /* used: challenges-canvases-atw */
  background: var(--t-outline-pill-hover-bg);
  color: var(--t-outline-pill-hover-text);
  border-color: var(--t-outline-pill-hover-edge);
}
.tools-carousel-controls { /* used: challenges-canvases-atw */
  display: flex;
}

/* ---------- 7. THE FLIPPING 9:16 CARDS ---------- */
.flip-card { /* used: challenges-canvases-atw */
  flex: 0 0 var(--carouselle-card-xs);
  width: var(--carouselle-card-xs);
  min-width: var(--carouselle-card-xs);
  max-width: var(--carouselle-card-xs);
  min-height: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--app-default-radius-lg);
  overflow: hidden;
  scroll-snap-align: start;
  background-color: var(--t-flip-card-bg);
  display: flex;
  flex-direction: column;
  margin: 0;
  position: relative;
  transition: transform var(--transition-card) var(--transition-card-ease);
  transform-origin: center center;
}
@media (max-width: 449px) {
  .flip-card { /* used: challenges-canvases-atw */
    flex: 0 0 var(--carouselle-card-width-mobile);
    width: var(--carouselle-card-width-mobile);
    min-width: var(--carouselle-card-width-mobile);
    max-width: var(--carouselle-card-width-mobile);
  }
}
@media (min-width: 450px) {
  .flip-card { /* used: challenges-canvases-atw */
    flex: 0 0 var(--carouselle-card-lg);
    width: var(--carouselle-card-lg);
    min-width: var(--carouselle-card-lg);
    max-width: var(--carouselle-card-lg);
  }
}
@media (min-width: 600px) {
  .flip-card { /* used: challenges-canvases-atw */
    flex: 0 0 var(--carouselle-card-xl);
    width: var(--carouselle-card-xl);
    min-width: var(--carouselle-card-xl);
    max-width: var(--carouselle-card-xl);
  }
}
@media (min-width: 900px) {
  .flip-card { /* used: challenges-canvases-atw */
    flex: 0 0 var(--carouselle-card-xxl);
    width: var(--carouselle-card-xxl);
    min-width: var(--carouselle-card-xxl);
    max-width: var(--carouselle-card-xxl);
  }
}
.flip-card:has(.card-plus-button:hover) { /* used: challenges-canvases-atw */
  transform: scale(var(--card-hover-scale));
}
.flip-card-open { /* used: challenges-canvases-atw */
  background-color: var(--t-card);
}
.flip-card-front { /* used: challenges-canvases-atw */
  position: relative;
  z-index: 1;
  padding: var(--default-card-left-right-padding);
  padding-top: var(--app-default-top-bottom-margin-xl);
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.flip-card-back { /* used: challenges-canvases-atw */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: var(--t-card);
  border-radius: 0;
  padding: var(--default-card-left-right-padding);
  padding-top: var(--app-default-top-bottom-margin-xl);
  padding-bottom: var(--card-back-bottom-space);
  display: none;
  flex-direction: column;
  overflow-y: auto;
}
.flip-card-back.is-open { /* used: challenges-canvases-atw */
  display: flex;
}
.flip-card-face-hidden { /* used: challenges-canvases-atw */
  visibility: hidden;
}
.card-percentage { /* used: challenges-canvases-atw */
  font-size: var(--heading-size-xxl);
  font-weight: var(--font-weight-normal);
  line-height: var(--default-line-height-single);
  margin: 0 0 var(--app-default-top-bottom-margin-sm) 0;
  padding: 0;
  color: var(--t-card-percentage, var(--card-percentage-colour));
}
.card-title { /* used: challenges-canvases-atw */
  position: static;
  z-index: auto;
  font-size: var(--heading-size-md);
  font-weight: var(--font-weight-light);
  line-height: var(--default-line-height-x-small);
  margin: 0;
  padding: 0;
  color: var(--t-page-text);
  text-align: left;
}
.flip-back-title { /* used: challenges-canvases-atw */
  margin-bottom: var(--app-default-top-bottom-margin-sm);
}
.card-back-subheader { /* used: challenges-canvases-atw */
  font-size: var(--heading-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--default-line-height-x-small);
  margin-top: var(--app-default-top-bottom-margin-xl);
  margin-bottom: var(--app-default-top-bottom-margin-xs);
  color: var(--t-page-text);
}
.flip-back-text { /* used: challenges-canvases-atw */
  font-size: var(--body-text-xs);
  line-height: var(--default-line-height-large);
  margin-top: 0;
  margin-bottom: 0;
  color: var(--t-card-back-text);
}
.card-back-text-after { /* used: challenges-canvases-atw */
  margin-top: var(--app-default-top-bottom-margin-sm);
}
.card-fade { /* used: challenges-canvases-atw */
  position: sticky;
  bottom: calc(-1 * var(--card-back-bottom-space));
  left: 0;
  right: 0;
  height: var(--card-fade-height);
  margin-left: calc(-1 * var(--default-card-left-right-padding));
  margin-right: calc(-1 * var(--default-card-left-right-padding));
  background: linear-gradient(to bottom, rgba(var(--t-card-rgb), 0) 0%, rgba(var(--t-card-rgb), 0.08) 30%, rgba(var(--t-card-rgb), 0.3) 50%, rgba(var(--t-card-rgb), 0.7) 70%, rgba(var(--t-card-rgb), 1) 85%, rgba(var(--t-card-rgb), 1) 100%);
  pointer-events: none;
  flex-shrink: 0;
  margin-top: calc(-1 * var(--card-fade-height));
  margin-bottom: 0;
}
.title-card { /* used: challenges-canvases-atw */
  background-color: var(--t-title-card-bg);
  color: var(--text-on-colour);
  justify-content: center;
  padding: var(--default-card-left-right-padding);
}
.title-card-heading { /* used: challenges-canvases-atw */
  position: static;
  z-index: auto;
  font-size: var(--heading-size-xxl);
  font-weight: var(--font-weight-light);
  line-height: var(--default-line-height-x-small);
  margin: 0;
  padding: 0;
  color: var(--t-title-card-text);
  text-align: left;
}
@media (max-width: 900px) {
  .title-card-heading { /* used: challenges-canvases-atw */
    font-size: var(--heading-size-xl);
  }
}
@media (max-width: 600px) {
  .title-card-heading { /* used: challenges-canvases-atw */
    font-size: var(--heading-size-lg);
  }
}

/* Card severity: the page script puts one of these on each card */
.severity-yellow { /* used: challenges-canvases-atw */
  --card-percentage-colour: var(--yellow);
  --card-severity-colour: var(--yellow);
}
.severity-mustard { /* used: challenges-canvases-atw */
  --card-percentage-colour: var(--mustard);
  --card-severity-colour: var(--mustard);
}
.severity-orange { /* used: challenges-canvases-atw */
  --card-percentage-colour: var(--orange);
  --card-severity-colour: var(--orange);
}
.severity-tomato { /* used: challenges-canvases-atw */
  --card-percentage-colour: var(--tomato);
  --card-severity-colour: var(--tomato);
}
.severity-red { /* used: challenges-canvases-atw */
  --card-percentage-colour: var(--red);
  --card-severity-colour: var(--red);
}

/* What helps lists on the card backs */
.helps-groups { /* used: challenges-canvases-atw */
  display: flex;
  flex-direction: column;
  gap: var(--app-default-top-bottom-margin-xl);
  margin-top: 0;
  margin-bottom: var(--app-default-top-bottom-margin-xxxxl);
}
.helps-groups-before-cta { /* used: challenges-canvases-atw */
  margin-bottom: 0;
}
.helps-list { /* used: challenges-canvases-atw */
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--helps-list-gap);
  column-gap: var(--helps-list-gap);
  text-align: left;
  justify-content: left;
}
.helps-pill { /* used: challenges-canvases-atw */
  white-space: nowrap;
  color: var(--t-helps-pill-text);
  text-align: center;
  font-size: var(--body-text-xs);
  border-radius: var(--radius-pill);
  padding: var(--field-action-gap) var(--btn-padding-x-default);
  background-color: var(--t-helps-pill-bg);
  border: none;
}
.canvas-cta { /* used: challenges-canvases-atw */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--app-default-top-bottom-margin-sm);
  margin-top: var(--app-default-top-bottom-margin-lg);
  margin-bottom: var(--app-default-top-bottom-margin-xxxxl);
}
.canvas-cta-button { /* used: challenges-canvases-atw */
  gap: var(--gap-xs);
}

/* ---------- 8. ROUND PLUS AND CLOSE BUTTONS ---------- */
/* The + on a card: the circle in the card's severity colour, the plus cut in white */
.card-plus-button { /* used: challenges-canvases-atw */
  position: absolute;
  bottom: var(--round-button-inset);
  right: var(--round-button-inset);
  width: var(--button-size-md);
  height: var(--button-size-md);
  border-radius: var(--radius-circle);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 3;
  padding: 0;
  opacity: 1;
  transition: opacity var(--transition-base) ease, transform var(--transition-plus-press) ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-plus-button::before { /* used: challenges-canvases-atw */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  background: var(--t-card-plus-disc, var(--card-severity-colour, var(--dark-white)));
  z-index: 1;
}
.card-plus-button::after { /* used: challenges-canvases-atw */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  background: var(--t-card-plus-icon);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m28.87,20c0,.59-.48,1.06-1.06,1.06h-6.74v6.74c0,.59-.48,1.06-1.06,1.06s-1.06-.48-1.06-1.06v-6.74h-6.74c-.59,0-1.06-.48-1.06-1.06s.48-1.06,1.06-1.06h6.74v-6.74c0-.59.48-1.06,1.06-1.06s1.06.48,1.06,1.06v6.74h6.74c.59,0,1.06.48,1.06,1.06Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m28.87,20c0,.59-.48,1.06-1.06,1.06h-6.74v6.74c0,.59-.48,1.06-1.06,1.06s-1.06-.48-1.06-1.06v-6.74h-6.74c-.59,0-1.06-.48-1.06-1.06s.48-1.06,1.06-1.06h6.74v-6.74c0-.59.48-1.06,1.06-1.06s1.06.48,1.06,1.06v6.74h6.74c.59,0,1.06.48,1.06,1.06Z'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  z-index: 2;
}
.card-plus-button i { /* used: challenges-canvases-atw */
  display: none;
}
.card-plus-hidden { /* used: challenges-canvases-atw */
  visibility: hidden;
}

/* The close on a card back: light circle, dark cross */
.card-close-button { /* used: challenges-canvases-atw */
  position: absolute;
  top: var(--app-default-top-bottom-margin-lg);
  right: var(--app-default-top-bottom-margin-lg);
  width: var(--button-size-md);
  height: var(--button-size-md);
  border-radius: var(--radius-circle);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-close-button::before { /* used: challenges-canvases-atw */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  background: var(--t-round-button-disc);
  z-index: 1;
}
.card-close-button::after { /* used: challenges-canvases-atw */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  background: var(--t-round-button-icon);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m27.07,25.95c.44,.44,.44,1.15,0,1.58-.22,.22-.5,.33-.79,.33s-.57-.11-.79-.33l-5.49-5.49-5.49,5.49c-.22,.22-.5,.33-.79,.33s-.57-.11-.79-.33c-.44-.44-.44-1.15,0-1.58l5.49-5.49-5.49-5.49c-.44-.44-.44-1.15,0-1.58,.44-.44,1.15-.44,1.58,0l5.49,5.49,5.49-5.49c.44-.44,1.15-.44,1.58,0,.44,.44,.44,1.15,0,1.58l-5.49,5.49,5.49,5.49Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m27.07,25.95c.44,.44,.44,1.15,0,1.58-.22,.22-.5,.33-.79,.33s-.57-.11-.79-.33l-5.49-5.49-5.49,5.49c-.22,.22-.5,.33-.79,.33s-.57-.11-.79-.33c-.44-.44-.44-1.15,0-1.58l5.49-5.49-5.49-5.49c-.44-.44-.44-1.15,0-1.58,.44-.44,1.15-.44,1.58,0l5.49,5.49,5.49-5.49c.44-.44,1.15-.44,1.58,0,.44,.44,.44,1.15,0,1.58l-5.49,5.49,5.49,5.49Z'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  z-index: 2;
}
.card-close-button i { /* used: challenges-canvases-atw */
  display: none;
}

/* White + and white close for dark grounds: a white disc with the icon cut
   out, over a blurred see-through ring */
.dark-plus-button { /* used: challenges-canvases-atw */
  position: absolute;
  bottom: var(--app-default-top-bottom-margin-lg);
  right: var(--app-default-top-bottom-margin-lg);
  width: var(--button-size-md);
  height: var(--button-size-md);
  border-radius: var(--radius-circle);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  opacity: 1;
  transition: opacity var(--transition-base) ease, transform var(--transition-plus-press) ease;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.dark-plus-button::before { /* used: challenges-canvases-atw */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  background: var(--t-dark-plus-disc, var(--bright-white));
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m20,0C8.95,0,0,8.95,0,20s8.95,20,20,20,20-8.95,20-20S31.05,0,20,0Zm7.81,21.06h-6.74v6.74c0,.59-.48,1.06-1.06,1.06s-1.06-.48-1.06-1.06v-6.74h-6.74c-.59,0-1.06-.48-1.06-1.06s.48-1.06,1.06-1.06h6.74v-6.74c0-.59.48-1.06,1.06-1.06s1.06.48,1.06,1.06v6.74h6.74c.59,0,1.06.48,1.06,1.06s-.48,1.06-1.06,1.06Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m20,0C8.95,0,0,8.95,0,20s8.95,20,20,20,20-8.95,20-20S31.05,0,20,0Zm7.81,21.06h-6.74v6.74c0,.59-.48,1.06-1.06,1.06s-1.06-.48-1.06-1.06v-6.74h-6.74c-.59,0-1.06-.48-1.06-1.06s.48-1.06,1.06-1.06h6.74v-6.74c0-.59.48-1.06,1.06-1.06s1.06.48,1.06,1.06v6.74h6.74c.59,0,1.06.48,1.06,1.06s-.48,1.06-1.06,1.06Z'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  z-index: 2;
}
.dark-plus-button::after,
.dark-close-button::after { /* used: challenges-canvases-atw */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--bright-white-rgb), var(--opacity-soft));
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle fill='black' cx='20' cy='20' r='20'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle fill='black' cx='20' cy='20' r='20'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  z-index: 1;
}
.dark-plus-button::after { /* used: challenges-canvases-atw */
  background: var(--t-dark-plus-ring);
}
.dark-plus-button i,
.dark-close-button i { /* used: challenges-canvases-atw */
  display: none;
}
.dark-close-button { /* used: challenges-canvases-atw */
  width: var(--button-size-md);
  height: var(--button-size-md);
  border-radius: var(--radius-circle);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.dark-close-button::before { /* used: challenges-canvases-atw */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  background: var(--bright-white);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle fill='black' cx='20' cy='20' r='20'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m27.07,25.95c.44,.44,.44,1.15,0,1.58-.22,.22-.5,.33-.79,.33s-.57-.11-.79-.33l-5.49-5.49-5.49,5.49c-.22,.22-.5,.33-.79,.33s-.57-.11-.79-.33c-.44-.44-.44-1.15,0-1.58l5.49-5.49-5.49-5.49c-.44-.44-.44-1.15,0-1.58,.44-.44,1.15-.44,1.58,0l5.49,5.49,5.49-5.49c.44-.44,1.15-.44,1.58,0,.44,.44,.44,1.15,0,1.58l-5.49,5.49,5.49,5.49Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle fill='black' cx='20' cy='20' r='20'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m27.07,25.95c.44,.44,.44,1.15,0,1.58-.22,.22-.5,.33-.79,.33s-.57-.11-.79-.33l-5.49-5.49-5.49,5.49c-.22,.22-.5,.33-.79,.33s-.57-.11-.79-.33c-.44-.44-.44-1.15,0-1.58l5.49-5.49-5.49-5.49c-.44-.44-.44-1.15,0-1.58,.44-.44,1.15-.44,1.58,0l5.49,5.49,5.49-5.49c.44-.44,1.15-.44,1.58,0,.44,.44,.44,1.15,0,1.58l-5.49,5.49,5.49,5.49Z'/></svg>");
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  z-index: 2;
}

/* ---------- 9. BRAIN-BODY TRACKER PROMO CARD ---------- */
.tracker-promo-card { /* used: challenges-canvases-atw */
  background-color: var(--red);
  border-radius: var(--app-default-radius-md);
  display: flex;
  flex-direction: row;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
}
.tracker-promo-copy { /* used: challenges-canvases-atw */
  flex: 1;
  padding: var(--default-whitespace-below-tables);
  color: var(--text-on-colour);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tracker-promo-graphic { /* used: challenges-canvases-atw */
  flex: 0 0 40%;
}
.tracker-promo-alert { /* used: challenges-canvases-atw */
  position: absolute;
  top: var(--default-card-top-padding);
  right: var(--default-card-top-padding);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--app-default-top-bottom-margin-sm);
  z-index: 2;
}
.tracker-promo-alert-label { /* used: challenges-canvases-atw */
  font-size: var(--body-text-xs);
  color: var(--text-on-colour);
  opacity: var(--opacity-very-high);
}
/* Switch on a dark ground, written the way UMA.css writes .switch--calm */
.switch--on-dark .switch-track { /* used: challenges-canvases-atw */
  background: var(--t-switch-off);
}
.switch--on-dark input:checked ~ .switch-track { /* used: challenges-canvases-atw */
  background: var(--bright-teal);
}
.tracker-promo-eyebrow { /* used: challenges-canvases-atw */
  font-size: var(--body-text-xs);
  font-weight: var(--font-weight-normal);
  margin-bottom: var(--app-default-top-bottom-margin-xxs);
  opacity: var(--opacity-very-high);
}
.tracker-promo-heading { /* used: challenges-canvases-atw */
  font-size: var(--heading-size-xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--default-line-height-x-small);
  margin-bottom: 0;
}
.tracker-coming-soon-tag { /* used: challenges-canvases-atw */
  position: static;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  flex-shrink: 0;
  height: var(--status-tag-height);
  margin-top: var(--app-default-top-bottom-margin-sm);
  margin-bottom: var(--app-default-top-bottom-margin-xl);
  padding-left: var(--status-tag-padding-x);
  padding-right: var(--status-tag-padding-x);
  border-radius: var(--app-default-radius-sm);
  background-color: var(--bright-white);
  color: rgb(var(--black-rgb));
  mix-blend-mode: screen;
  font-size: var(--body-text-xxs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--status-tag-letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
}
.tracker-promo-text { /* used: challenges-canvases-atw */
  font-size: var(--body-text-sm);
  line-height: var(--default-line-height-large);
  margin-bottom: var(--app-default-top-bottom-margin-sm);
}
.tracker-graph { /* used: challenges-canvases-atw */
  box-sizing: border-box;
  height: 100%;
  padding: calc(var(--app-default-top-bottom-margin-xxxxl) + var(--app-default-top-bottom-margin-sm)) var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--app-default-top-bottom-margin-sm);
}
.tracker-graph-panel { /* used: challenges-canvases-atw */
  background-color: var(--red-dark);
  border-radius: var(--app-default-radius-md);
  padding: var(--app-default-top-bottom-margin-sm);
}
.tracker-graph-key { /* used: challenges-canvases-atw */
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gap-xl);
  row-gap: var(--gap-xs);
}
.tracker-graph-key-item { /* used: challenges-canvases-atw */
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  font-size: var(--body-text-xs);
  color: var(--text-on-colour);
}
.tracker-graph-box { /* used: challenges-canvases-atw */
  position: relative;
  width: 100%;
  flex: 1 1 auto;
}
.tracker-graph-canvas { /* used: challenges-canvases-atw */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.tracker-egg-shape { /* used: challenges-canvases-atw */
  height: var(--button-icon-lg);
  width: auto;
  flex: none;
  overflow: visible;
  filter: drop-shadow(0 var(--stroke-thin) var(--tracker-shadow-blur) rgba(var(--black-rgb), var(--opacity-low)));
  fill: var(--bright-white);
}
.tracker-egg-outline { /* used: challenges-canvases-atw */
  stroke: var(--t-egg-edge);
  stroke-width: var(--stroke-thin);
  vector-effect: non-scaling-stroke;
}
.portrait-card-only { /* used: challenges-canvases-atw */
  display: none;
}
.tracker-promo-flip-button,
.tracker-promo-close-button { /* used: challenges-canvases-atw */
  display: none;
}
@media (max-width: 1050px) {
  .tracker-promo-card { /* used: challenges-canvases-atw */
    aspect-ratio: 4 / 5;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    max-width: min(100%, var(--golden-width-small));
    min-height: fit-content;
  }
  .tracker-promo-copy { /* used: challenges-canvases-atw */
    flex: 0 0 auto;
    display: block;
    padding-bottom: var(--app-default-top-bottom-margin-sm);
  }
  /* The tag runs on the same line as the heading */
  .tracker-promo-heading { /* used: challenges-canvases-atw */
    display: inline;
    margin-right: var(--gap-xs);
  }
  .tracker-coming-soon-tag { /* used: challenges-canvases-atw */
    margin-top: 0;
    margin-bottom: 0;
    display: inline-block;
    line-height: var(--status-tag-height);
    overflow: hidden;
    vertical-align: baseline;
  }
  .tracker-promo-graphic { /* used: challenges-canvases-atw */
    flex: 1 1 auto;
    min-height: 0;
  }
  .tracker-promo-alert { /* used: challenges-canvases-atw */
    top: auto;
    bottom: var(--app-default-top-bottom-margin-xl);
    left: var(--app-default-top-bottom-margin-xl);
    right: calc(var(--button-size-md) + var(--app-default-top-bottom-margin-xl));
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
  .tracker-graph { /* used: challenges-canvases-atw */
    padding: 0 var(--app-default-top-bottom-margin-xl) calc(var(--app-default-top-bottom-margin-xxxxl) + var(--app-default-top-bottom-margin-sm));
  }
  .landscape-card-only { /* used: challenges-canvases-atw */
    display: none;
  }
  .portrait-card-only { /* used: challenges-canvases-atw */
    margin-top: var(--app-default-top-bottom-margin-lg);
  }
  .tracker-promo-flip-button { /* used: challenges-canvases-atw */
    display: flex;
  }
  .tracker-promo-flip-button.is-closed { /* used: challenges-canvases-atw */
    display: none;
  }
  .tracker-promo-alert.is-closed { /* used: challenges-canvases-atw */
    display: none;
  }
  /* Back: the landscape text replaces the graph and scrolls if it runs
     longer than the card */
  .landscape-card-only.is-open { /* used: challenges-canvases-atw */
    display: block;
    margin-top: var(--app-default-top-bottom-margin-lg);
  }
  .tracker-promo-graphic.is-closed { /* used: challenges-canvases-atw */
    display: none;
  }
  .tracker-promo-copy.is-open { /* used: challenges-canvases-atw */
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: var(--app-default-top-bottom-margin-xl);
  }
  .tracker-promo-alert.is-in-text { /* used: challenges-canvases-atw */
    position: static;
    margin-top: var(--app-default-top-bottom-margin-lg);
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
  .tracker-promo-close-button.is-shown { /* used: challenges-canvases-atw */
    display: flex;
    position: absolute;
    top: var(--app-default-top-bottom-margin-lg);
    right: var(--app-default-top-bottom-margin-lg);
    z-index: 5;
  }
}
@media (max-width: 700px) {
  .tracker-promo-card { /* used: challenges-canvases-atw */
    aspect-ratio: 9 / 16;
    width: var(--carouselle-card-lg);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .tracker-promo-copy { /* used: challenges-canvases-atw */
    padding: var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-sm);
  }
  .tracker-promo-heading { /* used: challenges-canvases-atw */
    font-size: var(--heading-size-xl);
  }
}
@media (max-width: 450px) {
  .tracker-promo-card { /* used: challenges-canvases-atw */
    width: var(--carouselle-card-xs);
  }
  .tracker-promo-copy { /* used: challenges-canvases-atw */
    padding-left: var(--app-default-top-bottom-margin-lg);
    padding-right: var(--app-default-top-bottom-margin-sm);
  }
  .tracker-promo-heading { /* used: challenges-canvases-atw */
    margin-right: var(--gap-xxs);
  }
  .tracker-promo-alert { /* used: challenges-canvases-atw */
    left: var(--app-default-top-bottom-margin-lg);
  }
  .tracker-graph { /* used: challenges-canvases-atw */
    padding-left: var(--app-default-top-bottom-margin-lg);
    padding-right: var(--app-default-top-bottom-margin-lg);
  }
}

/* ---------- 9b. STRATEGY PAGES ---------- */
/* The bright blue header. White words on the coloured panels use mid white,
   to reduce glare. */
.strategies-header { /* used: challenges-canvases-atw */
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--app-default-top-bottom-margin-xxxxl);
}
@media (max-width: 600px) {
  .strategies-header { /* used: challenges-canvases-atw */
    padding-top: var(--app-default-top-bottom-margin-xxxl);
    padding-bottom: 0;
  }
}
.strategies-header-title { /* used: challenges-canvases-atw */
  font-size: var(--heading-size-xxl);
  color: var(--text-on-colour);
  line-height: var(--default-line-height-x-small);
  max-width: var(--strategies-title-measure);
  padding-top: 0;
  margin-top: 0;
  margin-bottom: var(--app-default-top-bottom-margin-sm);
}
.strategies-header-text { /* used: challenges-canvases-atw */
  font-size: var(--body-text-sm);
  line-height: var(--default-line-height-large);
  color: var(--text-on-colour);
  margin: 0 0 var(--app-default-top-bottom-margin-lg) 0;
}
/* The intervention pill menu uses the centred carousel, inside the sticky
   bright blue box. The box sticks with its top raised by the icon's height,
   so the icons tuck under whatever is above them. */
.strategies-menu-box { /* used: challenges-canvases-atw */
  top: calc(var(--fixed-header-height) + var(--subnav-row-height) - var(--button-icon-xxxxl) * var(--default-line-height-single));
  padding-bottom: var(--app-default-top-bottom-margin-lg);
  transition: top var(--transition-base) ease;
}
.strategies-menu-box-raised { /* used: challenges-canvases-atw */
  top: calc(var(--subnav-row-height) - var(--button-icon-xxxxl) * var(--default-line-height-single));
}
.strategies-menu-box-tucked { /* used: challenges-canvases-atw */
  top: calc(0px - var(--button-icon-xxxxl) * var(--default-line-height-single));
}
.strategies-menu-carousel { /* used: challenges-canvases-atw */
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
.strategies-menu-icon { /* used: challenges-canvases-atw */
  color: var(--text-on-colour);
}
.strategies-menu-pill { /* used: challenges-canvases-atw */
  color: var(--panel-text-white);
  border-color: var(--panel-text-white);
}
.strategies-menu-pill-selected { /* used: challenges-canvases-atw */
  background: var(--panel-text-white);
  border-color: var(--panel-text-white);
  color: var(--bright-blue);
}
/* In the interventions the sub nav slides away going down and comes back
   going up */
.tools-nav-bar-sliding { /* used: challenges-canvases-atw */
  transition: top var(--transition-base) ease, transform var(--transition-base) ease;
}
.tools-nav-bar-away { /* used: challenges-canvases-atw */
  transform: translateY(-100%);
}
:root[data-motion="still"] .tools-nav-bar-sliding,
:root[data-motion="still"] .strategies-menu-box { /* used: challenges-canvases-atw */
  transition: none;
}
/* The intervention panel lines up with the centred column above and below
   it; the gutters keep the panel colours, the page colour on the left and
   the intervention colour on the right. Side by side only. */
@media (min-width: 601px) {
  .intervention-frame-band { /* used: challenges-canvases-atw */
    background-image: linear-gradient(to right, var(--t-intervention-gutter) 50%, transparent 50%);
  }
  .intervention-centred { /* used: challenges-canvases-atw */
    margin-left: auto;
    margin-right: auto;
  }
}
/* The words side of the panel. Same layout as UMA.css .intervention-section-left,
   written on these pages' own classes so their heading and paragraphs follow
   these pages. */
.intervention-panel-left { /* used: challenges-canvases-atw */
  width: 61.8%;
  flex-shrink: 0;
  background: var(--t-intervention-left);
  padding-top: var(--app-default-top-bottom-margin-xxxxl);
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--mirror-right-padding);
  padding-bottom: var(--app-default-top-bottom-margin-xxxxxl);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (max-width: 600px) {
  .intervention-panel-left { /* used: challenges-canvases-atw */
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }
}
.intervention-title { /* used: challenges-canvases-atw */
  font-size: var(--intervention-heading-size);
  color: var(--t-intervention-title);
  line-height: var(--default-line-height-single);
  margin-bottom: var(--intervention-heading-margin-bottom);
}
@media (max-width: 900px) {
  .intervention-title { /* used: challenges-canvases-atw */
    line-height: var(--default-line-height-x-small);
  }
}
@media (max-width: 600px) {
  .intervention-panel-left { /* used: challenges-canvases-atw */
    display: contents;
  }
  .intervention-title { /* used: challenges-canvases-atw */
    order: 2;
    margin-top: var(--app-default-top-bottom-margin-xxl);
    margin-bottom: var(--app-default-top-bottom-margin-xxl);
  }
}
.intervention-paragraph { /* used: challenges-canvases-atw */
  font-size: var(--body-text-sm);
  line-height: var(--default-line-height-large);
  margin-top: 0;
  margin-bottom: var(--app-default-top-bottom-margin-sm);
  padding-top: 0;
}
.intervention-paragraph:last-child { /* used: challenges-canvases-atw */
  margin-bottom: 0;
}
/* The reference numbers in the paragraphs keep the paragraph's line height */
.intervention-reference-number { /* used: challenges-canvases-atw */
  line-height: inherit;
}
/* Hormonal health: references straight under the paragraphs get the space the support buttons give */
.references-spaced { /* used: challenges-canvases-atw */
  margin-top: var(--app-default-top-bottom-margin-xxxl);
}
.intervention-references-item { /* used: challenges-canvases-atw */
  border-bottom: none;
  border-top: var(--stroke-thin) solid var(--dark-white);
}
.intervention-references-button { /* used: challenges-canvases-atw */
  color: var(--t-references-button);
}
.intervention-references-button:hover { /* used: challenges-canvases-atw */
  color: var(--t-references-button-hover);
}
@media (min-width: 601px) and (max-width: 900px) {
  .intervention-panel-left { /* used: challenges-canvases-atw */
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }
  .intervention-centred { /* used: challenges-canvases-atw */
    flex-direction: column;
    min-height: 0;
    padding: 0 var(--default-left-right-mob-body-padding) var(--app-default-top-bottom-margin-xxxxxl);
  }
  .intervention-panel-left,
  .intervention-panel-right { /* used: challenges-canvases-atw */
    display: contents;
  }
  .intervention-picture { /* used: challenges-canvases-atw */
    order: 1;
    width: calc(100% + 2 * var(--default-left-right-mob-body-padding));
    max-width: none;
    height: auto;
    aspect-ratio: var(--carouselle-card-ratio-landscape);
    border-radius: 0;
    margin-left: calc(-1 * var(--default-left-right-mob-body-padding));
    margin-top: 0;
  }
  .intervention-title { /* used: challenges-canvases-atw */
    order: 2;
    margin-top: var(--app-default-top-bottom-margin-xxl);
    margin-bottom: var(--app-default-top-bottom-margin-xxl);
    line-height: var(--default-line-height-x-small);
  }
  .intervention-words { /* used: challenges-canvases-atw */
    order: 3;
  }
  .intervention-earmark { /* used: challenges-canvases-atw */
    border-top-right-radius: 0;
  }
}
@media (max-width: 900px) {
  .intervention-centred { /* used: challenges-canvases-atw */
    background: var(--t-intervention-stacked);
  }
}
@media (min-width: 901px) {
  .intervention-title,
  .intervention-words { /* used: challenges-canvases-atw */
    max-width: var(--golden-width-small);
  }
}
/* The product section: heading and intro on the left, with the page gutters */
.products-intro-box { /* used: challenges-canvases-atw */
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
}
@media (max-width: 600px) {
  .products-intro-box { /* used: challenges-canvases-atw */
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }
}
.products-intro-text { /* used: challenges-canvases-atw */
  text-align: left;
}
.strategies-product-card { /* used: challenges-canvases-atw */
  color: var(--text-on-colour);
}
.tools-footnote { /* used: challenges-canvases-atw */
  color: var(--t-footnote);
}
.strategies-product-words { /* used: challenges-canvases-atw */
  color: var(--text-on-colour);
}
.strategies-product-subtitle { /* used: challenges-canvases-atw */
  color: var(--text-on-colour);
  margin-bottom: 0;
}

/* ---------- 9c. CANVAS FRONT PAGES ---------- */
/* The value proposition on the red left half, a preview of the canvas on
   the right half. One column from 700px down, the preview first. */
.canvas-front-split { /* used: challenges-canvases-atw */
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--fixed-chrome-stack-height));
  min-height: calc(100dvh - var(--fixed-chrome-stack-height));
}
.canvas-front-intro { /* used: challenges-canvases-atw */
  box-sizing: border-box;
  min-width: 0;
  background-color: var(--red);
  padding: var(--app-default-top-bottom-margin-xxxxl) var(--default-left-right-desk-body-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.canvas-front-title { /* used: challenges-canvases-atw */
  font-size: var(--heading-size-xl);
  font-weight: var(--font-weight-extra-light);
  line-height: var(--default-line-height-x-small);
  color: var(--mid-white);
  margin: 0 0 var(--app-default-top-bottom-margin-lg);
}
.canvas-front-text { /* used: challenges-canvases-atw */
  font-size: var(--body-text-lg);
  line-height: var(--default-line-height-large);
  color: var(--mid-white);
  margin: 0 0 var(--app-default-top-bottom-margin-sm);
  max-width: var(--golden-width-small);
}
.canvas-front-start-button { /* used: challenges-canvases-atw */
  height: var(--button-size-lg);
  font-size: var(--body-text-lg);
  padding-left: var(--btn-padding-x);
  padding-right: var(--btn-padding-x);
  margin-top: var(--app-default-top-bottom-margin-xl);
  gap: var(--gap-xs);
  background-color: var(--t-front-button-bg);
  color: var(--t-front-button-text);
  border-color: var(--t-front-button-edge);
}
.canvas-front-start-button:hover { /* used: challenges-canvases-atw */
  background-color: var(--navy-dark);
}
.canvas-front-lock-icon { /* used: challenges-canvases-atw */
  display: none;
}
/* The page script adds this when the account is free */
.canvas-front-lock-icon-shown { /* used: challenges-canvases-atw */
  display: inline-block;
}
.canvas-front-preview { /* used: challenges-canvases-atw */
  box-sizing: border-box;
  min-width: 0;
  background-color: var(--t-surface);
  padding: var(--app-default-top-bottom-margin-xxxxl) var(--default-left-right-desk-body-padding);
  display: flex;
  align-items: center;
  justify-content: center;
}
.canvas-front-preview-image { /* used: challenges-canvases-atw */
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--app-default-radius-lg);
  box-shadow: var(--canvas-sheet-shadow);
}
@media (max-width: 700px) {
  .canvas-front-split { /* used: challenges-canvases-atw */
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .canvas-front-preview { /* used: challenges-canvases-atw */
    order: -1;
  }
  .canvas-front-intro,
  .canvas-front-preview { /* used: challenges-canvases-atw */
    padding: var(--app-default-top-bottom-margin-xxl) var(--default-left-right-desk-body-padding);
  }
}
@media (max-width: 600px) {
  .canvas-front-intro,
  .canvas-front-preview { /* used: challenges-canvases-atw */
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }
}

/* ---------- 9d. CANVASES ---------- */
/* The three canvases carry page-canvas on <html>, not page-support-tools:
   they have their own theme. Tokens are scoped to it with :where(). */
:root:where(.page-canvas) { /* used: challenges-canvases-atw */
  --button-icon-xxxl: 4rem;
  --app-section-para-text: 1.1rem;
  --icon-size-inline: var(--button-icon-md);
  --canvas-preview-height: 60dvh;
  --canvas-dashed-border: var(--stroke-thick) dashed var(--dark-white);
  --navy-40: #151C2D;
  --navy-60: #0E131E;
  --navy-60-rgb: 14, 19, 30;
  --t-page-bg: var(--mid-white);
  --t-band: var(--mid-white);
  --t-band-alt: var(--new-white);
  --t-surface: var(--light-white);
  --t-card: var(--mid-white);
  --t-surface-hover: var(--mid-white);
  --t-selected-bg: var(--navy);
  --t-selected-text: var(--bright-white);
  --t-nav-frost: rgba(var(--light-white-rgb), var(--opacity-very-high));
  --t-emphasis: var(--navy);
  --t-emphasis-hover: var(--navy-dark);
  --t-page-text: var(--mid-charcoal);
  --t-text-strong: var(--dark-charcoal);
  --t-text-secondary: var(--light-charcoal);
  --t-text-muted: var(--lightest-charcoal);
  --t-divider: var(--dark-white);
  --t-border: var(--dark-white);
  --t-line-muted: var(--lightest-charcoal);
  --t-chart-track: var(--light-mushroom);
  --t-chart-grid: var(--lightest-charcoal);
  --t-header-bg: var(--light-white);
  --t-card-panel: var(--mid-white);
  --t-hero-bg: var(--mid-white);
  --t-nav-control: var(--lightest-charcoal);
  --t-nav-control-hover-bg: var(--hover-overlay-light);
  --t-nav-control-hover-icon: var(--mid-charcoal);
  --t-nav-control-hover-edge: var(--mid-charcoal);
  --t-box-edge: var(--mushroom);
  --t-tooltip-bg: rgba(25, 25, 25, 0.9);
  --t-tooltip-text: var(--pure-white);
  --t-switch-bg: var(--dark-white);
  /* canvas controls */
  --t-canvas-control-text: var(--light-charcoal);
  --t-canvas-control-hover-bg: var(--mid-white);
  --t-canvas-control-hover-text: var(--mid-charcoal);
  --t-canvas-close-bg: var(--t-surface);
  --t-canvas-close-text: var(--light-charcoal);
  --t-canvas-close-edge: var(--light-charcoal);
  --t-canvas-tip-bg: var(--mid-charcoal);
  --t-canvas-tip-text: var(--bright-white);
  --t-canvas-note-navy: var(--navy);
  --t-canvas-name: var(--navy);
  --t-canvas-name-empty: var(--lightest-charcoal);
  --t-canvas-key-label: var(--t-page-text);
  --t-canvas-sheet-bg: var(--bright-white);
  --t-canvas-sheet-edge: var(--dark-white);
  --t-canvas-key-text: var(--mid-charcoal);
  --t-canvas-key-bg: var(--bright-white);
  --t-canvas-key-edge: var(--mid-mushroom);
  --t-canvas-add: var(--light-charcoal);
  --t-canvas-add-hover: var(--mid-charcoal);
  --t-canvas-add-hover-bg: var(--hover-overlay-light);
  --t-canvas-tray-heading: var(--light-charcoal);
  --t-canvas-dropdown-bg: var(--bright-white);
  --t-canvas-dropdown-edge: var(--dark-white);
  --t-canvas-preview-sheet: var(--dark-white);
  --t-canvas-photo-bg: var(--bright-white);
  --z-canvas-plotted-task: 5;
  --t-canvas-quad-text: var(--t-page-text);
  --t-canvas-quad-low: rgba(169, 60, 30, 0.09); /* NO COLOUR MIX 6 OCT: was --red-dark 9% mixed with transparent */
  --t-canvas-quad-growth: rgba(35, 104, 59, 0.09); /* NO COLOUR MIX 6 OCT: was --bright-green 9% mixed with transparent */
  --t-canvas-quad-forced: rgba(176, 130, 17, 0.12); /* NO COLOUR MIX 6 OCT: was --mustard 12% mixed with transparent */
  --t-canvas-quad-optimum: rgba(0, 101, 112, 0.09); /* NO COLOUR MIX 6 OCT: was --dark-teal 9% mixed with transparent */
  --t-canvas-grid-edge: var(--dark-white);
  --t-canvas-axis: var(--mid-charcoal);
  --t-canvas-zone-empty: var(--lightest-charcoal);
  --t-canvas-zone-row-edge: var(--stroke-thin) solid var(--mid-white);
  --t-canvas-footer-edge: var(--mid-white);
  --t-canvas-wish-empty: var(--lightest-charcoal);
  --t-canvas-tag-bg: var(--mid-white);
  --t-canvas-tag-edge: var(--dark-white);
  --t-canvas-tag-text: var(--light-charcoal);
}
:root[data-theme="dark"]:where(.page-canvas) { /* used: challenges-canvases-atw */
  --bright-white: var(--mid-white);
  --bright-white-rgb: 242, 237, 234;
  --canvas-dashed-border: var(--stroke-thick) dashed var(--t-line-muted);
  --t-page-bg: var(--navy-60);
  --t-band: var(--navy-60);
  --t-band-alt: var(--navy-40);
  --t-surface: var(--navy);
  --t-card: var(--navy);
  --t-surface-hover: var(--navy-dark);
  --t-selected-bg: var(--bright-white);
  --t-selected-text: var(--navy);
  --t-nav-frost: rgba(var(--navy-60-rgb), var(--opacity-very-high));
  --t-emphasis: var(--bright-white);
  --t-emphasis-hover: var(--bright-white);
  --t-page-text: var(--bright-white);
  --t-text-strong: var(--bright-white);
  --t-text-secondary: rgba(var(--bright-white-rgb), 0.7);
  --t-text-muted: rgba(var(--bright-white-rgb), 0.55);
  --t-divider: rgba(var(--bright-white-rgb), 0.1);
  --t-border: rgba(var(--bright-white-rgb), 0.2);
  --t-line-muted: rgba(var(--bright-white-rgb), 0.5);
  --t-chart-track: rgba(var(--bright-white-rgb), 0.1);
  --t-chart-grid: rgba(var(--bright-white-rgb), 0.2);
  --t-header-bg: var(--navy-60);
  --t-card-panel: var(--navy-dark);
  --t-hero-bg: var(--navy-40);
  --t-nav-control: var(--bright-white);
  --t-nav-control-hover-bg: var(--bright-white);
  --t-nav-control-hover-icon: var(--navy-40);
  --t-nav-control-hover-edge: var(--bright-white);
  --t-box-edge: rgba(var(--bright-white-rgb), 0.2);
  --t-tooltip-bg: var(--bright-white);
  --t-tooltip-text: var(--navy);
  --t-switch-bg: var(--navy);
  --t-canvas-control-text: var(--t-text-strong);
  --t-canvas-control-hover-bg: var(--bright-white);
  --t-canvas-control-hover-text: var(--navy-40);
  --t-canvas-close-bg: var(--mid-white);
  --t-canvas-close-text: var(--navy);
  --t-canvas-close-edge: var(--mid-white);
  --t-canvas-tip-bg: var(--mid-white);
  --t-canvas-tip-text: var(--navy);
  --t-canvas-note-navy: var(--orange);
  --t-canvas-category-text: var(--t-page-text);
  --t-canvas-name: var(--t-page-text);
  --t-canvas-name-empty: var(--t-text-muted);
  --t-canvas-sheet-bg: var(--navy);
  --t-canvas-sheet-edge: transparent;
  --t-canvas-key-text: var(--mid-white);
  --t-canvas-key-bg: var(--navy-dark);
  --t-canvas-key-edge: var(--navy-40);
  --t-canvas-add: var(--t-nav-control);
  --t-canvas-add-hover: var(--t-nav-control-hover-icon);
  --t-canvas-add-hover-bg: var(--t-nav-control-hover-bg);
  --t-canvas-tray-heading: var(--t-page-text);
  --t-canvas-dropdown-bg: var(--t-surface);
  --t-canvas-footer-edge: var(--t-border);
  --t-canvas-wish-empty: var(--t-page-text);
  --t-canvas-tag-bg: var(--navy-dark);
  --t-canvas-tag-edge: var(--navy-40);
  --t-canvas-tag-text: var(--t-page-text);
  --t-canvas-preview-sheet: var(--navy-40);
  --t-canvas-photo-bg: var(--t-surface);
  --t-canvas-quad-text: var(--mid-charcoal);
  --t-canvas-quad-low: #EBDDD8; /* NO COLOUR MIX 6 OCT: was --red-dark 9% mixed with --mid-white */
  --t-canvas-quad-growth: #DFE1DA; /* NO COLOUR MIX 6 OCT: was --bright-green 9% mixed with --mid-white */
  --t-canvas-quad-forced: #EAE0D0; /* NO COLOUR MIX 6 OCT: was --mustard 12% mixed with --mid-white */
  --t-canvas-quad-optimum: #DCE1DF; /* NO COLOUR MIX 6 OCT: was --dark-teal 9% mixed with --mid-white */
  --t-canvas-grid-edge: var(--navy-40);
  --t-canvas-axis: var(--t-line-muted);
  --t-canvas-zone-head: var(--t-page-text);
  --t-canvas-zone-empty: var(--t-text-secondary);
  --t-canvas-zone-row-edge: none;
  --t-canvas-zone-row-text: var(--mid-white);
}

/* On screen the canvas fills the window */
@media screen {
  .canvas-full-screen { /* used: challenges-canvases-atw */
    top: 0;
    left: 0;
    width: auto;
  }
}
/* The zoom bar, top left: map, zoom out, level, zoom in, download */
.canvas-nav { /* used: challenges-canvases-atw */
  margin-top: var(--app-default-top-bottom-margin-xl);
}
.uma-canvas-zoom-area { /* used: challenges-canvases-atw */
  position: relative;
}
.canvas-zoom-bar { /* used: challenges-canvases-atw */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--t-surface);
  border-radius: var(--app-default-radius-sm);
  box-shadow: var(--canvas-sheet-shadow);
}
.canvas-zoom-button { /* used: challenges-canvases-atw */
  position: relative;
  width: var(--button-size-md);
  height: var(--button-size-md);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  bottom: auto;
  right: auto;
  z-index: auto;
  color: var(--t-canvas-control-text);
}
.canvas-zoom-button:hover { /* used: challenges-canvases-atw */
  background: var(--t-canvas-control-hover-bg);
  color: var(--t-canvas-control-hover-text);
}
.canvas-zoom-button-first { /* used: challenges-canvases-atw */
  border-top-left-radius: var(--app-default-radius-sm);
  border-bottom-left-radius: var(--app-default-radius-sm);
}
.canvas-zoom-button-last { /* used: challenges-canvases-atw */
  border-top-right-radius: var(--app-default-radius-sm);
  border-bottom-right-radius: var(--app-default-radius-sm);
}
.canvas-zoom-divided { /* used: challenges-canvases-atw */
  border-left: var(--stroke-hairline) solid var(--t-border);
}
.canvas-zoom-icon { /* used: challenges-canvases-atw */
  font-size: var(--button-icon-md);
}
.uma-canvas-zoom-level { /* used: challenges-canvases-atw */
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--button-size-md) * 2);
  height: var(--button-size-md);
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--t-page-text);
}
/* The tooltips under the controls show on hover and on keyboard focus */
.uma-canvas-tooltip { /* used: challenges-canvases-atw */
  position: absolute;
  top: calc(100% + var(--field-action-gap));
  left: 50%;
  transform: translateX(-50%);
  background: var(--t-canvas-tip-bg);
  color: var(--t-canvas-tip-text);
  font-size: 1rem;
  padding: 0 var(--answer-gap);
  border-radius: var(--radius-tooltip-large);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10000010;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  height: var(--button-size-md);
  line-height: var(--button-size-md);
  display: flex;
  align-items: center;
}
.canvas-zoom-button:hover .uma-canvas-tooltip,
.canvas-zoom-button:focus-visible .uma-canvas-tooltip,
.canvas-close-button:hover .uma-canvas-tooltip,
.canvas-close-button:focus-visible .uma-canvas-tooltip { /* used: challenges-canvases-atw */
  opacity: 1;
  visibility: visible;
}
/* The canvas map under the zoom bar */
.uma-canvas-preview { /* used: challenges-canvases-atw */
  position: absolute;
  top: calc(100% + var(--gap-xs));
  left: 0;
  background: var(--t-surface);
  box-shadow: var(--canvas-sheet-shadow);
  border-radius: var(--app-default-radius-sm);
  padding: var(--gap-xs);
}
.uma-canvas-preview-header { /* used: challenges-canvases-atw */
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--gap-xs);
}
.uma-canvas-preview-close { /* used: challenges-canvases-atw */
  display: flex;
  background: var(--t-surface-hover);
  border: none;
  color: var(--t-canvas-control-text);
}
.uma-canvas-preview-map { /* used: challenges-canvases-atw */
  display: block;
  height: var(--canvas-preview-height);
  cursor: pointer;
  touch-action: none;
}
.uma-canvas-preview-frame { /* used: challenges-canvases-atw */
  fill: none;
  stroke: var(--orange);
  stroke-width: var(--stroke-thick);
  vector-effect: non-scaling-stroke;
}
/* Save and exit, top right */
.uma-canvas-right-controls { /* used: challenges-canvases-atw */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-sm);
}
.canvas-close-button { /* used: challenges-canvases-atw */
  position: relative;
  display: flex;
  background-color: var(--t-canvas-close-bg);
  color: var(--t-canvas-close-text);
  border: none;
  border-color: var(--t-canvas-close-edge);
  box-shadow: var(--canvas-sheet-shadow);
}
.canvas-close-button:hover { /* used: challenges-canvases-atw */
  background: var(--t-surface-hover);
}

/* The navy title tile and the keyboard shortcuts beside it */
.canvas-title-tile { /* used: challenges-canvases-atw */
  padding: var(--app-default-top-bottom-margin-xxxl);
  /* on phones the page script sets this so the tile fits the screen */
  max-width: var(--canvas-title-tile-max-width, none);
}
/* Words on colour (the title tile, the wish list pictures) are mid white.
   The shared rules colour them with --bright-white, so it is pointed at mid
   white here */
.canvas-words-on-colour { /* used: challenges-canvases-atw */
  --bright-white: var(--text-on-colour);
  color: var(--text-on-colour);
}
/* The shortcut names take the page text colour, not the lighter grey of the
   shared rule; the shared rule reads --light-charcoal, so it is pointed at
   the page text here */
.canvas-shortcut-name { /* used: challenges-canvases-atw */
  --light-charcoal: var(--t-canvas-key-label);
}

/* The sheets: titles start with the person's name */
.canvas-page-title { /* used: challenges-canvases-atw */
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--gap-regular);
  flex: 1;
  flex-wrap: wrap;
}
.canvas-title-line { /* used: challenges-canvases-atw */
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  flex-wrap: wrap;
}
.canvas-name-first { /* used: challenges-canvases-atw */
  display: inline-block;
  width: auto;
  font-family: 'Caveat', cursive;
  font-size: var(--canvas-pt-xl);
  font-weight: var(--font-weight-semi-bold);
  color: var(--t-canvas-name);
  border-bottom: var(--stroke-thick) solid transparent;
  transition: border-color var(--transition-fast);
  padding-right: 0;
  min-width: 0;
  white-space: normal;
  cursor: text;
}
.canvas-name-first:hover { /* used: challenges-canvases-atw */
  border-bottom-color: var(--dark-white);
}
.canvas-name-first:focus { /* used: challenges-canvases-atw */
  border-bottom-color: transparent;
}
.canvas-name-first.is-confirmed:hover { /* used: challenges-canvases-atw */
  border-bottom-color: transparent;
  transition: none;
}
.uma-canvas-name-possessive { /* used: challenges-canvases-atw */
  font-family: "Caveat", cursive;
  font-size: var(--canvas-pt-xl);
  font-weight: var(--font-weight-semi-bold);
  color: var(--t-canvas-name);
  margin-right: var(--gap-xxs);
}
/* With no name typed yet, the 's is greyed */
.canvas-title-line:has(.canvas-name-first:empty) .uma-canvas-name-possessive { /* used: challenges-canvases-atw */
  color: var(--t-canvas-name-empty);
}
/* How to work with me: the name title on the left, pronouns and neurotype
   on the right */
.canvas-title-identity { /* used: challenges-canvases-atw */
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  padding-right: calc(var(--button-size-xl) + var(--gap-md));
}
.canvas-identity-row { /* used: challenges-canvases-atw */
  margin-top: 0;
  width: auto;
  align-items: center;
  gap: var(--gap-md);
}
.canvas-pronouns-row { /* used: challenges-canvases-atw */
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}
.canvas-neurotype-row { /* used: challenges-canvases-atw */
  flex-direction: row;
  align-items: center;
  gap: var(--gap-xs);
}
.canvas-neurotype-flush { /* used: challenges-canvases-atw */
  padding-bottom: 0;
}
/* Pronouns and neurotype show on the first sheet only */
.canvas-identity-hidden { /* used: challenges-canvases-atw */
  display: none;
}
.canvas-wish-title { /* used: challenges-canvases-atw */
  display: flex;
  align-items: baseline;
  gap: var(--gap-sm);
}
.canvas-wish-heading { /* used: challenges-canvases-atw */
  flex-shrink: 0;
}
.canvas-wish-name { /* used: challenges-canvases-atw */
  white-space: normal;
  --dark-charcoal: var(--t-text-strong);
}
/* "I am", "My pronouns" and "My neurotype" show only once a pill is chosen */
.canvas-also-label:not(:has(+ * .uma-canvas-identity-tag:not(.uma-canvas-tag-add))) { /* used: challenges-canvases-atw */
  display: none;
}
.canvas-tag-add { /* used: challenges-canvases-atw */
  padding-left: var(--gap-lg);
  padding-right: var(--gap-lg);
}
.canvas-dropdown { /* used: challenges-canvases-atw */
  padding: 0;
  overflow: hidden;
}
/* Each category heading takes its colour from the page script
   (--category-colour); in dark they are page text */
.canvas-category-title { /* used: challenges-canvases-atw */
  color: var(--t-canvas-category-text, var(--category-colour));
  border-bottom-color: var(--t-canvas-category-text, var(--category-colour));
}
.canvas-list { /* used: challenges-canvases-atw */
  padding-left: calc(var(--gap-sm) * 2);
  padding-right: var(--gap-sm);
}
/* Post-its: words in mid white; in dark the navy post-its turn orange */
.canvas-note { /* used: challenges-canvases-atw */
  color: var(--text-on-colour);
  --navy: var(--t-canvas-note-navy);
}
.canvas-tray { /* used: challenges-canvases-atw */
  border: none;
  background: transparent;
}

/* Canvas colours in dark. The shared canvas rules colour these with palette
   tokens (--light-charcoal, --dark-white and so on), several of them through
   two-part selectors. Each class below points those palette tokens at the
   canvas theme on that element only, so the shared rules stay as they are
   and the light colours are unchanged. */
.canvas-page-body { /* used: challenges-canvases-atw */
  background-color: var(--t-page-bg);
  color: var(--t-page-text);
}
.canvas-sheet { /* used: challenges-canvases-atw */
  background: var(--t-canvas-sheet-bg);
  border-color: var(--t-canvas-sheet-edge);
}
.canvas-card-heading { /* used: challenges-canvases-atw */
  --navy: var(--t-emphasis);
}
.canvas-key { /* used: challenges-canvases-atw */
  --mid-charcoal: var(--t-canvas-key-text);
  --bright-white: var(--t-canvas-key-bg);
  --mid-mushroom: var(--t-canvas-key-edge);
}
.canvas-add { /* used: challenges-canvases-atw */
  color: var(--t-canvas-add);
  --light-charcoal: var(--t-canvas-add);
  --mid-charcoal: var(--t-canvas-add-hover);
  --hover-overlay-light: var(--t-canvas-add-hover-bg);
}
.canvas-tray-heading { /* used: challenges-canvases-atw */
  --light-charcoal: var(--t-canvas-tray-heading);
}
.canvas-dropdown-colours { /* used: challenges-canvases-atw */
  --dark-white: var(--t-canvas-dropdown-edge);
  background: var(--t-canvas-dropdown-bg);
}
.canvas-shortcut-text { /* used: challenges-canvases-atw */
  --mid-charcoal: var(--t-page-text);
}
.canvas-quiet-text { /* used: challenges-canvases-atw */
  --light-charcoal: var(--t-text-secondary);
}
.canvas-sheet-footer { /* used: challenges-canvases-atw */
  --lightest-charcoal: var(--t-text-muted);
  --mid-white: var(--t-canvas-footer-edge);
}
.canvas-cost-total { /* used: challenges-canvases-atw */
  --dark-white: var(--t-border);
}
.canvas-wish-empty { /* used: challenges-canvases-atw */
  --lightest-charcoal: var(--t-canvas-wish-empty);
}
.canvas-also-label { /* used: challenges-canvases-atw */
  --light-charcoal: var(--t-text-secondary);
}
.canvas-tag-add-colours { /* used: challenges-canvases-atw */
  --mid-white: var(--t-canvas-tag-bg);
  --dark-white: var(--t-canvas-tag-edge);
  --light-charcoal: var(--t-canvas-tag-text);
}
.canvas-tag-colours { /* used: challenges-canvases-atw */
  --mid-white: var(--t-canvas-tag-bg);
  --dark-white: var(--t-canvas-tag-edge);
  --light-charcoal: var(--t-text-secondary);
}
.canvas-placeholder { /* used: challenges-canvases-atw */
  --lightest-charcoal: var(--t-text-muted);
}
.uma-canvas-preview-sheet { /* used: challenges-canvases-atw */
  fill: var(--t-canvas-preview-sheet);
}
.canvas-dropdown-option { /* used: challenges-canvases-atw */
  border-radius: 0;
  min-height: var(--button-size-sm);
  padding: 0 var(--gap-sm);
}
.canvas-dropdown-option:not(:first-child) { /* used: challenges-canvases-atw */
  border-top: var(--stroke-hairline) solid var(--dark-white);
}
.canvas-photo { /* used: challenges-canvases-atw */
  background: var(--t-canvas-photo-bg);
}
/* Job crafting: the theory rows under the title */
.canvas-theory-card { /* used: challenges-canvases-atw */
  --bright-white: var(--t-canvas-sheet-bg);
  --dark-white: var(--t-canvas-sheet-edge);
}
.canvas-theory-body { /* used: challenges-canvases-atw */
  padding: var(--app-default-top-bottom-margin-xxxl);
}
.canvas-theory-text { /* used: challenges-canvases-atw */
  font-size: var(--body-text-lg);
  padding-left: var(--app-default-top-bottom-margin-xl);
  margin-bottom: var(--app-default-top-bottom-margin-xl);
  line-height: var(--default-line-height-large);
  max-width: calc(var(--canvas-sheet-width) * 0.618 - 38px);
}
.canvas-theory-text:last-child { /* used: challenges-canvases-atw */
  margin-bottom: 0;
}
/* Job crafting: the four zones of the grid. Each zone carries its colour;
   in dark the zones are light tints with dark words */
.canvas-quad { /* used: challenges-canvases-atw */
  color: var(--t-canvas-quad-text);
}
.canvas-quad-low { /* used: challenges-canvases-atw */
  --quad-colour: var(--red-dark);
  background: var(--t-canvas-quad-low);
}
.canvas-quad-growth { /* used: challenges-canvases-atw */
  --quad-colour: var(--bright-green);
  background: var(--t-canvas-quad-growth);
}
.canvas-quad-forced { /* used: challenges-canvases-atw */
  --quad-colour: var(--mustard);
  background: var(--t-canvas-quad-forced);
}
.canvas-quad-optimum { /* used: challenges-canvases-atw */
  --quad-colour: var(--dark-teal);
  background: var(--t-canvas-quad-optimum);
}
.canvas-quad-words { /* used: challenges-canvases-atw */
  color: var(--quad-colour);
}
.canvas-grid { /* used: challenges-canvases-atw */
  border-color: var(--t-canvas-grid-edge);
}
.canvas-axis { /* used: challenges-canvases-atw */
  background: var(--t-canvas-axis);
}
.canvas-plot { /* used: challenges-canvases-atw */
  z-index: var(--z-canvas-plotted-task);
}
/* A task placed on the grid */
.canvas-task { /* used: challenges-canvases-atw */
  --bright-white: var(--text-on-colour);
  color: var(--text-on-colour);
  border-radius: var(--radius-pill);
  z-index: var(--z-canvas-plotted-task);
  width: max-content;
  padding-left: var(--gap-md);
  padding-right: var(--gap-xl);
}
.canvas-task:hover .canvas-task-bin { /* used: challenges-canvases-atw */
  opacity: var(--opacity-visible);
}
.canvas-task:has(.canvas-task-bin:hover) { /* used: challenges-canvases-atw */
  background: var(--tomato);
}
.canvas-cluster-heading { /* used: challenges-canvases-atw */
  --body-text-xs: var(--body-text-lg);
  --light-charcoal: var(--t-page-text);
}
.canvas-category-half { /* used: challenges-canvases-atw */
  flex: 0 0 calc((100% - var(--gap-md)) / 2);
}
.canvas-dropzone-padded { /* used: challenges-canvases-atw */
  padding: var(--app-default-top-bottom-margin-lg) var(--app-default-top-bottom-margin-xl);
}
/* Job crafting action plan: in dark the zone headings are page text, the
   zone keeps its colour for its line and bullets */
.canvas-zone-head { /* used: challenges-canvases-atw */
  color: var(--t-canvas-zone-head, currentColor);
}
.canvas-zone-empty { /* used: challenges-canvases-atw */
  --lightest-charcoal: var(--t-canvas-zone-empty);
}
.canvas-zone-row { /* used: challenges-canvases-atw */
  border-bottom: var(--t-canvas-zone-row-edge);
}
.canvas-zone-row-text { /* used: challenges-canvases-atw */
  color: var(--t-canvas-zone-row-text, currentColor);
}
/* The bin on a wish list picture. Sensory: on touch screens a small circle
   at the top right. How to work with me: a round button in the middle, always
   showing on touch screens. With a mouse it covers the whole picture on both. */
@media (pointer: coarse) {
  .canvas-remove-corner { /* used: challenges-canvases-atw */
    inset: auto;
    top: var(--gap-xs);
    right: var(--gap-xs);
    width: var(--button-size-sm);
    height: var(--button-size-sm);
    border-radius: var(--radius-circle);
    opacity: var(--opacity-visible);
  }
}
.canvas-remove-round { /* used: challenges-canvases-atw */
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--button-size-md);
  height: var(--button-size-md);
  border-radius: var(--radius-circle);
  font-size: var(--button-icon-sm);
}
@media (pointer: coarse) {
  .canvas-remove-round { /* used: challenges-canvases-atw */
    opacity: var(--opacity-visible);
  }
}
@media (hover: hover) {
  .canvas-remove-cover { /* used: challenges-canvases-atw */
    top: 0;
    left: 0;
    inset: 0;
    transform: none;
    width: 100%;
    height: 100%;
    border-radius: var(--app-default-radius-sm);
  }
}

/* ---------- 9e. ACCESS TO WORK ---------- */
/* Before starting: introduction on the left, checklist on the red right
   half. After starting: the question cards on the left; the right half
   stays coloured because the Access to Work application opens over it. */
.assistant-split { /* used: challenges-canvases-atw */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "intro checklist" "cards checklist";
}
.assistant-intro { /* used: challenges-canvases-atw */
  grid-area: intro;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--app-default-top-bottom-margin-xxxxl) var(--default-left-right-desk-body-padding) var(--app-default-top-bottom-margin-xxxxl);
}
.assistant-cards { /* used: challenges-canvases-atw */
  grid-area: cards;
  min-width: 0;
  padding-top: var(--app-default-top-bottom-margin-xxl);
}
.assistant-checklist-panel { /* used: challenges-canvases-atw */
  grid-area: checklist;
  box-sizing: border-box;
  background-color: var(--red);
  color: var(--mid-white);
  padding: 0 var(--default-left-right-desk-body-padding);
}
.assistant-checklist-sticky { /* used: challenges-canvases-atw */
  position: sticky;
  top: var(--fixed-chrome-stack-height);
  padding: var(--app-default-top-bottom-margin-xxxxl) 0;
}
.assistant-title { /* used: challenges-canvases-atw */
  font-size: var(--heading-size-xl);
  font-weight: var(--font-weight-extra-light);
  line-height: var(--default-line-height-x-small);
  color: var(--t-page-text);
  margin: 0 0 var(--app-default-top-bottom-margin-xs);
}
.assistant-timer { /* used: challenges-canvases-atw */
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  font-size: var(--body-text-sm);
  color: var(--t-assistant-quiet);
  margin: 0 0 var(--app-default-top-bottom-margin-xl);
}
.assistant-subheading { /* used: challenges-canvases-atw */
  font-size: var(--heading-size-md);
  font-weight: var(--font-weight-light);
  line-height: var(--default-line-height-x-small);
  color: var(--t-page-text);
  margin: 0 0 var(--app-default-top-bottom-margin-sm);
}
.assistant-warning-heading { /* used: challenges-canvases-atw */
  font-size: var(--heading-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--t-page-text);
  margin: var(--app-default-top-bottom-margin-xl) 0 var(--app-default-top-bottom-margin-xs);
}
.assistant-body-text { /* used: challenges-canvases-atw */
  color: var(--t-assistant-body);
  max-width: var(--golden-width-large);
}
.assistant-start-button { /* used: challenges-canvases-atw */
  height: var(--button-size-lg);
  font-size: var(--body-text-lg);
  padding-left: var(--btn-padding-x);
  padding-right: var(--btn-padding-x);
  margin-top: var(--app-default-top-bottom-margin-xl);
  gap: var(--gap-xs);
}
.assistant-start-button:disabled { /* used: challenges-canvases-atw */
  background: var(--lightest-charcoal);
  cursor: not-allowed;
}
.assistant-lock-icon { /* used: challenges-canvases-atw */
  display: none;
}
/* Locked: the lock shows and the arrow goes. Locked for free accounts, the
   button stays pressable so it can open the upgrade panel. The button's
   words and icons come from Firestore, so the arrow is named by its icon. */
.assistant-start-button:disabled .assistant-lock-icon,
.assistant-start-button.is-locked .assistant-lock-icon { /* used: challenges-canvases-atw */
  display: inline-block;
}
.assistant-start-button:disabled .ph-arrow-square-out,
.assistant-start-button.is-locked .ph-arrow-square-out { /* used: challenges-canvases-atw */
  display: none;
}
.assistant-locked-message { /* used: challenges-canvases-atw */
  font-size: var(--body-text-sm);
  color: var(--t-text-secondary);
  margin: var(--app-default-top-bottom-margin-sm) 0 0;
}
.assistant-small-print { /* used: challenges-canvases-atw */
  font-size: var(--body-text-sm);
  color: var(--t-text-secondary);
  margin: var(--app-default-top-bottom-margin-lg) 0 0;
}
.assistant-checklist-eyebrow { /* used: challenges-canvases-atw */
  color: var(--mid-white);
}
.assistant-checklist-eyebrow-spaced { /* used: challenges-canvases-atw */
  margin-top: var(--app-default-top-bottom-margin-xxxl);
  color: var(--mid-white);
}
.assistant-checklist-heading { /* used: challenges-canvases-atw */
  font-size: var(--heading-size-lg);
  font-weight: var(--font-weight-extra-light);
  line-height: var(--default-line-height-x-small);
  color: var(--mid-white);
  margin: 0 0 var(--app-default-top-bottom-margin-xl);
}
.assistant-checklist-heading-spaced { /* used: challenges-canvases-atw */
  margin-top: var(--app-default-top-bottom-margin-xxxl);
}
.assistant-checklist { /* used: challenges-canvases-atw */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--app-default-top-bottom-margin-sm);
  max-width: var(--golden-width-small);
}
.assistant-checklist-label { /* used: challenges-canvases-atw */
  display: flex;
  align-items: flex-start;
  gap: var(--gap-regular);
  font-size: var(--body-text-lg);
  line-height: var(--default-line-height-small);
  color: var(--mid-white);
  cursor: pointer;
}
/* The words beside each box line up with the middle of the box. The label's
   words come from Firestore, so the words span carries no class of its own. */
.assistant-checklist-label > span:not(.assistant-checkbox-box) { /* used: challenges-canvases-atw */
  margin-top: calc((var(--button-size-sm) - 1lh) / 2);
}
.assistant-checklist-note { /* used: challenges-canvases-atw */
  font-size: var(--body-text-sm);
  color: var(--text-on-colour);
  margin: var(--app-default-top-bottom-margin-lg) 0 0;
}
.assistant-checkbox-box { /* used: challenges-canvases-atw */
  position: relative;
  flex: 0 0 auto;
  width: var(--button-size-sm);
  height: var(--button-size-sm);
}
.assistant-checkbox { /* used: challenges-canvases-atw */
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  border: var(--stroke-thick) solid var(--mid-white);
  border-radius: var(--app-default-radius-sm);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--transition-base) ease, border-color var(--transition-base) ease;
}
.assistant-checkbox:checked { /* used: challenges-canvases-atw */
  background-color: var(--bright-teal);
  border-color: var(--bright-teal);
}
.assistant-checkbox:disabled { /* used: challenges-canvases-atw */
  cursor: default;
}
.assistant-checkbox-tick { /* used: challenges-canvases-atw */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--button-icon-md);
  color: var(--mid-white);
  opacity: var(--opacity-hidden);
  pointer-events: none;
}
.assistant-checkbox:checked + .assistant-checkbox-tick { /* used: challenges-canvases-atw */
  opacity: var(--opacity-visible);
}
/* Desktop only: touch screens see a message instead of the tool */
.assistant-desktop-only { /* used: challenges-canvases-atw */
  display: none;
  box-sizing: border-box;
  padding: var(--app-default-top-bottom-margin-xxxxl) var(--default-left-right-mob-body-padding);
}
@media (pointer: coarse) {
  .assistant-split { /* used: challenges-canvases-atw */
    display: none;
  }
  .assistant-desktop-only { /* used: challenges-canvases-atw */
    display: block;
  }
}
/* The tool: question cards over the whole window, one column. The Access to
   Work application opens beside it in its own window. */
.assistant-tool-split { /* used: challenges-canvases-atw */
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-chrome) + 1);
  overflow-y: auto;
  background: var(--t-page-bg);
  grid-template-columns: 1fr;
  grid-template-areas: "cards";
  grid-template-rows: auto;
}
.assistant-tool-blank { /* used: challenges-canvases-atw */
  display: none;
  grid-area: blank;
  background-color: var(--navy);
}
/* The + on an Access to Work card: a yellow circle with a navy plus */
.assistant-card-plus { /* used: challenges-canvases-atw */
  --t-card-plus-disc: var(--yellow);
  --t-card-plus-icon: var(--navy);
}
.assistant-tool-cards { /* used: challenges-canvases-atw */
  padding-top: 0;
}
.uma-access-pending .assistant-tool-cards { /* used: challenges-canvases-atw */
  visibility: hidden;
}
.assistant-tool-header { /* used: challenges-canvases-atw */
  position: relative;
  box-sizing: border-box;
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-regular);
  padding: 0 var(--default-left-right-desk-body-padding);
}
@media (min-width: 600px) {
  .assistant-tool-header { /* used: challenges-canvases-atw */
    padding-left: var(--gap-regular);
    padding-right: var(--default-left-right-desk-body-padding);
    gap: var(--gap-xs);
  }
}
@media (max-width: 599px) {
  .assistant-tool-header { /* used: challenges-canvases-atw */
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }
}
.assistant-tool-title { /* used: challenges-canvases-atw */
  font-size: var(--heading-size-lg);
  font-weight: var(--font-weight-extra-light);
  line-height: var(--default-line-height-x-small);
  color: var(--t-assistant-tool-title);
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .assistant-tool-title { /* used: challenges-canvases-atw */
    font-size: var(--heading-size-md);
  }
}
.assistant-tool-exit { /* used: challenges-canvases-atw */
  margin-left: 0;
  flex-shrink: 0;
  background-color: var(--t-tool-exit-bg);
  color: var(--t-tool-exit-text);
  border-color: var(--t-tool-exit-edge);
}
.assistant-pill-bar-wrapper { /* used: challenges-canvases-atw */
  margin-bottom: var(--app-default-top-bottom-margin-lg);
}
.assistant-card-carousel { /* used: challenges-canvases-atw */
  padding-left: var(--default-left-right-desk-body-padding);
  padding-right: var(--default-left-right-desk-body-padding);
  scroll-padding-left: var(--default-left-right-desk-body-padding);
  scroll-padding-right: var(--default-left-right-desk-body-padding);
}
.assistant-card-controls { /* used: challenges-canvases-atw */
  padding-left: var(--default-left-right-desk-body-padding);
}
.assistant-red-card { /* used: challenges-canvases-atw */
  background-color: var(--red);
}
.question-card-eyebrow { /* used: challenges-canvases-atw */
  color: var(--t-card-eyebrow);
}
/* UMA.css takes the gap off the last paragraph with p:last-of-type, so
   this names :last-of-type too to keep it */
.question-card-eyebrow,
.question-card-eyebrow:last-of-type { /* used: challenges-canvases-atw */
  margin-bottom: var(--app-default-top-bottom-margin-xxs);
}
.question-card-back-subheader { /* used: challenges-canvases-atw */
  line-height: normal;
}
/* The cards keep navy in dark, title cards included */
.assistant-card-colours { /* used: challenges-canvases-atw */
  --t-flip-card-bg: var(--t-assistant-card);
  --t-title-card-bg: var(--t-assistant-title-card);
  --t-title-card-text: var(--t-assistant-title-card-text);
}
.assistant-nav-button { /* used: challenges-canvases-atw */
  border-color: var(--t-assistant-nav-edge);
}
.assistant-card-front-centred { /* used: challenges-canvases-atw */
  justify-content: center;
}
.title-card-count { /* used: challenges-canvases-atw */
  font-size: var(--body-text-lg);
  color: var(--mid-white);
  margin: var(--app-default-top-bottom-margin-sm) 0 0;
}
.title-card-text { /* used: challenges-canvases-atw */
  font-size: var(--body-text-sm);
  line-height: var(--default-line-height-large);
  color: var(--mid-white);
  margin: var(--app-default-top-bottom-margin-sm) 0 0;
}
.question-card-hint { /* used: challenges-canvases-atw */
  font-size: var(--body-text-xs);
  line-height: var(--default-line-height-large);
  color: var(--t-page-text);
  margin-top: var(--app-default-top-bottom-margin-sm);
  margin-bottom: 0;
}
.question-card-limit { /* used: challenges-canvases-atw */
  font-size: var(--body-text-xs);
  color: var(--t-assistant-quiet);
  margin-top: var(--app-default-top-bottom-margin-sm);
}
.question-card-actions { /* used: challenges-canvases-atw */
  margin-top: auto;
  padding-top: var(--app-default-top-bottom-margin-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-sm);
}
/* A picture of the application's fields, so people know what to expect */
.question-card-preview { /* used: challenges-canvases-atw */
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  margin-top: var(--gap-regular);
  pointer-events: none;
  user-select: none;
}
.question-card-preview-label { /* used: challenges-canvases-atw */
  font-size: var(--body-text-xs);
  color: var(--t-text-secondary);
}
.question-card-preview-label-spaced { /* used: challenges-canvases-atw */
  margin-top: var(--gap-xs);
}
.question-card-preview-field { /* used: challenges-canvases-atw */
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--button-size-md);
  border: none;
  border-radius: var(--radius-input);
  background-color: var(--t-preview-field);
}
.question-card-preview-field-short { /* used: challenges-canvases-atw */
  width: 50%;
}
.question-card-preview-field-tall { /* used: challenges-canvases-atw */
  height: calc(var(--button-size-md) * 3);
}
.question-card-preview-row { /* used: challenges-canvases-atw */
  display: flex;
  gap: var(--gap-sm);
}
.question-card-preview-group { /* used: challenges-canvases-atw */
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}
.question-card-preview-field-day { /* used: challenges-canvases-atw */
  width: var(--button-size-md);
}
.question-card-preview-field-year { /* used: challenges-canvases-atw */
  width: calc(var(--button-size-md) * 2);
}
/* The suggested answer */
.copy-answer-button { /* used: challenges-canvases-atw */
  gap: var(--gap-xs);
  background: var(--t-copy-answer-bg);
  border-color: var(--t-copy-answer-bg);
  color: var(--t-copy-answer-text);
}
.copy-answer-button:hover { /* used: challenges-canvases-atw */
  background: var(--t-copy-answer-hover);
}
.answer-options { /* used: challenges-canvases-atw */
  list-style: none;
  margin: var(--app-default-top-bottom-margin-sm) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}
.answer-option { /* used: challenges-canvases-atw */
  font-size: var(--body-text-xs);
  line-height: var(--default-line-height-small);
  color: var(--t-page-text);
  border: none;
  background-color: var(--t-border);
  border-radius: var(--app-default-radius-sm);
  padding: var(--gap-xs) var(--gap-regular);
}
.answer-option-selected { /* used: challenges-canvases-atw */
  background-color: var(--t-answer-selected-bg);
  color: var(--t-answer-selected-text);
}
/* Job title search pill, filled in from onboarding */
.job-title-search { /* used: challenges-canvases-atw */
  position: relative;
  width: 100%;
}
.job-title-search-spaced { /* used: challenges-canvases-atw */
  margin-top: var(--gap-regular);
}
.job-title-search-icon { /* used: challenges-canvases-atw */
  position: absolute;
  left: var(--gap-regular);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--button-icon-md);
  color: var(--light-charcoal);
  pointer-events: none;
}
.job-title-input { /* used: challenges-canvases-atw */
  box-sizing: border-box;
  width: 100%;
  height: var(--button-size-md);
  padding: 0 var(--gap-regular) 0 var(--button-size-md);
  border: var(--stroke-hairline) solid var(--lightest-charcoal);
  border-radius: var(--radius-pill);
  background-color: var(--bright-white);
  font-family: inherit;
  font-size: var(--body-text-sm);
}
.visually-hidden-label { /* used: challenges-canvases-atw */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Copy-and-paste lists on the back of cards */
.copy-list { /* used: challenges-canvases-atw */
  list-style: none;
  margin: 0 0 var(--app-default-top-bottom-margin-xxxxl);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}
.copy-list-button { /* used: challenges-canvases-atw */
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  font-family: inherit;
  font-size: var(--body-text-xs);
  color: var(--t-copy-list);
  background: transparent;
  border: var(--stroke-hairline) solid var(--t-copy-list);
  border-radius: var(--radius-pill);
  padding: var(--gap-xs) var(--gap-regular);
  cursor: pointer;
}
.copy-list-button:hover { /* used: challenges-canvases-atw */
  background-color: var(--hover-overlay-dark);
}
/* Once copied, the button turns green for a moment */
.copy-answer-button.is-copied,
.copy-answer-button.is-copied:hover,
.copy-list-button.is-copied,
.copy-list-button.is-copied:hover { /* used: challenges-canvases-atw */
  background: var(--bright-green);
  background-color: var(--bright-green);
  color: var(--white-text-default);
  border-color: var(--bright-green);
  transition: none;
}
.copy-fallback-area { /* used: challenges-canvases-atw */
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}
/* Was this helpful: thumbs up and down */
.feedback-split { /* used: challenges-canvases-atw */
  display: inline-flex;
  align-self: flex-start;
  width: auto;
  height: var(--button-size-xl);
  box-sizing: border-box;
  margin-top: var(--app-default-top-bottom-margin-xl);
  border: var(--stroke-thin) solid transparent;
  border-radius: var(--app-default-radius-md);
  overflow: hidden;
}
.feedback-split:has(.is-selected) { /* used: challenges-canvases-atw */
  border-color: var(--mid-white);
}
.feedback-split-option { /* used: challenges-canvases-atw */
  flex: 0 0 auto;
  min-width: var(--button-size-xl);
  height: 100%;
  padding: 0 var(--gap-md);
  background: transparent;
  border: none;
  color: var(--mid-white);
  font-size: var(--heading-size-lg);
  cursor: pointer;
  transition: background-color var(--transition-base) ease;
}
.feedback-split-divider { /* used: challenges-canvases-atw */
  border-left: var(--stroke-thin) solid transparent;
}
.feedback-split:has(.is-selected) .feedback-split-divider { /* used: challenges-canvases-atw */
  border-left-color: var(--mid-white);
}
.feedback-split-option:hover { /* used: challenges-canvases-atw */
  background-color: var(--hover-overlay-light-strong);
}
.feedback-split-option.is-selected { /* used: challenges-canvases-atw */
  background-color: var(--mid-white);
}
.feedback-message { /* used: challenges-canvases-atw */
  display: none;
  font-size: var(--body-text-sm);
  line-height: var(--default-line-height-large);
  color: var(--mid-white);
  margin-top: var(--app-default-top-bottom-margin-sm);
}
.feedback-message.is-visible { /* used: challenges-canvases-atw */
  display: block;
}
/* Copied confirmation */
.copy-toast { /* used: challenges-canvases-atw */
  position: fixed;
  left: 50%;
  bottom: var(--app-default-top-bottom-margin-xxl);
  transform: translateX(-50%);
  z-index: var(--z-chrome, 1001);
  padding: var(--gap-sm) var(--gap-xl);
  border-radius: var(--radius-pill);
  background-color: var(--dark-charcoal);
  color: var(--text-on-colour);
  font-size: var(--body-text-sm);
  opacity: var(--opacity-hidden);
  pointer-events: none;
  transition: opacity var(--transition-base) ease;
}
.copy-toast.is-visible { /* used: challenges-canvases-atw */
  opacity: var(--opacity-visible);
}
/* On the tool, centred over the assistant's half of the screen and kept
   within it, above the assistant */
.copy-toast-half { /* used: challenges-canvases-atw */
  z-index: calc(var(--z-chrome, 1001) + 2);
  left: 25%;
  max-width: calc(50vw - 2 * var(--gap-xl));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 9f. WORKING WITH AUDHD ---------- */
/* This page keeps its larger section headings, and the ticks that come in
   with the list text from Firestore keep their spacing */
:root:where(.page-working-with-audhd) { /* used: challenges-canvases-atw */
  --section-headline-size: var(--heading-size-xl);
  --check-icon-space: var(--field-padding);
  --list-icon-nudge-up: -0.0625rem;
  --wand-earmark-size: 75px;
  --wand-icon-top: 11px;
  --wand-icon-right: 11px;
  --radius-squircle: 90px;
}
/* The hero: a video behind the words, dimmed, with a pause button */
.work-hero { /* used: challenges-canvases-atw */
  width: 100%;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-40);
  padding: var(--app-default-top-bottom-margin-xxxxl) var(--default-left-right-desk-body-padding) var(--app-default-top-bottom-margin-xxxxxl);
  position: relative;
  box-sizing: border-box;
}
@media (max-width: 899px) {
  .work-hero { /* used: challenges-canvases-atw */
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }
}
.work-hero::before { /* used: challenges-canvases-atw */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
}
.work-hero-video { /* used: challenges-canvases-atw */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% center;
  z-index: 0;
  filter: brightness(0.6) saturate(0.9);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .work-hero-video { /* used: challenges-canvases-atw */
    display: none;
  }
}
.work-hero-toggle { /* used: challenges-canvases-atw */
  position: absolute;
  bottom: var(--app-default-top-bottom-margin-xl);
  right: var(--app-default-top-bottom-margin-xl);
  z-index: 2;
}
/* No video, no pause button */
.work-hero-video:not(:has(source)) ~ .work-hero-toggle { /* used: challenges-canvases-atw */
  display: none;
}
.work-hero-words { /* used: challenges-canvases-atw */
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-content-width-golden-section-large);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  text-align: center;
}
@media (max-width: 600px) {
  .work-hero-words { /* used: challenges-canvases-atw */
    margin-left: 0;
    margin-right: 0;
    width: calc(100% - (var(--default-left-right-mob-body-padding) * 2));
  }
}
.work-hero-title { /* used: challenges-canvases-atw */
  font-size: var(--heading-size-xxxxl);
  line-height: var(--default-line-height-x-small);
  font-weight: var(--font-weight-normal);
  max-width: 25ch;
  margin-left: auto;
  margin-right: auto;
  color: rgba(var(--bright-white-rgb), var(--opacity-near-full));
}
@media (max-width: 900px) {
  .work-hero-title { /* used: challenges-canvases-atw */
    font-size: var(--heading-size-xxxl);
  }
}
@media (max-width: 600px) {
  .work-hero-title { /* used: challenges-canvases-atw */
    font-size: var(--heading-size-xxl);
  }
}
.work-hero-text { /* used: challenges-canvases-atw */
  font-size: var(--body-text-xl);
  max-width: var(--max-content-width-golden-section-large);
  margin-left: auto;
  margin-right: auto;
  color: rgba(var(--bright-white-rgb), var(--opacity-very-high));
}
.work-hero-text:has(+ .work-hero-button) { /* used: challenges-canvases-atw */
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}
.work-hero-button { /* used: challenges-canvases-atw */
  margin-top: var(--app-default-top-bottom-margin-xxxl);
  height: var(--button-size-lg);
  gap: var(--gap-xs);
}

/* The support tiles: one wide pair tile, two long tiles side by side,
   then the sunflower lanyard tile */
.support-tiles-heading { /* used: challenges-canvases-atw */
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}
.work-tile-column { /* used: challenges-canvases-atw */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  gap: var(--gap-lg);
  margin-left: auto;
  margin-right: auto;
}
.support-tile-photo { /* used: challenges-canvases-atw */
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--app-default-radius-md);
  margin-bottom: var(--app-default-top-bottom-margin-lg);
}
.support-tile-photo[hidden] { /* used: challenges-canvases-atw */
  display: none;
}
.support-tile-heading { /* used: challenges-canvases-atw */
  font-size: var(--heading-size-md);
  font-weight: var(--font-weight-light);
  line-height: var(--default-line-height-x-small);
  color: var(--t-page-text, var(--mid-charcoal));
  margin: 0 0 var(--app-default-top-bottom-margin-lg);
  text-align: left;
}
.support-tile-subheading { /* used: challenges-canvases-atw */
  font-size: var(--heading-size-xs);
  font-weight: var(--font-weight-light);
  line-height: var(--default-line-height-x-small);
  color: var(--t-page-text, var(--mid-charcoal));
  margin: var(--app-default-top-bottom-margin-sm) 0 var(--gap-sm);
  text-align: left;
}
/* UMA.css takes the gap off the last paragraph with p:last-of-type, so
   this names :last-of-type too to keep it */
.work-tile-text,
.work-tile-text:last-of-type { /* used: challenges-canvases-atw */
  line-height: var(--default-line-height-large);
  margin-bottom: var(--app-default-top-bottom-margin-sm);
}
.work-tile-text-left { /* used: challenges-canvases-atw */
  text-align: left;
}
.support-tile-list { /* used: challenges-canvases-atw */
  list-style-type: none;
  padding: 0;
  margin: 0;
  line-height: var(--default-line-height-large);
  text-align: left;
}
.support-tile-list li { /* used: challenges-canvases-atw */
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--answer-gap);
}
/* The ticks and clocks come in with the list text from Firestore */
.support-tile-list .icon-check-stroke { /* used: challenges-canvases-atw */
  color: var(--t-work-check);
}
.icon-wait-times-stroke { /* used: challenges-canvases-atw */
  color: var(--tomato);
  font-size: 1.9rem;
  position: relative;
  top: -0.25rem;
  left: -0.5rem;
  margin-right: 0.125rem;
}
.support-tile-buttons { /* used: challenges-canvases-atw */
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-top: auto;
}
.work-tile-button { /* used: challenges-canvases-atw */
  max-width: 100%;
  height: auto;
  min-height: var(--button-size-md);
  white-space: nowrap;
  text-align: center;
  gap: var(--gap-xs);
}
.work-tile-button-half { /* used: challenges-canvases-atw */
  flex: 1 1 12rem;
  justify-content: center;
}
@media (max-width: 800px) {
  .work-tile-button { /* used: challenges-canvases-atw */
    width: 100%;
  }
}
@media (max-width: 700px) {
  .support-tile-buttons { /* used: challenges-canvases-atw */
    width: 100%;
  }
  .work-tile-button { /* used: challenges-canvases-atw */
    justify-content: center;
  }
}

/* The pair tile: two halves side by side, one above the other on a phone */
.support-tile-pair { /* used: challenges-canvases-atw */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--app-default-top-bottom-margin-xxxl);
  width: 100%;
  box-sizing: border-box;
  padding: var(--app-default-top-bottom-margin-xxxl);
  background-color: var(--t-work-tile);
  border-radius: var(--app-default-radius-lg);
  overflow: visible;
  min-height: auto;
}
.support-tile-pair-half { /* used: challenges-canvases-atw */
  display: flex;
  flex-direction: column;
}
@media (min-width: 951px) {
  .support-tile-pair { /* used: challenges-canvases-atw */
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 800px) {
  .support-tile-pair { /* used: challenges-canvases-atw */
    --app-default-top-bottom-margin-xxxl: var(--app-default-top-bottom-margin-xl);
  }
}
@media (max-width: 700px) {
  .support-tile-pair { /* used: challenges-canvases-atw */
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
  }
  .support-tile-pair-half { /* used: challenges-canvases-atw */
    display: contents;
  }
  .work-pair-buttons { /* used: challenges-canvases-atw */
    order: 1;
    margin-top: var(--app-default-top-bottom-margin-lg);
  }
}

/* The two long tiles */
.work-tile-row { /* used: challenges-canvases-atw */
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: var(--gap-lg);
  align-items: flex-start;
}
.work-portrait-tile { /* used: challenges-canvases-atw */
  position: relative;
  width: calc(50% - (var(--gap-lg) / 2));
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  padding: var(--app-default-top-bottom-margin-xxxl);
  background-color: var(--t-work-tile);
  border-radius: var(--app-default-radius-lg);
  overflow: visible;
  min-height: auto;
}
.work-portrait-photo { /* used: challenges-canvases-atw */
  padding: var(--app-default-top-bottom-margin-xxxl);
}
.work-long-list-area { /* used: challenges-canvases-atw */
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  padding-bottom: var(--app-default-top-bottom-margin-xxxl);
}
.work-long-buttons { /* used: challenges-canvases-atw */
  flex-wrap: wrap;
}
.work-two-buttons { /* used: challenges-canvases-atw */
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  width: max-content;
  align-self: flex-start;
  align-items: stretch;
}
/* side by side once the list area is wide enough */
@container (min-width: 27.5rem) {
  .work-two-buttons { /* used: challenges-canvases-atw */
    grid-auto-flow: column;
  }
}
@media (min-width: 1350px) {
  .work-portrait-tile { /* used: challenges-canvases-atw */
    aspect-ratio: 4 / 5;
  }
}
@media (max-width: 950px) {
  .work-tile-row { /* used: challenges-canvases-atw */
    flex-direction: column;
  }
  .work-portrait-tile { /* used: challenges-canvases-atw */
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 801px) and (max-width: 950px) {
  .work-portrait-tile { /* used: challenges-canvases-atw */
    max-width: min(100%, var(--golden-width-small));
    aspect-ratio: 4 / 5;
  }
}
@media (max-width: 800px) {
  .work-portrait-tile { /* used: challenges-canvases-atw */
    width: var(--carouselle-card-lg);
    aspect-ratio: 9 / 16;
    --app-default-top-bottom-margin-xxxl: var(--app-default-top-bottom-margin-xl);
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .work-portrait-tile { /* used: challenges-canvases-atw */
    width: var(--carouselle-card-xl);
  }
}
@media (max-width: 449px) {
  .work-portrait-tile { /* used: challenges-canvases-atw */
    width: var(--carouselle-card-width-mobile);
  }
}
@media (max-width: 700px) {
  .work-portrait-tile { /* used: challenges-canvases-atw */
    width: 100%;
    aspect-ratio: 4 / 5;
  }
  .work-two-buttons { /* used: challenges-canvases-atw */
    width: 100%;
    grid-auto-flow: row;
  }
}
@media (max-width: 600px) {
  .work-portrait-tile { /* used: challenges-canvases-atw */
    aspect-ratio: auto;
    min-height: calc((100vw - 2 * var(--default-left-right-mob-body-padding)) * 1.25);
  }
  .work-long-buttons { /* used: challenges-canvases-atw */
    flex-direction: column;
    align-items: flex-start;
  }
  .work-two-buttons { /* used: challenges-canvases-atw */
    flex-direction: row;
    align-items: stretch;
  }
}

/* The sunflower lanyard tile: words left, lanyard right; the lanyard
   floats top right of the words below 951px */
.work-sunflower-tile { /* used: challenges-canvases-atw */
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr minmax(0, 30%);
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--t-work-tile);
  border-radius: var(--app-default-radius-lg);
  overflow: visible;
  min-height: auto;
}
.support-tile-lanyard-column { /* used: challenges-canvases-atw */
  min-height: 0;
  padding: 0;
}
.support-tile-lanyard { /* used: challenges-canvases-atw */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right top;
}
.work-sunflower-words { /* used: challenges-canvases-atw */
  padding: var(--app-default-top-bottom-margin-xxxl);
}
@media (min-width: 851px) {
  .support-tile-lanyard-column { /* used: challenges-canvases-atw */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media (min-width: 951px) {
  .support-tile-lanyard-column { /* used: challenges-canvases-atw */
    order: 2;
    height: 100%;
    overflow: hidden;
    contain: size;
  }
  .work-sunflower-words { /* used: challenges-canvases-atw */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media (max-width: 950px) {
  .work-sunflower-tile { /* used: challenges-canvases-atw */
    display: block;
    flex-direction: column-reverse;
    grid-template-columns: 1fr;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 9 / 16;
  }
  .support-tile-lanyard-column { /* used: challenges-canvases-atw */
    float: right;
    width: 40%;
    height: auto;
    margin-left: var(--gap-sm);
    flex: 0 0 auto;
  }
  .support-tile-lanyard { /* used: challenges-canvases-atw */
    height: auto;
  }
  .work-sunflower-words { /* used: challenges-canvases-atw */
    flex: 0 0 auto;
    min-height: 0;
  }
}
@media (min-width: 801px) and (max-width: 950px) {
  .work-sunflower-tile { /* used: challenges-canvases-atw */
    max-width: min(100%, var(--golden-width-small));
    aspect-ratio: 4 / 5;
  }
}
@media (max-width: 800px) {
  .work-sunflower-tile { /* used: challenges-canvases-atw */
    width: var(--carouselle-card-lg);
    aspect-ratio: 9 / 16;
    --app-default-top-bottom-margin-xxxl: var(--app-default-top-bottom-margin-xl);
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .work-sunflower-tile { /* used: challenges-canvases-atw */
    width: var(--carouselle-card-xl);
  }
}
@media (max-width: 449px) {
  .work-sunflower-tile { /* used: challenges-canvases-atw */
    width: var(--carouselle-card-width-mobile);
  }
}
@media (max-width: 700px) {
  .work-sunflower-tile { /* used: challenges-canvases-atw */
    width: 100%;
    aspect-ratio: 4 / 5;
  }
}
@media (max-width: 600px) {
  .work-sunflower-tile { /* used: challenges-canvases-atw */
    aspect-ratio: auto;
    min-height: calc((100vw - 2 * var(--default-left-right-mob-body-padding)) * 1.25);
  }
  .work-sunflower-words { /* used: challenges-canvases-atw */
    padding: var(--default-left-right-mob-body-padding);
  }
  .support-tile-lanyard-column { /* used: challenges-canvases-atw */
    width: 28%;
  }
}

/* The section intros keep to the golden width; the last one before a
   button or cards keeps its gap. UMA.css takes it off for the profile pages
   with :is(.polar-body-text):is(p:last-of-type), so this matches its form */
.work-intro-text { /* used: challenges-canvases-atw */
  max-width: var(--golden-width-large);
}
.work-intro-text:is(p:last-of-type) { /* used: challenges-canvases-atw */
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}

/* Deciding whether to tell your boss: words left, a colour or video right */
.deciding-split { /* used: challenges-canvases-atw */
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--t-work-split);
}
.deciding-split-text { /* used: challenges-canvases-atw */
  box-sizing: border-box;
  min-width: 0;
  padding: var(--app-default-top-bottom-margin-xxxxl) var(--default-left-right-desk-body-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.deciding-heading { /* used: challenges-canvases-atw */
  text-align: left;
  margin-bottom: var(--app-default-top-bottom-margin-lg);
}
.deciding-split-colour { /* used: challenges-canvases-atw */
  background: var(--dark-teal);
  min-height: 12rem;
}
.deciding-video { /* used: challenges-canvases-atw */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.deciding-video[hidden] { /* used: challenges-canvases-atw */
  display: none;
}
.work-section-button { /* used: challenges-canvases-atw */
  margin-top: var(--app-default-top-bottom-margin-lg);
  gap: var(--gap-xs);
}
@media (max-width: 900px) {
  .deciding-split { /* used: challenges-canvases-atw */
    grid-template-columns: 1fr;
  }
  .deciding-split-text { /* used: challenges-canvases-atw */
    padding: var(--app-default-top-bottom-margin-xxxl) var(--default-left-right-mob-body-padding);
  }
}

/* Benefits and downsides of disclosure: a red panel, two columns */
.work-red-panel { /* used: challenges-canvases-atw */
  background-color: var(--red-dark);
  color: var(--panel-text-white);
}
/* The bold words and links come in with the list text from Firestore */
.work-red-panel a,
.work-red-panel strong { /* used: challenges-canvases-atw */
  color: var(--panel-text-white);
}
.work-pros-panel { /* used: challenges-canvases-atw */
  display: flex;
  flex-direction: row;
  gap: var(--app-default-top-bottom-margin-xl);
}
.work-pros-column { /* used: challenges-canvases-atw */
  flex: 1 1 0%;
  height: auto;
}
.work-pros-heading { /* used: challenges-canvases-atw */
  max-width: none;
  line-height: var(--default-line-height-x-small);
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}
.work-pros-list { /* used: challenges-canvases-atw */
  margin: 0 0 var(--app-default-top-bottom-margin-xxxl) var(--app-default-top-bottom-margin-lg);
  padding-left: 0;
  padding-right: var(--app-default-top-bottom-margin-xl);
  list-style-position: outside;
  font-size: var(--body-text-lg);
  line-height: var(--default-line-height-small);
}
.work-pros-item { /* used: challenges-canvases-atw */
  padding-left: var(--app-default-top-bottom-margin-xxs);
  margin-bottom: var(--app-default-top-bottom-margin-md);
  line-height: var(--default-line-height-small);
  font-size: var(--body-text-sm);
  color: rgba(var(--panel-text-white-rgb), var(--opacity-very-high));
}
.work-pros-item::marker { /* used: challenges-canvases-atw */
  font-size: var(--body-text-sm);
  color: var(--panel-text-white);
}
@media (max-width: 750px) {
  .work-pros-panel { /* used: challenges-canvases-atw */
    flex-direction: column;
  }
  .work-pros-column { /* used: challenges-canvases-atw */
    width: 100%;
    padding-right: 0;
  }
}
@media (max-width: 600px) {
  .work-pros-list { /* used: challenges-canvases-atw */
    padding-right: 0;
  }
}

/* Asking for adjustments: the pill bar is the shared tools-filter bar,
   with more space below */
.work-pill-bar-wrapper { /* used: challenges-canvases-atw */
  margin-bottom: var(--default-whitespace-below-tables);
}
/* The carousel sections sit tight to the band above; the words above the
   pill bar keep a small gap */
.work-carousel-intro { /* used: challenges-canvases-atw */
  padding-top: 0;
}
.work-intro-before-pills { /* used: challenges-canvases-atw */
  padding-bottom: var(--app-default-top-bottom-margin-sm);
}

/* This page's footer keeps the bigger gap under its last paragraphs. UMA.css
   takes it off with :is(.footer-copyright):is(p:last-of-type), so this
   matches its form */
.work-footer-gap:is(p:last-of-type) { /* used: challenges-canvases-atw */
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}

/* The adjustment cards are the shared flip cards (section 7) with these
   differences: the + sits further in and is a grey disc with a dark plus,
   the back title leaves room for the close, and "helps with" is a row of
   grey pills */
.adjustment-plus-button { /* used: challenges-canvases-atw */
  bottom: var(--app-default-top-bottom-margin-lg);
  right: var(--app-default-top-bottom-margin-lg);
  --t-card-plus-disc: var(--t-adjustment-plus-disc);
  --t-card-plus-icon: var(--t-adjustment-plus-icon);
}
.adjustment-plus-button:hover { /* used: challenges-canvases-atw */
  --t-card-plus-icon: var(--t-adjustment-plus-icon-hover);
}
.adjustment-card-cost { /* used: challenges-canvases-atw */
  color: var(--t-work-quiet-text);
}
.adjustment-card-group { /* used: challenges-canvases-atw */
  margin: var(--app-default-top-bottom-margin-xs) 0 0;
  font-size: var(--body-text-sm);
  line-height: var(--default-line-height-large);
  color: var(--t-work-quiet-text);
}
/* UMA.css takes the gap off the last paragraph with p:last-of-type, so
   these name :last-of-type too to keep it */
.adjustment-card-group:last-of-type { /* used: challenges-canvases-atw */
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}
.adjustment-back-text,
.adjustment-back-text:last-of-type { /* used: challenges-canvases-atw */
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}
.adjustment-words-on-image { /* used: challenges-canvases-atw */
  position: relative;
  z-index: 1;
  color: var(--text-on-colour);
}
.adjustment-back-title { /* used: challenges-canvases-atw */
  padding-right: var(--app-default-top-bottom-margin-xxxxxl);
}
.adjustment-helps-list { /* used: challenges-canvases-atw */
  margin: 0 0 var(--default-whitespace-below-section-headings);
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  text-align: left;
  justify-content: left;
}
.adjustment-helps-pill { /* used: challenges-canvases-atw */
  white-space: nowrap;
  color: var(--t-adjustment-pill-text);
  text-align: center;
  font-size: var(--body-text-xs);
  border-radius: var(--radius-pill);
  padding: var(--field-action-gap) var(--btn-padding-x-default);
  background-color: var(--t-adjustment-pill-bg);
  border: none;
}
.adjustment-wand-icon { /* used: challenges-canvases-atw */
  color: var(--text-on-colour);
}
/* A photo behind the card front: words in white at the foot, over a shade */
.adjustment-front-on-image { /* used: challenges-canvases-atw */
  justify-content: flex-end;
  color: var(--text-on-colour);
}
.adjustment-front-on-image::after { /* used: challenges-canvases-atw */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--black-rgb), var(--opacity-high)), transparent 60%);
  z-index: 0;
}
.adjustment-card-image { /* used: challenges-canvases-atw */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.adjustment-wand-hidden { /* used: challenges-canvases-atw */
  display: none;
}

/* Top apps: square app cards. Card and drawer share the heart earmark */
.app-card { /* used: challenges-canvases-atw */
  width: 260px;
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  height: auto;
  position: relative;
}
@media (max-width: 449px) {
  .app-card { /* used: challenges-canvases-atw */
    width: 240px;
  }
}
@media (min-width: 600px) {
  .app-card { /* used: challenges-canvases-atw */
    width: 280px;
  }
}
@media (min-width: 900px) {
  .app-card { /* used: challenges-canvases-atw */
    width: 300px;
  }
}
.app-card-media { /* used: challenges-canvases-atw */
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  aspect-ratio: var(--carouselle-card-ratio-square);
  overflow: hidden;
  border-radius: var(--radius-squircle);
  border-top-right-radius: var(--app-default-radius-lg);
  flex-shrink: 0;
  position: relative;
}
.app-card-image { /* used: challenges-canvases-atw */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--transition-fast);
}
.app-card:hover .app-card-image { /* used: challenges-canvases-atw */
  filter: brightness(0.7);
}
.app-card-loves { /* used: challenges-canvases-atw */
  display: none;
}
/* The + shows on hover (always on touch screens) */
.app-card-plus { /* used: challenges-canvases-atw */
  position: absolute;
  bottom: calc(var(--app-default-top-bottom-margin-xxxl) - var(--filter-bar-left-right-padding));
  right: calc(var(--app-default-top-bottom-margin-xxxl) - var(--filter-bar-left-right-padding));
  width: var(--button-size-md);
  height: var(--button-size-md);
  border-radius: 0;
  background: var(--bright-white);
  border: none;
  cursor: pointer;
  z-index: 3;
  padding: 0;
  opacity: 0;
  transition: opacity var(--transition-base) ease, filter var(--transition-base) ease;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'><path fill='black' fill-rule='evenodd' d='M180,0A180,180,0,1,0,360,180,180,180,0,0,0,180,0ZM280,180a12,12,0,0,1-12,12H192v76a12,12,0,0,1-24,0V192H92a12,12,0,0,1,0-24h76V92a12,12,0,0,1,24,0v76h76A12,12,0,0,1,280,180Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'><path fill='black' fill-rule='evenodd' d='M180,0A180,180,0,1,0,360,180,180,180,0,0,0,180,0ZM280,180a12,12,0,0,1-12,12H192v76a12,12,0,0,1-24,0V192H92a12,12,0,0,1,0-24h76V92a12,12,0,0,1,24,0v76h76A12,12,0,0,1,280,180Z'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.app-card-plus i { /* used: challenges-canvases-atw */
  display: none;
}
.app-card-plus:hover { /* used: challenges-canvases-atw */
  filter: brightness(0.85);
}
.app-card-plus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: challenges-canvases-atw */
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}
@media (hover: hover) {
  .app-card-media:hover .app-card-plus { /* used: challenges-canvases-atw */
    opacity: 1;
  }
}
@media (hover: none) {
  .app-card-plus { /* used: challenges-canvases-atw */
    opacity: 1;
  }
}
.app-card-body { /* used: challenges-canvases-atw */
  height: auto;
  display: flex;
  flex-direction: column;
  padding: var(--app-default-top-bottom-margin-lg) 0 var(--app-default-top-bottom-margin-xxl) 0;
  text-align: left;
}
.app-card-brand { /* used: challenges-canvases-atw */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-sm);
  margin-bottom: var(--app-default-top-bottom-margin-xxs);
  line-height: var(--default-line-height-single);
  color: var(--t-work-quiet-text);
}
/* the gap UMA.css gives the last paragraph in a block, kept here */
.app-card-brand:last-of-type { /* used: challenges-canvases-atw */
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}
.app-card-title { /* used: challenges-canvases-atw */
  font-size: var(--body-text-xxl);
  font-weight: var(--font-weight-light);
  line-height: var(--default-line-height-x-small);
  color: var(--t-work-title-text);
  margin: 0 0 var(--app-default-top-bottom-margin-xxs);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-sm);
}
.app-card-subtitle { /* used: challenges-canvases-atw */
  text-wrap: pretty;
  margin: 0 0 var(--app-default-top-bottom-margin-lg);
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-normal);
  color: var(--t-work-quiet-text);
  line-height: var(--default-line-height-small);
}
@media (max-width: 899px) {
  .app-card-title { /* used: challenges-canvases-atw */
    font-size: var(--heading-size-sm);
  }
  .app-card-subtitle { /* used: challenges-canvases-atw */
    font-size: var(--body-text-xs);
  }
}

/* The heart earmark: a folded corner that shows on hover, yellow once the
   app is saved. The script puts uma-wishlist-earmark--added on it. */
.earmark { /* used: challenges-canvases-atw */
  position: absolute;
  top: 0;
  right: 0;
  width: var(--wand-earmark-size);
  height: var(--wand-earmark-size);
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 4;
  overflow: hidden;
  border-top-right-radius: var(--app-default-radius-lg);
  opacity: 0;
  transition: opacity var(--transition-base) ease;
}
.earmark:focus-visible:where(:not(.uma-input-pointer *)) { /* used: challenges-canvases-atw */
  outline: var(--stroke-thick) solid var(--bright-white);
  outline-offset: -2px;
  opacity: 1;
}
.earmark-corner { /* used: challenges-canvases-atw */
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 var(--wand-earmark-size) var(--wand-earmark-size) 0;
  border-color: transparent;
}
.earmark-icon { /* used: challenges-canvases-atw */
  position: absolute;
  top: var(--wand-icon-top);
  right: var(--wand-icon-right);
  font-size: var(--button-icon-xl);
  line-height: var(--default-line-height-single);
  z-index: 5;
  transition: opacity var(--transition-fast) ease;
  color: var(--bright-white);
}
.earmark-inset { /* used: challenges-canvases-atw */
  top: calc(var(--app-default-top-bottom-margin-xxxl) - 20px);
  right: calc(var(--app-default-top-bottom-margin-xxxl) - 20px);
}
.app-card:hover .earmark,
.app-card:focus-within .earmark,
.uma-wishlist-earmark--added.earmark { /* used: challenges-canvases-atw */
  opacity: 1;
}
.uma-wishlist-earmark--added.earmark-inset { /* used: challenges-canvases-atw */
  top: 0;
  right: 0;
}
.uma-wishlist-earmark--added .earmark-corner { /* used: challenges-canvases-atw */
  border-color: transparent var(--yellow) transparent transparent;
}
@media (hover: hover) {
  .app-card-media:hover .earmark { /* used: challenges-canvases-atw */
    opacity: 1;
  }
}
/* Touch screens: a small round heart button until the app is saved */
@media (hover: none) {
  .earmark { /* used: challenges-canvases-atw */
    opacity: 1;
    top: var(--app-default-top-bottom-margin-sm);
    right: var(--app-default-top-bottom-margin-sm);
    width: var(--button-size-xs);
    height: var(--button-size-xs);
    background: var(--dark-white);
    border-radius: 50%;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .earmark-inset { /* used: challenges-canvases-atw */
    top: calc(var(--app-default-top-bottom-margin-xxxl) - 20px);
    right: calc(var(--app-default-top-bottom-margin-xxxl) - 20px);
  }
  .earmark-corner { /* used: challenges-canvases-atw */
    display: none;
  }
  .earmark-icon { /* used: challenges-canvases-atw */
    position: static;
    font-size: var(--button-icon-md);
    color: var(--navy);
  }
  .uma-wishlist-earmark--added.earmark { /* used: challenges-canvases-atw */
    top: 0;
    right: 0;
    width: var(--wand-earmark-size);
    height: var(--wand-earmark-size);
    background: transparent;
    border-radius: 0 var(--app-default-radius-lg) 0 0;
    overflow: hidden;
    display: block;
  }
  .uma-wishlist-earmark--added .earmark-corner { /* used: challenges-canvases-atw */
    display: block;
  }
  .uma-wishlist-earmark--added .earmark-icon { /* used: challenges-canvases-atw */
    position: absolute;
    top: var(--wand-icon-top);
    right: var(--wand-icon-right);
    font-size: var(--button-icon-xl);
    color: var(--bright-white);
  }
}

/* The work coach directory card is the shared tracker promo card, its words
   held to the golden width, the last paragraph keeping its gap */
.work-promo-copy { /* used: challenges-canvases-atw */
  max-width: var(--max-content-width-golden-section-large);
}
.work-promo-text:last-of-type { /* used: challenges-canvases-atw */
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}
@media (max-width: 1050px) {
  .work-promo-tag { /* used: challenges-canvases-atw */
    margin-bottom: var(--app-default-top-bottom-margin-sm);
  }
}
@media (max-width: 700px) {
  .work-wide-only { /* used: challenges-canvases-atw */
    display: none;
  }
}

/* "Favourited" / "Not favourited" flashes over the picture when the heart
   is pressed; the script puts show on it */
.favourite-pill { /* used: challenges-canvases-atw */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
  height: var(--button-size-md);
  padding: var(--gap-md) var(--gap-lg);
  border-radius: var(--radius-pill);
  background: var(--bright-green);
  color: var(--bright-white);
  font-size: var(--body-text-lg);
  font-weight: var(--font-weight-normal);
  white-space: nowrap;
  box-shadow: var(--canvas-sheet-shadow);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease;
}
.favourite-pill.show { /* used: challenges-canvases-atw */
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.favourite-pill-off { /* used: challenges-canvases-atw */
  background: var(--tomato);
}
.favourite-pill-icon { /* used: challenges-canvases-atw */
  color: var(--bright-white);
  font-size: var(--button-icon-md);
}

/* The app drawer: slides in from the right over a dimmed page. The script
   puts is-open on the drawer, the backdrop and the store menu, is-visible on
   the close, is-hidden on parts with nothing to show, is-current on the
   chosen store and app-drawer-lock on html and body. */
/* is-hidden is the drawer script's own switch for parts with nothing to
   show; held to this page and kept above the parts' display */
:where(.page-working-with-audhd) .is-hidden { /* used: challenges-canvases-atw */
  display: none !important;
}
.app-drawer-lock { /* used: challenges-canvases-atw */
  touch-action: none;
  overscroll-behavior: none;
  overflow: hidden;
}
.app-drawer-backdrop { /* used: challenges-canvases-atw */
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(var(--black-rgb), 0.4);
  z-index: 10000005;
}
.app-drawer-backdrop.is-open { /* used: challenges-canvases-atw */
  display: block;
}
.app-drawer { /* used: challenges-canvases-atw */
  --drawer-media-padding: var(--app-default-top-bottom-margin-xl);
  --t-text-secondary: var(--t-drawer-secondary-text);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 720px;
  z-index: 10000006;
  background: var(--t-drawer-bg);
  color: var(--mid-charcoal);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.4s ease-in-out, visibility linear 0.4s;
}
.app-drawer::-webkit-scrollbar { /* used: challenges-canvases-atw */
  display: none;
  width: 0;
  height: 0;
}
.app-drawer.is-open { /* used: challenges-canvases-atw */
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.4s ease-in-out, visibility;
}
@media (max-width: 600px) {
  .app-drawer { /* used: challenges-canvases-atw */
    max-width: 100%;
  }
}
.app-drawer-close { /* used: challenges-canvases-atw */
  position: fixed;
  top: var(--field-padding-x);
  right: var(--field-padding-x);
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  height: var(--button-size-sm);
  aspect-ratio: auto;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  color: var(--mid-charcoal);
  font-family: inherit;
  font-size: var(--button-icon-md);
  line-height: var(--default-line-height-single);
  z-index: 10000020;
}
.app-drawer-close.is-visible { /* used: challenges-canvases-atw */
  display: inline-flex;
}
.app-drawer-close-icon { /* used: challenges-canvases-atw */
  font-size: var(--heading-size-xl);
  color: var(--t-drawer-close-icon);
}
@media (hover: none) {
  .app-drawer-close::after { /* used: challenges-canvases-atw */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
  }
}

/* The top of the drawer: the app's square logo left, its name and store
   button right; one above the other below 600px */
.app-drawer-body { /* used: challenges-canvases-atw */
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--default-card-top-padding);
  padding: var(--app-default-top-bottom-margin-xl) 0 0;
  background: var(--t-drawer-body-bg);
  transition: opacity 0.2s;
}
.app-drawer-body.is-transitioning { /* used: challenges-canvases-atw */
  opacity: 0;
}
.app-drawer-image-col { /* used: challenges-canvases-atw */
  position: static;
  flex-shrink: 0;
  align-self: flex-start;
  width: 260px;
  height: auto;
  padding: var(--app-default-top-bottom-margin-xxxxxl) 0 var(--app-default-top-bottom-margin-xxl) var(--drawer-media-padding);
  overflow: visible;
}
.app-drawer-content-col { /* used: challenges-canvases-atw */
  flex: 1 1 0px;
  min-width: 0;
  box-sizing: border-box;
  align-self: flex-start;
  padding: var(--app-default-top-bottom-margin-xxxxxl) var(--drawer-media-padding) 0 0;
}
.app-drawer-square { /* used: challenges-canvases-atw */
  position: relative;
  flex-shrink: 0;
  width: 200px;
  max-width: 200px;
  height: 200px;
  min-height: 0;
  padding-bottom: 0;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--app-default-top-bottom-margin-lg);
  border-radius: var(--radius-squircle);
  border-top-right-radius: var(--app-default-radius-lg);
  overflow: hidden;
}
.app-drawer-logo { /* used: challenges-canvases-atw */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--transition-base) ease;
}
.app-drawer-image-col:hover .earmark,
.app-drawer-image-col:focus-within .earmark { /* used: challenges-canvases-atw */
  opacity: 1;
}
@media (max-width: 965px) {
  .app-drawer-body { /* used: challenges-canvases-atw */
    padding: var(--app-default-top-bottom-margin-xl) var(--default-card-top-padding) var(--default-card-top-padding);
  }
  .app-drawer-image-col { /* used: challenges-canvases-atw */
    max-width: 400px;
    min-width: 200px;
    margin: 0;
    padding: var(--app-default-top-bottom-margin-xxxxxl) 0 0;
    overflow: hidden;
  }
  .app-drawer-content-col { /* used: challenges-canvases-atw */
    display: block;
    padding: var(--app-default-top-bottom-margin-xxxxxl) 0 0;
  }
}
@media (max-width: 900px) {
  .app-drawer-body { /* used: challenges-canvases-atw */
    padding-top: var(--app-default-top-bottom-margin-xxxxxl);
  }
}
@media (max-width: 899px) {
  .app-drawer-image-col { /* used: challenges-canvases-atw */
    width: 240px;
  }
}
@media (max-width: 599px) {
  .app-drawer-body { /* used: challenges-canvases-atw */
    flex-direction: column;
    gap: 0;
    padding-top: var(--default-whitespace-below-section-headings);
  }
  .app-drawer-image-col { /* used: challenges-canvases-atw */
    width: 200px;
    min-width: 280px;
    margin-bottom: var(--default-card-top-padding);
    padding-top: var(--default-card-top-padding);
  }
  .app-drawer-content-col { /* used: challenges-canvases-atw */
    width: 100%;
    margin-top: var(--default-card-top-padding);
    padding-top: var(--default-card-top-padding);
  }
  .app-drawer-square { /* used: challenges-canvases-atw */
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}
@media (max-width: 499px) {
  .app-drawer-image-col { /* used: challenges-canvases-atw */
    max-width: 200px;
  }
}
@media (max-width: 449px) {
  .app-drawer-image-col { /* used: challenges-canvases-atw */
    width: 180px;
  }
}

.app-drawer-intro { /* used: challenges-canvases-atw */
  padding: 0 0 var(--app-default-top-bottom-margin-xxxxxl);
  margin-bottom: 0;
}
.app-drawer-eyebrow,
.app-drawer-eyebrow:last-of-type { /* used: challenges-canvases-atw */
  font-size: var(--body-text-md);
  font-weight: var(--font-weight-normal);
  line-height: var(--default-line-height-x-small);
  color: var(--t-text-secondary);
  margin: 0 0 var(--gap-xs);
}
.app-drawer-name { /* used: challenges-canvases-atw */
  max-width: var(--golden-width-small);
  font-size: var(--heading-size-sm);
  font-weight: var(--font-weight-light);
  line-height: var(--default-line-height-x-small);
  color: var(--t-page-text);
  margin: 0 0 var(--gap-xs);
  overflow-wrap: break-word;
  hyphens: auto;
}
.app-drawer-subtitle { /* used: challenges-canvases-atw */
  max-width: var(--golden-width-small);
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--default-line-height-small);
  color: var(--t-text-secondary);
  margin: 0 0 var(--gap-md);
}
@media (min-width: 900px) {
  .app-drawer-name { /* used: challenges-canvases-atw */
    font-size: var(--heading-size-md);
  }
  .app-drawer-subtitle { /* used: challenges-canvases-atw */
    font-size: var(--body-text-xs);
  }
}
@media (max-width: 965px) {
  .app-drawer-intro { /* used: challenges-canvases-atw */
    display: block;
    padding-bottom: 0;
  }
}
.app-drawer-tags { /* used: challenges-canvases-atw */
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
  justify-content: flex-start;
  margin: var(--app-default-top-bottom-margin-md) 0 var(--app-default-top-bottom-margin-lg);
}
.app-drawer-tag { /* used: challenges-canvases-atw */
  height: var(--button-size-xs);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--gap-md);
  border-radius: var(--radius-pill);
  background: var(--t-drawer-tag-bg);
  color: var(--t-drawer-tag-text);
  font-size: var(--body-text-xs);
  line-height: var(--default-line-height-single);
  pointer-events: none;
  user-select: none;
}

/* The orange store button: the store name, and an arrow that opens a menu
   of the other stores */
.app-store-wrap { /* used: challenges-canvases-atw */
  display: flex;
  margin-top: var(--gap-sm);
}
.app-store-pill { /* used: challenges-canvases-atw */
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
  font-size: var(--body-text-sm);
  background: var(--orange);
  border: var(--stroke-hairline) solid var(--orange);
  border-radius: var(--radius-pill);
  color: var(--t-drawer-pill-text);
  overflow: visible;
}
.app-store-main { /* used: challenges-canvases-atw */
  flex: 1 1 0%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-sm);
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 var(--gap-md);
  line-height: 1;
  border: none;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  background: transparent;
  color: var(--mid-white);
  font-family: inherit;
  font-size: var(--body-text-lg);
  white-space: normal;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast) ease;
}
.app-store-main:hover,
.app-store-arrow:hover { /* used: challenges-canvases-atw */
  filter: brightness(0.95);
  background: var(--orange-dark, var(--orange));
}
.app-store-icon-box { /* used: challenges-canvases-atw */
  flex-shrink: 0;
  width: var(--button-size-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-store-icon { /* used: challenges-canvases-atw */
  font-size: var(--button-icon-md);
  line-height: var(--default-line-height-single);
}
.app-store-label { /* used: challenges-canvases-atw */
  flex: 1 1 0%;
  display: block;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  overflow: visible;
  font-size: inherit;
  text-align: left;
  color: var(--t-drawer-on-orange);
}
.app-store-label-text { /* used: challenges-canvases-atw */
  flex: 1 1 0%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: var(--body-text-lg);
  text-align: left;
  color: var(--text-on-colour);
}
.app-store-arrow { /* used: challenges-canvases-atw */
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-size-lg);
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 var(--field-action-gap);
  line-height: 1;
  border: none;
  border-left: var(--stroke-hairline) solid rgba(var(--bright-white-rgb), 0.35);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: transparent;
  color: var(--mid-white);
  cursor: pointer;
  transition: background var(--transition-fast) ease;
}
.app-store-arrow-icon { /* used: challenges-canvases-atw */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0;
  font-size: var(--button-icon-sm);
  line-height: 1;
  color: var(--t-drawer-on-orange);
}
/* With one store there is no arrow, so the button is round both ends */
.app-store-main-alone { /* used: challenges-canvases-atw */
  border-radius: var(--radius-pill);
}
.app-store-menu { /* used: challenges-canvases-atw */
  position: absolute;
  top: calc(100% + var(--gap-xs));
  left: 0;
  right: 0;
  display: none;
  background: var(--bright-white);
  border: var(--stroke-hairline) solid var(--dark-white);
  border-radius: var(--app-default-radius-md);
  box-shadow: var(--canvas-sheet-shadow);
  z-index: 20;
  overflow: hidden;
}
.app-store-menu.is-open { /* used: challenges-canvases-atw */
  display: block;
}
.app-store-menu-item { /* used: challenges-canvases-atw */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  width: 100%;
  min-height: var(--button-size-lg);
  padding: 0 var(--btn-padding-x);
  border: none;
  background: transparent;
  color: var(--navy);
  font-family: inherit;
  font-size: var(--body-text-md);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.app-store-menu-item:not(:first-child) { /* used: challenges-canvases-atw */
  border-top: var(--stroke-hairline) solid var(--dark-white);
}
.app-store-menu-item:hover,
.app-store-menu-item:focus-visible { /* used: challenges-canvases-atw */
  background: var(--mid-white);
  outline: none;
}
.app-store-menu-item.is-current { /* used: challenges-canvases-atw */
  font-weight: var(--font-weight-medium);
}
.app-store-menu-icon { /* used: challenges-canvases-atw */
  font-size: var(--button-icon-md);
}
.app-store-menu-label { /* used: challenges-canvases-atw */
  flex: 1 1 auto;
}
.app-store-menu-external { /* used: challenges-canvases-atw */
  margin-left: auto;
  color: var(--light-charcoal);
  font-size: var(--body-text-sm);
}
@media (max-width: 899px) {
  .app-store-main,
  .app-store-label-text { /* used: challenges-canvases-atw */
    font-size: var(--body-text-sm);
  }
  .app-store-arrow { /* used: challenges-canvases-atw */
    width: var(--button-size-md);
  }
}
@media (max-width: 599px) {
  .app-store-main { /* used: challenges-canvases-atw */
    font-size: var(--body-text-xs);
  }
  .app-store-arrow { /* used: challenges-canvases-atw */
    width: var(--button-size-sm);
  }
}
/* on a narrow phone the store name shortens to the data-short the script
   gives it */
@media (max-width: 499px) {
  .app-store-short-label[data-short] { /* used: challenges-canvases-atw */
    font-size: 0;
  }
  .app-store-short-label[data-short]::before { /* used: challenges-canvases-atw */
    content: attr(data-short);
    font-size: var(--body-text-sm);
  }
}

/* Below the top: the description, the screenshots and the store figures */
.app-drawer-below { /* used: challenges-canvases-atw */
  width: 100%;
  background: var(--t-drawer-below-bg);
  padding: var(--app-default-top-bottom-margin-xxxxl) var(--drawer-media-padding);
  text-align: left;
}
@media (max-width: 965px) {
  .app-drawer-below { /* used: challenges-canvases-atw */
    padding-left: var(--default-card-top-padding);
    padding-right: var(--default-card-top-padding);
  }
}
.app-drawer-desc,
.app-drawer-desc:last-of-type { /* used: challenges-canvases-atw */
  max-width: var(--golden-width-small);
  margin-top: 0;
  margin-bottom: var(--app-default-top-bottom-margin-xl);
  color: var(--t-drawer-desc);
}
.app-drawer-shots { /* used: challenges-canvases-atw */
  display: flex;
  gap: var(--field-padding-x);
  width: calc(100% + 2 * var(--drawer-media-padding));
  height: auto;
  margin-left: calc(-1 * var(--drawer-media-padding));
  margin-right: calc(-1 * var(--drawer-media-padding));
  padding: var(--app-default-top-bottom-margin-xl) 0 var(--app-default-top-bottom-margin-md);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--drawer-media-padding);
  scroll-padding-right: var(--drawer-media-padding);
}
.app-drawer-shots::-webkit-scrollbar { /* used: challenges-canvases-atw */
  display: none;
  width: 0;
  height: 0;
}
.app-drawer-shots:focus,
.app-drawer-shots:focus-visible { /* used: challenges-canvases-atw */
  outline: none;
}
.app-drawer-shot { /* used: challenges-canvases-atw */
  flex: 0 0 auto;
  width: 300px;
  aspect-ratio: 9 / 16;
  border-radius: var(--app-default-radius-md);
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--dark-white);
}
.app-drawer-shot:first-child { /* used: challenges-canvases-atw */
  margin-left: var(--drawer-media-padding);
}
.app-drawer-shot:last-child { /* used: challenges-canvases-atw */
  margin-right: var(--drawer-media-padding);
  scroll-snap-align: end;
}
.app-drawer-shot-image { /* used: challenges-canvases-atw */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 449px) {
  .app-drawer-shot { /* used: challenges-canvases-atw */
    width: 280px;
  }
}
@media (min-width: 900px) {
  .app-drawer-shot { /* used: challenges-canvases-atw */
    width: 310px;
  }
}
@media (min-width: 1280px) {
  .app-drawer-shot { /* used: challenges-canvases-atw */
    width: 320px;
  }
}
.app-drawer-actions { /* used: challenges-canvases-atw */
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  margin: 0 0 var(--app-default-top-bottom-margin-xl);
  max-width: var(--golden-width-small);
}
/* the app website button, kept in the drawer though the store menu now
   holds the website */
.app-drawer-website { /* used: challenges-canvases-atw */
  width: 100%;
  gap: var(--gap-xs);
  color: var(--t-drawer-outline);
  border-color: var(--t-drawer-outline);
}
.app-drawer-website-icon { /* used: challenges-canvases-atw */
  color: var(--t-drawer-outline);
}
@media (max-width: 899px) {
  /* UMA.css sizes the icon with .btn-lg i, which reads --button-icon-lg */
  .app-drawer-website { /* used: challenges-canvases-atw */
    height: var(--button-size-md);
    font-size: var(--body-text-sm);
    --button-icon-lg: var(--button-icon-md);
  }
}
@media (max-width: 599px) {
  .app-drawer-website { /* used: challenges-canvases-atw */
    height: var(--button-size-sm);
    font-size: var(--body-text-xs);
    padding: 0 var(--gap-xxs);
  }
}
.app-drawer-stats { /* used: challenges-canvases-atw */
  display: flex;
  flex-flow: row;
  flex-shrink: 0;
  gap: 0;
  width: 100%;
  margin: 0 0 var(--app-default-top-bottom-margin-md);
  padding: var(--app-default-top-bottom-margin-lg) 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.app-drawer-stats::-webkit-scrollbar { /* used: challenges-canvases-atw */
  display: none;
  width: 0;
  height: 0;
}
.app-drawer-stats:focus-visible:where(:not(.uma-input-pointer *)) { /* used: challenges-canvases-atw */
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: calc(var(--focus-outline-width) * -1);
}
.app-drawer-stat { /* used: challenges-canvases-atw */
  flex: 0 0 auto;
  min-width: var(--uma-xxxl);
  display: flex;
  flex-direction: column;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-xs);
  padding: var(--app-default-top-bottom-margin-lg) var(--gap-md);
  text-align: center;
  border-right: var(--stroke-hairline) solid var(--mid-mushroom);
}
.app-drawer-stat:last-child { /* used: challenges-canvases-atw */
  border-right: none;
}
.app-drawer-stat-name { /* used: challenges-canvases-atw */
  order: 2;
  max-width: 100%;
  margin-top: var(--gap-xs);
  font-size: 0.72rem;
  font-weight: var(--font-weight-normal);
  line-height: var(--default-line-height-x-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-drawer-stat-name);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-drawer-stat-figure { /* used: challenges-canvases-atw */
  order: 1;
  max-width: 100%;
  font-size: var(--heading-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--default-line-height-x-small);
  color: var(--t-drawer-stat-figure);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-drawer-star { /* used: challenges-canvases-atw */
  color: var(--t-drawer-star);
}

/* The arrows under each carousel, with the copy and download buttons */
.work-carousel-controls { /* used: challenges-canvases-atw */
  align-items: center;
}
.work-table-buttons { /* used: challenges-canvases-atw */
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--app-default-top-bottom-margin-sm);
  margin-left: auto;
}
@media (max-width: 700px) {
  .work-carousel-controls { /* used: challenges-canvases-atw */
    flex-wrap: wrap;
  }
  .work-table-button { /* used: challenges-canvases-atw */
    width: auto;
    flex: 0 0 auto;
  }
}

/* ---------- 10. FOOTER ---------- */
.tools-footer { /* used: challenges-canvases-atw */
  color: var(--t-footer-text);
}
.tools-footer-text { /* used: challenges-canvases-atw */
  color: var(--t-page-text);
}
.tools-footer-link { /* used: challenges-canvases-atw */
  color: var(--t-footer-link);
}
/* Canvas and Access to Work pages underline the links inside the footer text */
.tools-footer-text-link { /* used: challenges-canvases-atw */
  text-decoration: underline;
}

/* ---------- 11. DARK ---------- */
:root[data-theme="dark"]:where(.page-support-tools) { /* used: challenges-canvases-atw */
  --t-work-tile: var(--t-surface);
  --t-work-check: var(--t-page-text);
  --t-work-split: var(--t-band);
  --t-drawer-bg: var(--t-band-alt);
  --t-drawer-body-bg: var(--t-surface);
  --t-drawer-below-bg: var(--t-band);
  --t-drawer-secondary-text: var(--t-text-strong);
  --t-drawer-close-icon: var(--t-text-strong);
  --t-drawer-desc: var(--t-page-text);
  --t-drawer-tag-bg: var(--navy);
  --t-drawer-tag-text: var(--bright-white);
  --t-drawer-pill-text: var(--t-text-strong);
  --t-drawer-on-orange: var(--t-text-strong);
  --t-drawer-stat-name: var(--t-text-strong);
  --t-drawer-stat-figure: var(--t-page-text);
  --t-drawer-star: var(--t-page-text);
  --t-drawer-outline: var(--t-text-strong);
  --t-adjustment-plus-disc: var(--mid-white);
  --t-adjustment-plus-icon: var(--navy);
  --t-adjustment-plus-icon-hover: var(--navy);
  --t-work-quiet-text: var(--t-page-text);
  --t-work-title-text: var(--t-page-text);
  --t-adjustment-pill-text: var(--t-text-secondary);
  --t-adjustment-pill-bg: rgba(var(--bright-white-rgb), 0.1);
  --navy-40: #151C2D;
  --navy-60: #0E131E;
  --navy-60-rgb: 14, 19, 30;
  --navy-dark: #192032;
  --bright-white: var(--mid-white);
  --bright-white-rgb: 242, 237, 234;
  --white-text-default: var(--bright-white);
  --t-page-bg: var(--navy-60);
  --t-band: var(--navy-60);
  --t-band-alt: var(--navy-40);
  --t-surface: var(--navy);
  --t-card: var(--navy);
  --t-surface-hover: var(--navy-dark);
  --t-selected-bg: var(--bright-white);
  --t-selected-text: var(--navy);
  --t-emphasis: var(--bright-white);
  --t-page-text: var(--bright-white);
  --t-text-strong: var(--bright-white);
  --t-text-secondary: rgba(var(--bright-white-rgb), 0.7);
  --t-text-muted: rgba(var(--bright-white-rgb), 0.55);
  --t-divider: rgba(var(--bright-white-rgb), 0.1);
  --t-border: rgba(var(--bright-white-rgb), 0.2);
  --t-nav-control: var(--bright-white);
  --t-nav-control-hover-bg: var(--bright-white);
  --t-nav-control-hover-icon: var(--navy-40);
  --t-nav-control-hover-edge: var(--bright-white);
  --t-card-panel: var(--navy-dark);
  --t-switch-bg: var(--navy);
  --t-card-rgb: 35, 47, 75;
  --t-chart-grid: rgba(var(--bright-white-rgb), 0.2);
  --t-tooltip-bg: var(--bright-white);
  --t-tooltip-text: var(--navy);
  --t-box-edge: rgba(var(--bright-white-rgb), 0.2);
  --t-footer-text: var(--t-text-secondary);
  --t-footer-link: var(--t-text-secondary);
  --t-footnote-text: var(--t-text-muted);
  --t-key-label: var(--t-text-secondary);
  --t-dark-plus-ring: var(--navy);
  --t-card-percentage: var(--t-page-text);
  --t-card-back-text: var(--t-text-secondary);
  --t-intervention-left: var(--t-band);
  --t-intervention-stacked: var(--t-page-bg);
  --t-intervention-title: var(--t-emphasis);
  --t-references-button: var(--t-text-strong);
  --t-references-button-hover: var(--t-text-strong);
  --t-footnote: var(--t-page-text);
  --t-title-card-bg: var(--t-selected-bg);
  --t-title-card-text: var(--t-selected-text);
  --t-round-button-disc: rgba(var(--bright-white-rgb), var(--opacity-soft));
  --t-round-button-icon: var(--bright-white);
  --t-card-plus-disc: var(--mid-white);
  --t-card-plus-icon: var(--navy);
  --t-dark-plus-disc: var(--mid-white);
  --t-flip-card-bg: var(--t-band);
  --t-filter-selected-text: var(--t-selected-text);
  --t-helps-pill-bg: rgba(var(--bright-white-rgb), 0.1);
  --t-helps-pill-text: var(--t-text-secondary);
  --t-outline-pill-text: var(--bright-white);
  --t-outline-pill-edge: rgba(var(--bright-white-rgb), 0.4);
  --t-outline-pill-hover-bg: rgba(var(--bright-white-rgb), 0.1);
  --t-outline-pill-hover-text: var(--bright-white);
  --t-outline-pill-hover-edge: var(--bright-white);
  --t-navy-pill-bg: var(--bright-white);
  --t-navy-pill-hover-bg: var(--bright-white);
  --t-navy-pill-text: var(--navy);
  --t-front-button-bg: var(--navy);
  --t-front-button-text: var(--mid-white);
  --t-front-button-edge: var(--mid-white);
  --t-assistant-quiet: var(--t-page-text);
  --t-assistant-body: var(--t-page-text);
  --t-tool-exit-bg: var(--mid-white);
  --t-tool-exit-text: var(--navy);
  --t-tool-exit-edge: var(--mid-white);
  --t-preview-field: rgba(var(--bright-white-rgb), 0.15);
  --t-copy-answer-bg: var(--orange);
  --t-copy-answer-text: var(--bright-white);
  --t-copy-answer-hover: var(--orange-dark);
  --t-answer-selected-bg: var(--mid-white);
  --t-answer-selected-text: var(--navy);
  --t-copy-list: var(--mid-white);
  --t-card-eyebrow: var(--t-text-muted);
  --t-assistant-card: var(--navy);
  --t-assistant-title-card: var(--navy);
  --t-assistant-title-card-text: var(--mid-white);
  --t-assistant-nav-edge: var(--t-border);
  --t-assistant-tool-title: var(--mid-white);
}
.tools-page { /* used: challenges-canvases-atw */
  background-color: var(--t-page-bg);
  color: var(--t-page-text);
}

/* ---------- 12. EACH PAGE'S GRAPH SIZE ---------- */
.chart-box-adhd-challenges { /* used: challenges-canvases-atw */
  --chart-box-width: 560px;
}
@media (max-width: 828px) {
  .chart-box-adhd-challenges { /* used: challenges-canvases-atw */
    height: var(--chart-box-height-tall);
    overflow-x: hidden;
  }
}
@media (min-width: 601px) and (max-width: 828px) {
  .chart-box-adhd-challenges { /* used: challenges-canvases-atw */
    width: 100%;
  }
}
.chart-box-autism-challenges { /* used: challenges-canvases-atw */
  --chart-box-width: 800px;
  --chart-box-height-tall: 780px;
}
@media (max-width: 1280px) {
  .chart-box-autism-challenges { /* used: challenges-canvases-atw */
    height: var(--chart-box-height-tall);
    overflow-x: hidden;
  }
}
@media (min-width: 601px) and (max-width: 1280px) {
  .chart-box-autism-challenges { /* used: challenges-canvases-atw */
    width: 100%;
  }
}
.chart-box-cptsd-challenges { /* used: challenges-canvases-atw */
  --chart-box-width: 240px;
}
@media (max-width: 600px) {
  .chart-box-cptsd-challenges { /* used: challenges-canvases-atw */
    height: var(--chart-box-height-tall);
    overflow-x: hidden;
  }
}
.chart-box-masking-challenges { /* used: challenges-canvases-atw */
  --chart-box-width: 400px;
}
@media (max-width: 668px) {
  .chart-box-masking-challenges { /* used: challenges-canvases-atw */
    height: var(--chart-box-height-tall);
    overflow-x: hidden;
  }
}
@media (min-width: 601px) and (max-width: 668px) {
  .chart-box-masking-challenges { /* used: challenges-canvases-atw */
    width: 100%;
  }
}
.chart-box-rsd-challenges { /* used: challenges-canvases-atw */
  --chart-box-width: 480px;
}
@media (max-width: 813px) {
  .chart-box-rsd-challenges { /* used: challenges-canvases-atw */
    height: var(--chart-box-height-tall);
    overflow-x: hidden;
  }
}
@media (min-width: 601px) and (max-width: 813px) {
  .chart-box-rsd-challenges { /* used: challenges-canvases-atw */
    width: 100%;
  }
}
.chart-box-adhd-strengths { /* used: challenges-canvases-atw */
  --chart-box-width: 440px;
}
@media (max-width: 758px) {
  .chart-box-adhd-strengths { /* used: challenges-canvases-atw */
    height: var(--chart-box-height-tall);
    overflow-x: hidden;
  }
}
@media (min-width: 601px) and (max-width: 758px) {
  .chart-box-adhd-strengths { /* used: challenges-canvases-atw */
    width: 100%;
  }
}
.chart-box-autism-strengths { /* used: challenges-canvases-atw */
  --chart-box-width: 480px;
}
@media (max-width: 748px) {
  .chart-box-autism-strengths { /* used: challenges-canvases-atw */
    height: var(--chart-box-height-tall);
    overflow-x: hidden;
  }
}
@media (min-width: 601px) and (max-width: 748px) {
  .chart-box-autism-strengths { /* used: challenges-canvases-atw */
    width: 100%;
  }
}
/* Horizontal graphs above phone width take the full width. The page script
   adds this class when the graph draws horizontal bars. */
@media (min-width: 601px) {
  .chart-box-horizontal { /* used: challenges-canvases-atw */
    width: 100%;
    height: var(--chart-box-height-tall);
    overflow-x: hidden;
  }
}
.carousel-headline { /* used: challenges-canvases-atw */
  line-height: var(--default-line-height-x-small);
}
/* The intro under a carousel heading is centred, like the heading */
.carousel-intro { /* used: challenges-canvases-atw */
  text-align: center;
}
/* In dark, the ADHD strengths and Working with AuDHD cards stay on the card
   colour; the other pages' cards take the band colour */
:root[data-theme="dark"]:where(.page-adhd-strengths, .page-working-with-audhd) { /* used: challenges-canvases-atw */
  --t-flip-card-bg: var(--t-card);
}
/* In dark, the severity key on the challenges and strengths pages is in the
   full page text colour, not the softer one the strategy pages use */
:root[data-theme="dark"]:where(.page-adhd-challenges, .page-autism-challenges, .page-cptsd-challenges, .page-masking-challenges, .page-rsd-challenges, .page-adhd-strengths, .page-autism-strengths) { /* used: challenges-canvases-atw */
  --t-key-label: var(--t-page-text);
  --t-key-label-words: var(--t-text-secondary);
}


/* NEW STYLES: pages-in-chrome, 1 Oct 2026, for: /adhd-challenges, /autism-challenges, /cptsd-challenges, /masking-challenges, /rsd-challenges, /adhd-strengths, /autism-strengths, /adhd-strategies, /autism-strategies, /burnout-depression-strategies, /nervous-system-strategies, /hormonal-balance-strategies, /access-to-work-assistant-front, /sensory-needs-canvas-front, /how-to-work-with-me-canvas-front, /job-crafting-canvas-front, /working-with-audhd */

/* These pages are drawn full width beside the chrome's side strip and below
   its top bar and the sub-nav: their own wrapper leaves the room. Once
   /uma-chrome.js puts them inside the chrome, the chrome's content wrapper
   already clears the side strip, so the page's wrapper no longer does
   (tools-content-in-chrome), and the chrome's inner wrapper adds no width
   limit, side padding, top gap or hairline of its own on these pages. The
   page then sits exactly where it sat before, with the chrome around it. */
:where(.page-support-tools) .uma-chrome-all-content-wrapper { /* used: pages-in-chrome */
  border-top: none;
}
:where(.page-support-tools) .uma-chrome-inner-content-wrapper { /* used: pages-in-chrome */
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
}
.tools-content-in-chrome { /* used: pages-in-chrome */
  margin-left: 0;
  width: 100%;
}


/* NEW STYLES: learn-home-in-chrome, 1 Oct 2026, for: /, /glossary, /about-cptsd, /burnout-depression, /she-s-hormonal */

/* The homepage and the Learn pages, like the pages in the block above, are
   drawn beside the chrome's side strip and below its top bar: their own
   <main> leaves the room. Inside the chrome they keep that design: the
   chrome's content wrapper clears the side strip, <main> carries
   tools-content-in-chrome (above) so it does not clear it a second time, and
   the chrome's inner wrapper adds no width limit, padding, top gap or hairline
   of its own. */
/* The chrome sets its own divider colour for the page it is on; these pages
   keep their own */
:root:where(.page-home, .page-learn) { /* used: learn-home-in-chrome */
  --t-divider: var(--rule-grey);
}
:where(.page-learn, .page-home) .uma-chrome-all-content-wrapper { /* used: learn-home-in-chrome */
  border-top: none;
}
:where(.page-learn, .page-home) .uma-chrome-inner-content-wrapper { /* used: learn-home-in-chrome */
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
}


/* NEW STYLES: chrome-on-profile-pages, 1 Oct 2026, for: every page with page-profile on <html> that carries the chrome (the challenges, strengths, strategies, canvas fronts, Access to Work front and Working with AuDHD pages, and the results pages) */

/* UMA.css resets these pages from <html> down: no margin or padding on
   anything, paragraph and heading line heights back to the browser's, the
   last paragraph's gap taken off, and button fonts back to the browser's.
   The page content is built on that. The chrome is not: injected by
   /uma-chrome.js, its parts sit under the same <html> and lost their spacing.
   This puts back, inside the chrome's own parts only, exactly what UMA.css
   gives them on a page without page-profile. The first rule weighs nothing,
   like the reset it undoes, so every chrome rule still wins over it. */
:where(.page-profile) :where(.skip-link, .uma-chrome-sos, .uma-crisis-pane, .uma-chrome-top-bar, .uma-chrome-side-bar, .uma-chrome-sidebar-icon, .uma-alerts-panel, .uma-chrome-menu-pane, .uma-feedback-tab, .uma-feedback-backdrop, .uma-feedback-panel, .uma-upgrade-overlay, .uma-chrome-wishlist-backdrop, .uma-chrome-wishlist-panel, .uma-wishlist-drawer-backdrop, .uma-wishlist-drawer, .uma-wishlist-close, .footer-override),
:where(.page-profile) :where(.skip-link, .uma-chrome-sos, .uma-crisis-pane, .uma-chrome-top-bar, .uma-chrome-side-bar, .uma-chrome-sidebar-icon, .uma-alerts-panel, .uma-chrome-menu-pane, .uma-feedback-tab, .uma-feedback-backdrop, .uma-feedback-panel, .uma-upgrade-overlay, .uma-chrome-wishlist-backdrop, .uma-chrome-wishlist-panel, .uma-wishlist-drawer-backdrop, .uma-wishlist-drawer, .uma-wishlist-close, .footer-override) * { /* used: chrome-on-profile-pages */
  margin: revert;
  padding: revert;
}
:where(.page-profile) :where(.uma-crisis-pane, .uma-chrome-top-bar, .uma-alerts-panel, .uma-chrome-menu-pane, .uma-feedback-panel, .uma-upgrade-overlay, .uma-chrome-wishlist-panel, .uma-wishlist-drawer, .footer-override) p { /* used: chrome-on-profile-pages */
  line-height: var(--default-line-height-large);
}
:where(.page-profile) :where(.uma-crisis-pane, .uma-chrome-top-bar, .uma-alerts-panel, .uma-chrome-menu-pane, .uma-feedback-panel, .uma-upgrade-overlay, .uma-chrome-wishlist-panel, .uma-wishlist-drawer, .footer-override) p:last-of-type,
:where(.page-profile) :where(.uma-crisis-pane, .uma-chrome-top-bar, .uma-alerts-panel, .uma-chrome-menu-pane, .uma-feedback-panel, .uma-upgrade-overlay, .uma-chrome-wishlist-panel, .uma-wishlist-drawer, .footer-override) :is(.footer-copyright):is(p:last-of-type) { /* used: chrome-on-profile-pages */
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}
:where(.page-profile) :where(.uma-crisis-pane, .uma-chrome-top-bar, .uma-alerts-panel, .uma-chrome-menu-pane, .uma-feedback-panel, .uma-upgrade-overlay, .uma-chrome-wishlist-panel, .uma-wishlist-drawer, .footer-override) :is(h1, h2, h3, h4, h5, h6) { /* used: chrome-on-profile-pages */
  line-height: var(--default-line-height-single);
}
:where(.page-profile) :where(.skip-link, .uma-chrome-sos, .uma-crisis-pane, .uma-chrome-top-bar, .uma-chrome-side-bar, .uma-chrome-sidebar-icon, .uma-alerts-panel, .uma-chrome-menu-pane, .uma-feedback-tab, .uma-feedback-panel, .uma-upgrade-overlay, .uma-chrome-wishlist-panel, .uma-wishlist-drawer, .uma-wishlist-close, .footer-override) button,
:where(.page-profile) button:where(.uma-chrome-side-bar, .uma-chrome-sidebar-icon, .uma-feedback-tab, .uma-wishlist-close, .uma-chrome-sos) { /* used: chrome-on-profile-pages */
  font-family: inherit;
}
/* The ADHD and autism results rules also take the footer text's line height
   back to the browser's */
:where(.page-profile) :where(.footer-override) .footer-body-text { /* used: chrome-on-profile-pages */
  line-height: var(--default-line-height-small);
}


/* NEW STYLES: learn-crisis-card, 1 Oct 2026, for: /about-cptsd, /burnout-depression, /she-s-hormonal */

/* The breathing card and the crisis card on these Learn pages used the
   chrome crisis pane's own class names. With the chrome on the page, the
   pane and the card shared them, so the card has its own names now, with
   the same look: the breathing box, its two labels, and the words on the
   back. The card's script gives the words it copies from the pane these
   names too. The slide to call controls it copies stay the pane's own. */
.learn-breath-stage { /* used: learn-crisis-card */
  position: relative;
  width: 100%;
  max-width: var(--crisis-pane-breath-max-width);
  aspect-ratio: var(--crisis-pane-breath-stage-ratio);
  display: flex;
  align-items: center;
  justify-content: center;
}
.learn-breath-rect { /* used: learn-crisis-card */
  position: relative;
  width: 65%;
  height: var(--crisis-pane-breath-height-small);
  border: var(--stroke-thin) solid var(--bright-white);
  border-radius: var(--app-default-radius-lg);
  animation: crisis-pane-breathe var(--crisis-pane-breath-cycle) ease-in-out infinite;
  color: var(--bright-white);
  font-weight: var(--font-weight-medium);
  font-size: var(--body-text-sm);
  text-align: center;
}
.learn-breath-label { /* used: learn-crisis-card */
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  font-size: var(--crisis-pane-breath-label-size);
}
.learn-breath-label-in { /* used: learn-crisis-card */
  animation: crisis-pane-breath-show-in var(--crisis-pane-breath-cycle) ease-in-out infinite;
}
.learn-breath-label-out { /* used: learn-crisis-card */
  animation: crisis-pane-breath-show-out var(--crisis-pane-breath-cycle) ease-in-out infinite;
}
.learn-crisis-subheading { /* used: learn-crisis-card */
  font-size: var(--heading-size-md);
  font-weight: var(--font-weight-light);
  line-height: var(--default-line-height-small);
  letter-spacing: var(--heading-letter-spacing-tight);
  color: var(--bright-white);
  margin: var(--app-default-top-bottom-margin-lg) 0 var(--app-default-top-bottom-margin-sm);
}
.learn-crisis-text { /* used: learn-crisis-card */
  font-size: var(--body-text-sm);
  line-height: var(--default-line-height-large);
  color: rgba(var(--bright-white-rgb), var(--opacity-very-high));
  margin: 0 0 var(--app-default-top-bottom-margin-sm);
}
.learn-crisis-highlight { /* used: learn-crisis-card */
  color: var(--bright-white);
}
/* The box keeps breathing when motion is turned down, as the pane's does */
[data-motion="still"] .learn-breath-rect,
[data-motion="still"] .learn-breath-label-in,
[data-motion="still"] .learn-breath-label-out { /* used: learn-crisis-card */
  animation-duration: var(--crisis-pane-breath-cycle) !important;
  animation-iteration-count: infinite !important;
}


/* NEW STYLES: self-reports, 30 Sep 2026, for: /self-report-adhd, /self-report-autism, /self-report-cptsd, /self-report-health */
/* Uma self-reports, block 2 CSS, 30 Sep 2026 v2. For the relay. Replaces uma-self-reports-block-2-30sep2026-v1.css.

   Part 1 is the self-report page itself (the bars, the version options, the download button and the frame).
   Part 2 is the report shown inside that frame. The report does not load UMA.css: it is a print document
   with its own stylesheet, so Part 2 carries its own tokens at the top, scoped to the report page family.

   What changed from v1:
   - Every selector is one flat class under a :where() page scope, which adds no specificity.
     No ids, no !important, no double underscores. The only element selectors are body and a:focus-visible,
     in the same form UMA.css already uses them.
   - The page keeps its own design with its own classes instead of changing shared UMA.css classes:
     self-report-top-bar, self-report-section-nav, self-report-section-nav-rolled-up, self-report-main,
     self-report-version-tab and one-pager-mark-image are new, and the pages now carry them.
   - The page's own focus lines are gone. UMA.css (relay v42) already draws the Tab-only orange ring for
     every page family, and already lists page-self-report-preview. Keeping them would be a duplicate.
   - Part 2 is fully tokenised. The report is laid out in points and pixels on a fixed A4 page, so its
     sizes are new tokens (listed at the foot), declared once at the top of Part 2. */

/* Relay copy, 1 Oct 2026: Part 1 only, copied unchanged from claude/eager-darwin-qcqge1
   outputs/self-reports/uma-self-reports-block-30sep2026-v2.css. Part 2 is the report's own print stylesheet and does not go in UMA.css. */

/* ===== Part 1: the self-report page ===== */

/* HOW THE THREE THINGS AT THE TOP BEHAVE. The top bar scrolls away with the page. The section nav slides
   away going down and comes back on any upward scroll. The version options stay stuck to the top. */
:where(.page-self-report-preview) .self-report-top-bar{position:static;margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));} /* used: self-reports */
:where(.page-self-report-preview) .self-report-main{margin-top:0;} /* used: self-reports */

/* The section nav is pinned to the very top and slides up out of sight when you scroll down. The short
   script at the foot of the page puts self-report-section-nav-rolled-up on and takes it off. */
:where(.page-self-report-preview) .self-report-section-nav{position:fixed;top:0;left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));transform:translateY(0);transition:transform var(--transition-card) var(--ease-card);} /* used: self-reports */
:where(.page-self-report-preview) .self-report-section-nav-rolled-up{transform:translateY(-100%);} /* used: self-reports */

/* The options sit under the section nav while it shows, and slide up into its place when it rolls away. */
:where(.page-self-report-preview) .self-report-preview-bar{position:sticky;top:0;z-index:var(--z-card-mask);display:flex;flex-direction:column;gap:var(--gap-regular);padding:var(--app-default-top-bottom-margin-lg) var(--default-left-right-desk-body-padding) var(--app-default-top-bottom-margin-lg) var(--section-nav-edge-inset);background:var(--t-page-bg);border-bottom:var(--stroke-hairline) solid var(--t-divider);transition:top var(--transition-card) var(--ease-card);} /* used: self-reports */
:where(.page-self-report-preview.section-nav-showing) .self-report-preview-bar{top:var(--subnav-row-height);} /* used: self-reports */

:where(.page-self-report-preview) .self-report-preview-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-regular);} /* used: self-reports */

/* The options are the diagnostic pages' own segmented control (radar-graph-tab-toggle). There it is placed
   over the radar chart; here it goes back into the flow so the download button is not covered. */
:where(.page-self-report-preview) .self-report-preview-version-row{position:static;flex:0 1 auto;} /* used: self-reports */

/* THE DOWNLOAD BUTTON FLOATS, BOTTOM RIGHT, inset from both edges. */
:where(.page-self-report-preview) .self-report-preview-download{position:fixed;right:var(--app-default-top-bottom-margin-xl);bottom:var(--app-default-top-bottom-margin-xl);z-index:var(--z-section-nav);display:inline-flex;align-items:center;gap:var(--gap-sm);box-shadow:var(--canvas-sheet-shadow);} /* used: self-reports */

/* Where the report goes. The width comes from section-centred-without-carousel, as on the other results
   pages; only the top and bottom spacing is set here. */
:where(.page-self-report-preview) .self-report-preview-stage{padding-top:var(--app-default-top-bottom-margin-xl);padding-bottom:var(--app-default-top-bottom-margin-xxxxl);} /* used: self-reports */

/* The report inside the stage takes the stage's width and the height the report tells it. The notice
   shows only when the report has something to say. */
:where(.page-self-report-preview) .self-report-preview-frame{display:block;width:100%;min-height:100vh;border:0;} /* used: self-reports */
:where(.page-self-report-preview) .self-report-preview-notice{margin:0 0 var(--gap-md);color:var(--t-text-secondary);font-size:var(--body-text-md);} /* used: self-reports */

/* THE NAVY SIDE STRIP GOES AT 600, matching UMA.css, so both bars drop its offset at the same width. */
@media (max-width:600px) {
  :where(.page-self-report-preview) .self-report-top-bar{margin-left:0;width:100%;} /* used: self-reports */
  :where(.page-self-report-preview) .self-report-section-nav{left:0;margin-left:0;width:100%;} /* used: self-reports */

  /* BELOW 600 the options go edge to edge, straight under the section nav and on top of the report. */
  :where(.page-self-report-preview) .self-report-preview-bar{padding:0;gap:0;} /* used: self-reports */
  :where(.page-self-report-preview) .self-report-preview-stage{padding-left:0;padding-right:0;} /* used: self-reports */

  /* NO DOWNLOAD BUTTON ON A PHONE. Her decision: the SOS button has that corner. */
  :where(.page-self-report-preview) .self-report-preview-download{display:none;} /* used: self-reports */
  :where(.page-self-report-preview) .self-report-preview-controls{flex-direction:column;align-items:stretch;gap:0;} /* used: self-reports */

  /* The options go full width, square corners, equal shares, as deep as the section nav. */
  :where(.page-self-report-preview) .self-report-preview-version-row{width:100%;margin:0;border-radius:0;overflow:visible;height:var(--subnav-row-height);} /* used: self-reports */
  :where(.page-self-report-preview) .self-report-version-tab{flex:1 1 0;min-width:0;border-radius:0;white-space:nowrap;padding-left:var(--gap-xs);padding-right:var(--gap-xs);text-align:center;justify-content:center;align-items:center;height:100%;} /* used: self-reports */
  :where(.page-self-report-preview) .self-report-preview-notice{padding-left:var(--gap-lg);padding-right:var(--gap-lg);} /* used: self-reports */
}


/* NEW STYLES: tab-ring-buttons, 1 Oct 2026, for: every page that loads UMA.css */

/* Her ruling, 1 Oct: buttons and switches get the orange Tab ring with a
   small gap around their edge; fields keep their own stroke turning orange,
   no gap.

   The ring is her own button focus line from UMA.css (the .btn:focus-visible
   line in the REMOVED ANNOYING section): the --focus-outline-width ring in
   --focus-outline-color, set --focus-ring-offset away from the edge. It only
   draws after Tab, because only Tab puts keyboard-focus on a control (the
   chrome's Tab script). A click or a tap draws nothing.

   A button with a stroke of its own keeps that stroke in its own colour
   while the ring shows, so there is never a second orange line inside the
   ring. Her stroked buttons draw their stroke in the same colour as their
   words, so currentColor gives each one back its own.

   The rules weigh the same as the stroke rules above them and win by coming
   last. Fields, the four digit code box and the segmented toggle are not
   touched: their stroke still turns orange, no gap. Links that are not
   buttons keep the outline at stroke width, no gap. */
:where(button, [role="button"], .btn).keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: tab-ring-buttons */
  border-color: currentColor;
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

/* The buttons with their own heavier Tab line in UMA.css: the carousel
   arrows, the screening arrows, the answer options and the lozenges. */
.carousel-nav-btn.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)),
.screening-nav-icon-button.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)),
.screening-likert-single-choice-option.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)),
.lozenge.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: tab-ring-buttons */
  border-color: currentColor;
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

/* The stroked buttons whose stroke is not the colour of their words: each
   gets its own stroke back. */
.button-tick-screen.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: tab-ring-buttons */
  border-color: var(--answer-tick-edge);
}
.button-cross-screen.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: tab-ring-buttons */
  border-color: var(--answer-cross-edge);
}
.tools-pill-outline.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: tab-ring-buttons */
  border-color: var(--t-outline-pill-edge);
}
.swipe-dot--current.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)),
.swipe-dot--not-selected.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: tab-ring-buttons */
  border-color: var(--t-emphasis);
}

/* A button that sits inside a field (the field's own action button) or inside
   the segmented toggle is part of that control: its stroke turns orange and
   the button draws nothing. */
.field-action-button.keyboard-focus:focus { /* used: tab-ring-buttons. release build 91 (bug 17): segmented options draw their own ring */
  outline: none;
}

/* SWITCHES. The switch's own input is hidden, so the ring goes on the switch
   around it, following its rounded ends. Her calm and voice switches keep
   their own ring from UMA.css, which is heavier. */
.switch .keyboard-focus ~ .switch-track { /* used: tab-ring-buttons. release build 91 (bug 17): on the visible track, not the wrapper */
  border-radius: var(--radius-pill);
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}


/* NEW STYLES: tab-ring-fields, 1 Oct 2026, for: /adhd-profile, /autism-profile, /cptsd-profile, /masking-profile, /rsd-profile, /adhd-diagnostic-scoring, /autism-diagnostic-scoring, /cptsd-diagnostic-scoring, /brain-body-profile, /health-self-report, /trauma-history, /hypermobility-eds, /mcas, /pots */

/* Her correction, 1 Oct: fields and selects, including the trauma age menu,
   keep their own stroke turning orange on Tab, no gap, and nothing on a
   click. The results pages' own Tab line (THE TAB RING ON THE RESULTS PAGES)
   also draws an outline at stroke width on every control, which on a field
   sits on top of its orange stroke. This takes that outline off fields and
   selects on those pages only, so the stroke alone shows. Buttons keep the
   ring with the gap from the tab-ring-buttons block. */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile, .page-brain-body, .page-adhd-diagnostic, .page-autism-diagnostic, .page-cptsd-diagnostic, .page-health-history, .page-trauma-history, .page-hypermobility, .page-mcas, .page-pots) :where(input, select, textarea).keyboard-focus:focus { /* used: tab-ring-fields */
  outline: none;
}


/* NEW STYLES: placeholders-under-chrome, 1 Oct 2026, for: every page that loads /uma-chrome.js and still carries its own stand-in bars (the tool pages, the homepage and Learn pages, the results pages) */

/* Before the chrome existed, these pages drew stand-in bars where the chrome
   would go: a navy side strip (side-bar-placeholder) and a pale top bar
   (temp-chrome, chrome-header-placeholder). They are fixed in place and sit
   high in the stacking order, so with the real chrome on the page they cover
   it: the logo and the BETA line in the top bar, and on the results pages the
   menu button. page-uma-app-chrome is put on <html> by /uma-chrome.js, so on a
   page with the chrome the stand-ins step aside and the chrome's own bars
   show. They take no room in the layout, so nothing else moves. Without the
   chrome they show as before. */
:where(.page-uma-app-chrome) .temp-chrome,
:where(.page-uma-app-chrome) .side-bar-placeholder,
:where(.page-uma-app-chrome) .chrome-header-placeholder { /* used: placeholders-under-chrome */
  display: none;
}


/* NEW STYLES: results-in-chrome, 1 Oct 2026, for: /adhd-profile, /autism-profile, /cptsd-profile, /masking-profile, /rsd-profile, /adhd-diagnostic-scoring, /autism-diagnostic-scoring, /cptsd-diagnostic-scoring, /brain-body-profile, /health-self-report, /trauma-history, /hypermobility-eds, /mcas, /pots */

/* The results pages are drawn beside the chrome's side strip and below its
   top bar and the sub-nav, like the tool pages in the pages-in-chrome block:
   their own <main> leaves the room. Inside the chrome they keep that design:
   the chrome's content wrapper clears the side strip, <main> carries
   tools-content-in-chrome so it does not clear it a second time, and the
   chrome's inner wrapper adds no width limit, padding, top gap or hairline of
   its own. */
:where(.page-profile, .page-diagnostic, .page-brain-body, .page-health-history, .page-trauma-history, .page-condition) .uma-chrome-all-content-wrapper { /* used: results-in-chrome */
  border-top: none;
}
:where(.page-profile, .page-diagnostic, .page-brain-body, .page-health-history, .page-trauma-history, .page-condition) .uma-chrome-inner-content-wrapper { /* used: results-in-chrome */
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
}

/* The chrome gives every page it sits on its own light-mode colours, and its
   sub-nav frost is a touch whiter than the condition pages' own. They keep
   theirs (the value from their own :root line, restated so it comes after the
   chrome's). Dark mode already matches. */
:root:where(.page-condition) { /* used: results-in-chrome */
  --t-nav-frost: rgba(var(--light-white-rgb), var(--opacity-very-high));
}

/* The example banner's label on the diagnostic and trauma pages has no
   stroke (and on trauma no fill): the colours its rule asks for are not set
   on those pages. The chrome sets them for its own parts, which would draw a
   stroke and fill the pages never had. The pages keep their own look. */
:where(.page-diagnostic, .page-trauma-history) .example-state-banner-label { /* used: results-in-chrome */
  border-style: none;
}
:where(.page-trauma-history) .example-state-banner-label { /* used: results-in-chrome */
  background: transparent;
}


/* NEW STYLES: brain-body-bar-under-chrome, 1 Oct 2026, for: /brain-body-profile */

/* The brain-body page draws its stand-in top bar under its own name
   (brain-body-temp-chrome), which the placeholders-under-chrome block above
   does not name. Fixed and high in the stacking order, it covered the
   chrome's logo and BETA line. With the chrome on the page it steps aside,
   like the other stand-ins. It takes no room in the layout. */
:where(.page-uma-app-chrome) .brain-body-temp-chrome { /* used: brain-body-bar-under-chrome */
  display: none;
}


/* NEW STYLES: video processing and captions, 01 Oct 2026, for: /admin-videos (the video review queue) and any page playing a captioned video (video data-uma-video, read by /uma-video-captions.js) */
/* Goes at the bottom of UMA.css. New tokens are listed in the deploy notes. */

/* ===== TOKENS: the review page, light and dark ===== */
:root:where(.page-video-review) {
  --t-page-bg: var(--mid-white);
  --t-page-text: var(--mid-charcoal);
  --t-text-strong: var(--dark-charcoal);
  --t-card: var(--light-white);
  --video-review-page-max-width: 64rem;
  --video-review-player-width: 18rem;
  --video-review-time-width: 6.5rem;
  --video-review-cues-max-height: 28rem;
}
:root[data-theme="dark"]:where(.page-video-review) {
  --t-page-bg: var(--navy-60);
  --t-page-text: var(--bright-white);
  --t-text-strong: var(--bright-white);
  --t-card: var(--navy);
}

/* ===== THE REVIEW PAGE ===== */
.video-review-body { background-color: var(--t-page-bg); color: var(--t-page-text); } /* used: video-review */
.video-review-page { max-width: var(--video-review-page-max-width); margin: 0 auto; padding: var(--gap-xxl) var(--gap-regular); display: flex; flex-direction: column; gap: var(--gap-xxl); } /* used: video-review */
.video-review-intro { display: flex; flex-direction: column; gap: var(--gap-xs); } /* used: video-review */
.video-review-heading { margin: 0; color: var(--t-text-strong); } /* used: video-review */
.video-review-note { margin: 0; font-size: var(--body-text-sm); } /* used: video-review */
.video-review-list { display: flex; flex-direction: column; gap: var(--gap-xl); } /* used: video-review */
.video-review-item { display: grid; grid-template-columns: var(--video-review-player-width) 1fr; gap: var(--gap-xl); padding: var(--gap-xl); border-radius: var(--default-radius); background: var(--t-card); } /* used: video-review */
.video-review-player { width: 100%; aspect-ratio: 9 / 16; background: var(--navy); border-radius: var(--default-radius); } /* used: video-review */
.video-review-details { display: flex; flex-direction: column; gap: var(--gap-md); min-width: 0; } /* used: video-review */
.video-review-title { margin: 0; color: var(--t-text-strong); font-size: var(--body-text-lg); } /* used: video-review */
.video-review-cues { display: flex; flex-direction: column; gap: var(--gap-xs); max-height: var(--video-review-cues-max-height); overflow-y: auto; } /* used: video-review */
.video-review-cue { display: grid; grid-template-columns: var(--video-review-time-width) 1fr; gap: var(--gap-xs); align-items: start; } /* used: video-review */
.video-review-time { padding-top: var(--gap-xs); font-size: var(--body-text-xs); font-variant-numeric: tabular-nums; } /* used: video-review */
.video-review-text { min-height: auto; } /* used: video-review */
.video-review-actions { display: flex; flex-wrap: wrap; gap: var(--gap-xs); } /* used: video-review */
@media (max-width: 48rem) {
  .video-review-item { grid-template-columns: 1fr; } /* used: video-review */
}

/* ===== CAPTIONS BUTTON on a captioned video (added by /uma-video-captions.js) =====
   Sits in the top right corner of the video's own box, clear of the card's eyebrow
   and title. Pressed shows the captions. */
.video-captions-toggle { position: absolute; top: var(--gap-md); right: var(--gap-md); z-index: 2; } /* used: video-captions */
.video-captions-toggle-on { background: var(--bright-white); color: var(--navy); } /* used: video-captions */
/* NEW STYLES: library-marketplace, 1 Oct 2026, for: /library, /marketplace, /discounts, /reviews, /statistics */
/* The page CSS of the library, marketplace, discounts, reviews and
   statistics pages, moved out of the pages and written flat. The pages link
   /UMA.css only; this block goes at the foot of UMA.css.

   HOW IT IS WRITTEN
   - One class per selector. A second class appears only where a script puts a
     state on an element (is-open, is-active, on, expanded) and the look of
     that element or a part inside it depends on it. Those are listed in the
     note sent with this file.
   - Classes that only these pages use and whose names are general words
     (layout, canvas, stage and so on) are held to their page with
     :where(.page-...), which adds no weight, the way UMA.css already holds the
     results pages and the Learn pages. Where a part looks different inside
     one place (a drawer, a tile), the place goes inside the :where() too, so
     the rule still weighs one class.
   - The few exceptions, each marked where it sits: a second class for weight
     against a UMA.css rule (.btn-md i, p:last-of-type and the like), a state
     ancestor with the part inside it, :has() where the state lives on a
     parent, and attribute selectors the scripts or the data set.
   - Light and dark: components read tokens; the theme blocks set them.
   - Where a page looked different from a UMA.css class, the page has its own
     class, so nothing here restyles a UMA.css class.
   - Focus: see SHARED: FOCUS below. Buttons and switches take an orange ring
     with UMA.css's small gap on Tab only; fields keep UMA.css's own stroke
     turning orange; nothing else takes a ring. */


/* ==========================================================================
   NEW TOKENS. On merge these move to the :root at the top of UMA.css.
   ========================================================================== */
:root { /* used: library-marketplace */
  /* Filter tab and drawer (statistics, library, marketplace) */
  --dark-teal-rgb: 0, 101, 112;
  --opacity-extra-low: 0.1;
  --concertina-closed-drawer-height: 60px;
  --filter-drawer-column-width: 420px;
  --filter-drawer-nav-column-width: 380px;
  --filter-drawer-column-min-width: 400px;
  --filter-drawer-row-height: 60px;
  --filter-tab-offset: 80px;
  --filter-tab-width: 130px;
  --filter-tab-letter-spacing: 0.03em;
  --filter-tab-shadow: 0 2px 8px var(--shadow-overlay);
  --filter-tab-hover-padding: 0.75rem;
  --filter-drawer-open-duration: 0.6s;
  --filter-panel-open-duration: 0.4s;
  --filter-panel-open-height: 2000px;
  --filter-remove-size: 28px;
  --filter-close-hit-width: 24px;
  --touch-target-min: 44px;
  --filter-switch-text-inset: 10px;
  --filter-drawer-open-layer: 10000030;
  --filter-backdrop-layer: 900;

  /* Filter drawer colours, light. The dark values are in the dark blocks. */
  --filter-text: var(--navy);
  --filter-close-text: var(--mid-charcoal);
  --filter-icon: var(--dark-teal);
  --filter-plus-minus: var(--mid-charcoal);
  --filter-divider: rgba(var(--black-rgb), var(--opacity-extra-low));
  --filter-drawer-bg: rgba(var(--bright-white-rgb), var(--opacity-very-high));
  --filter-solid-bg: var(--bright-white);
  --filter-glass-bg: rgba(var(--bright-white-rgb), var(--opacity-very-high));
  --filter-clear-bg: transparent;
  --filter-nav-wide-bg: rgba(var(--white-rgb), var(--opacity-near-full));
  --filter-nav-active-bg: var(--bright-white);
  --filter-pill-bg: rgba(var(--dark-teal-rgb), var(--opacity-low));
  --filter-pill-text: var(--dark-teal);
  --filter-clear-pill-bg: var(--dark-white);
  --filter-clear-pill-text: var(--light-charcoal);
  --filter-clear-pill-border: none;
  --filter-switch-off: var(--dark-white);

  /* The thumbs up and down tabs over the review cards (reviews, marketplace) */
  --verdict-tab-height: 40px;
  --verdict-tab-icon-size: 1.3rem;
  --verdict-tab-icon-padding: 1rem;
}


/* ==========================================================================
   SHARED: THE FILTER TAB AND DRAWER
   statistics, library, marketplace. The marketplace drawer, as the library
   and the statistics page carry it.
   ========================================================================== */

/* Dark. Only tokens change. */
:root[data-theme="dark"]:where(.page-statistics, .page-uma-library, .page-uma-marketplace) { /* used: library-marketplace */
  --filter-text: var(--t-text-strong);
  --filter-close-text: var(--t-text-strong);
  --filter-icon: var(--t-text-strong);
  --filter-plus-minus: var(--t-text-secondary);
  --filter-divider: var(--t-divider);
  --filter-drawer-bg: rgba(var(--navy-60-rgb), var(--opacity-very-high));
  --filter-solid-bg: rgba(var(--navy-60-rgb), var(--opacity-near-full));
  --filter-glass-bg: rgba(var(--navy-60-rgb), var(--opacity-near-full));
  --filter-clear-bg: rgba(var(--navy-60-rgb), var(--opacity-near-full));
  --filter-nav-wide-bg: rgba(var(--navy-60-rgb), var(--opacity-near-full));
  --filter-nav-active-bg: transparent;
  --filter-pill-bg: var(--dark-teal);
  --filter-pill-text: var(--t-text-strong);
  --filter-clear-pill-bg: transparent;
  --filter-clear-pill-text: var(--t-text-strong);
  --filter-clear-pill-border: var(--stroke-hairline) solid var(--t-text-strong);
  --filter-switch-off: var(--t-border);
}

/* The yellow tab that hangs off the bar */
.uma-marketplace-filters-tab { /* used: library-marketplace */
  position: absolute;
  top: 100%;
  right: var(--filter-tab-offset);
  z-index: 4;
  background: var(--yellow);
  border: none;
  color: var(--white-text-default);
  width: var(--filter-tab-width);
  padding: var(--gap-xs) 0;
  border-radius: 0 0 var(--app-default-radius-md) var(--app-default-radius-md);
  cursor: pointer;
  font-size: var(--button-font-size);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--filter-tab-letter-spacing);
  text-align: center;
  box-sizing: border-box;
  box-shadow: var(--filter-tab-shadow);
  transition: background var(--button-transition-duration) var(--button-transition-ease), padding var(--button-transition-duration) var(--button-transition-ease);
}
.uma-marketplace-filters-tab:hover { padding-bottom: var(--filter-tab-hover-padding); } /* used: library-marketplace */
.uma-filter-drawer-open .uma-marketplace-filters-tab { display: none; } /* used: library-marketplace */
@media (max-width: 600px) {
  .uma-marketplace-filters-tab { font-size: var(--body-text-xs); right: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
}

/* The page behind the open drawer blurs */
.uma-filter-drawer-open { overflow: hidden; } /* used: library-marketplace */
.uma-filter-drawer-open::before { /* used: library-marketplace */
  content: '';
  position: fixed;
  inset: 0;
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  background: rgba(var(--black-rgb), var(--opacity-extra-low));
  z-index: var(--filter-backdrop-layer);
  pointer-events: none;
}

/* The drawer. Its open height is the screen less the bar it hangs from;
   the page script measures the bar into --intervention-nav-height on open. */
.uma-filter-drawer { /* used: library-marketplace */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 0;
  overflow: hidden;
  background: var(--filter-drawer-bg);
  transition: max-height var(--filter-drawer-open-duration) ease;
}
.uma-filter-drawer.is-open { /* used: library-marketplace */
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--intervention-nav-height));
  max-height: calc(100dvh - var(--intervention-nav-height));
  margin-top: 0;
  border-bottom: var(--stroke-thin) solid var(--filter-divider);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
}

.uma-filter-drawer-inner { position: relative; padding: var(--gap-md) var(--default-left-right-mob-body-padding) var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */

/* Header: close, and Uncheck all (never shown) */
.uma-filter-drawer-header { display: flex; justify-content: space-between; align-items: center; } /* used: library-marketplace */
:where(.uma-filter-drawer.is-open) .uma-filter-drawer-header { flex: 0 0 auto; } /* used: library-marketplace */
.uma-filter-drawer-header-spacer { display: none; } /* used: library-marketplace */
.uma-filter-drawer-header-actions { display: contents; } /* used: library-marketplace */
.uma-filter-drawer-reset { display: none; background: transparent; border: none; color: var(--filter-text); font-family: inherit; font-size: var(--body-text-sm); cursor: pointer; padding: 0; height: var(--button-size-md); border-radius: var(--radius-pill); transition: color var(--transition-fast) ease; } /* used: library-marketplace */
.uma-filter-drawer-reset:hover { color: var(--orange); } /* used: library-marketplace */
.uma-filter-drawer-close { position: relative; height: var(--button-size-md); background: transparent; border: none; color: var(--filter-close-text); cursor: pointer; display: flex; align-items: center; justify-content: flex-end; font-size: var(--button-icon-xxl); padding: 0 0 0 var(--gap-md); margin-left: auto; } /* used: library-marketplace */
.uma-filter-drawer-close-icon { display: block; line-height: var(--default-line-height-single); } /* used: library-marketplace */
.uma-filter-drawer-close::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--filter-close-hit-width); transform: translateX(-50%); } /* used: library-marketplace */

/* Clear all filters, in the subheader */
.uma-filter-drawer-clear-all { background: transparent; border: none; color: var(--filter-text); font-family: inherit; font-size: var(--body-text-sm); cursor: pointer; padding: 0; height: var(--button-size-md); transition: color var(--transition-base) ease, opacity var(--transition-base) ease; text-align: left; } /* used: library-marketplace */
.uma-filter-drawer-clear-all:hover { color: var(--orange); } /* used: library-marketplace */
.uma-filter-drawer-clear-all:disabled { display: none; } /* used: library-marketplace */
.uma-filter-drawer-clear-all.is-disabled { display: none; } /* used: library-marketplace */

/* The chosen filters, as pills */
.uma-filter-selection-pill { display: inline-flex; align-items: center; gap: var(--gap-xs); height: var(--button-size-sm); padding: 0 var(--gap-md); background: var(--filter-pill-bg); color: var(--filter-pill-text); border-radius: var(--radius-pill); font-size: var(--body-text-sm); line-height: var(--default-line-height-single); flex-shrink: 0; transition: background var(--transition-fast) ease, color var(--transition-fast) ease, padding var(--transition-fast) ease; } /* used: library-marketplace */
.uma-filter-selection-pill:hover { padding: 0 var(--gap-xs) 0 var(--gap-md); } /* used: library-marketplace */
.uma-filter-selection-pill:first-child { scroll-snap-align: start; } /* used: library-marketplace */
.uma-filter-selection-pill:last-child { scroll-snap-align: end; } /* used: library-marketplace */
.uma-filter-selection-pill:has(.uma-filter-selection-pill-remove:hover) { background: var(--tomato); color: var(--bright-white); } /* used: library-marketplace */
.uma-filter-selection-pill-label { line-height: var(--default-line-height-single); } /* used: library-marketplace */
.uma-filter-selection-pill-remove { position: relative; background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; color: var(--filter-pill-text); height: var(--filter-remove-size); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-circle); transition: color var(--transition-fast) ease, opacity var(--transition-fast) ease, width var(--transition-fast) ease; opacity: 0; width: 0; overflow: hidden; } /* used: library-marketplace */
.uma-filter-selection-pill:hover .uma-filter-selection-pill-remove { opacity: 1; width: var(--filter-remove-size); } /* used: library-marketplace */
.uma-filter-selection-pill:has(.uma-filter-selection-pill-remove:hover) .uma-filter-selection-pill-remove { color: var(--bright-white); } /* used: library-marketplace */
.uma-filter-selection-pill-remove-icon { font-size: var(--button-icon-md); line-height: var(--default-line-height-single); } /* used: library-marketplace */
.uma-filter-selection-pill--clear-all { background: var(--filter-clear-pill-bg); color: var(--filter-clear-pill-text); border: var(--filter-clear-pill-border); font-family: inherit; cursor: pointer; transition: background var(--transition-fast) ease, color var(--transition-fast) ease, border-color var(--transition-fast) ease, padding var(--transition-fast) ease; } /* used: library-marketplace */
.uma-filter-selection-pill--clear-all:hover { background: var(--tomato); color: var(--bright-white); border-color: var(--tomato); padding: 0 var(--gap-md); } /* used: library-marketplace */
.uma-filter-selection-pill-clear-icon { font-size: var(--button-icon-md); } /* used: library-marketplace */
.uma-filter-selections-bar::before,
.uma-filter-selections-bar::after { content: ''; flex: 0 0 var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
.uma-filter-selections-bar[hidden] { display: none; } /* used: library-marketplace */

/* The menu down the left (on phones, the rows) */
.uma-filter-drawer-grid { display: flex; flex-direction: column; } /* used: library-marketplace */
.uma-filter-nav-btn { background: transparent; border: none; color: var(--filter-text); font-family: inherit; font-size: var(--body-text-sm); text-align: left; height: var(--filter-drawer-row-height); padding: 0; cursor: pointer; transition: color var(--transition-base) ease; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); width: 100%; } /* used: library-marketplace */
.uma-filter-nav-btn:hover { color: var(--orange); } /* used: library-marketplace */
.uma-filter-nav-btn-count { margin-left: auto; order: 999; background: var(--filter-pill-bg); color: var(--filter-pill-text); border-radius: var(--radius-pill); padding: 0 var(--gap-sm); height: var(--switch-mini-height); min-width: var(--switch-mini-width); display: inline-flex; align-items: center; justify-content: center; font-size: var(--body-text-sm); line-height: var(--default-line-height-single); font-weight: var(--font-weight-semi-bold); } /* used: library-marketplace */
.uma-filter-nav-btn-count--value { background: transparent; color: var(--filter-text); font-size: var(--body-text-xs); font-weight: var(--font-weight-normal); border-radius: 0; padding: 0; min-width: 0; height: auto; text-align: right; } /* used: library-marketplace */
.uma-filter-nav-btn-icon-plus { font-size: var(--button-icon-xxl); color: var(--filter-plus-minus); transition: color var(--transition-base) ease; display: flex; align-items: center; justify-content: center; line-height: var(--default-line-height-single); } /* used: library-marketplace */
.uma-filter-nav-btn-icon-minus { font-size: var(--button-icon-xxl); color: var(--filter-plus-minus); transition: color var(--transition-base) ease; display: none; align-items: center; justify-content: center; line-height: var(--default-line-height-single); } /* used: library-marketplace */
.uma-filter-label-long { display: none; } /* used: library-marketplace */

/* The options in each panel */
.uma-filter-panel { display: none; padding: 0; } /* used: library-marketplace */
.uma-filter-panel.is-active { display: block; } /* used: library-marketplace */
.uma-filter-panel-inner { display: grid; grid-template-columns: 1fr; gap: var(--gap-regular); } /* used: library-marketplace */
.uma-filter-option-list { display: flex; flex-direction: column; gap: var(--gap-xxs); grid-column: 1; } /* used: library-marketplace */
.uma-filter-option { display: flex; align-items: center; gap: var(--gap-sm); height: var(--button-size-md); min-height: var(--button-size-md); padding: 0; border: none; background: transparent; color: var(--filter-text); border-radius: var(--radius-pill); cursor: pointer; font-family: inherit; font-size: var(--body-text-sm); text-align: left; transition: background var(--transition-fast) ease, color var(--transition-fast) ease; box-sizing: border-box; white-space: nowrap; } /* used: library-marketplace */
.uma-filter-option:hover { color: var(--orange); } /* used: library-marketplace */
.uma-filter-option.is-active { color: var(--orange); background: transparent; } /* used: library-marketplace */
.uma-filter-option-icon { font-size: var(--button-icon-xxl); flex-shrink: 0; display: flex; align-items: center; justify-content: center; line-height: var(--default-line-height-single); color: var(--dark-teal); } /* used: library-marketplace */
.uma-filter-switch-list { display: flex; flex-direction: column; gap: var(--gap-xxs); grid-column: 1; width: 100%; } /* used: library-marketplace */
.uma-filter-switch-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--gap-sm); height: var(--button-size-md); min-height: var(--button-size-md); padding: 0; cursor: pointer; border-radius: var(--radius-pill); transition: background var(--transition-fast) ease, color var(--transition-fast) ease; color: var(--filter-text); box-sizing: border-box; white-space: nowrap; width: 100%; } /* used: library-marketplace */
.uma-filter-switch-label { display: flex; align-items: center; gap: var(--gap-sm); font-size: var(--body-text-sm); white-space: nowrap; min-width: 0; } /* used: library-marketplace */
.uma-filter-switch-icon { font-size: var(--button-icon-xxl); flex-shrink: 0; display: flex; align-items: center; justify-content: center; line-height: var(--default-line-height-single); color: var(--filter-icon); } /* used: library-marketplace */

/* The drawer's switches: the UMA.css mini switch, grey off and teal on.
   Written the way UMA.css writes its own switch variants. */
.switch--dietary { justify-self: end; flex-shrink: 0; } /* used: library-marketplace */
.switch--dietary .switch-track { background: var(--filter-switch-off); overflow: visible; } /* used: library-marketplace */
.switch--dietary input:checked ~ .switch-track { background: var(--bright-teal); } /* used: library-marketplace */
.switch--dietary .switch-track::before { content: ''; position: absolute; right: var(--filter-switch-text-inset); top: 50%; transform: translateY(-50%); color: var(--bright-white); font-size: var(--body-text-xs); font-weight: normal; line-height: var(--default-line-height-single); z-index: 1; } /* used: library-marketplace */
.switch--dietary input:checked ~ .switch-track::before { content: ''; right: auto; left: var(--filter-switch-text-inset); } /* used: library-marketplace */
.switch--dietary .switch-thumb::before { content: ''; } /* used: library-marketplace */

@media (hover: none) {
  .uma-filter-selection-pill-remove { overflow: visible; } /* used: library-marketplace */
  .uma-filter-selection-pill-remove::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: var(--touch-target-min); min-height: var(--touch-target-min); } /* used: library-marketplace */
  .uma-filter-drawer-close::after { height: 100%; min-width: var(--touch-target-min); min-height: var(--touch-target-min); } /* used: library-marketplace */
}

@media (min-width: 600px) {
  .uma-filter-drawer-inner { padding-left: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
}

/* Phones and tablets: one column of rows that open in place */
@media (max-width: 899px) {
  .uma-filter-drawer-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; height: var(--filter-drawer-row-height); background: var(--filter-solid-bg); border-bottom: var(--stroke-thin) solid var(--filter-divider); padding: 0 var(--default-left-right-mob-body-padding); box-sizing: border-box; } /* used: library-marketplace */
  .uma-filter-drawer-subheader { position: absolute; top: var(--filter-drawer-row-height); left: 0; right: 0; z-index: 4; height: auto; flex-direction: column; background: var(--filter-clear-bg); } /* used: library-marketplace */
  .uma-filter-drawer-subheader:not(:has(.uma-filter-selections-bar:not([hidden]))) { display: none; } /* used: library-marketplace */
  .uma-filter-drawer-subheader-left { display: none; } /* used: library-marketplace */
  .uma-filter-drawer-subheader-right { height: var(--filter-drawer-row-height); padding: 0; } /* used: library-marketplace */
  .uma-filter-selections-bar { flex: 1 1 auto; min-width: 0; height: var(--filter-drawer-row-height); background: var(--filter-solid-bg); display: flex; align-items: center; padding-inline: 0; scroll-padding-inline: var(--default-left-right-mob-body-padding); scroll-snap-type: inline proximity; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; gap: var(--gap-xs); border-bottom: var(--stroke-thin) solid var(--filter-divider); } /* used: library-marketplace */
  .uma-filter-selections-bar::-webkit-scrollbar { display: none; } /* used: library-marketplace */
  .uma-filter-selection-pill-remove { opacity: 1; width: var(--filter-remove-size); } /* used: library-marketplace */
  .uma-filter-drawer-inner { padding-top: var(--filter-drawer-row-height); padding-right: var(--default-left-right-mob-body-padding); padding-bottom: 0; } /* used: library-marketplace */
  :where(.uma-filter-drawer.is-open) .uma-filter-drawer-inner { flex: 1 1 auto; overflow-y: auto; min-height: 0; scrollbar-width: none; -ms-overflow-style: none; scroll-padding-top: var(--filter-drawer-row-height); } /* used: library-marketplace */
  :where(.uma-filter-drawer.is-open) .uma-filter-drawer-inner::-webkit-scrollbar { display: none; width: 0; height: 0; } /* used: library-marketplace */
  :where(.uma-filter-drawer.is-open:has(.uma-filter-selections-bar:not([hidden]))) .uma-filter-drawer-inner { padding-top: calc(var(--filter-drawer-row-height) * 2); scroll-padding-top: calc(var(--filter-drawer-row-height) * 2); } /* used: library-marketplace */
  .uma-filter-nav-btn { background: var(--filter-solid-bg); border-bottom: var(--stroke-thin) solid var(--filter-divider); margin-left: calc(-1 * var(--default-left-right-mob-body-padding)); margin-right: calc(-1 * var(--default-left-right-mob-body-padding)); padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); width: calc(100% + 2 * var(--default-left-right-mob-body-padding)); justify-content: flex-start; gap: var(--gap-md); } /* used: library-marketplace */
  .uma-filter-nav-btn.is-active { background: var(--filter-nav-active-bg); } /* used: library-marketplace */
  .uma-filter-nav-btn-icon-plus { order: -1; } /* used: library-marketplace */
  .uma-filter-nav-btn-icon-minus { order: -1; } /* used: library-marketplace */
  .uma-filter-nav-btn.is-active .uma-filter-nav-btn-icon-plus { display: none; } /* used: library-marketplace */
  .uma-filter-nav-btn.is-active .uma-filter-nav-btn-icon-minus { display: flex; } /* used: library-marketplace */
  .uma-filter-panel { display: block; max-height: 0; overflow: hidden; transition: max-height var(--filter-panel-open-duration) ease-out, padding var(--filter-panel-open-duration) ease-out; padding: 0 var(--default-left-right-mob-body-padding); margin-left: calc(-1 * var(--default-left-right-mob-body-padding)); margin-right: calc(-1 * var(--default-left-right-mob-body-padding)); } /* used: library-marketplace */
  .uma-filter-panel.is-active { max-height: var(--filter-panel-open-height); border-bottom: var(--stroke-thin) solid var(--filter-divider); } /* used: library-marketplace */
  .uma-filter-option-list { gap: 0; } /* used: library-marketplace */
  .uma-filter-switch-list { gap: 0; } /* used: library-marketplace */
  .uma-filter-option { border-radius: 0; height: var(--filter-drawer-row-height); min-height: var(--filter-drawer-row-height); padding: 0 var(--default-left-right-mob-body-padding); margin-left: calc(-1 * var(--default-left-right-mob-body-padding)); margin-right: calc(-1 * var(--default-left-right-mob-body-padding)); width: calc(100% + 2 * var(--default-left-right-mob-body-padding)); } /* used: library-marketplace */
  .uma-filter-option:hover { background: rgba(var(--black-rgb), var(--opacity-very-low)); } /* used: library-marketplace */
  .uma-filter-option.is-active { background: transparent; } /* used: library-marketplace */
  .uma-filter-switch-row { border-radius: 0; height: var(--filter-drawer-row-height); min-height: var(--filter-drawer-row-height); padding: 0 var(--default-left-right-mob-body-padding); margin-left: calc(-1 * var(--default-left-right-mob-body-padding)); margin-right: calc(-1 * var(--default-left-right-mob-body-padding)); width: calc(100% + 2 * var(--default-left-right-mob-body-padding)); } /* used: library-marketplace */
  .uma-filter-switch-row:hover { background: rgba(var(--black-rgb), var(--opacity-very-low)); } /* used: library-marketplace */
}

/* Desktop: the menu on the left, the open panel on the right */
@media (min-width: 900px) {
  .uma-filter-drawer-inner { padding: 0; } /* used: library-marketplace */
  :where(.uma-filter-drawer.is-open) .uma-filter-drawer-inner { flex: 1 1 auto; overflow: clip; min-height: 0; } /* used: library-marketplace */
  .uma-filter-drawer-header { height: var(--filter-drawer-row-height); padding: 0 var(--default-left-right-desk-body-padding); background: var(--filter-glass-bg); backdrop-filter: blur(var(--blur-lg)); -webkit-backdrop-filter: blur(var(--blur-lg)); border-bottom: var(--stroke-thin) solid var(--filter-divider); } /* used: library-marketplace */
  .uma-filter-drawer-subheader { display: none; flex-direction: row; align-items: stretch; height: var(--filter-drawer-row-height); padding: 0; background: var(--filter-glass-bg); backdrop-filter: blur(var(--blur-lg)); -webkit-backdrop-filter: blur(var(--blur-lg)); border-bottom: var(--stroke-thin) solid var(--filter-divider); } /* used: library-marketplace */
  .uma-filter-drawer-subheader:has(.uma-filter-selections-bar:not([hidden])) { display: flex; } /* used: library-marketplace */
  .uma-filter-drawer-subheader-left { display: none; width: var(--filter-drawer-nav-column-width); flex-shrink: 0; align-items: center; padding: 0 var(--default-left-right-desk-body-padding); background: var(--filter-nav-wide-bg); border-right: var(--stroke-thin) solid var(--filter-divider); box-sizing: border-box; } /* used: library-marketplace */
  .uma-filter-drawer-subheader-right { flex: 1 1 auto; display: flex; align-items: center; padding: 0; background: transparent; overflow: hidden; } /* used: library-marketplace */
  .uma-filter-selections-bar { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--gap-sm); padding: var(--gap-md) 0; scroll-padding-inline: var(--default-left-right-mob-body-padding); scroll-snap-type: inline proximity; background: var(--filter-clear-bg); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } /* used: library-marketplace */
  .uma-filter-selections-bar::-webkit-scrollbar { display: none; } /* used: library-marketplace */
  .uma-filter-drawer-clear-all { display: inline-flex; align-items: center; gap: var(--gap-xs); } /* used: library-marketplace */
  .uma-filter-drawer-grid { position: relative; height: 100%; display: grid; grid-template-columns: var(--filter-drawer-nav-column-width) minmax(var(--filter-drawer-column-min-width), var(--filter-drawer-column-width)) minmax(var(--filter-drawer-column-min-width), var(--filter-drawer-column-width)); grid-auto-flow: dense; grid-auto-rows: var(--filter-drawer-row-height); align-content: start; } /* used: library-marketplace */
  .uma-filter-nav-btn { grid-column: 1; padding: 0 var(--app-default-top-bottom-margin-xl); background: var(--filter-nav-wide-bg); border-bottom: var(--stroke-thin) solid var(--filter-divider); border-right: var(--stroke-thin) solid var(--filter-divider); border-radius: 0; white-space: nowrap; min-height: var(--filter-drawer-row-height); box-sizing: border-box; transition: color var(--transition-base) ease, background var(--transition-base) ease; align-self: stretch; } /* used: library-marketplace */
  .uma-filter-nav-btn.is-active { background: transparent; border-bottom-color: transparent; border-right-color: transparent; } /* used: library-marketplace */
  .uma-filter-nav-btn.is-active:hover { color: var(--orange); } /* used: library-marketplace */
  .uma-filter-nav-btn:last-of-type { position: relative; } /* used: library-marketplace */
  .uma-filter-nav-btn:last-of-type::after { content: ''; position: absolute; top: 100%; left: 0; right: calc(-1 * var(--stroke-thin)); height: 100vh; background: var(--filter-nav-wide-bg); border-right: var(--stroke-thin) solid var(--filter-divider); pointer-events: none; } /* used: library-marketplace */
  .uma-filter-nav-btn-icon-plus { display: none; } /* used: library-marketplace */
  .uma-filter-nav-btn-icon-minus { display: none; } /* used: library-marketplace */
  .uma-filter-label-short { display: none; } /* used: library-marketplace */
  .uma-filter-label-long { display: inline; } /* used: library-marketplace */
  .uma-filter-panel { position: absolute; inset: 0; grid-column: 2 / -1; grid-row: auto; align-self: stretch; justify-self: stretch; padding: var(--app-default-top-bottom-margin-xl) 0 var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-xl); background: transparent; max-height: none; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-padding-top: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
  .uma-filter-panel::-webkit-scrollbar { display: none; } /* used: library-marketplace */
  .uma-filter-panel-inner { grid-template-columns: 1fr 1fr; column-gap: var(--app-default-top-bottom-margin-xl); row-gap: var(--gap-xxs); } /* used: library-marketplace */
  .uma-filter-option-list { padding-left: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
  .uma-filter-switch-list { padding-left: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
  .uma-filter-option-list--has-many { grid-column: 1 / -1; display: block; column-count: 2; column-gap: var(--app-default-top-bottom-margin-xl); column-fill: balance; } /* used: library-marketplace */
  .uma-filter-option { height: var(--filter-drawer-row-height); min-height: var(--filter-drawer-row-height); } /* used: library-marketplace */
  :where(.uma-filter-option-list--has-many) .uma-filter-option { break-inside: avoid; } /* used: library-marketplace */
  .uma-filter-switch-row { height: var(--filter-drawer-row-height); min-height: var(--filter-drawer-row-height); } /* used: library-marketplace */
}
@media (min-width: 900px) and (max-width: 1199px) {
  .uma-filter-option-list--has-many { column-count: 1; } /* used: library-marketplace */
}


/* ==========================================================================
   SHARED: THE SECTION PANEL
   The marketplace's section pattern: a full width band with the page's side
   padding and deep top and bottom room, and a centred golden text column.
   UMA.css has a .panel-default-padding and a .bright-white-panel for the
   video bio panels; these pages' panels differ (more room above, and in dark
   they take the page's band colour), so they keep their own classes.
   ========================================================================== */
.panel-section-padding { position: relative; padding: var(--app-default-top-bottom-margin-xxxxl) var(--default-left-right-desk-body-padding) var(--app-default-top-bottom-margin-xxxxxl); } /* used: library-marketplace */
.panel-section-white { background: var(--t-section-white, var(--bright-white)); } /* used: library-marketplace */
.uma-small-golden-single-coll-centred-text { width: 100%; padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); box-sizing: border-box; text-align: center; } /* used: library-marketplace */
.golden-centred-paragraph { max-width: var(--max-content-width-golden-section-large); margin-left: auto; margin-right: auto; } /* used: library-marketplace */
@media (max-width: 600px) {
  .panel-section-padding { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); padding-bottom: var(--app-default-top-bottom-margin-xxxxl); } /* used: library-marketplace */
  .uma-small-golden-single-coll-centred-text { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
}


/* ==========================================================================
   SHARED: THE FOOTER AND THE SUNSET FILTER
   The footer is UMA.css's (.footer-override, .internal-footer,
   .footer-text-content, .content-box-stroked-mushroom). These pages add side
   padding, hold the column to the body width, and turn the box's stroke to
   the page's border colour in dark.
   ========================================================================== */
.footer-page-padding { padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); } /* used: library-marketplace */
.footer-body-width { max-width: var(--max-body-content-width); margin-left: auto; margin-right: auto; } /* used: library-marketplace */
.footer-text-box { border-color: var(--t-footer-stroke, var(--mushroom)); } /* used: library-marketplace */
/* The last paragraph of the box and of the column has no bottom margin.
   UMA.css gives it 2rem with p:last-of-type; :last-of-type is here for weight. */
.footer-last-paragraph:last-of-type { margin-bottom: 0; } /* used: library-marketplace */
@media (max-width: 600px) {
  .footer-page-padding { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
}
/* The <svg> that holds the #uma-warm filter takes no room */
.uma-filter-definitions { position: absolute; width: 0; height: 0; overflow: hidden; } /* used: library-marketplace */


/* ==========================================================================
   SHARED: THE CATALOGUE PAGES
   The library, the marketplace and the discounts page carry .page-catalogue
   on <html> beside their own page class. Everything in this section is the
   same on all three: the product cards and their backs, the wish list
   corner, the ingredients, the fact cards. The discounts page also carries
   .page-shop: its product drawer (image on the left, details on the right)
   is not the library's book drawer, so its layout lines are held to
   .page-shop. The marketplace's drawer is written in its own section.
   ========================================================================== */
:root:where(.page-catalogue) { /* used: library-marketplace */
  --carouselle-card-xxs: 240px;
  --carouselle-card-sm: 310px;
  --carouselle-card-md: 320px;
  --carouselle-card-xxxl: 400px;
  --carouselle-card-xxxxl: 450px;
  --product-card-width-sm: var(--carouselle-card-md);
  --product-card-width-md: var(--carouselle-card-lg);
  --product-card-width-lg: var(--carouselle-card-xxl);
  --wand-earmark-size: 75px;
  --wand-icon-top: 11px;
  --wand-icon-right: 11px;
  --ing-circle-size: 80px;
  --drawer-section-padding-top: var(--app-default-top-bottom-margin-xxxxl);
  --drawer-section-padding-bottom: var(--app-default-top-bottom-margin-xxxxxl);
  --opacity-dimmed: 0.3;
  --opacity-medium-low: 0.4;
  --opacity-logo: 0.75;
  --frost-white: rgba(249, 249, 249, 0.85);
  --frost-white-line: rgba(249, 249, 249, 0.4);
  --z-product-drawer-backdrop: 10000005;
  --z-product-drawer: 10000006;
  --z-product-drawer-close: 10000011;
  --product-drawer-slide: 0.4s;
  --product-drawer-scrim: rgba(var(--black-rgb), var(--opacity-medium-low));
  --product-drawer-width-wide: 860px;
  --product-drawer-image-width: 320px;
  --product-drawer-preview-height-mobile: 20vw;
  --product-drawer-reviews-min-height: 480px;
  --preview-dot-size: 0.65rem;
  --preview-dot-fade: 0.25s;
  --review-star-size: 1.8rem;
  --transition-quick: 0.15s;
  --rollover-stack-min-width: 220px;
  --rating-tooltip-gap: 4px;
  --brand-link-hit-height: 24px;
  --fact-card-mark-size: 9rem;
  --fact-card-mark-line-height: 0.8;
  --fact-card-text-size: 1.3rem;
  --fact-card-logo-nudge: 3px;
  --app-icon-radius: 22%;
  --link-underline-offset: 2px;
  --switch-icon-nudge: 3px;
  --feedback-panel-min-height: 600px;
  --sort-caret-room: 1rem;
  --t-card-panel: var(--bright-white);
  --t-card-light: var(--new-white);
  --t-card-light-text: var(--navy);
  --t-card-light-hover: var(--light-white);
  --t-card-light-strong: var(--navy);
  --t-card-light-muted: var(--light-charcoal);
  --t-card-light-figure: var(--light-charcoal);
  --t-chip-text: var(--navy);
  --t-chip-line: var(--navy);
  --t-chip-bg: transparent;
  --t-shop-ink: var(--navy);
  --t-shop-muted: var(--light-charcoal);
  --t-price-ink: var(--navy);
  --t-ing-text: var(--mid-charcoal);
  --t-ing-muted: var(--light-charcoal);
  --t-ing-line: var(--dark-white);
  --t-ing-circle: var(--mid-white);
  --t-ing-badge-bg: rgba(var(--dark-teal-rgb), var(--opacity-low));
  --t-ing-badge-text: var(--dark-teal);
}
@media (max-width: 600px) {
  :root:where(.page-catalogue) { --drawer-section-padding-top: var(--app-default-top-bottom-margin-xxxl); --drawer-section-padding-bottom: var(--app-default-top-bottom-margin-xxxxl); } /* used: library-marketplace */
}

/* The product drawer: slides in from the right, the image column on the
   left from 900 up. */
:where(.page-catalogue) .uma-product-drawer-backdrop { display: none; position: fixed; inset: 0; background: var(--product-drawer-scrim); z-index: var(--z-product-drawer-backdrop); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-backdrop.is-open { display: block; } /* used: library-marketplace */
:where(.page-shop) .uma-product-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: calc(var(--max-body-content-width) * var(--golden-ratio-small) + var(--default-left-right-desk-body-padding) * 2); max-width: var(--golden-width-small); z-index: var(--z-product-drawer); background: var(--frost-white); backdrop-filter: blur(var(--blur-lg)); color: var(--navy); display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; visibility: hidden; transform: translateX(100%); transition: transform var(--product-drawer-slide) ease-in-out, visibility linear var(--product-drawer-slide); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform var(--product-drawer-slide) ease-in-out, visibility; } /* used: library-marketplace */
:where(.page-shop) .uma-product-drawer-body { flex-shrink: 0; padding: 0; display: flex; flex-direction: column; } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-image-stack { display: flex; flex-direction: column; width: var(--product-drawer-image-width); flex-shrink: 0; height: 100%; } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-preview-slide { width: var(--product-drawer-image-width); flex: 1 1 0%; min-height: var(--product-drawer-image-width); background: var(--pure-white); overflow: hidden; } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-preview-image { width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block; user-select: none; pointer-events: none; padding: var(--gap-lg); box-sizing: border-box; } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-preview-dots { display: none; justify-content: center; gap: var(--gap-sm); margin-top: var(--app-default-top-bottom-margin-md); width: 100%; } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-preview-dot { width: var(--preview-dot-size); height: var(--preview-dot-size); border-radius: var(--radius-circle); background: transparent; border: var(--stroke-hairline) solid var(--navy); cursor: pointer; padding: 0; transition: background var(--preview-dot-fade); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-preview-dot:hover { background: var(--hover-overlay-dark); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-preview-dot.is-active { background: var(--navy); } /* used: library-marketplace */
/* The close button sits outside the drawer so it can stay fixed */
:where(.page-catalogue) .uma-product-drawer-close { position: fixed; top: var(--gap-md); right: var(--gap-md); background: transparent; border: none; cursor: pointer; align-items: center; justify-content: center; color: var(--navy); padding: 0; z-index: var(--z-product-drawer-close); display: none; } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-close.is-visible { display: inline-flex; } /* used: library-marketplace */
:where(.page-shop) .uma-product-drawer-section { padding: var(--app-default-top-bottom-margin-xl) var(--default-left-right-mob-body-padding); margin-bottom: 0; } /* used: library-marketplace */
:where(.page-shop) .uma-product-drawer-section--first { padding-top: var(--app-default-top-bottom-margin-xxxl); } /* used: library-marketplace */
:where(.page-shop) .uma-product-drawer-name { font-size: var(--heading-size-md); font-weight: var(--font-weight-light); color: var(--navy); margin-bottom: var(--app-default-top-bottom-margin-sm); line-height: var(--default-line-height-single); } /* used: library-marketplace */
:where(.page-shop) .uma-product-drawer-sold-by { font-size: var(--body-text-xs); color: var(--light-charcoal); margin-bottom: var(--app-default-top-bottom-margin-lg); line-height: var(--default-line-height-single); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-price { font-size: var(--heading-size-md); font-weight: var(--font-weight-light); color: var(--t-shop-ink); margin-bottom: var(--app-default-top-bottom-margin-xxl); } /* used: library-marketplace */
:where(.page-shop) .uma-product-drawer-actions { display: flex; flex-direction: column; gap: var(--gap-sm); margin-top: var(--app-default-top-bottom-margin-lg); margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-shop) .uma-product-drawer-section-title { font-size: var(--heading-size-xs); font-weight: var(--font-weight-light); color: var(--navy); margin-top: var(--app-default-top-bottom-margin-xl); margin-bottom: var(--app-default-top-bottom-margin-md); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-safety-note { font-size: var(--body-text-xs); color: var(--t-shop-ink); line-height: var(--default-line-height-large); margin: 0; } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-review-stars { display: flex; gap: var(--gap-xxs); margin-bottom: var(--app-default-top-bottom-margin-sm); justify-content: flex-start; } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-review-star { background: transparent; border: none; cursor: pointer; font-size: var(--review-star-size); line-height: var(--default-line-height-single); color: var(--dark-white); transition: color var(--transition-quick); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-review-star.is-filled { color: var(--yellow); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-review-star:hover { color: var(--yellow); } /* used: library-marketplace */
/* Ways to save: VAT relief and the discount code */
:where(.page-catalogue) .uma-product-drawer-save-more { margin-top: var(--app-default-top-bottom-margin-lg); border-radius: var(--app-default-radius-md); overflow: hidden; } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-save-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); padding: var(--gap-md) var(--gap-lg); background: var(--mid-white); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-save-row-text { display: flex; flex-direction: column; gap: var(--gap-xxs); flex: 1 1 0%; min-width: 0; } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-save-label { font-size: var(--body-text-xs); font-weight: var(--font-weight-medium); color: var(--t-shop-ink); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-save-desc { font-size: var(--body-text-xxs); color: var(--t-shop-muted); line-height: var(--default-line-height-small); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-copy-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xxs); height: var(--button-size-sm); padding: 0 var(--gap-md); border-radius: var(--radius-pill); border: var(--stroke-thin) solid var(--t-shop-ink); background: transparent; color: var(--t-shop-ink); font-size: var(--body-text-xxs); font-family: inherit; font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; text-decoration: none; flex: 0 0 50%; transition: background var(--transition-fast), color var(--transition-fast); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-copy-btn:hover { background: var(--navy); color: var(--bright-white); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-copy-btn.is-copied { background: var(--bright-green); border-color: var(--bright-green); color: var(--bright-white); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-copy-code { font-weight: var(--font-weight-medium); font-size: var(--body-text-xxs); } /* used: library-marketplace */
:where(.page-catalogue) .drawer-label-full { display: inline; } /* used: library-marketplace */
:where(.page-catalogue) .drawer-label-short { display: none; } /* used: library-marketplace */
/* The drawer's community reviews */
:where(.page-catalogue) .uma-product-drawer-reviews-full { width: 100%; background: var(--mid-white); padding: 0; box-sizing: border-box; } /* used: library-marketplace */
:where(.page-catalogue) .drawer-section-default-padding { padding-top: var(--drawer-section-padding-top); padding-bottom: var(--drawer-section-padding-bottom); } /* used: library-marketplace */
:where(.page-catalogue) .drawer-panel-write.is-active { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: var(--golden-width-small); gap: var(--app-default-top-bottom-margin-md); margin: 0 auto; } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-community-count { font-size: var(--body-text-xs); color: var(--light-charcoal); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-reviews-carousel::-webkit-scrollbar { display: none; } /* used: library-marketplace */
@media (min-width: 900px) {
  :where(.page-shop) .uma-product-drawer { width: var(--product-drawer-width-wide); max-width: var(--product-drawer-width-wide); } /* used: library-marketplace */
  :where(.page-shop) .uma-product-drawer-body { display: grid; grid-template-columns: var(--product-drawer-image-width) 1fr; align-items: start; height: auto; } /* used: library-marketplace */
  :where(.page-shop) .uma-product-drawer-image-col { position: sticky; top: 0; height: 100vh; background: var(--bright-white); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0; overflow-y: auto; flex-shrink: 0; } /* used: library-marketplace */
  :where(.page-catalogue) .uma-product-drawer-preview-dots { display: none; } /* used: library-marketplace */
  :where(.page-shop) .uma-product-drawer-content-col { overflow-y: visible; background: var(--bright-white); } /* used: library-marketplace */
  :where(.page-shop) .uma-product-drawer-section { padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); } /* used: library-marketplace */
}
@media (max-width: 899px) {
  :where(.page-catalogue) .uma-product-drawer-image-stack { width: 100%; } /* used: library-marketplace */
  :where(.page-shop) .uma-product-drawer-image-col { padding: 0; background: var(--bright-white); width: 100%; } /* used: library-marketplace */
  :where(.page-catalogue) .uma-product-drawer-preview-slide { height: var(--product-drawer-preview-height-mobile); max-height: var(--product-drawer-image-width); aspect-ratio: unset; padding: 0; width: 100%; } /* used: library-marketplace */
  :where(.page-shop) .uma-product-drawer-content-col { flex: 1 1 0%; } /* used: library-marketplace */
}
@media (max-width: 600px) {
  :where(.page-shop) .uma-product-drawer { width: 100%; max-width: 100%; } /* used: library-marketplace */
}
@media (max-width: 380px) {
  :where(.page-catalogue) .drawer-label-full { display: none; } /* used: library-marketplace */
  :where(.page-catalogue) .drawer-label-short { display: inline; } /* used: library-marketplace */
}

/* Ingredients, good for, and what is in it */
:where(.page-catalogue) .ing-badges { display: flex; flex-wrap: wrap; gap: var(--gap-xs); margin-top: var(--app-default-top-bottom-margin-md); } /* used: library-marketplace */
:where(.page-catalogue) .ing-badge { display: inline-flex; align-items: center; gap: var(--gap-xxs); height: var(--button-size-xs); padding: 0 var(--gap-md); border-radius: var(--radius-pill); background: var(--t-ing-badge-bg); color: var(--t-ing-badge-text); font-size: var(--body-text-xs); pointer-events: none; user-select: none; } /* used: library-marketplace */
:where(.page-catalogue) .ing-badge-icon { font-size: var(--button-icon-xs); } /* used: library-marketplace */
:where(.page-catalogue) .ing-table-header { display: grid; grid-template-columns: 1fr auto auto; gap: var(--gap-xs); padding-bottom: var(--gap-xxs); border-bottom: var(--stroke-hairline) solid var(--t-ing-line); margin-bottom: var(--app-default-top-bottom-margin-xxxs); } /* used: library-marketplace */
:where(.page-catalogue) .ing-header-name { font-size: var(--body-text-xs); color: var(--t-ing-muted); } /* used: library-marketplace */
:where(.page-catalogue) .ing-header-amount { font-size: var(--body-text-xs); color: var(--t-ing-muted); text-align: right; } /* used: library-marketplace */
:where(.page-catalogue) .ing-header-rda { font-size: var(--body-text-xs); color: var(--t-ing-muted); text-align: right; min-width: var(--app-default-top-bottom-margin-xxl); } /* used: library-marketplace */
:where(.page-catalogue) .ing-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--gap-xs); align-items: baseline; padding: var(--gap-xxs) 0; border-bottom: var(--stroke-hairline) solid var(--t-ing-line); } /* used: library-marketplace */
:where(.page-catalogue) .ing-row:last-child { border-bottom: none; } /* used: library-marketplace */
:where(.page-catalogue) .ing-name { font-size: var(--body-text-xs); color: var(--t-ing-text); line-height: var(--default-line-height-x-small); } /* used: library-marketplace */
:where(.page-catalogue) .ing-amount { font-size: var(--body-text-xs); color: var(--t-ing-text); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* used: library-marketplace */
:where(.page-catalogue) .ing-rda { font-size: var(--body-text-xs); color: var(--t-ing-text); text-align: right; font-variant-numeric: tabular-nums; min-width: var(--app-default-top-bottom-margin-xxl); } /* used: library-marketplace */
:where(.page-catalogue) .ing-footnote { font-size: var(--body-text-xs); color: var(--t-ing-muted); margin-top: var(--app-default-top-bottom-margin-xs); } /* used: library-marketplace */
:where(.page-catalogue) .ing-visual { display: flex; flex-direction: column; gap: var(--gap-xxl); margin-top: var(--app-default-top-bottom-margin-xxl); width: 100%; } /* used: library-marketplace */
:where(.page-catalogue) .ing-visual-item { display: flex; flex-direction: row; align-items: center; gap: var(--gap-md); pointer-events: none; } /* used: library-marketplace */
:where(.page-catalogue) .ing-visual-circle { width: var(--ing-circle-size); height: var(--ing-circle-size); border-radius: var(--radius-circle); overflow: hidden; flex-shrink: 0; background: var(--t-ing-circle); } /* used: library-marketplace */
:where(.page-catalogue) .ing-visual-image { width: 100%; height: 100%; object-fit: cover; display: block; } /* used: library-marketplace */
:where(.page-catalogue) .ing-visual-text { display: flex; flex-direction: column; gap: var(--gap-xxs); align-items: flex-start; text-align: left; flex: 1 1 0%; } /* used: library-marketplace */
:where(.page-catalogue) .ing-visual-name { font-size: var(--heading-size-xs); color: var(--t-ing-text); font-weight: var(--font-weight-light); line-height: var(--default-line-height-single); margin-bottom: var(--app-default-top-bottom-margin-xxxs); margin-left: var(--gap-md); } /* used: library-marketplace */
:where(.page-catalogue) .ing-visual-benefits { display: flex; flex-wrap: wrap; gap: var(--gap-xs); } /* used: library-marketplace */

/* The product card: the front, the image with its buttons, the light body */
:where(.page-catalogue) .product-card { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; border-radius: var(--app-default-radius-lg); overflow: hidden; z-index: 1; flex: 0 0 var(--product-card-width-sm); width: var(--product-card-width-sm); min-width: var(--product-card-width-sm); max-width: var(--product-card-width-sm); } /* used: library-marketplace */
:where(.page-catalogue) .product-card.flipped { z-index: 2; } /* used: library-marketplace */
:where(.page-catalogue) .card-front { display: flex; flex-direction: column; flex: 0 0 auto; width: 100%; height: 100%; border-radius: var(--app-default-radius-lg); overflow: hidden; transition: opacity var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-catalogue) .card-front--flipped { opacity: 0; pointer-events: none; } /* used: library-marketplace */
:where(.page-catalogue) .card-back { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: var(--app-default-radius-lg); background: var(--t-card-panel); padding: 0 var(--app-default-top-bottom-margin-lg); opacity: 0; pointer-events: none; transition: opacity var(--transition-base) ease; overflow: hidden; } /* used: library-marketplace */
:where(.page-catalogue) .card-back--flipped { opacity: 1; pointer-events: auto; } /* used: library-marketplace */
:where(.page-catalogue) .card-image { position: relative; width: 100%; aspect-ratio: var(--carouselle-card-ratio-square); flex-shrink: 0; flex-grow: 0; overflow: hidden; background: var(--product-tile-bg); border-top-left-radius: var(--app-default-radius-lg); border-top-right-radius: var(--app-default-radius-lg); } /* used: library-marketplace */
:where(.page-catalogue) .card-image-img { width: 100%; height: 100%; object-fit: contain; object-position: center center; background-color: var(--product-tile-bg); padding: var(--uma-disc-card-img-padding); display: block; } /* used: library-marketplace */
:where(.page-catalogue) .card-image-rating-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); background: rgba(var(--black-rgb), var(--opacity-moderate)); z-index: 3; padding: 0 var(--gap-xxl); } /* used: library-marketplace */
:where(.page-catalogue) .product-card:hover .card-image-rating-overlay { opacity: 1; pointer-events: auto; } /* used: library-marketplace */
:where(.page-catalogue) .card-image-rating-overlay:has(.keyboard-focus) { opacity: var(--opacity-visible); pointer-events: auto; } /* used: library-marketplace */
/* Pointing at the wish list corner hides the buttons. Written last so it
   wins on order. */
:where(.page-catalogue) .product-card:has(.uma-wishlist-earmark:hover) .card-image-rating-overlay { opacity: 0; pointer-events: none; } /* used: library-marketplace */
:where(.page-catalogue) .rollover-cta-btn-stack { display: flex; flex-direction: column; align-items: stretch; width: fit-content; min-width: var(--rollover-stack-min-width); gap: var(--gap-sm); } /* used: library-marketplace */
:where(.page-catalogue) .card-btn-buy { height: var(--button-size-md); border-radius: var(--radius-pill); background: var(--bright-white); color: var(--navy); border: none; font-family: inherit; font-size: var(--body-text-xs); font-weight: var(--font-weight-medium); padding: 0 var(--gap-xl); cursor: pointer; transition: background var(--transition-base), color var(--transition-base); width: auto; flex-shrink: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; } /* used: library-marketplace */
:where(.page-catalogue) .card-btn-buy-icon { margin-left: var(--gap-xs); } /* used: library-marketplace */
:where(.page-catalogue) .card-image-ing-btn { width: auto; display: inline-flex; scroll-margin-top: var(--fixed-header-height); } /* used: library-marketplace */
/* The two frosted buttons on the image */
:where(.page-catalogue) .frosted-primary-white-btn { backdrop-filter: blur(var(--blur-md)); background: var(--bright-white); color: var(--navy); transition: background var(--transition-base), color var(--transition-base), opacity var(--transition-base); } /* used: library-marketplace */
:where(.page-catalogue) .frosted-primary-white-btn:hover { background: rgba(var(--white-rgb), var(--opacity-very-high)); color: var(--navy); } /* used: library-marketplace */
:where(.page-catalogue) .frosted-secondary-white-btn { backdrop-filter: blur(var(--blur-md)); background: rgba(var(--black-rgb), var(--opacity-low)); border: var(--stroke-hairline) solid var(--bright-white); color: var(--bright-white); } /* used: library-marketplace */
:where(.page-catalogue) .frosted-secondary-white-btn:hover { background: rgba(var(--black-rgb), var(--opacity-moderate)); } /* used: library-marketplace */
:where(.page-catalogue) .frosted-primary-white-btn.is-copied,
:where(.page-catalogue) .frosted-secondary-white-btn.is-copied { background: var(--bright-green); border-color: var(--bright-green); color: var(--bright-white); } /* used: library-marketplace */
:where(.page-catalogue) .card-back-btn-code { min-width: max-content; } /* used: library-marketplace */
:where(.page-catalogue) .card-back-btn-code.is-copied { background: var(--bright-green); color: var(--bright-white); border-color: var(--bright-green); transition: none; } /* used: library-marketplace */
/* The body under the image */
:where(.page-catalogue) .card-body { flex: 1 1 0%; display: flex; flex-direction: column; background: var(--navy); padding: var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-lg) var(--app-default-top-bottom-margin-xxl); transition: background-color var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-catalogue) .card-body:hover { background-color: var(--navy-dark); } /* used: library-marketplace */
:where(.page-catalogue) .card-body--light { background: var(--t-card-light); color: var(--t-card-light-text); } /* used: library-marketplace */
:where(.page-catalogue) .card-body--light:hover { background-color: var(--t-card-light-hover); } /* used: library-marketplace */
:where(.page-catalogue) .card-brand { display: flex; justify-content: space-between; align-items: baseline; color: var(--light-charcoal); } /* used: library-marketplace */
:where(.page-catalogue) .brand-link { position: relative; color: inherit; text-decoration: none; cursor: pointer; transition: color var(--transition-fast); background: transparent; border: none; padding: 0; margin: 0; font: inherit; letter-spacing: inherit; text-align: inherit; appearance: none; } /* used: library-marketplace */
:where(.page-catalogue) .brand-link:hover { color: var(--orange); text-decoration: none; } /* used: library-marketplace */
:where(.page-catalogue) .brand-link::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--brand-link-hit-height); transform: translateY(-50%); } /* used: library-marketplace */
:where(.page-catalogue) .product-card-rating-number-on-white { flex-shrink: 0; font-size: var(--body-text-xs); color: var(--t-card-light-figure); white-space: nowrap; margin-left: var(--gap-sm); position: relative; } /* used: library-marketplace */
:where(.page-catalogue) .product-card-rating-number-on-white[data-uma-open-reviews] { cursor: pointer; transition: color var(--transition-fast); } /* used: library-marketplace */
:where(.page-catalogue) .product-card-rating-number-on-white[data-uma-open-reviews]:hover { color: var(--orange); } /* used: library-marketplace */
:where(.page-catalogue) .product-card-rating-star-on-white { color: var(--yellow); } /* used: library-marketplace */
:where(.page-catalogue) .product-card-rating-tooltip { display: none; position: absolute; bottom: calc(100% + var(--rating-tooltip-gap)); right: 0; background: var(--dark-charcoal); color: var(--bright-white); font-size: var(--body-text-xxs); white-space: nowrap; padding: var(--gap-xxs) var(--gap-sm); border-radius: var(--radius-pill); } /* used: library-marketplace */
:where(.page-catalogue) .product-card-name { font-size: var(--heading-size-sm); font-weight: var(--font-weight-light); color: var(--t-card-light-strong); line-height: var(--default-line-height-x-small); margin-top: 0; padding-right: var(--app-default-top-bottom-margin-xxxxl); margin-bottom: var(--app-default-top-bottom-margin-xs); text-align: start; } /* used: library-marketplace */
/* The price. The sale price reads its size from .card-price-discounted and
   its weight from .card-price, so the two stay in this order. */
:where(.page-catalogue) .card-price-wrapper { display: flex; align-items: baseline; gap: var(--gap-sm); margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: library-marketplace */
/* UMA.css gives the last paragraph 2rem with p:last-of-type; :last-of-type
   here is for weight */
:where(.page-catalogue) .card-price-wrapper:last-of-type { margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: library-marketplace */
:where(.page-catalogue) .card-price-discounted { font-size: var(--heading-size-sm); font-weight: var(--font-weight-medium); line-height: var(--default-line-height-single); color: var(--bright-white); } /* used: library-marketplace */
:where(.page-catalogue) .card-price { font-size: var(--heading-size-sm); font-weight: var(--font-weight-light); color: var(--bright-white); margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: library-marketplace */
:where(.page-catalogue) .card-price-discounted--light { color: var(--t-price-ink); } /* used: library-marketplace */
/* A price on a light card: navy, and the strong text colour in dark */
:where(.page-catalogue) .card-price--light { color: var(--t-card-light-strong); } /* used: library-marketplace */
:where(.page-catalogue) .card-price-original { font-size: var(--body-text-sm); color: rgba(var(--bright-white-rgb), var(--opacity-moderate)); text-decoration: line-through; font-weight: var(--font-weight-normal); } /* used: library-marketplace */
:where(.page-catalogue) .card-price-original--light { color: var(--t-card-light-figure); } /* used: library-marketplace */
:where(.page-catalogue) .card-good-for { display: flex; flex-wrap: wrap; gap: var(--gap-xxs); margin-bottom: 0; } /* used: library-marketplace */
/* The small pills on the card that turn it over */
:where(.page-catalogue) .uma-chip-discount,
:where(.page-catalogue) .uma-chip-vat { font-size: var(--body-text-xs); padding: 0 var(--gap-md); color: var(--t-chip-text); border-color: var(--t-chip-line); background: var(--t-chip-bg); } /* used: library-marketplace */
:where(.page-catalogue) .card-pill-vat { height: var(--button-size-xs); display: inline-flex; align-items: center; gap: var(--gap-xxs); padding: 0 var(--gap-md); border-radius: var(--radius-pill); border: var(--stroke-hairline) solid var(--frost-white-line); background: transparent; color: var(--bright-white); font-size: var(--body-text-xs); font-family: inherit; cursor: pointer; transition: background var(--transition-base), color var(--transition-base); line-height: var(--default-line-height-single); } /* used: library-marketplace */
:where(.page-catalogue) .card-pill-vat:hover { color: var(--flood-color); background: var(--bright-white); } /* used: library-marketplace */
/* The back of the card: a saving, in teal */
:where(.page-catalogue) .card-back--savings { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: space-between; border-radius: var(--app-default-radius-lg); background: var(--dark-teal); color: var(--bright-white); padding: var(--app-default-top-bottom-margin-md) var(--app-default-top-bottom-margin-lg) var(--app-default-top-bottom-margin-lg); opacity: 0; pointer-events: none; transition: opacity var(--transition-base) ease; box-sizing: border-box; z-index: 10; overflow: hidden; } /* used: library-marketplace */
:where(.page-catalogue) .card-back--savings.is-active { display: flex; } /* used: library-marketplace */
:where(.page-catalogue) .card-back--savings--flipped { opacity: 1; pointer-events: auto; } /* used: library-marketplace */
:where(.page-catalogue) .card-back-close-row { display: flex; justify-content: flex-end; flex-shrink: 0; } /* used: library-marketplace */
:where(.page-catalogue) .card-back-body { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: var(--gap-md) 0; overflow: hidden; } /* used: library-marketplace */
:where(.page-catalogue) .card-back-title { font-size: var(--heading-size-md); font-weight: var(--font-weight-light); color: var(--navy); margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-sm); line-height: var(--default-line-height-x-small); } /* used: library-marketplace */
:where(.page-catalogue) .card-back-title--savings { color: var(--bright-white); } /* used: library-marketplace */
:where(.page-catalogue) .card-back-text { font-size: var(--body-text-xs); line-height: var(--default-line-height-small); color: var(--bright-white); margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: library-marketplace */
:where(.page-catalogue) .card-back-actions { display: flex; flex-direction: column; gap: var(--gap-sm); flex-shrink: 0; } /* used: library-marketplace */
:where(.page-catalogue) .product-card-close { width: var(--button-size-md); height: var(--button-size-md); border-radius: var(--radius-circle); background: transparent; color: var(--light-charcoal); border: var(--stroke-hairline) solid var(--light-charcoal); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--button-icon-sm); flex-shrink: 0; line-height: var(--default-line-height-single); padding: 0; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base); } /* used: library-marketplace */
:where(.page-catalogue) .product-card-close:hover { background: var(--hover-overlay-light); color: var(--mid-charcoal); border-color: var(--mid-charcoal); } /* used: library-marketplace */
:where(.page-catalogue) .product-card-close-light { color: var(--bright-white); border-color: rgba(var(--bright-white-rgb), var(--opacity-medium-low)); } /* used: library-marketplace */
:where(.page-catalogue) .product-card-close-light:hover { background: rgba(var(--white-rgb), var(--opacity-extra-low)); color: var(--bright-white); border-color: var(--bright-white); } /* used: library-marketplace */

/* The wish list corner, its label corner, and the on and off pill */
:where(.page-catalogue) .uma-wishlist-earmark { position: absolute; top: 0; right: 0; width: var(--wand-earmark-size); height: var(--wand-earmark-size); padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; z-index: 4; overflow: hidden; border-top-right-radius: var(--app-default-radius-lg); opacity: 0; transition: opacity var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-catalogue) .uma-wishlist-earmark--visible,
:where(.page-catalogue) .uma-wishlist-earmark--added { opacity: 1; } /* used: library-marketplace */
:where(.page-catalogue) .product-card:hover .uma-wishlist-earmark,
:where(.page-catalogue) .product-card:focus-within .uma-wishlist-earmark { opacity: 1; } /* used: library-marketplace */
/* A turned card hides its corner. Last, so it wins on order. */
:where(.page-catalogue) .uma-wishlist-earmark--flipped { opacity: 0; pointer-events: none; } /* used: library-marketplace */
:where(.page-catalogue) .uma-wishlist-earmark-icon { position: absolute; top: var(--wand-icon-top); right: var(--wand-icon-right); font-size: var(--button-icon-xl); line-height: var(--default-line-height-single); z-index: 5; transition: opacity var(--transition-fast) ease; color: var(--bright-white); } /* used: library-marketplace */
:where(.page-catalogue) .uma-wishlist-earmark-label { position: absolute; top: 0; right: 0; width: var(--earmark-size); height: var(--earmark-size); overflow: hidden; z-index: 2; border-top-right-radius: var(--app-default-radius-md); pointer-events: none; } /* used: library-marketplace */
:where(.page-catalogue) .uma-wishlist-earmark-label::before { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 var(--earmark-size) var(--earmark-size) 0; border-color: transparent var(--yellow) transparent transparent; } /* used: library-marketplace */
:where(.page-catalogue) .uma-wishlist-earmark-label-text { position: absolute; top: var(--earmark-text-top); right: var(--earmark-text-right); color: var(--navy); font-size: var(--body-text-sm); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-single); text-align: right; z-index: 3; } /* used: library-marketplace */
:where(.page-catalogue) .uma-wishlist-pill { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); display: inline-flex; align-items: center; gap: var(--gap-sm); padding: var(--gap-md) var(--gap-lg); border-radius: var(--radius-pill); background: var(--bright-green); color: var(--bright-white); font-size: var(--body-text-lg); font-weight: var(--font-weight-normal); white-space: nowrap; box-shadow: var(--canvas-sheet-shadow); opacity: 0; pointer-events: none; z-index: 6; height: var(--button-size-md); transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease; } /* used: library-marketplace */
:where(.page-catalogue) .uma-wishlist-pill.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* used: library-marketplace */
:where(.page-catalogue) .uma-wishlist-pill--off { background: var(--tomato); } /* used: library-marketplace */
:where(.page-catalogue) .uma-wishlist-pill-icon { color: var(--bright-white); font-size: var(--button-icon-md); } /* used: library-marketplace */

/* The fact cards: a quote over a photo, with a download button on hover */
:where(.page-catalogue) .fact-card { scroll-snap-align: start; border-radius: var(--app-default-radius-lg); overflow: hidden; display: flex; flex-direction: column; position: relative; flex: 0 0 var(--product-card-width-sm); width: var(--product-card-width-sm); min-width: var(--product-card-width-sm); max-width: var(--product-card-width-sm); } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; box-sizing: border-box; } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-bg-overlay { position: absolute; inset: 0; background: rgba(var(--black-rgb), var(--opacity-moderate)); z-index: 1; box-sizing: border-box; } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-download-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast), background var(--transition-fast); z-index: 10; background: transparent; box-sizing: border-box; } /* used: library-marketplace */
:where(.page-catalogue) .fact-card:hover .fact-card-download-overlay,
:where(.page-catalogue) .fact-card:focus-within .fact-card-download-overlay { opacity: 1; pointer-events: auto; background: rgba(var(--black-rgb), var(--opacity-extra-low)); } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-download-btn { height: var(--button-size-md); display: inline-flex; align-items: center; justify-content: center; width: auto; padding: 0 var(--gap-xl); border-radius: var(--radius-pill); background: var(--pure-white); color: var(--navy); font-size: var(--body-text-xs); font-weight: var(--font-weight-medium); font-family: inherit; border: none; cursor: pointer; white-space: nowrap; transition: background var(--transition-fast); box-sizing: border-box; } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-download-btn:hover { background: rgba(var(--white-rgb), var(--opacity-very-high)); } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-download-icon { margin-left: var(--gap-xs); } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-inner { position: relative; flex: 1 1 0%; display: flex; flex-direction: column; padding: var(--app-default-top-bottom-margin-xxl); z-index: 2; box-sizing: border-box; } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-mark { font-family: Baskerville, Georgia, serif; font-style: normal; font-weight: var(--font-weight-normal); font-size: var(--fact-card-mark-size); line-height: var(--fact-card-mark-line-height); margin: 0; box-sizing: border-box; } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-text { font-family: Merriweather, Georgia, serif; font-style: italic; font-weight: var(--font-weight-extra-light); font-size: var(--fact-card-text-size); line-height: var(--default-line-height-x-large); margin: 0; box-sizing: border-box; } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-mark--image,
:where(.page-catalogue) .fact-card-text--image { color: var(--mid-white); } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-citation { display: inline-flex; align-items: center; gap: var(--gap-xxs); font-size: var(--body-text-xxs); text-decoration: none; margin-top: var(--app-default-top-bottom-margin-xs); transition: color var(--transition-base); white-space: nowrap; box-sizing: border-box; } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-citation:hover { color: var(--orange); text-decoration: underline; text-underline-offset: var(--link-underline-offset); } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-citation--image { color: rgba(var(--mid-white-rgb), var(--opacity-high)); } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-signature { display: flex; align-items: baseline; gap: var(--gap-xs); position: absolute; bottom: var(--app-default-top-bottom-margin-xxl); left: var(--app-default-top-bottom-margin-xxl); right: var(--app-default-top-bottom-margin-xxl); box-sizing: border-box; } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-signature-url { font-size: var(--body-text-xxs); font-weight: var(--font-weight-medium); text-decoration: none; color: var(--mid-charcoal); flex: 1 1 0%; box-sizing: border-box; } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-signature-url:hover { color: var(--orange); text-decoration: none; } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-signature-url-on-image { color: rgba(var(--mid-white-rgb), var(--opacity-high)); } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-signature-logo { width: var(--uma-xs); height: var(--uma-xs); flex-shrink: 0; opacity: var(--opacity-logo); position: relative; top: var(--fact-card-logo-nudge); box-sizing: border-box; } /* used: library-marketplace */
:where(.page-catalogue) .fact-card-signature-logo-svg { width: 100%; height: 100%; } /* used: library-marketplace */
/* The quote is the last paragraph in the card and has no bottom margin.
   UMA.css gives it 2rem with p:last-of-type; :last-of-type is for weight. */
:where(.page-catalogue) .fact-card-text:last-of-type { margin-bottom: 0; } /* used: library-marketplace */

@media (hover: hover) {
  :where(.page-catalogue) .card-image:hover .uma-wishlist-earmark,
  :where(.page-catalogue) .card-image:hover .card-image-rating-overlay { opacity: 1; } /* used: library-marketplace */
  :where(.page-catalogue) .card-image:hover .card-image-rating-overlay { pointer-events: auto; } /* used: library-marketplace */
  :where(.page-catalogue) .product-card-rating-number-on-white:hover .product-card-rating-tooltip { display: block; } /* used: library-marketplace */
}
@media (hover: none) {
  :where(.page-catalogue) .uma-wishlist-earmark { overflow: visible; } /* used: library-marketplace */
  :where(.page-catalogue) .uma-wishlist-earmark::after,
  :where(.page-catalogue) .uma-product-drawer-close::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: var(--touch-target-min); min-height: var(--touch-target-min); } /* used: library-marketplace */
}
@media (min-width: 900px) {
  :where(.page-catalogue) .product-card,
  :where(.page-catalogue) .fact-card { flex: 0 0 var(--product-card-width-md); width: var(--product-card-width-md); min-width: var(--product-card-width-md); max-width: var(--product-card-width-md); } /* used: library-marketplace */
}
@media (min-width: 1280px) {
  :where(.page-catalogue) .product-card,
  :where(.page-catalogue) .fact-card { flex: 0 0 var(--product-card-width-lg); width: var(--product-card-width-lg); min-width: var(--product-card-width-lg); max-width: var(--product-card-width-lg); } /* used: library-marketplace */
  :where(.page-catalogue) .card-btn-buy { width: 100%; } /* used: library-marketplace */
}
@media (max-width: 899px) {
  :where(.page-catalogue) .card-brand { font-size: var(--body-text-xs); } /* used: library-marketplace */
}
@media (max-width: 600px) {
  :where(.page-catalogue) .product-card { flex: 0 0 var(--carouselle-card-xs); width: var(--carouselle-card-xs); min-width: var(--carouselle-card-xs); max-width: var(--carouselle-card-xs); } /* used: library-marketplace */
}
/* Page-wide type. These pages have always set paragraphs with no space
   above and headings that wrap evenly; UMA.css leaves the first to the
   browser and balances the second. */
:where(.page-catalogue) p { margin-top: 0; } /* used: library-marketplace */
:where(.page-uma-discounts) :is(h1, h2, h3, h4, h5, h6) { text-wrap: pretty; } /* used: library-marketplace */

/* The skip link: a white pill at the top left */
:where(.page-catalogue) .skip-link-pill { position: fixed; top: var(--gap-md); left: var(--gap-md); z-index: 999; padding: var(--gap-md) var(--gap-lg); background: var(--bright-white); color: var(--navy); border-radius: var(--radius-pill); font-size: var(--body-text-sm); text-decoration: none; transform: translateY(-300%); transition: transform var(--transition-base); } /* used: library-marketplace */
:where(.page-catalogue) .skip-link-pill:focus { top: var(--gap-md); transform: translateY(0); } /* used: library-marketplace */

/* The small grey line over a name, with a figure on the right */
:where(.page-catalogue) .catalogue-eyebrow { display: flex; justify-content: space-between; align-items: baseline; color: var(--light-charcoal); font-size: var(--body-text-xs); margin-bottom: var(--app-default-top-bottom-margin-xxs); } /* used: library-marketplace */
/* The brand line on a light card turns grey-white in dark; after the eyebrow
   so it wins on order */
:where(.page-catalogue) .card-brand-light { color: var(--t-card-light-muted); } /* used: library-marketplace */

/* The last line of a card body keeps its small bottom margin; :last-of-type
   is for weight against UMA.css's p:last-of-type */
:where(.page-catalogue) .catalogue-eyebrow:last-of-type { margin-bottom: var(--app-default-top-bottom-margin-xxs); } /* used: library-marketplace */

/* An icon after the words in a UMA.css .btn */
:where(.page-catalogue) .btn-icon-gap { margin-left: var(--gap-xs); } /* used: library-marketplace */

/* The drawer's round close button (a UMA.css .btn-circular) and its X */
:where(.page-catalogue) .product-drawer-close-size { width: var(--button-size-md); height: var(--button-size-md); } /* used: library-marketplace */
:where(.page-catalogue) .product-drawer-close-icon { display: inline-flex; align-items: center; justify-content: center; line-height: var(--default-line-height-single); vertical-align: middle; margin-left: 0; } /* used: library-marketplace */

/* The drawer's two big buttons get smaller on tablets and phones */
@media (max-width: 899px) {
  :where(.page-catalogue) .drawer-action-btn { height: var(--button-size-md); } /* used: library-marketplace */
  /* two classes, for weight against UMA.css's .btn-lg i */
  :where(.page-catalogue) .drawer-action-btn .drawer-action-btn-icon { font-size: var(--button-icon-md); } /* used: library-marketplace */
}
@media (max-width: 599px) {
  :where(.page-catalogue) .drawer-action-btn { height: var(--button-size-sm); } /* used: library-marketplace */
}

/* The feedback panel these pages carry: taller, with less room inside, and
   tighter rating hearts than the chrome's own */
:where(.page-catalogue) .feedback-panel-tall { min-height: var(--feedback-panel-min-height); } /* used: library-marketplace */
:where(.page-catalogue) .feedback-body-compact { padding: var(--gap-regular); } /* used: library-marketplace */
:where(.page-catalogue) .pill-filter-bar-wrapper--spaced { margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-catalogue) .feedback-rating-block-compact { margin-bottom: var(--app-default-top-bottom-margin-md); } /* used: library-marketplace */
:where(.page-catalogue) .feedback-rating-row-compact { gap: var(--gap-xxs); } /* used: library-marketplace */
:where(.page-catalogue) .feedback-remove-hit { position: relative; } /* used: library-marketplace */
@media (max-width: 600px) {
  :where(.page-catalogue) .feedback-body-compact { padding: var(--gap-lg); } /* used: library-marketplace */
}
@media (hover: none) {
  :where(.page-catalogue) .feedback-remove-hit::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: var(--touch-target-min); min-height: var(--touch-target-min); } /* used: library-marketplace */
}

/* The footer's small print */
:where(.page-catalogue) .footer-body-small { font-size: var(--body-text-xs); } /* used: library-marketplace */

/* The two-way pill switch (Read reviews or Post review; Report bug or Post
   review). UMA.css holds its own copy for the diagnostic pages only. */
:where(.page-catalogue) .pill-filter-bar-wrapper { max-width: 100%; width: auto; height: auto; overflow-x: visible; z-index: 49; display: flex; } /* used: library-marketplace */
:where(.page-catalogue) .chart-filter { justify-content: center; } /* used: library-marketplace */
:where(.page-catalogue) .pill-filter-bar { background-color: var(--t-pill-bar-bg, var(--dark-white)); height: var(--pill-filter-height); border-radius: calc(var(--pill-filter-height) / 2); display: inline-flex; width: max-content; padding-left: var(--filter-bar-left-right-padding); padding-right: var(--filter-bar-left-right-padding); align-items: center; position: relative; justify-content: center; z-index: 800; transform: translateZ(0); will-change: transform; } /* used: library-marketplace */
:where(.page-catalogue) .pill-filter-item { border: none; background: transparent; font-family: inherit; appearance: none; text-align: inherit; color: var(--t-pill-text, inherit); text-decoration: none; height: var(--pill-filter-selected-height); line-height: var(--pill-filter-selected-height); border-radius: calc(var(--pill-filter-selected-height) / 2); position: relative; display: flex; align-items: center; justify-content: center; z-index: 802; transform: translateZ(0); will-change: transform; cursor: pointer; padding: 0 var(--nav-link-padding-horizontal); transition: color var(--transition-base); white-space: nowrap; font-size: var(--body-text-xs); } /* used: library-marketplace */
:where(.page-catalogue) .pill-filter-item.selected { color: var(--t-pill-selected-text, var(--white-text-default)); text-decoration: none; } /* used: library-marketplace */
:where(.page-catalogue) .pill-filter-item:not(.selected):hover { color: var(--orange); text-decoration: none; cursor: pointer; } /* used: library-marketplace */
:where(.page-catalogue) .pill-filter-item.is-hidden { display: none; } /* used: library-marketplace */
:where(.page-catalogue) .selected-pill-in-tab-filter { align-items: center; position: absolute; left: 0; height: var(--pill-filter-selected-height); background-color: var(--t-pill-selected-bg, var(--navy)); line-height: var(--pill-filter-selected-height); border-radius: calc(var(--pill-filter-selected-height) / 2); transition: all var(--transition-base) ease; z-index: 801; transform: translateZ(0); will-change: transform; } /* used: library-marketplace */

/* The drawer's community reviews: the score, the switch, the cards */
:where(.page-catalogue) .uma-product-drawer-section--reviews { min-height: var(--product-drawer-reviews-min-height); padding-left: 0; padding-right: 0; display: flex; flex-direction: column; align-items: stretch; width: 100%; } /* used: library-marketplace */
:where(.page-catalogue) .uma-reviews-inset { width: 100%; padding-left: var(--app-default-top-bottom-margin-xl); padding-right: var(--app-default-top-bottom-margin-xl); box-sizing: border-box; } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-community-rating { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xxs); margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-community-score { font-size: var(--heading-size-lg); font-weight: var(--font-weight-light); color: var(--navy); line-height: var(--default-line-height-single); } /* used: library-marketplace */
:where(.page-catalogue) .uma-product-drawer-section-title--reviews { font-size: var(--heading-size-lg); font-weight: var(--font-weight-light); color: var(--navy); line-height: var(--default-line-height-x-small); margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-md); display: block; text-align: center; } /* used: library-marketplace */
:where(.page-catalogue) .uma-chrome-feedback-tabs--reviews { display: flex; margin-left: auto; margin-right: auto; } /* used: library-marketplace */
:where(.page-catalogue) .drawer-reviews-controls { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--app-default-top-bottom-margin-lg); } /* used: library-marketplace */
:where(.page-catalogue) .default-carousel-product-drawers { padding: var(--app-default-top-bottom-margin-xl) var(--default-left-right-mob-body-padding) var(--app-default-top-bottom-margin-xxxxl); width: 100%; height: auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; display: flex; gap: var(--gap-regular); scroll-snap-type: x mandatory; scroll-padding-left: var(--default-left-right-mob-body-padding); scroll-padding-right: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
:where(.page-catalogue) .default-carousel-product-drawers::-webkit-scrollbar { display: none; } /* used: library-marketplace */
:where(.page-catalogue) .drawer-review-card { flex: 0 0 var(--carouselle-card-width-review); width: var(--carouselle-card-width-review); aspect-ratio: var(--carouselle-card-ratio-review); scroll-snap-align: start; align-self: flex-start; } /* used: library-marketplace */
:where(.page-catalogue) .drawer-review-card:last-child { scroll-snap-align: end; } /* used: library-marketplace */
:where(.page-catalogue) .drawer-review-stars { gap: var(--gap-xxs); } /* used: library-marketplace */
:where(.page-catalogue) .drawer-review-quote { font-family: Merriweather, serif; font-style: italic; } /* used: library-marketplace */
:where(.page-catalogue) .drawer-review-quote-icon { font-style: normal; } /* used: library-marketplace */

/* The drawer's thumbs switch: navy on, red off, the thumb sliding across.
   Written the way UMA.css writes its own switch variants. */
:where(.page-catalogue) .switch--review input:checked ~ .switch-track { background: var(--navy); } /* used: library-marketplace */
:where(.page-catalogue) .switch--review input:not(:checked) ~ .switch-track { background: var(--tomato); } /* used: library-marketplace */
:where(.page-catalogue) .switch--slide-icon .switch-icon { width: var(--switch-lg-thumb); height: var(--switch-lg-thumb); top: calc(var(--switch-thumb-inset) + var(--stroke-thick)); left: calc(100% - var(--switch-lg-thumb) - var(--switch-thumb-inset) - var(--switch-icon-nudge)); transform: none; } /* used: library-marketplace */
:where(.page-catalogue) .switch--slide-icon input:checked ~ .switch-track .switch-icon { top: calc(var(--switch-thumb-inset) - var(--stroke-thin)); left: calc(var(--switch-thumb-inset) + var(--switch-icon-nudge)); } /* used: library-marketplace */

@media (max-width: 599px) {
  :where(.page-catalogue) .product-card-name { font-size: var(--heading-size-xs); } /* used: library-marketplace */
  :where(.page-catalogue) .card-price-discounted { font-size: var(--heading-size-xs); } /* used: library-marketplace */
  :where(.page-catalogue) .card-price-original { font-size: var(--body-text-xs); } /* used: library-marketplace */
}


/* ==========================================================================
   STATISTICS (/statistics). The page carries .page-statistics on <html>.
   ========================================================================== */

/* Themes. Light, then dark. Sunset is light plus the #uma-warm filter,
   which UMA.css already applies. */
:root:where(.page-statistics) { /* used: library-marketplace */
  /* The two dark navies are scoped per page in UMA.css, so this page names
     them, with the values UMA.css already uses. */
  --navy-40: #151C2D;
  --navy-60: #0E131E;
  --navy-60-rgb: 14, 19, 30;
  /* Read by the chart script. Brand colours, so they do not flip in dark. */
  --category-neurological: var(--bright-blue);
  --category-mental: var(--dark-teal);
  --category-sexual: var(--moss-green);
  --category-physical: var(--bright-green);
  --t-page-bg: var(--mid-white);
  --t-band: var(--mid-white);
  --t-band-alt: var(--new-white);
  --t-surface: var(--bright-white);
  --t-surface-hover: var(--dark-white);
  --t-card: var(--new-white);
  --t-switch-bg: var(--dark-white);
  --t-stat-tile: var(--dark-white);
  --t-section-white: var(--bright-white);
  --severity-dot-size: 1.1rem;
  --key-row-gap: 0.5rem;
  --t-page-text: var(--mid-charcoal);
  --t-text-strong: var(--dark-charcoal);
  --t-text-secondary: var(--light-charcoal);
  --t-text-muted: var(--lightest-charcoal);
  --t-emphasis: var(--navy);
  --t-divider: var(--mid-white);
  --t-border: var(--dark-white);
  --t-line-muted: var(--lightest-charcoal);
  --t-chart-track: var(--dark-white);
  --t-chart-grid: var(--lightest-charcoal);
  --t-selected-bg: var(--navy);
  --t-selected-text: var(--bright-white);
  --t-tooltip-bg: var(--navy);
  --t-tooltip-text: var(--bright-white);
  --text-on-colour: var(--mid-white);
}
:root[data-theme="dark"]:where(.page-statistics) { /* used: library-marketplace */
  --bright-white: var(--mid-white);
  --bright-white-rgb: 242, 237, 234;
  --t-page-bg: var(--navy-60);
  --t-band: var(--navy-60);
  --t-band-alt: var(--navy-40);
  --t-surface: var(--navy);
  --t-surface-hover: var(--navy-dark);
  --t-card: var(--navy);
  --t-switch-bg: var(--navy);
  --t-stat-tile: var(--navy);
  --t-section-white: var(--t-band-alt);
  --t-page-text: var(--bright-white);
  --t-text-strong: var(--bright-white);
  --t-text-secondary: rgba(var(--bright-white-rgb), var(--opacity-high));
  --t-text-muted: rgba(var(--bright-white-rgb), var(--stats-text-muted-dark));
  --t-emphasis: var(--bright-white);
  --t-divider: rgba(var(--bright-white-rgb), var(--opacity-extra-low));
  --t-border: rgba(var(--bright-white-rgb), var(--opacity-low));
  --t-line-muted: rgba(var(--bright-white-rgb), var(--opacity-moderate));
  --t-chart-track: rgba(var(--bright-white-rgb), var(--stats-chart-track-dark));
  --t-chart-grid: rgba(var(--bright-white-rgb), var(--opacity-low));
  --t-selected-bg: var(--bright-white);
  --t-selected-text: var(--navy);
  --t-tooltip-bg: var(--bright-white);
  --t-tooltip-text: var(--navy);
}
/* New tokens for this page. The four bubble ones were already flagged in
   the page; the rest name values the page wrote out. */
:root:where(.page-statistics) { /* used: library-marketplace */
  --stat-bubble-transition: 0.62s;
  --stat-bubble-ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --stat-bubble-expanded-inset: 1.3rem;
  --stat-bubble-text-width: 70%;
  --stats-text-muted-dark: 0.55;
  --stats-chart-track-dark: 0.12;
  --stats-tile-radius: 12px;
  --stats-canvas-min-height: min(72vh, 760px);
  --stats-chart-min-height: 320px;
  --stats-chart-top-gap: 34px;
  --stats-mobile-header-room: 55px;
  --stats-card-width-mobile: 90vw;
  --stats-bubble-padding: 6px;
  --stats-bubble-line-height: 1.15;
  --stats-bubble-text-gap: 0.25rem;
  --stats-bubble-label-small: 10px;
  --stats-bubble-label-medium: 11px;
  --stats-bubble-label-large: 12px;
  --stats-bubble-group-size: 9px;
  --stats-bubble-group-opacity: 0.85;
  --stats-bubble-group-margin: 0.1rem;
  --stats-separator-padding: 0.15rem;
  --stats-count-icon-size: 1.05em;
  --stats-quick: 0.15s;
  --stats-tip-fade: 0.12s;
  --stats-map-land-stroke: 0.4;
  --stats-map-bubble-stroke: 1.5;
  --stats-demo-tile-min: 9rem;
  --stats-label-letter-spacing: 0.04em;
  --stats-list-padding: 1.8rem;
  --stats-list-width: 48ch;
  --stats-list-row-padding: 0.32rem;
  --stats-rule-height: 3px;
  --stats-rule-radius: 2px;
  --stats-footnote-width: 60ch;
}
@media (min-width: 900px) and (max-width: 1199px) {
  /* Long option names: the two option columns may shrink to fit */
  :root:where(.page-statistics) { --filter-drawer-column-min-width: 0px; } /* used: library-marketplace */
}

/* Page shell */
:where(.page-statistics) .statistics-body { min-height: 100vh; overflow-x: hidden; background: var(--t-page-bg); color: var(--t-page-text); } /* used: library-marketplace */
:where(.page-statistics) .page-background { position: fixed; inset: 0; background: var(--t-page-bg); z-index: -1; } /* used: library-marketplace */
:where(.page-statistics) .stats-shell { container-type: inline-size; } /* used: library-marketplace */
:where(.page-statistics) .stats-content-bottom-pad { padding-bottom: var(--app-default-top-bottom-margin-xxxxl); } /* used: library-marketplace */

/* The hero: title, text, the Filters tab and its drawer */
:where(.page-statistics) .statistics-hero { margin-bottom: var(--app-default-top-bottom-margin-xxxxl); } /* used: library-marketplace */
:where(.page-statistics) .uma-filter-drawer-open .statistics-hero { z-index: var(--filter-drawer-open-layer); } /* used: library-marketplace */
:where(.page-statistics) .statistics-title { color: var(--t-emphasis); } /* used: library-marketplace */
:where(.page-statistics) .statistics-footnote { font-size: var(--body-text-xs); margin-top: var(--app-default-top-bottom-margin-lg); color: var(--t-text-secondary); line-height: var(--default-line-height-small); } /* used: library-marketplace */
:where(.page-statistics) .statistics-chart-footnote { max-width: var(--stats-footnote-width); } /* used: library-marketplace */
/* Long sub-category names may take a second line in their row */
:where(.page-statistics) .uma-filter-option { white-space: normal; } /* used: library-marketplace */
@media (min-width: 900px) and (max-width: 1199px) {
  :where(.page-statistics) .uma-filter-panel-inner { grid-template-columns: 1fr; } /* used: library-marketplace */
}
/* The hero runs edge to edge across the page's scrolling area */
@media (min-width: 761px) {
  :where(.page-statistics) .statistics-hero { width: 100cqw; margin-left: calc(-1 * var(--default-left-right-desk-body-padding)); } /* used: library-marketplace */
}

/* The chart and the list beside it */
:where(.page-statistics) .layout { display: flex; gap: var(--default-gap); align-items: flex-start; } /* used: library-marketplace */
:where(.page-statistics) .layout:focus { outline: none; } /* used: library-marketplace */
:where(.page-statistics) .stage-wrap { flex: 1 1 auto; min-width: 0; } /* used: library-marketplace */
:where(.page-statistics) .swipe-track { display: block; } /* used: library-marketplace */
:where(.page-statistics) .swipe-card { min-width: 0; } /* used: library-marketplace */
:where(.page-statistics) .swipe-tabs { display: none; } /* used: library-marketplace */
:where(.page-statistics) .swipe-tab { appearance: none; font-size: var(--app-default-top-bottom-margin-xs); font-weight: var(--font-weight-normal); padding: var(--app-default-top-bottom-margin-xxxs) var(--default-gap); border-radius: var(--radius-pill); border: var(--stroke-thin) solid var(--t-border); background: transparent; color: var(--t-text-secondary); cursor: pointer; flex: 1 1 50%; } /* used: library-marketplace */
:where(.page-statistics) .swipe-tab.on { background: var(--t-selected-bg); color: var(--t-selected-text); border-color: var(--t-selected-bg); } /* used: library-marketplace */

/* The canvas: a header bar and a body, in one rounded box */
:where(.page-statistics) .canvas { position: relative; border-radius: var(--stats-tile-radius); overflow: hidden; background: var(--t-band-alt); } /* used: library-marketplace */
:where(.page-statistics) .active-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--app-default-top-bottom-margin-xxs); padding: var(--app-default-top-bottom-margin-xs) var(--body-text-sm); background: var(--active-filters-bg, var(--t-surface-hover)); color: var(--active-filters-text, var(--t-page-text)); font-size: var(--body-text-xs); transition: background var(--transition-fast), color var(--transition-fast); } /* used: library-marketplace */
:where(.page-statistics) .active-filters[hidden] { display: none; } /* used: library-marketplace */
:where(.page-statistics) .active-filters-labels { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--app-default-top-bottom-margin-xxs); } /* used: library-marketplace */
:where(.page-statistics) .active-filters-item { display: inline-flex; align-items: center; } /* used: library-marketplace */
:where(.page-statistics) .active-filters-separator { color: var(--active-filters-text, var(--t-text-muted)); opacity: var(--opacity-moderate); padding: 0 var(--stats-separator-padding); } /* used: library-marketplace */
:where(.page-statistics) .active-filters-count { display: inline-flex; align-items: center; gap: var(--app-default-top-bottom-margin-xxxs); font-variant-numeric: tabular-nums; color: var(--active-filters-text, var(--t-emphasis)); } /* used: library-marketplace */
:where(.page-statistics) .active-filters-count-icon { font-size: var(--stats-count-icon-size); } /* used: library-marketplace */
:where(.page-statistics) .canvas-body { position: relative; padding: var(--app-default-top-bottom-margin-lg); min-height: var(--stats-canvas-min-height); display: flex; flex-direction: column; } /* used: library-marketplace */

/* The bubbles or bars switch, top right of the canvas */
:where(.page-statistics) .mode-toggle { position: absolute; top: var(--app-default-top-bottom-margin-xxs); right: var(--app-default-top-bottom-margin-xxs); z-index: 6; display: flex; flex-shrink: 0; border-radius: var(--app-default-radius-sm); overflow: hidden; height: var(--button-size-md); appearance: none; border: none; } /* used: library-marketplace */
:where(.page-statistics) .mode-toggle[hidden] { display: none; } /* used: library-marketplace */
:where(.page-statistics) .mt-btn { appearance: none; border: none; border-radius: 0; background-color: var(--t-switch-bg); padding: 0; display: inline-flex; align-items: center; justify-content: center; width: var(--button-size-md); height: var(--button-size-md); min-height: 0; cursor: pointer; color: var(--t-emphasis); font-size: var(--button-icon-lg); transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease; } /* used: library-marketplace */
:where(.page-statistics) .mt-btn.on { background-color: var(--t-selected-bg); color: var(--t-selected-text); } /* used: library-marketplace */

/* The bubble chart. The movement lives here, not in the script. */
:where(.page-statistics) .stage { position: relative; width: 100%; height: 100%; min-height: inherit; } /* used: library-marketplace */
:where(.page-statistics) .bubble { position: absolute; border-radius: var(--radius-circle); display: flex; align-items: center; justify-content: center; text-align: center; cursor: default; padding: var(--stats-bubble-padding); overflow: hidden; will-change: transform, opacity; transition: width var(--stat-bubble-transition) var(--stat-bubble-ease), height var(--stat-bubble-transition) var(--stat-bubble-ease), left var(--stat-bubble-transition) var(--stat-bubble-ease), top var(--stat-bubble-transition) var(--stat-bubble-ease), transform var(--stat-bubble-transition) var(--stat-bubble-ease), opacity var(--stat-bubble-transition) ease; } /* used: library-marketplace */
:where(.page-statistics) .bubble.expanded { z-index: 20; padding: var(--stat-bubble-expanded-inset); } /* used: library-marketplace */
:where(.page-statistics) .lab { pointer-events: none; line-height: var(--stats-bubble-line-height); font-weight: var(--font-weight-normal); color: var(--text-on-colour); } /* used: library-marketplace */
:where(.page-statistics) .bubble-label-small { font-size: var(--stats-bubble-label-small); } /* used: library-marketplace */
:where(.page-statistics) .bubble-label-medium { font-size: var(--stats-bubble-label-medium); } /* used: library-marketplace */
:where(.page-statistics) .bubble-label-large { font-size: var(--stats-bubble-label-large); } /* used: library-marketplace */
:where(.page-statistics) .full { display: none; } /* used: library-marketplace */
:where(.page-statistics) .expanded .lab { display: none; } /* used: library-marketplace */
:where(.page-statistics) .expanded .full { display: flex; flex-direction: column; gap: var(--stats-bubble-text-gap); align-items: center; justify-content: center; color: var(--text-on-colour); pointer-events: none; max-width: var(--stat-bubble-text-width); } /* used: library-marketplace */
:where(.page-statistics) .fname { font-size: var(--app-default-top-bottom-margin-xs); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-x-small); } /* used: library-marketplace */
:where(.page-statistics) .fpct { font-size: var(--body-text-xxl); font-weight: var(--font-weight-extra-light); font-variant-numeric: tabular-nums; } /* used: library-marketplace */
:where(.page-statistics) .bubble-subgroup-label { display: block; font-size: var(--stats-bubble-group-size); opacity: var(--stats-bubble-group-opacity); margin: var(--stats-bubble-group-margin) 0; } /* used: library-marketplace */

/* The bar chart. Chart.js writes a width and height onto its canvas, so
   these two need !important to keep the chart filling its area. */
:where(.page-statistics) .barview { width: 100%; flex: 1 1 auto; min-height: var(--stats-chart-min-height); position: relative; margin-top: var(--stats-chart-top-gap); display: flex; flex-direction: column; } /* used: library-marketplace */
:where(.page-statistics) .barview[hidden] { display: none; } /* used: library-marketplace */
:where(.page-statistics) .barview-chart-area { flex: 1 1 auto; min-height: 0; position: relative; } /* used: library-marketplace */
:where(.page-statistics) .barview-canvas { width: 100% !important; height: 100% !important; } /* used: library-marketplace */

/* The chart key: a dot in the group colour, then the group name */
:where(.page-statistics) .chart-key-list { list-style: none; padding: 0; margin: var(--app-default-top-bottom-margin-lg) 0 0; display: flex; flex-wrap: wrap; gap: var(--app-default-top-bottom-margin-xs) var(--app-default-top-bottom-margin-xl); flex: 0 0 auto; } /* used: library-marketplace */
:where(.page-statistics) .chart-key-item { font-size: var(--body-text-sm); line-height: var(--default-line-height-small); color: var(--t-page-text); display: flex; align-items: center; flex: 0 0 auto; gap: var(--app-default-top-bottom-margin-xxs); } /* used: library-marketplace */
:where(.page-statistics) .chart-key-dot { flex: 0 0 var(--severity-dot-size); width: var(--severity-dot-size); height: var(--severity-dot-size); border-radius: var(--radius-circle); align-self: center; } /* used: library-marketplace */
:where(.page-statistics) .chart-key-dot-afab { background: var(--category-colour); } /* used: library-marketplace */
:where(.page-statistics) .chart-key-dot-cis { background: var(--orange); } /* used: library-marketplace */
:where(.page-statistics) .chart-key-dot-minority { background: var(--red); } /* used: library-marketplace */
:where(.page-statistics) .chart-key-label { flex: 0 0 auto; } /* used: library-marketplace */

/* The map */
:where(.page-statistics) .mapview { position: relative; width: 100%; } /* used: library-marketplace */
:where(.page-statistics) .mapview-map { width: 100%; height: auto; display: block; } /* used: library-marketplace */
:where(.page-statistics) .land { fill: var(--t-chart-track); stroke: var(--t-page-bg); stroke-width: var(--stats-map-land-stroke); } /* used: library-marketplace */
/* The country bubbles are a data colour, so they stay orange */
:where(.page-statistics) .cbubble { fill: var(--orange); fill-opacity: var(--opacity-high); stroke: var(--orange); stroke-width: var(--stats-map-bubble-stroke); cursor: default; transition: fill-opacity var(--stats-quick); } /* used: library-marketplace */
:where(.page-statistics) .cbubble:hover { fill-opacity: 1; } /* used: library-marketplace */
:where(.page-statistics) .map-tip { position: fixed; pointer-events: none; background: var(--t-tooltip-bg); color: var(--t-tooltip-text); font-size: var(--body-text-sm); padding: var(--app-default-top-bottom-margin-xxs) var(--body-text-xs); border-radius: var(--app-default-radius-md); opacity: 0; transition: opacity var(--stats-tip-fade); z-index: 50; white-space: nowrap; } /* used: library-marketplace */

/* Demographics */
:where(.page-statistics) .demoview { display: flex; flex-direction: column; justify-content: center; gap: var(--app-default-top-bottom-margin-xl); height: 100%; } /* used: library-marketplace */
:where(.page-statistics) .demoview[hidden] { display: none; } /* used: library-marketplace */
:where(.page-statistics) .statistics-panel-heading { color: var(--t-emphasis); font-size: var(--section-headline-size, var(--heading-size-md)); margin-top: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-statistics) .demo-q { font-size: var(--body-text-xs); color: var(--t-page-text); letter-spacing: var(--stats-label-letter-spacing); margin-bottom: var(--app-default-top-bottom-margin-xs); } /* used: library-marketplace */
:where(.page-statistics) .demo-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--stats-demo-tile-min), 1fr)); gap: var(--gap-sm); } /* used: library-marketplace */
:where(.page-statistics) .demo-pill { display: flex; flex-direction: column-reverse; justify-content: center; align-items: flex-start; gap: var(--app-default-top-bottom-margin-xxxs); min-height: var(--button-size-xl); padding: var(--gap-sm) var(--gap-regular); border: none; border-radius: var(--radius-rect-pill); background: var(--t-stat-tile); font-size: var(--body-text-xs); color: var(--t-page-text); } /* used: library-marketplace */
:where(.page-statistics) .demo-pill-percent { font-variant-numeric: tabular-nums; color: var(--t-page-text); font-size: var(--body-text-xxl); font-weight: var(--font-weight-extra-light); line-height: var(--default-line-height-small); } /* used: library-marketplace */

/* The ranked list under the canvas. The rule and title take the colour of
   the category the script sets. */
:where(.page-statistics) .list-tile { margin-top: var(--default-gap); background: var(--t-band-alt); border-radius: var(--stats-tile-radius); padding: var(--app-default-top-bottom-margin-lg) var(--stats-list-padding) var(--stats-list-padding); } /* used: library-marketplace */
:where(.page-statistics) .list-tile-head { margin-bottom: var(--app-default-top-bottom-margin-xxxs); } /* used: library-marketplace */
:where(.page-statistics) .lt-title { font-size: var(--body-text-sm); color: var(--category-colour, var(--t-page-text)); } /* used: library-marketplace */
:where(.page-statistics) .lt-note { color: var(--category-colour, var(--t-page-text)); font-weight: var(--font-weight-normal); } /* used: library-marketplace */
:where(.page-statistics) .list-tile-rule { height: var(--stats-rule-height); width: 100%; background: var(--category-colour, var(--t-line-muted)); border-radius: var(--stats-rule-radius); margin-bottom: var(--default-gap); } /* used: library-marketplace */
:where(.page-statistics) .list-rows { list-style: none; padding: 0; margin: 0; max-width: var(--stats-list-width); } /* used: library-marketplace */
:where(.page-statistics) .list-row { font-size: var(--body-text-xs); line-height: var(--default-line-height-small); padding: var(--stats-list-row-padding) 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--default-gap); } /* used: library-marketplace */
:where(.page-statistics) .list-row-text { flex: 1 1 auto; min-width: 0; } /* used: library-marketplace */
:where(.page-statistics) .list-row-percent { flex: 0 0 auto; color: var(--t-text-secondary); font-variant-numeric: tabular-nums; } /* used: library-marketplace */

/* Still motion: nothing on this page moves */
:where(:root[data-motion="still"].page-statistics) .bubble,
:where(:root[data-motion="still"].page-statistics) .mt-btn,
:where(:root[data-motion="still"].page-statistics) .active-filters,
:where(:root[data-motion="still"].page-statistics) .map-tip,
:where(:root[data-motion="still"].page-statistics) .cbubble { transition: none; animation: none; } /* used: library-marketplace */

@media (max-width: 600px) {
  :where(.page-statistics) .stats-content-bottom-pad { padding-bottom: var(--app-default-top-bottom-margin-xxxl); } /* used: library-marketplace */
}

/* Phones. The page stops scrolling and scrolls inside <main>; the canvas
   and the list become a sideways carousel. The script sets .m-pattern on
   <body> at exactly this width, so the rules sit in the width alone. */
@media (max-width: 760px) {
  .page-statistics { height: 100%; overflow: hidden; } /* used: library-marketplace */
  :where(.page-statistics) .statistics-body { height: 100%; overflow: hidden; scrollbar-gutter: auto; } /* used: library-marketplace */
  :where(.page-statistics) .stats-shell { height: calc(100dvh - var(--fixed-header-height)); overflow: hidden; } /* used: library-marketplace */
  :where(.page-statistics) .stats-scroll { height: 100%; overflow: hidden; padding-left: 0; padding-right: 0; } /* used: library-marketplace */
  :where(.page-statistics) .stats-main { height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; display: flex; flex-direction: column; } /* used: library-marketplace */
  :where(.page-statistics) .statistics-hero { flex: 0 0 auto; } /* used: library-marketplace */
  :where(.page-statistics) .layout { flex: 0 0 auto; flex-direction: row; align-items: stretch; height: calc(100% - var(--stats-mobile-header-room) - var(--inner-wrapper-margin-top-mobile)); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); scroll-padding-left: var(--default-left-right-mob-body-padding); -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x; } /* used: library-marketplace */
  :where(.page-statistics) .layout::-webkit-scrollbar { display: none; } /* used: library-marketplace */
  :where(.page-statistics) .stage-wrap { display: contents; } /* used: library-marketplace */
  :where(.page-statistics) .swipe-track { display: contents; } /* used: library-marketplace */
  :where(.page-statistics) .statistics-footnote { display: none; } /* used: library-marketplace */
  :where(.page-statistics) .swipe-card { flex: 0 0 var(--stats-card-width-mobile); width: var(--stats-card-width-mobile); scroll-snap-align: start; scroll-snap-stop: always; height: 100%; } /* used: library-marketplace */
  :where(.page-statistics) .canvas { height: 100%; display: flex; flex-direction: column; } /* used: library-marketplace */
  :where(.page-statistics) .canvas-body { flex: 1 1 auto; min-height: 0; } /* used: library-marketplace */
  :where(.page-statistics) .list-tile { margin-top: 0; } /* used: library-marketplace */
  :where(.page-statistics) .active-filters { padding: var(--app-default-top-bottom-margin-xs); font-size: var(--app-default-top-bottom-margin-xs); } /* used: library-marketplace */
}


/* ==========================================================================
   REVIEWS (/reviews). The page carries .page-uma-reviews on <html>.
   The review cards, the thumbs tabs, the Post review button and the slot
   it sits in are UMA.css's homepage classes; this page sets the tokens they
   read, and sizes the cards to two to a row beside the heading.
   ========================================================================== */
:root { /* used: library-marketplace */
  /* The heading clears the sort bar: its top room, a 40px control, its
     bottom room. */
  --disc-reviews-content-margin-top: calc(var(--app-default-top-bottom-margin-xxl) + var(--button-size-md) + var(--app-default-top-bottom-margin-lg));
}
:root:where(.page-uma-reviews) { /* used: library-marketplace */
  --navy-40: #151C2D;
  --navy-60: #0E131E;
  --navy-60-rgb: 14, 19, 30;
  --t-page-bg: var(--mid-white);
  --t-page-text: var(--mid-charcoal);
  --t-card: var(--bright-white);
  --t-card-rgb: 242, 237, 234;
  --t-heading: var(--navy);
  --t-text-strong: var(--mid-charcoal);
  --t-text-secondary: var(--light-charcoal);
  --t-text-muted: var(--lightest-charcoal);
  --t-border: var(--light-charcoal);
  --t-field-bg: var(--bright-white);
  --t-scrollbar-thumb: rgba(var(--black-rgb), var(--opacity-low));
  --t-footer-stroke: var(--mushroom);
  --t-mock-header-bg: var(--bright-white);
  --t-mock-header-line: var(--dark-white);
  --t-sort-hover-line: var(--mid-charcoal);
  /* The homepage review card, tabs and arrows read these */
  --t-review-card: var(--bright-white);
  --t-review-card-rgb: var(--bright-white-rgb);
  --t-home-body: var(--mid-charcoal);
  --t-home-muted: var(--light-charcoal);
  --t-carousel-arrow: var(--lightest-charcoal);
  --opacity-dimmed: 0.3;
  --verdict-tab-down-nudge: 0.125rem;
  --carouselle-card-315: 315px;
  --carouselle-card-xxxl: 400px;
  --carouselle-card-420: 420px;
  --review-fade-solid-height: 2rem;
  --review-fade-gradient-height: 2rem;
  --review-fade-solid-height-landscape: 1rem;
  --review-fade-gradient-height-landscape: 3rem;
  --t-tab-bg: var(--dark-white);
  --t-tab-text: var(--navy);
  --t-tab-divider: var(--navy);
  --t-tab-selected-bg: var(--navy);
  --t-tab-selected-text: var(--bright-white);
  /* New for this page */
  --reviews-title-width: 10ch;
  --reviews-quote-letter-spacing: 0.5px;
  --reviews-mock-header-layer: 99999;
  --reviews-mock-sidebar-layer: 100000;
}
:root[data-theme="dark"]:where(.page-uma-reviews) { /* used: library-marketplace */
  --bright-white: var(--mid-white);
  --bright-white-rgb: 242, 237, 234;
  --t-page-bg: var(--navy-60);
  --t-page-text: var(--bright-white);
  --t-card: var(--navy);
  --t-card-rgb: 35, 47, 75;
  --t-heading: var(--bright-white);
  --t-text-strong: var(--bright-white);
  --t-text-secondary: rgba(var(--bright-white-rgb), var(--opacity-high));
  --t-text-muted: rgba(var(--bright-white-rgb), var(--opacity-high));
  --t-border: rgba(var(--bright-white-rgb), var(--opacity-low));
  --t-field-bg: transparent;
  --t-scrollbar-thumb: rgba(var(--bright-white-rgb), var(--opacity-low));
  --t-footer-stroke: var(--t-border);
  --t-mock-header-bg: var(--t-page-bg);
  --t-mock-header-line: var(--t-border);
  --t-sort-hover-line: var(--t-border);
  --t-review-card: var(--t-card);
  --t-review-card-rgb: var(--t-card-rgb);
  --t-home-body: var(--t-page-text);
  --t-home-muted: var(--t-text-secondary);
  --t-carousel-arrow: var(--t-page-text);
  --t-tab-bg: var(--t-card);
  --t-tab-text: var(--bright-white);
  --t-tab-divider: rgba(var(--bright-white-rgb), var(--opacity-low));
  --t-tab-selected-bg: var(--bright-white);
  --t-tab-selected-text: var(--navy);
}

/* The page frame. The page itself never scrolls; the frame under the
   header does. */
.page-uma-reviews { height: 100%; overflow: hidden; scrollbar-gutter: revert; } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-body { height: 100%; overflow: hidden; scrollbar-gutter: revert; background: var(--t-page-bg); color: var(--t-page-text); } /* used: library-marketplace */
:where(.page-uma-reviews, .page-uma-library, .page-uma-marketplace) .skip-link-mid-white { color: var(--mid-white); } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-scroll-body { margin-top: var(--fixed-header-height); height: calc(100dvh - var(--fixed-header-height)); width: calc(100dvw - var(--sidebar-width)); overflow-y: auto; } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-scroll-inner { margin-top: 0; padding-top: 0; height: auto; overflow-y: visible; } /* used: library-marketplace */

/* The stand-in header and side bar, until the chrome is on the page */
:where(.page-uma-reviews) .temp-mock-header { position: fixed; top: 0; left: 0; right: 0; height: var(--fixed-header-height); background: var(--t-mock-header-bg); border-bottom: var(--stroke-thin) solid var(--t-mock-header-line); z-index: var(--reviews-mock-header-layer); pointer-events: none; } /* used: library-marketplace */
:where(.page-uma-reviews) .temp-mock-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--navy); z-index: var(--reviews-mock-sidebar-layer); pointer-events: none; } /* used: library-marketplace */

/* Two columns from 1101 up: the heading on the left, the cards on the right */
:where(.page-uma-reviews) .reviews-layout { display: grid; grid-template-columns: 1fr auto; gap: var(--app-default-top-bottom-margin-xxxl); align-items: start; width: 100%; height: 100%; min-height: 0; } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-left-column { align-self: start; width: 100%; max-width: var(--golden-width-small); padding-right: var(--default-left-right-desk-body-padding); display: flex; flex-direction: column; background: var(--t-page-bg); } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-md); padding-top: var(--app-default-top-bottom-margin-xxl); } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-title { line-height: var(--default-line-height-x-small); max-width: var(--reviews-title-width); margin-bottom: var(--app-default-top-bottom-margin-xxxl); color: var(--t-heading); } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-post-btn { flex-shrink: 0; color: var(--bright-white); } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-post-btn-left { display: none; } /* used: library-marketplace */
/* Her hidden link words take no room at all, so the page cannot scroll past its foot */
:where(.page-uma-reviews) .hidden-text-flat { width: 0; height: 0; margin: 0; padding: 0; } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-switch-left { display: none; } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-right-column { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; width: calc(var(--carouselle-card-width-review) * 2 + var(--default-gap)); } /* used: library-marketplace */

/* The bar over the cards: the thumbs on the left, the sort menu on the right */
:where(.page-uma-reviews) .reviews-sort-bar { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%; flex-shrink: 0; margin-bottom: 0; padding-top: var(--app-default-top-bottom-margin-xxl); padding-bottom: var(--app-default-top-bottom-margin-lg); background: var(--t-page-bg); position: sticky; top: 0; z-index: 6; } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-sort-bar-item { flex: 0 0 auto; margin: 0; } /* used: library-marketplace */
:where(.page-uma-reviews) .verdict-tab-icon-down { position: relative; top: var(--verdict-tab-down-nudge); } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-sort-select { appearance: none; font-family: inherit; font-size: var(--body-text-sm); color: var(--t-text-strong); background: var(--t-field-bg); border: var(--stroke-hairline) solid var(--t-border); border-radius: var(--btn-radius); height: var(--button-size-md); padding-left: var(--btn-padding-x); padding-right: calc(var(--btn-padding-x) + var(--button-icon-xs) + var(--app-default-top-bottom-margin-xs)); cursor: pointer; transition: border-color var(--transition-fast); } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-sort-select:hover { border-color: var(--t-sort-hover-line); } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-sort-caret { position: absolute; right: var(--btn-padding-x); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--t-text-secondary); font-size: var(--button-icon-xs); } /* used: library-marketplace */

/* The cards: a wrapping grid that scrolls, and a carousel below 850 */
:where(.page-uma-reviews) .reviews-grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--default-gap); overflow-x: hidden; overflow-y: auto; min-height: 0; flex: 1 1 auto; height: auto; scrollbar-width: thin; } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-grid:focus { outline: none; } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-grid::-webkit-scrollbar { width: var(--reviews-scrollbar-size); } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-grid::-webkit-scrollbar-track { background: transparent; } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-grid::-webkit-scrollbar-thumb { background: var(--t-scrollbar-thumb); border-radius: var(--radius-pill); } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-card-meta { line-height: var(--default-line-height-small); } /* used: library-marketplace */
/* UMA.css gives the last paragraph in a box a 2rem bottom margin with
   p:last-of-type; the card's date has none. :last-of-type is here for weight. */
:where(.page-uma-reviews) .reviews-card-meta:last-of-type { margin-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-reviews) .review-quote { letter-spacing: var(--reviews-quote-letter-spacing); } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-empty-text { color: var(--t-text-secondary); margin-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-reviews) .reviews-empty-text:last-of-type { margin-bottom: 0; } /* used: library-marketplace */

/* Below the carousel: the arrows on the left, Post review on the right */
:where(.page-uma-reviews, .page-uma-discounts) .centred-card-carousel-controls { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: var(--gap-sm); height: auto; width: auto; padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); padding-bottom: var(--app-default-top-bottom-margin-xxxl); } /* used: library-marketplace */
:where(.page-uma-reviews, .page-uma-discounts, .page-uma-library, .page-uma-marketplace) .carousel-nav-btn { display: inline-flex; align-items: center; justify-content: center; border: var(--stroke-hairline) solid var(--t-carousel-arrow); background: transparent; cursor: pointer; flex-shrink: 0; border-radius: var(--radius-pill); aspect-ratio: 1 / 1; padding: 0; height: var(--button-size-md); color: var(--t-carousel-arrow); transition: background var(--button-transition-duration) var(--button-transition-ease), border-color var(--button-transition-duration) var(--button-transition-ease), color var(--button-transition-duration) var(--button-transition-ease), opacity var(--button-transition-duration) var(--button-transition-ease); } /* used: library-marketplace */
:where(.page-uma-reviews, .page-uma-discounts, .page-uma-library, .page-uma-marketplace) .carousel-nav-btn:hover { background: var(--hover-overlay-light); color: var(--t-page-text); border-color: var(--t-page-text); } /* used: library-marketplace */
:where(.page-uma-reviews, .page-uma-discounts, .page-uma-library, .page-uma-marketplace) .carousel-nav-btn-icon { font-size: var(--button-icon-md); } /* used: library-marketplace */
/* The rule above sets the pointer, so the plain cursor of UMA.css's
   .carousel-nav-btn--disabled is restated after it */
:where(.page-uma-reviews, .page-uma-discounts) .carousel-nav-btn--disabled { cursor: default; } /* used: library-marketplace */

@media (min-width: 601px) {
  :where(.page-uma-reviews) .reviews-grid { margin-bottom: 0; padding-bottom: var(--app-default-top-bottom-margin-xxxxxl); } /* used: library-marketplace */
}
@media (min-width: 600px) and (max-width: 1100px) {
  :where(.page-uma-reviews) .reviews-scroll-inner { display: flex; flex-direction: column; } /* used: library-marketplace */
}
@media (min-width: 850px) {
  :where(.page-uma-reviews) .reviews-grid-card { width: var(--carouselle-card-width-review); aspect-ratio: var(--carouselle-card-ratio-review); } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-bottom-row-carousel-only { display: none; } /* used: library-marketplace */
}
@media (min-width: 1101px) {
  :where(.page-uma-reviews) .reviews-left-column { position: sticky; top: 0; } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-heading { flex-direction: column; align-items: flex-start; gap: 0; padding-top: var(--disc-reviews-content-margin-top); } /* used: library-marketplace */
}
@media (min-width: 1280px) {
  :where(.page-uma-reviews, .page-uma-discounts) .centred-card-carousel-controls { padding-left: calc(((100% - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding)); } /* used: library-marketplace */
}
@media (max-width: 1100px) {
  :where(.page-uma-reviews) .reviews-layout { display: flex; flex-direction: column; gap: 0; } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-left-column { max-width: 100%; padding-right: 0; } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-heading { max-width: calc(var(--carouselle-card-width-review) * 2 + var(--default-gap)); } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-title { max-width: none; margin-bottom: 0; } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-right-column { width: 100%; max-width: calc(var(--carouselle-card-width-review) * 2 + var(--default-gap)); } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-grid { width: 100%; } /* used: library-marketplace */
}
@media (max-width: 850px) {
  :where(.page-uma-reviews) .reviews-scroll-inner { padding-left: 0; padding-right: 0; } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-left-column { padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-sort-bar { padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); } /* used: library-marketplace */
}
@media (max-width: 849px) {
  :where(.page-uma-reviews) .reviews-heading { max-width: none; } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-right-column { max-width: 100%; } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-post-btn-heading { display: none; } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-grid { flex-wrap: nowrap; align-items: flex-start; overflow-x: auto; overflow-y: hidden; gap: var(--gap-regular); width: 100%; scrollbar-width: none; padding-top: var(--app-default-top-bottom-margin-xl); padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); padding-bottom: var(--app-default-top-bottom-margin-xl); scroll-snap-type: x mandatory; scroll-padding-left: var(--default-left-right-desk-body-padding); scroll-padding-right: var(--default-left-right-desk-body-padding); } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-grid::-webkit-scrollbar { display: none; } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-grid-item { flex: 0 0 auto; scroll-snap-align: start; } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-grid-item:last-child { scroll-snap-align: end; } /* used: library-marketplace */
}
@media (max-width: 600px) {
  :where(.page-uma-reviews) .reviews-scroll-body { width: 100dvw; } /* used: library-marketplace */
  :where(.page-uma-reviews) .temp-mock-sidebar { display: none; } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-left-column { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-sort-bar { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-grid { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); scroll-padding-left: var(--default-left-right-mob-body-padding); scroll-padding-right: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
  :where(.page-uma-reviews, .page-uma-discounts) .centred-card-carousel-controls { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
}
@media (max-width: 599px) {
  :where(.page-uma-reviews) .reviews-sort-bar { padding-top: var(--app-default-top-bottom-margin-lg); } /* used: library-marketplace */
  :where(.page-uma-reviews) .reviews-grid { margin-top: calc(-1 * var(--app-default-top-bottom-margin-lg)); } /* used: library-marketplace */
}
@media (pointer: coarse) {
  :where(.page-uma-reviews, .page-uma-discounts) .centred-card-carousel-controls { display: none; } /* used: library-marketplace */
}


/* ==========================================================================
   DISCOUNTS (/discounts). The page carries .page-uma-discounts and
   .page-catalogue on <html>.
   ========================================================================== */
:root:where(.page-uma-discounts) { /* used: library-marketplace */
  /* Values this page has always used in place of the UMA.css ones */
  --button-transition-duration: 0.3s;
  --default-card-left-right-padding: 1.5rem;
  --default-card-bottom-padding: 2rem;
  --marker-size: var(--body-text-lg);
  --carouselle-card-ratio-nine-by-sixteen: 9 / 16;
  --navy-40: #151C2D;
  --navy-60: #0E131E;
  --navy-60-rgb: 14, 19, 30;
  --mid-white-rgb: 242, 237, 234;
  --t-page-bg: var(--mid-white);
  --t-page-text: var(--mid-charcoal);
  --t-card: var(--mid-white);
  --t-text-strong: var(--dark-charcoal);
  --t-text-secondary: var(--light-charcoal);
  --t-text-muted: var(--lightest-charcoal);
  --t-border: var(--dark-white);
  --t-footer-stroke: var(--mushroom);
  --t-carousel-arrow: var(--lightest-charcoal);
  --t-proto-header: var(--frost-white);
  --t-discounts-title: var(--navy);
  --vat-tag-teal: rgb(0, 88, 98);
}
:root[data-theme="dark"]:where(.page-uma-discounts) { /* used: library-marketplace */
  --bright-white: var(--mid-white);
  --bright-white-rgb: 242, 237, 234;
  --t-page-bg: var(--navy-60);
  --t-page-text: var(--bright-white);
  --t-card: var(--navy);
  --t-text-strong: var(--bright-white);
  --t-text-secondary: rgba(var(--bright-white-rgb), var(--opacity-high));
  --t-text-muted: rgba(var(--bright-white-rgb), var(--opacity-high));
  --t-border: rgba(var(--bright-white-rgb), var(--opacity-low));
  --t-footer-stroke: var(--t-border);
  --t-carousel-arrow: var(--t-page-text);
  --t-proto-header: var(--t-page-bg);
  --t-discounts-title: var(--t-text-strong);
  --t-card-panel: var(--t-card);
  --t-card-light: var(--t-card);
  --t-card-light-text: var(--t-page-text);
  --t-card-light-hover: var(--t-card);
  --t-card-light-strong: var(--t-text-strong);
  --t-card-light-muted: var(--t-text-secondary);
  --t-card-light-figure: var(--t-text-strong);
  --t-chip-text: var(--bright-white);
  --t-chip-line: rgba(var(--bright-white-rgb), var(--opacity-moderate));
  --t-chip-bg: transparent;
}

/* The page and the stand-in chrome */
:where(.page-uma-discounts) .discounts-body { background: var(--t-page-bg); color: var(--t-page-text); scrollbar-gutter: revert; } /* used: library-marketplace */
.page-uma-discounts { scrollbar-gutter: revert; } /* used: library-marketplace */
:where(.page-catalogue) .icon-preload { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* used: library-marketplace */
:where(.page-uma-discounts) .discount-cards-slot { display: contents; } /* used: library-marketplace */
:where(.page-uma-discounts) .discounts-content-wrapper { margin-top: var(--fixed-header-height); } /* used: library-marketplace */
:where(.page-uma-discounts) .proto-header { position: fixed; top: 0; left: var(--sidebar-width); right: 0; height: var(--fixed-header-height); background: var(--t-proto-header); backdrop-filter: blur(var(--blur-lg)); border-bottom: var(--stroke-hairline) solid var(--dark-white); z-index: 99; } /* used: library-marketplace */

/* The intro beside the cards, and the card grid */
:where(.page-uma-discounts) .discounts-intro-column { background: var(--t-page-bg); padding-top: var(--app-default-top-bottom-margin-xxl); } /* used: library-marketplace */
:where(.page-uma-discounts) .discounts-aside { gap: var(--app-default-top-bottom-margin-sm); } /* used: library-marketplace */
:where(.page-uma-discounts) .discounts-title { line-height: var(--default-line-height-x-small); margin-bottom: 0; color: var(--t-discounts-title); } /* used: library-marketplace */
/* UMA.css gives the last paragraph 2rem with p:last-of-type; :last-of-type
   here is for weight */
:where(.page-uma-discounts) .discounts-intro:last-of-type { margin-bottom: var(--app-default-top-bottom-margin-xxxl); } /* used: library-marketplace */
:where(.page-uma-discounts) .discounts-grid { align-items: stretch; } /* used: library-marketplace */
:where(.page-uma-discounts) .discount-card { aspect-ratio: var(--carouselle-card-ratio-nine-by-sixteen); height: auto; } /* used: library-marketplace */
:where(.page-uma-discounts) .fact-card { aspect-ratio: var(--carouselle-card-ratio-nine-by-sixteen); } /* used: library-marketplace */

/* The teal cards: VAT relief and the partner invite */
:where(.page-uma-discounts) .info-card { scroll-snap-align: start; border-radius: var(--app-default-radius-lg); overflow: hidden; display: flex; flex-direction: column; padding: var(--app-default-top-bottom-margin-xxl) var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-xl); flex: 0 0 var(--product-card-width-sm); width: var(--product-card-width-sm); min-width: var(--product-card-width-sm); max-width: var(--product-card-width-sm); aspect-ratio: var(--carouselle-card-ratio-nine-by-sixteen); } /* used: library-marketplace */
:where(.page-uma-discounts) .info-card--vat { background: var(--dark-teal); color: var(--bright-white); } /* used: library-marketplace */
:where(.page-uma-discounts) .info-card-title { font-size: var(--heading-size-lg); font-weight: var(--font-weight-light); line-height: var(--default-line-height-small); color: var(--mid-white); margin-bottom: var(--app-default-top-bottom-margin-md); } /* used: library-marketplace */
:where(.page-uma-discounts) .info-card-desc { font-size: var(--body-text-sm); line-height: var(--default-line-height-large); color: rgba(var(--mid-white-rgb), var(--opacity-near-full)); margin-bottom: var(--app-default-top-bottom-margin-lg); } /* used: library-marketplace */
:where(.page-uma-discounts) .info-card-actions { margin-top: auto; display: flex; flex-direction: column; gap: var(--gap-regular); } /* used: library-marketplace */
:where(.page-uma-discounts) .info-card-btn-primary { display: flex; align-items: center; justify-content: center; gap: var(--gap-xs); height: var(--button-size-md); width: 100%; border-radius: var(--radius-pill); font-size: var(--body-text-xs); font-weight: var(--font-weight-medium); text-decoration: none; background: var(--bright-white); color: var(--navy); border: none; transition: background var(--transition-base); } /* used: library-marketplace */
:where(.page-uma-discounts) .vat-eligible-tags { display: flex; flex-wrap: wrap; gap: var(--gap-xxs); margin-bottom: var(--app-default-top-bottom-margin-lg); } /* used: library-marketplace */
:where(.page-uma-discounts) .vat-eligible-tag { height: var(--button-size-xs); display: inline-flex; align-items: center; padding: 0 var(--gap-md); border-radius: var(--radius-pill); background: var(--vat-tag-teal); color: var(--mid-white); font-size: var(--body-text-xs); pointer-events: none; user-select: none; line-height: var(--default-line-height-single); } /* used: library-marketplace */
:where(.page-uma-discounts) .vat-eligible-tag--lg { height: var(--button-size-md); } /* used: library-marketplace */

/* Below 850 the cards are a carousel, with the arrows under them */
:where(.page-uma-discounts) .discounts-bottom-row { display: none; } /* used: library-marketplace */

@media (min-width: 900px) {
  :where(.page-uma-discounts) .info-card { flex: 0 0 var(--product-card-width-md); width: var(--product-card-width-md); min-width: var(--product-card-width-md); max-width: var(--product-card-width-md); } /* used: library-marketplace */
}
@media (min-width: 1101px) {
  :where(.page-uma-discounts) .discounts-main { width: calc(var(--product-card-width-md) * 2 + var(--default-gap)); } /* used: library-marketplace */
  :where(.page-uma-discounts) .discounts-aside { position: sticky; top: calc(var(--fixed-header-height) + var(--stroke-hairline) + var(--inner-wrapper-margin-top-desktop)); } /* used: library-marketplace */
}
@media (min-width: 1280px) {
  :where(.page-uma-discounts) .info-card { flex: 0 0 var(--product-card-width-lg); width: var(--product-card-width-lg); min-width: var(--product-card-width-lg); max-width: var(--product-card-width-lg); } /* used: library-marketplace */
  :where(.page-uma-discounts) .discounts-main { width: calc(var(--product-card-width-lg) * 2 + var(--default-gap)); } /* used: library-marketplace */
}
@media (max-width: 1279px) {
  :where(.page-uma-discounts) .info-card { padding-top: var(--app-default-top-bottom-margin-xl); padding-bottom: var(--app-default-top-bottom-margin-lg); } /* used: library-marketplace */
  :where(.page-uma-discounts) .info-card-title { line-height: var(--default-line-height-x-small); } /* used: library-marketplace */
  :where(.page-uma-discounts) .info-card-desc { margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: library-marketplace */
  :where(.page-uma-discounts) .info-card-desc:last-of-type { margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: library-marketplace */
  :where(.page-uma-discounts) .fact-card-mark { margin-bottom: calc(-1 * var(--app-default-top-bottom-margin-xs)); } /* used: library-marketplace */
}
@media (max-width: 1100px) {
  :where(.page-uma-discounts) .discounts-layout { gap: 0; } /* used: library-marketplace */
  :where(.page-uma-discounts) .discounts-main { width: 100%; } /* used: library-marketplace */
}
@media (max-width: 899px) {
  :where(.page-uma-discounts) .fact-card-mark { margin-bottom: calc(-1 * var(--app-default-top-bottom-margin-sm)); } /* used: library-marketplace */
}
@media (max-width: 849px) {
  :where(.page-uma-discounts) .discounts-grid { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; width: calc(100% + var(--default-left-right-desk-body-padding) * 2); margin-left: calc(-1 * var(--default-left-right-desk-body-padding)); margin-right: calc(-1 * var(--default-left-right-desk-body-padding)); padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); scroll-padding-left: var(--default-left-right-desk-body-padding); box-sizing: border-box; } /* used: library-marketplace */
  :where(.page-uma-discounts) .discounts-grid::-webkit-scrollbar { display: none; } /* used: library-marketplace */
  :where(.page-uma-discounts) .discounts-bottom-row { display: flex; margin-top: var(--app-default-top-bottom-margin-sm); } /* used: library-marketplace */
  :where(.page-uma-discounts) .discounts-bottom-row-controls { padding-left: 0; padding-right: 0; } /* used: library-marketplace */
}
@media (max-width: 600px) {
  :where(.page-uma-discounts) .discount-card { flex: 0 0 var(--product-card-width-sm); width: var(--product-card-width-sm); min-width: var(--product-card-width-sm); max-width: var(--product-card-width-sm); } /* used: library-marketplace */
}
@media (max-width: 599px) {
  :where(.page-uma-discounts) .discounts-grid { width: calc(100% + var(--default-left-right-mob-body-padding) * 2); margin-left: calc(-1 * var(--default-left-right-mob-body-padding)); margin-right: calc(-1 * var(--default-left-right-mob-body-padding)); padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); scroll-padding-left: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
}
@media (max-width: 600px) {
  :where(.page-uma-discounts) .proto-header { left: 0; right: auto; width: 100dvw; } /* used: library-marketplace */
}


/* ==========================================================================
   LIBRARY (/library). The page carries .page-uma-library and
   .page-catalogue. The five drawers (book, app, podcast, show, video) all
   carry .uma-product-drawer--book; the app, podcast, show and video ones add
   their own --app, --podcast, --show, --video. Lines that differ by drawer
   are written against that drawer's class, with the part inside it.
   ========================================================================== */
:root:where(.page-uma-library, .page-uma-marketplace) { /* used: library-marketplace */
  --hover-overlay-dark: rgba(35, 47, 75, var(--opacity-extra-low));
  --flood-color: var(--mid-charcoal);
  --button-transition-duration: 0.3s;
  --default-card-left-right-padding: 1.5rem;
  --default-card-bottom-padding: 2rem;
  --marker-size: var(--body-text-lg);
  --pill-marker-gap: var(--gap-md);
  --answer-gap: var(--gap-md);
  --mid-white-rgb: 242, 237, 234;
  --navy-40: #151C2D;
  --navy-60: #0E131E;
  --navy-60-rgb: 14, 19, 30;
  --drawer-app-card-width: 200px;
  --comment-textarea-min-height: 160px;
  --dropdown-search-width: 200px;
  --add-a-pill-min-width: 220px;
  --reviews-section-min-height: 480px;
  --heading-size-xxxxl: 3.5rem;
  --radius-squircle: 90px;
  --carouselle-card-ratio-video: 16 / 9;
  --z-confirm-overlay: 10;
  --audio-wave-bar-width: 0.1875rem;
  --audio-wave-gap: 0.1875rem;
  --audio-wave-height: 1rem;
  --audio-wave-duration: 0.9s;
  --loves-badge-inset: 10px;
  --stat-label-size: 0.72rem;
  --stat-label-letter-spacing: 0.06em;
  --stat-value-max-width: 16ch;
  --split-pill-height: 40px;
  --segment-option-min-width: calc(var(--button-size-md) * 1.4);
  --drawer-post-btn-top: 4.4rem;
  --comment-meta-gap: 2px;
  --split-pill-arrow-padding: 0.5rem;
  --split-pill-divider-on-colour: rgba(var(--bright-white-rgb), 0.35);
  --buy-dropdown-shadow: 0 4px 12px var(--shadow-overlay);
  --cover-zoom-ease: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --play-hover-scale: 1.08;
  --play-hover-duration: 0.25s;
  --cover-zoom-duration: 0.35s;
  --spotify-mask-size: 3rem;
  --sort-select-caret-room: 2.5rem;
  --drawer-cover-smaller: 260px;
  /* The drawers */
  --drawer-media-padding: var(--app-default-top-bottom-margin-xl);
  --drawer-cover-small: 280px;
  --drawer-body-padding-top: 6rem;
  --drawer-body-padding-top-small: 4rem;
  --drawer-width: 720px;
  --drawer-fade: 0.2s;
  --drawer-app-col-width: 200px;
  --app-earmark-pull: 20px;
  --app-plus-pull: 10px;
  --z-library-drawer-close: 10000020;
  /* The page */
  --hero-min-height: 80vh;
  --hero-title-width: 17ch;
  --section-heading-narrow-width: 20ch;
  --voices-picture-height: 300px;
  --frost-opacity: 0.85;
  --add-pill-divider: rgba(var(--bright-white-rgb), 0.4);
  --terms-toggle-hit-height: 24px;
  --z-video-drawer: 10000030;
  --confirm-card-dim: 0.55;
  --confirm-card-dim-video: 0.4;
  /* The cards in the rails */
  --library-card-voice: var(--carouselle-card-lg);
  --library-card-book: 300px;
  --library-card-show: 300px;
  --library-card-podcast: 300px;
  --library-card-video: var(--carouselle-card-md);
  --library-card-app: 260px;
  --drawer-card: 300px;
  --drawer-card-podcast: 340px;
  --drawer-card-video: 400px;
  --drawer-card-app: 280px;
  --drawer-screenshot-width: 300px;
  --episode-thumb-width: 280px;
  --carouselle-card-ratio-nine-by-sixteen: 9 / 16;
  --carouselle-card-315: 315px;
  --carouselle-card-420: 420px;
  --review-fade-gradient-height: 2rem;
  --review-fade-solid-height: 2rem;
  --review-fade-gradient-height-landscape: 3rem;
  --review-fade-solid-height-landscape: 1rem;
  --card-lift-scale: 1.015;
  --card-corner-btn-inset: 0.9rem;
  --play-icon-nudge: 0.125rem;
  --podcast-player-tuck: -8px;
  /* Light theme */
  --t-page-bg: var(--mid-white);
  --t-page-text: var(--mid-charcoal);
  --t-band: var(--mid-white);
  --t-band-alt: var(--new-white);
  --t-surface: var(--light-white);
  --t-card: var(--mid-white);
  --t-text-strong: var(--dark-charcoal);
  --t-text-secondary: var(--light-charcoal);
  --t-border: var(--dark-white);
  --t-divider: var(--dark-white);
  --t-selected-bg: var(--navy);
  --t-selected-text: var(--bright-white);
  --t-emphasis: var(--navy);
  --t-tab-bg: var(--dark-white);
  --t-tab-text: var(--navy);
  --t-tab-divider: var(--navy);
  --t-tab-selected-bg: var(--navy);
  --t-tab-selected-text: var(--bright-white);
  --t-drawer-bg: var(--bright-white);
  --t-drawer-body-bg: var(--bright-white);
  --t-drawer-band: var(--mid-white);
  --t-drawer-reviews-bg: var(--mid-white);
  --t-drawer-details-bg: var(--bright-white);
  --t-drawer-meet-bg: var(--bright-white);
  --t-follow-switch-off: var(--dark-white);
  --t-follow-bell: var(--navy);
  --t-drawer-close: var(--mid-charcoal);
  --t-linkish: var(--navy);
  --t-transcript-bg: var(--mid-white);
  --t-comment-line: var(--dark-white);
  --t-comment-field-bg: var(--bright-white);
  --t-comment-field-line: var(--dark-white);
  --t-comment-placeholder: var(--light-charcoal);
  --t-sort-bg: var(--bright-white);
  --t-sort-line: var(--light-charcoal);
  --t-sort-line-hover: var(--mid-charcoal);
  --t-segment-bg: var(--new-white);
  --t-segment-line: var(--dark-white);
  --t-segment-line-style: solid;
  --t-comment-card: var(--bright-white);
  --t-section-white: var(--bright-white);
  --t-field-bg: var(--bright-white);
  --t-field-text: var(--mid-charcoal);
  --t-flow-text: var(--mid-charcoal);
  --t-flow-tick: var(--bright-green);
  --t-proto-header: rgba(var(--bright-white-rgb), var(--frost-opacity));
  --t-proto-header-line: var(--dark-white);
  --t-voices-bg: var(--bright-white);
  --t-voices-mic-bg: var(--bright-white);
  --t-voices-left-bg: var(--light-white);
  --t-voices-mic-left-bg: var(--bright-white);
  --t-library-content-bg: var(--mid-white);
  --t-sticky-bg: transparent;
  --t-search-text: var(--mid-charcoal);
  --t-search-text-muted: var(--light-charcoal);
  --t-search-caret: var(--navy);
  --t-card-brand: var(--t-text-secondary);
  --t-card-subtitle: var(--t-text-secondary);
  --t-card-figure: var(--light-charcoal);
  --t-card-dim: brightness(0.7);
  --t-card-dim-strong: brightness(0.6);
  --t-chip-light-bg: var(--dark-white);
  --t-chip-light-text: var(--mid-charcoal);
  --t-carousel-arrow: var(--lightest-charcoal);
  --t-carousel-spent-opacity: 0.3;
  --t-review-card: var(--bright-white);
  --t-review-card-rgb: var(--bright-white-rgb);
  --t-home-muted: var(--light-charcoal);
  --t-home-body: var(--mid-charcoal);
  --t-drawer-text: var(--mid-charcoal);
  --t-drawer-heading: var(--mid-charcoal);
  --t-drawer-line: var(--t-emphasis);
  --t-drawer-arrow: var(--t-emphasis);
  --t-stat-label: var(--light-charcoal);
  --t-stat-value: var(--dark-charcoal);
  --t-stat-star: var(--yellow);
}
/* The comment boxes in the library's drawers have no set minimum height */
:root:where(.page-uma-library) { --field-multiline-min-height: 0px; } /* used: library-marketplace */
:root[data-theme="dark"]:where(.page-uma-library, .page-uma-marketplace) { /* used: library-marketplace */
  --bright-white: var(--mid-white);
  --bright-white-rgb: 242, 237, 234;
  --t-page-bg: var(--navy-60);
  --t-page-text: var(--bright-white);
  --t-band: var(--navy-60);
  --t-band-alt: var(--navy-40);
  --t-surface: var(--navy);
  --t-card: var(--navy);
  --t-text-strong: var(--bright-white);
  --t-text-secondary: rgba(var(--bright-white-rgb), 0.7);
  --t-border: rgba(var(--bright-white-rgb), 0.2);
  --t-divider: rgba(var(--bright-white-rgb), 0.1);
  --t-selected-bg: var(--bright-white);
  --t-selected-text: var(--navy);
  --t-emphasis: var(--bright-white);
  --t-tab-bg: rgba(var(--bright-white-rgb), 0.15);
  --t-tab-text: var(--bright-white);
  --t-tab-divider: rgba(var(--bright-white-rgb), 0.2);
  --t-tab-selected-bg: var(--bright-white);
  --t-tab-selected-text: var(--navy);
  --t-drawer-bg: var(--t-band-alt);
  --t-drawer-body-bg: transparent;
  --t-drawer-band: var(--t-band);
  --t-drawer-reviews-bg: var(--t-page-bg);
  --t-drawer-details-bg: var(--t-band-alt);
  --t-drawer-meet-bg: var(--t-band-alt);
  --t-follow-switch-off: var(--t-border);
  --t-follow-bell: var(--t-text-strong);
  --t-drawer-close: var(--t-text-strong);
  --t-linkish: var(--t-text-strong);
  --t-transcript-bg: transparent;
  --t-comment-line: var(--t-divider);
  --t-comment-field-bg: transparent;
  --t-comment-field-line: var(--t-border);
  --t-comment-placeholder: var(--t-text-strong);
  --t-sort-bg: transparent;
  --t-sort-line: var(--t-border);
  --t-sort-line-hover: var(--t-border);
  --t-segment-bg: var(--navy);
  --t-segment-line: transparent;
  --t-segment-line-style: none;
  --t-comment-card: var(--t-card);
  --t-section-white: var(--t-band);
  --t-field-bg: var(--t-card);
  --t-field-text: var(--t-page-text);
  --t-footer-stroke: var(--t-border);
  --t-flow-text: var(--t-text-strong);
  --t-flow-tick: var(--t-text-strong);
  --t-proto-header: rgba(var(--navy-60-rgb), var(--opacity-very-high));
  --t-proto-header-line: var(--t-divider);
  --t-voices-bg: var(--t-band);
  --t-voices-mic-bg: var(--t-band-alt);
  --t-voices-left-bg: transparent;
  --t-voices-mic-left-bg: transparent;
  --t-library-content-bg: var(--t-band-alt);
  --t-sticky-bg: var(--t-band-alt);
  --t-search-text: var(--t-text-strong);
  --t-search-text-muted: var(--t-text-strong);
  --t-search-caret: var(--t-text-strong);
  --t-card-brand: var(--t-text-strong);
  --t-card-subtitle: var(--t-text-strong);
  --t-card-figure: var(--t-text-strong);
  --t-card-dim: none;
  --t-card-dim-strong: none;
  --t-chip-light-bg: var(--navy);
  --t-chip-light-text: var(--bright-white);
  --t-carousel-arrow: var(--t-page-text);
  --t-carousel-spent-opacity: var(--opacity-visible);
  --t-pill-bar-bg: var(--navy);
  --t-pill-selected-bg: var(--t-selected-bg);
  --t-pill-text: var(--t-text-strong);
  --t-pill-selected-text: var(--t-selected-text);
  --t-review-card: var(--t-card);
  --t-home-muted: var(--t-text-secondary);
  --t-home-body: var(--t-text-strong);
  --t-drawer-text: var(--t-text-strong);
  --t-drawer-heading: var(--t-text-strong);
  --t-drawer-line: var(--t-text-strong);
  --t-drawer-arrow: var(--t-text-strong);
  --t-stat-label: var(--t-text-strong);
  --t-stat-value: var(--t-text-strong);
  --t-stat-star: var(--t-text-strong);
}
/* In dark, the grey text in the drawers goes up to full strength */
:root[data-theme="dark"]:where(.page-uma-library, .page-uma-marketplace) .uma-product-drawer { --t-text-secondary: var(--t-text-strong); --t-home-muted: var(--t-text-strong); } /* used: library-marketplace */
/* Controls over pictures keep full white in dark */
:root[data-theme="dark"]:where(.page-uma-library) .library-image-and-media-container { --bright-white: var(--pure-white); --bright-white-rgb: var(--white-rgb); } /* used: library-marketplace */
:root[data-theme="dark"]:where(.page-uma-library) .uma-confirm-card--overlay { --bright-white: var(--pure-white); --bright-white-rgb: var(--white-rgb); } /* used: library-marketplace */
/* The fields on the red panels stay white with charcoal text, as in light */
:root[data-theme="dark"]:where(.page-uma-library) .red-panel { --t-field-bg: var(--pure-white); --t-field-text: var(--mid-charcoal); } /* used: library-marketplace */
@media (max-width: 600px) {
  :root:where(.page-uma-library) { --drawer-section-padding-bottom: var(--app-default-top-bottom-margin-md); } /* used: library-marketplace */
}
@media (max-width: 449px) {
  :root:where(.page-uma-library) { --drawer-app-col-width: 180px; --library-card-voice: var(--carouselle-card-width-mobile); --library-card-book: 280px; --library-card-show: 280px; --library-card-podcast: 280px; --library-card-video: 300px; --library-card-app: 240px; --drawer-screenshot-width: 280px; } /* used: library-marketplace */
}
@media (max-width: 599px) {
  :root:where(.page-uma-library) { --drawer-card: 280px; --drawer-card-podcast: 280px; --drawer-card-video: 300px; --drawer-card-app: 240px; } /* used: library-marketplace */
}
@media (min-width: 600px) {
  :root:where(.page-uma-library) { --drawer-app-col-width: 240px; --library-card-voice: var(--carouselle-card-xl); --library-card-podcast: var(--carouselle-card-lg); --library-card-video: var(--carouselle-card-xxxl); --library-card-app: 280px; } /* used: library-marketplace */
}
@media (min-width: 900px) {
  :root:where(.page-uma-library, .page-uma-marketplace) { --drawer-app-col-width: 260px; --library-card-voice: var(--carouselle-card-xxl); --library-card-book: var(--carouselle-card-sm); --library-card-show: var(--carouselle-card-sm); --library-card-podcast: var(--carouselle-card-xl); --library-card-video: var(--carouselle-card-420); --library-card-app: 300px; --drawer-screenshot-width: var(--carouselle-card-sm); --episode-thumb-width: 300px; } /* used: library-marketplace */
}
@media (min-width: 1280px) {
  :root:where(.page-uma-library, .page-uma-marketplace) { --library-card-book: var(--carouselle-card-md); --library-card-show: var(--carouselle-card-md); --library-card-podcast: var(--carouselle-card-xxl); --library-card-video: var(--carouselle-card-xxxxl); --drawer-screenshot-width: var(--carouselle-card-md); --episode-thumb-width: var(--carouselle-card-md); } /* used: library-marketplace */
}
@media (max-width: 599px) {
  :root:where(.page-uma-library, .page-uma-marketplace) { --episode-thumb-width: var(--carouselle-card-md); } /* used: library-marketplace */
}
@media (max-width: 449px) {
  :root:where(.page-uma-library, .page-uma-marketplace) { --episode-thumb-width: 300px; } /* used: library-marketplace */
}

:where(.page-uma-library) .library-body { background: var(--t-page-bg); color: var(--t-page-text); overscroll-behavior: none; } /* used: library-marketplace */
/* Fields follow the theme (the red panels keep theirs white, set in the dark block above) */
:where(.page-uma-library) .field { background: var(--t-field-bg); color: var(--t-field-text); } /* used: library-marketplace */
:where(.page-uma-library) .field-action { background: var(--t-field-bg); } /* used: library-marketplace */
:where(.page-uma-library .red-panel) .field-action { color: var(--t-field-text); } /* used: library-marketplace */

/* The text under a card (the rails and the drawers use it too). These come
   first so a drawer's own heading sizes, further down, win. */
:where(.page-uma-library) .eyebrow { display: flex; justify-content: space-between; align-items: baseline; color: var(--t-text-secondary); font-size: var(--body-text-xs); line-height: var(--default-line-height-single); margin-bottom: var(--app-default-top-bottom-margin-xxs); } /* used: library-marketplace */
:where(.page-uma-library) .eyebrow:last-of-type { margin-bottom: var(--app-default-top-bottom-margin-xxs); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-library-card-body { display: flex; flex-direction: column; height: auto; padding: var(--app-default-top-bottom-margin-lg) 0 var(--app-default-top-bottom-margin-xxl); text-align: left; } /* used: library-marketplace */
:where(.page-uma-library) .card-brand { gap: var(--gap-sm); line-height: var(--default-line-height-single); color: var(--t-card-brand); margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-xxs); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-library-card-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-sm); margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-xxs); font-size: var(--body-text-xxl); font-weight: var(--font-weight-light); line-height: var(--default-line-height-x-small); color: var(--t-page-text); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-library-card-subtitle { margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-lg); font-size: var(--body-text-sm); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-small); color: var(--t-card-subtitle); text-wrap: pretty; } /* used: library-marketplace */
:where(.page-uma-library) .product-card-rating-number-on-white { flex-shrink: 0; margin-left: auto; position: relative; font-size: var(--body-text-xs); color: var(--t-card-figure); white-space: nowrap; } /* used: library-marketplace */
:where(.page-uma-library) .brand-link { position: static; color: inherit; cursor: pointer; text-decoration: none; transition: color var(--transition-fast); } /* used: library-marketplace */
:where(.page-uma-library) .brand-link:hover { color: var(--orange); text-decoration: none; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-brand-link { color: inherit; cursor: pointer; text-decoration: none; transition: color var(--transition-fast); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-brand-link:hover { color: var(--orange); text-decoration: none; } /* used: library-marketplace */
@media (max-width: 899px) {
  :where(.page-uma-library, .page-uma-marketplace) .uma-library-card-title { font-size: var(--heading-size-sm); } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-library-card-subtitle { font-size: var(--body-text-xs); } /* used: library-marketplace */
}

/* The drawers: the frame */
:where(.page-uma-library) .uma-product-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: var(--drawer-width); z-index: var(--z-product-drawer); background: var(--t-drawer-bg); color: var(--mid-charcoal); display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; visibility: hidden; transform: translateX(100%); transition: transform var(--product-drawer-slide) ease-in-out, visibility linear var(--product-drawer-slide); scrollbar-width: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer::-webkit-scrollbar { display: none; width: 0; height: 0; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-body { display: flex; flex-direction: row; align-items: flex-start; gap: var(--gap-xxl); flex-shrink: 0; padding: var(--drawer-body-padding-top) 0 0; background: var(--t-drawer-body-bg); transition: opacity var(--drawer-fade); } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-body.is-transitioning { opacity: 0; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-image-col { position: static; flex-shrink: 0; align-self: flex-start; height: auto; width: calc(var(--carouselle-card-md) + var(--drawer-media-padding)); padding: var(--app-default-top-bottom-margin-xl) 0 var(--app-default-top-bottom-margin-xxl) var(--drawer-media-padding); overflow: visible; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-content-col { flex: 1 1 0; min-width: 0; box-sizing: border-box; align-self: flex-start; padding: var(--app-default-top-bottom-margin-xl) var(--drawer-media-padding) 0 0; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-section { padding-left: 0; padding-right: 0; margin-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-section--reviews { position: relative; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-section--first { padding: 0 0 var(--drawer-section-padding-bottom); } /* used: library-marketplace */

/* The book cover in the drawer */
/* The script swaps the cover's class between the book and audiobook card
   classes, so the drawer's book cover is held by the drawer's own class */
:where(.page-uma-library) .uma-product-drawer--book .uma-library-book-card-media { width: var(--carouselle-card-md); max-width: var(--carouselle-card-md); height: auto; padding-bottom: 0; aspect-ratio: var(--carouselle-card-ratio-book); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-book-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter var(--transition-base) ease-in-out; } /* used: library-marketplace */
:where(.page-uma-library) .uma-loves-badge { position: absolute; left: var(--loves-badge-inset); bottom: var(--loves-badge-inset); width: var(--uma-md); height: var(--uma-md); box-sizing: border-box; border-radius: var(--radius-circle); background: var(--yellow); display: none; align-items: center; justify-content: center; text-align: center; font-size: var(--body-text-xs); font-weight: var(--font-weight-bold); color: var(--mid-charcoal); line-height: var(--default-line-height-x-small); padding: var(--gap-xs); z-index: 3; pointer-events: auto; } /* used: library-marketplace */

/* The drawer's title block */
:where(.page-uma-library) .drawer-eyebrow { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--body-text-md); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-x-small); color: var(--t-text-secondary); margin: 0 0 var(--app-default-top-bottom-margin-xxs); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-book-title { max-width: var(--golden-width-small); font-size: var(--heading-size-md); font-weight: var(--font-weight-light); line-height: var(--default-line-height-x-small); color: var(--t-page-text); margin: 0 0 var(--gap-xs); hyphens: auto; overflow-wrap: break-word; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-book-subtitle { max-width: var(--golden-width-small); font-size: var(--body-text-md); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-small); color: var(--t-text-secondary); margin: 0 0 var(--gap-md); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-media-hosted { margin-bottom: var(--gap-xs); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-book-accessibility-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--gap-sm); margin-top: var(--app-default-top-bottom-margin-md); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-accessibility-btn { justify-content: center; color: var(--t-linkish); border-color: var(--t-linkish); } /* used: library-marketplace */
:where(.page-uma-library) .btn-full-gap { width: 100%; gap: var(--gap-xs); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-book-blurb-primary { width: auto; max-width: none; } /* used: library-marketplace */
:where(.page-uma-library) .audio-preview-btn { white-space: nowrap; } /* used: library-marketplace */
:where(.page-uma-library) .audio-preview-wave { display: inline-flex; visibility: hidden; align-items: center; gap: var(--audio-wave-gap); height: var(--audio-wave-height); margin-left: var(--gap-sm); } /* used: library-marketplace */
:where(.page-uma-library) .audio-preview-btn.is-playing .audio-preview-wave { visibility: visible; } /* used: library-marketplace */
:where(.page-uma-library) .audio-preview-wave-bar { width: var(--audio-wave-bar-width); height: 100%; border-radius: var(--radius-pill); background: currentColor; animation-play-state: paused; } /* used: library-marketplace */
:where(.page-uma-library) .audio-preview-btn.is-playing .audio-preview-wave-bar { animation-play-state: running; } /* used: library-marketplace */
:where(.page-uma-library) .audio-preview-wave-bar-second { animation-delay: calc(var(--audio-wave-duration) * -0.25); } /* used: library-marketplace */
:where(.page-uma-library) .audio-preview-wave-bar-third { animation-delay: calc(var(--audio-wave-duration) * -0.5); } /* used: library-marketplace */
:where(.page-uma-library) .audio-preview-wave-bar-fourth { animation-delay: calc(var(--audio-wave-duration) * -0.75); } /* used: library-marketplace */

/* Below the cover: the description and the buy pills */
:where(.page-uma-library) .uma-product-drawer-below-hero { width: 100%; background: var(--t-drawer-band); padding: var(--drawer-section-padding-top) var(--drawer-media-padding); text-align: left; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-desc { margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-xl); color: var(--t-drawer-text); max-width: var(--golden-width-small); } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-actions { display: flex; flex-direction: column; gap: var(--gap-sm); margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-xl); max-width: var(--golden-width-small); } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer) .drawer-split-pill { position: relative; display: inline-flex; align-items: center; width: 100%; height: var(--split-pill-height); min-height: var(--split-pill-height); max-height: var(--split-pill-height); line-height: 1; padding-top: 0; padding-bottom: 0; border-radius: var(--radius-pill); border: var(--stroke-hairline) solid var(--t-drawer-line); background: transparent; color: var(--t-drawer-text); overflow: visible; } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer) .drawer-split-pill.is-primary { background: var(--orange); border-color: var(--orange); } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer) .drawer-split-pill-main { flex: 1 1 0%; display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--gap-sm); height: var(--split-pill-height); min-height: var(--split-pill-height); max-height: var(--split-pill-height); padding: 0 var(--btn-padding-x); border: none; border-radius: var(--radius-pill) 0 0 var(--radius-pill); background: transparent; color: var(--t-emphasis); cursor: pointer; font-family: inherit; font-size: var(--body-text-lg); line-height: 1; white-space: normal; text-align: left; transition: background var(--transition-fast) ease; } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer) .drawer-split-pill-main:hover { background: var(--hover-overlay-dark); } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer) .drawer-split-pill.is-primary .drawer-split-pill-main { color: var(--bright-white); } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer) .drawer-split-pill-arrow { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: var(--button-size-lg); height: var(--split-pill-height); min-height: var(--split-pill-height); max-height: var(--split-pill-height); padding: 0 var(--split-pill-arrow-padding); line-height: 1; border: none; border-left: var(--stroke-hairline) solid var(--t-drawer-line); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: transparent; color: var(--t-drawer-arrow); cursor: pointer; transition: background var(--transition-fast) ease; } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer) .drawer-split-pill-arrow:hover { background: var(--hover-overlay-dark); } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer) .drawer-split-pill.is-primary .drawer-split-pill-arrow { color: var(--bright-white); border-left-color: var(--split-pill-divider-on-colour); } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer) .drawer-split-pill-arrow.is-placeholder { border-left: none; cursor: default; pointer-events: none; background: transparent; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-split-pill-arrow-icon { display: inline-flex; align-items: center; justify-content: center; font-size: var(--button-icon-md); line-height: 1; margin: 0; vertical-align: middle; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-split-pill:not(:has(.drawer-split-pill-arrow:not(.is-hidden))) .drawer-split-pill-main { border-radius: var(--radius-pill); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-buy-dropdown { position: absolute; top: calc(100% + var(--gap-xs)); left: 0; right: 0; background: var(--bright-white); border: var(--stroke-hairline) solid var(--dark-white); border-radius: var(--app-default-radius-md); box-shadow: var(--buy-dropdown-shadow); z-index: 10; overflow: hidden; } /* used: library-marketplace */

/* The details strip (rating, reading time, pages, publisher) */
:where(.page-uma-library, .page-uma-marketplace) .uma-product-drawer-reviews-full { position: relative; background: var(--t-drawer-reviews-bg); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-book-product-details { display: flex; flex-flow: row; flex-shrink: 0; gap: 0; margin-bottom: var(--app-default-top-bottom-margin-md); padding: var(--app-default-top-bottom-margin-lg) 0 var(--app-default-top-bottom-margin-lg) var(--app-default-top-bottom-margin-xl); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: var(--t-drawer-details-bg); --stat-label-gap: var(--gap-md); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-book-product-details::-webkit-scrollbar { display: none; width: 0; height: 0; } /* used: library-marketplace */
:where(.page-uma-library) .ing-row { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-xs); min-width: var(--uma-xxxl); padding: var(--app-default-top-bottom-margin-lg) var(--gap-md); text-align: center; border-bottom: none; border-right: var(--stroke-hairline) solid var(--mid-mushroom); } /* used: library-marketplace */
:where(.page-uma-library) .ing-row:last-child { border-right: none; } /* used: library-marketplace */
:where(.page-uma-library) .ing-name { order: 2; max-width: 100%; margin-top: var(--stat-label-gap, var(--gap-xs)); font-size: var(--stat-label-size); font-weight: var(--font-weight-normal); letter-spacing: var(--stat-label-letter-spacing); line-height: var(--default-line-height-x-small); text-transform: uppercase; color: var(--t-stat-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* used: library-marketplace */
:where(.page-uma-library) .ing-amount { order: 1; max-width: 100%; font-size: var(--heading-size-sm); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; line-height: var(--default-line-height-x-small); color: var(--t-stat-value); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-stat-star { color: var(--t-stat-star); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-book-product-details-publisher-label { font-size: var(--body-text-xxs); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-book-product-details-publisher-val { max-width: var(--stat-value-max-width); font-size: var(--stat-label-size); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-small); text-align: center; white-space: normal; overflow-wrap: break-word; } /* used: library-marketplace */

@media (max-width: 965px) {
  :where(.page-uma-library) .uma-product-drawer-body { padding: var(--drawer-body-padding-top) var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
  :where(.page-uma-library) .uma-product-drawer-image-col { width: 40%; max-width: 400px; min-width: var(--drawer-app-card-width); padding: var(--app-default-top-bottom-margin-xl) 0 0; margin: 0; overflow: hidden; } /* used: library-marketplace */
  :where(.page-uma-library) .uma-product-drawer-content-col { display: block; padding-left: 0; padding-right: 0; padding-bottom: 0; } /* used: library-marketplace */
  :where(.page-uma-library) .uma-product-drawer-section--first { display: block; padding-bottom: 0; } /* used: library-marketplace */
  :where(.page-uma-library) .uma-product-drawer--book .uma-library-book-card-media { width: 100%; max-width: 100%; } /* used: library-marketplace */
  :where(.page-uma-library) .uma-product-drawer-below-hero { padding-left: var(--app-default-top-bottom-margin-xl); padding-right: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
}
@media (max-width: 899px) {
  :where(.page-uma-library) .uma-loves-badge { width: var(--uma-sm); height: var(--uma-sm); } /* used: library-marketplace */
  :where(.page-uma-library .uma-product-drawer) .drawer-split-pill-main { font-size: var(--body-text-sm); } /* used: library-marketplace */
  :where(.page-uma-library .uma-product-drawer) .drawer-split-pill-arrow { width: var(--button-size-md); } /* used: library-marketplace */
}
@media (max-width: 600px) {
  :where(.page-uma-library) .uma-product-drawer { max-width: 100%; } /* used: library-marketplace */
}
@media (max-width: 599px) {
  :where(.page-uma-library) .uma-product-drawer-body { flex-direction: column; gap: 0; padding-top: var(--drawer-body-padding-top-small); } /* used: library-marketplace */
  :where(.page-uma-library) .uma-product-drawer-image-col { width: calc(var(--drawer-cover-small) + var(--drawer-media-padding)); min-width: var(--drawer-cover-small); margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
  :where(.page-uma-library) .uma-product-drawer-content-col { width: 100%; margin-top: var(--app-default-top-bottom-margin-xl); padding: var(--app-default-top-bottom-margin-xl) 0 0; } /* used: library-marketplace */
  :where(.page-uma-library .uma-product-drawer) .drawer-split-pill-main { padding-left: var(--gap-md); padding-right: var(--gap-md); font-size: var(--body-text-xs); } /* used: library-marketplace */
  :where(.page-uma-library .uma-product-drawer) .drawer-split-pill-arrow { width: var(--button-size-sm); } /* used: library-marketplace */
}
@media (max-width: 499px) {
  :where(.page-uma-library) .uma-product-drawer-image-col { max-width: var(--dropdown-search-width); } /* used: library-marketplace */
}

/* The reviews in the drawers: the heading on the left, the thumbs and the sort
   menu under it, then a rail of review cards. The community score stays hidden. */
:where(.page-uma-library) .uma-product-drawer-community-rating { display: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-community-score { color: var(--mid-charcoal); } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-section-title--reviews { color: var(--t-drawer-heading); text-align: left; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .reviews-heading-short { display: none; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .reviews-controls { padding-left: 0; padding-right: 0; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-segmented-toggle { display: inline-flex; align-items: stretch; height: var(--button-size-md); box-sizing: border-box; overflow: hidden; background: var(--t-segment-bg); border: var(--stroke-hairline) var(--t-segment-line-style) var(--t-segment-line); border-radius: var(--app-default-radius-md); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-segmented-toggle-option { display: inline-flex; align-items: center; justify-content: center; min-width: var(--segment-option-min-width); height: 100%; padding: 0 var(--gap-md); border: 0; border-radius: 0; background: transparent; color: var(--t-linkish); cursor: pointer; font-size: var(--body-text-md); transition: background var(--transition-fast) ease, color var(--transition-fast) ease; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-segmented-toggle-option.is-active { background: var(--t-selected-bg); color: var(--t-selected-text); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-segmented-toggle-icon { font-size: var(--button-icon-lg); line-height: 1; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .dropdown-caret { right: calc((var(--field-height) - var(--button-icon-md)) / 2); font-size: var(--button-icon-md); color: var(--t-text-secondary); } /* used: library-marketplace */
:where(.page-uma-library) .default-carousel-product-drawers { gap: var(--gap-regular); padding: var(--app-default-top-bottom-margin-xl) var(--drawer-media-padding) var(--app-default-top-bottom-margin-md); overflow-y: visible; scroll-padding-left: var(--drawer-media-padding); scroll-padding-right: var(--drawer-media-padding); } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer-reviews-full, .page-uma-marketplace .uma-product-drawer-reviews-full) .review-card { flex: 0 0 var(--carouselle-card-xs); } /* used: library-marketplace */
@media (min-width: 450px) {
  :where(.page-uma-library .uma-product-drawer-reviews-full, .page-uma-marketplace .uma-product-drawer-reviews-full) .review-card { flex-basis: var(--carouselle-card-315); } /* used: library-marketplace */
}
@media (min-width: 600px) {
  :where(.page-uma-library .uma-product-drawer-reviews-full, .page-uma-marketplace .uma-product-drawer-reviews-full) .review-card { flex-basis: var(--carouselle-card-xxxl); } /* used: library-marketplace */
}
@media (min-width: 1000px) {
  :where(.page-uma-library .uma-product-drawer-reviews-full, .page-uma-marketplace .uma-product-drawer-reviews-full) .review-card { flex-basis: var(--carouselle-card-420); } /* used: library-marketplace */
}
/* In dark the fade at the foot of a long review stays light, as on her pages */
:root[data-theme="dark"]:where(.page-uma-library, .page-uma-marketplace) .review-card-fade { --t-review-card: var(--mid-white); --t-review-card-rgb: var(--mid-white-rgb); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .review-card-quote { font-weight: var(--font-weight-normal); line-height: var(--default-line-height-x-large); color: var(--t-drawer-text); } /* used: library-marketplace */
@media (max-width: 599px) {
  :where(.page-uma-library, .page-uma-marketplace) .reviews-heading-full { display: none; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .reviews-heading-short { display: inline; } /* used: library-marketplace */
}

/* The Post review button sits top right of the reviews band */
:where(.page-uma-library) .uma-drawer-reviews-header { position: absolute; top: var(--drawer-post-btn-top); right: var(--app-default-top-bottom-margin-xl); z-index: 2; display: flex; justify-content: flex-end; align-items: baseline; margin: 0; padding: 0; background: transparent; } /* used: library-marketplace */

/* The post a review form: it takes the place of the reviews while it is open,
   with the X top right and the stars centred */
:where(.page-uma-library, .page-uma-marketplace) .uma-product-drawer-panel-write { position: static; padding-left: 0; padding-right: 0; scroll-margin-top: 0; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-panel-write.is-active { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: var(--app-default-top-bottom-margin-md); width: 100%; max-width: none; box-sizing: border-box; margin: 0 auto; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-section--reviews:has(.uma-product-drawer-panel-write.is-active) .uma-reviews-inset { display: none; } /* used: library-marketplace */
:where(.page-uma-library) .review-form-close { position: absolute; top: 0; right: var(--app-default-top-bottom-margin-xl); padding: 0; } /* used: library-marketplace */
:where(.page-uma-library) .uma-drawer-write-heading { margin: 0 0 var(--gap-md); color: var(--t-linkish); text-align: start; } /* used: library-marketplace */
:where(.page-uma-library) .uma-chrome-feedback-rating-block { margin-bottom: var(--app-default-top-bottom-margin-md); } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer-panel-write:not(.is-active)) .uma-drawer-review-actions { display: none; } /* used: library-marketplace */
:root[data-theme="dark"]:where(.page-uma-library) .uma-drawer-review-cancel { color: var(--t-text-strong); } /* used: library-marketplace */
:root[data-theme="dark"]:where(.page-uma-library, .page-uma-marketplace, .page-statistics) .uma-filter-drawer-subheader-left { background: var(--t-card); } /* used: library-marketplace */
/* While the form is open its parts sit in from the drawer edges, and the
   heading and stars are centred */
:where(.page-uma-library .uma-product-drawer-panel-write.is-active) .uma-drawer-write-heading { margin: 0 var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-md); padding: 0 var(--button-size-md); text-align: center; } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer-panel-write.is-active) .uma-chrome-feedback-rating-block { width: auto; margin-left: max(var(--app-default-top-bottom-margin-xl), calc((100% - var(--golden-width-small)) / 2)); margin-right: max(var(--app-default-top-bottom-margin-xl), calc((100% - var(--golden-width-small)) / 2)); } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer-panel-write.is-active) .uma-chrome-feedback-field { margin-left: var(--app-default-top-bottom-margin-xl); margin-right: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer-panel-write.is-active) .uma-drawer-review-actions { width: auto; margin-left: var(--app-default-top-bottom-margin-xl); margin-right: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-uma-library) .uma-chrome-feedback-rating-summary { color: var(--mid-charcoal); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-chrome-feedback-rating-row { gap: var(--gap-xxs); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-chrome-feedback-star-svg { display: block; width: 85%; height: 85%; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-chrome-feedback-heart.is-filled .uma-chrome-feedback-star-svg { color: var(--yellow); } /* used: library-marketplace */
/* The icon stars (podcast form) stay mushroom until chosen. Two classes to
   outweigh UMA's .uma-chrome-feedback-heart i */
:where(.page-uma-library .uma-chrome-feedback-heart:not(.is-filled)) .rating-star-icon.ph-star { color: var(--mid-mushroom); } /* used: library-marketplace */

/* The post a review form in the drawers */
:where(.page-uma-library) .drawer-review-submit { flex: 1 1 0; width: 100%; max-width: var(--golden-width-small); background: var(--orange); border-color: var(--orange); color: var(--bright-white); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-review-submit:hover:not(:disabled) { filter: brightness(0.95); background: var(--orange-dark); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-review-submit:disabled { cursor: not-allowed; background: var(--dark-white); color: var(--light-charcoal); border-color: var(--dark-white); opacity: 1; } /* used: library-marketplace */

/* Meet the author (and the host, in the podcast, show and video drawers) */
:where(.page-uma-library) .drawer-meet-author { width: 100%; background: var(--t-drawer-meet-bg); padding-left: var(--drawer-media-padding); padding-right: var(--drawer-media-padding); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-podcast-meet { padding-top: var(--app-default-top-bottom-margin-xxl); padding-bottom: var(--app-default-top-bottom-margin-xxl); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-show-meet { padding-top: var(--app-default-top-bottom-margin-xl); padding-bottom: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-body { display: flex; flex-direction: row; align-items: flex-start; gap: var(--gap-lg); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-video { position: relative; flex-shrink: 0; width: 100%; max-width: var(--carouselle-card-xxs); aspect-ratio: var(--carouselle-card-ratio-nine-by-sixteen); border-radius: var(--app-default-radius-lg); overflow: hidden; background: var(--dark-white); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: filter var(--transition-base) ease-in-out; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-video:hover .drawer-meet-author-thumb { filter: brightness(0.7); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-video:focus-within .drawer-meet-author-thumb { filter: brightness(0.7); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-video:has(.uma-wishlist-earmark:hover) .drawer-meet-author-thumb { filter: none; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-earmark { z-index: 4; opacity: 0; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-video:hover .drawer-meet-author-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-video:focus-within .drawer-meet-author-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-earmark[aria-pressed="true"] { opacity: 1; } /* used: library-marketplace */
/* The round play button over a video picture: a white circle with the arrow cut out */
:where(.page-uma-library, .page-uma-marketplace) .card-circular-play-btn-on-dark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: var(--button-size-xxl); height: var(--button-size-xxl); padding: 0; border: none; border-radius: var(--radius-circle); cursor: pointer; opacity: 0; pointer-events: none; background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'><path fill='white' fill-rule='evenodd' d='M180,0A180,180,0,1,0,360,180,180,180,0,0,0,180,0ZM292,180a15.74,15.74,0,0,1-7.6,13.51L140.32,281.65a16,16,0,0,1-16.2,.3A15.86,15.86,0,0,1,116,268.13V91.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L284.4,166.49A15.74,15.74,0,0,1,292,180Z'/></svg>") center / calc(100% + var(--stroke-thick)) calc(100% + var(--stroke-thick)) no-repeat; backdrop-filter: blur(var(--blur-md)) brightness(var(--opacity-moderate)); transition: opacity var(--transition-fast), filter var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .card-icon-hidden { display: none; } /* used: library-marketplace */
/* The play buttons in the drawers are always shown */
:where(.page-uma-library) .drawer-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: var(--button-size-xxl); height: var(--button-size-xxl); padding: 0; border: none; border-radius: var(--radius-circle); cursor: pointer; opacity: 1; pointer-events: auto; background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='white' fill-rule='evenodd' d='M50 0a50 50 0 1 0 0 100A50 50 0 0 0 50 0zM39 30l30 20-30 20z'/></svg>") center / calc(100% + var(--stroke-thick)) calc(100% + var(--stroke-thick)) no-repeat; backdrop-filter: blur(var(--blur-md)) brightness(var(--opacity-moderate)); mask-repeat: no-repeat; mask-size: 100% 100%; transition: transform var(--play-hover-duration); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-play-btn:hover { transform: translate(-50%, -50%) scale(var(--play-hover-scale)); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-play { display: inline-flex; align-items: center; justify-content: center; color: transparent; font-size: 0; isolation: isolate; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-video.is-playing .drawer-meet-author-play { display: none; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-pause { position: absolute; top: var(--gap-md); right: var(--gap-md); z-index: 4; width: var(--button-size-md); height: var(--button-size-md); padding: 0; border: none; border-radius: var(--radius-circle); background: var(--bright-white); color: var(--mid-charcoal); font-size: var(--button-icon-md); cursor: pointer; display: none; align-items: center; justify-content: center; transition: transform var(--play-hover-duration); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-pause:hover { transform: scale(var(--play-hover-scale)); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-video.is-playing .drawer-meet-author-pause { display: inline-flex; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-info { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-sm); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-title { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--body-text-xs); font-weight: inherit; line-height: var(--default-line-height-single); color: var(--t-text-secondary); text-align: left; margin: 0 0 var(--app-default-top-bottom-margin-xxs); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-name { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-sm); font-size: var(--heading-size-md); font-weight: var(--font-weight-light); line-height: var(--default-line-height-x-small); color: var(--t-drawer-heading); margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-xxs); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-author-role { display: flex; flex-wrap: wrap; gap: var(--gap-xs); margin: 0 0 var(--gap-sm); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-meet-follow-note { margin: 0 0 var(--app-default-top-bottom-margin-sm); font-size: var(--body-text-xs); color: var(--t-drawer-text); line-height: var(--default-line-height-small); } /* used: library-marketplace */
:where(.page-uma-library) .uma-follow-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); width: 100%; max-width: var(--golden-width-small); align-self: flex-start; } /* used: library-marketplace */
:where(.page-uma-library) .uma-follow-label { font-size: var(--body-text-sm); color: var(--t-drawer-text); line-height: var(--default-line-height-medium); } /* used: library-marketplace */
/* The follow switch: a bell that slides with the thumb, yellow when on */
:where(.page-uma-library) .switch--follow input:not(:checked) ~ .switch-track { background: var(--t-follow-switch-off); } /* used: library-marketplace */
:where(.page-uma-library) .switch--follow input:checked ~ .switch-track { background: var(--yellow); } /* used: library-marketplace */
:where(.page-uma-library) .switch--follow .switch-icon { color: var(--t-follow-bell); font-size: var(--button-icon-sm); width: var(--switch-mini-thumb); height: var(--switch-mini-thumb); top: 50%; left: auto; right: var(--switch-thumb-inset); transform: translateY(-50%); } /* used: library-marketplace */
:where(.page-uma-library) .switch--follow input:checked ~ .switch-track .switch-icon { color: var(--bright-white); top: 50%; left: var(--switch-thumb-inset); right: auto; } /* used: library-marketplace */
/* More from the author: the rail of cards at the foot of a drawer */
:where(.page-uma-library) .uma-cross-sell { width: 100%; box-sizing: border-box; margin: 0; padding: var(--drawer-section-padding-top) 0 var(--drawer-section-padding-bottom); border-top: none; background: var(--t-band); } /* used: library-marketplace */
:where(.page-uma-library) .uma-cross-sell-label { display: block; text-align: left; font-size: var(--heading-size-lg); font-weight: var(--font-weight-light); color: var(--t-drawer-heading); margin: 0 0 var(--app-default-top-bottom-margin-xxl); padding: var(--app-default-top-bottom-margin-xl) var(--drawer-media-padding) 0; } /* used: library-marketplace */
:where(.page-uma-library) .uma-cross-sell-rail { display: flex; flex-flow: row; justify-content: flex-start; gap: var(--gap-regular); width: 100%; height: auto; padding: 0 0 var(--gap-md); overflow-x: auto; overflow-y: visible; scroll-snap-type: x; scroll-padding-left: var(--drawer-media-padding); scroll-padding-right: var(--drawer-media-padding); scrollbar-width: none; } /* used: library-marketplace */
:where(.page-uma-library .uma-cross-sell-rail) .library-item-default-card:first-child { margin-left: var(--drawer-media-padding); } /* used: library-marketplace */
:where(.page-uma-library .uma-cross-sell-rail) .library-item-default-card:last-child { margin-right: var(--drawer-media-padding); } /* used: library-marketplace */
:where(.page-uma-library) .uma-cross-sell-rail::-webkit-scrollbar { display: none; width: 0; height: 0; } /* used: library-marketplace */
:where(.page-uma-library) .uma-cross-sell--app { display: none; } /* used: library-marketplace */

/* The drawer's close X: a plain X, no circle (the marketplace's drawers too) */
:where(.page-uma-library, .page-uma-marketplace) .drawer-close-plain { top: var(--gap-regular); right: var(--gap-regular); width: auto; height: var(--button-size-sm); aspect-ratio: auto; flex-shrink: 0; border-radius: 0; color: var(--mid-charcoal); font-size: var(--button-icon-md); line-height: var(--default-line-height-single); z-index: var(--z-library-drawer-close); } /* used: library-marketplace */
/* Two classes, to outweigh the button size rule for icons (.btn-md i) */
:where(.page-uma-library, .page-uma-marketplace) .drawer-close-plain .drawer-close-plain-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 0; font-size: var(--heading-size-xl); line-height: var(--default-line-height-single); color: var(--t-drawer-close); } /* used: library-marketplace */
/* Over the podcast player the X is white; over the video it sits in a white circle; it hides while a review is being written */
:where(.page-uma-library) .library-body:has(.uma-product-drawer--podcast.is-open) .drawer-close-plain { color: var(--bright-white); } /* used: library-marketplace */
:where(.page-uma-library) .library-body:has(.uma-product-drawer--podcast.is-open) .drawer-close-plain:hover { background: transparent; } /* used: library-marketplace */
:where(.page-uma-library) .library-body:has(.uma-product-drawer--podcast.is-open) .drawer-close-plain-icon { color: var(--bright-white); } /* used: library-marketplace */
:where(.page-uma-library) .library-body:has(.uma-product-drawer--video.is-open) .drawer-close-plain { background: var(--bright-white); border-radius: var(--radius-circle); aspect-ratio: 1 / 1; width: var(--button-size-md); height: var(--button-size-md); } /* used: library-marketplace */
:where(.page-uma-library) .library-body:has(.uma-product-drawer--video.is-open) .drawer-close-plain-icon { color: var(--navy); font-size: var(--button-icon-md); } /* used: library-marketplace */
:where(.page-uma-library) .library-body:has(.uma-product-drawer.is-open .uma-product-drawer-panel-write.is-active) .drawer-close-plain { visibility: hidden; } /* used: library-marketplace */

/* The app drawer */
:where(.page-uma-library) .uma-product-drawer--app .uma-product-drawer-image-col { width: var(--drawer-app-col-width); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-app-logo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: filter var(--transition-fast); } /* used: library-marketplace */
:where(.page-uma-library) .card-earmark-inset:not(.uma-wishlist-earmark--added) { top: calc(var(--app-default-top-bottom-margin-xxxl) - var(--app-earmark-pull)); right: calc(var(--app-default-top-bottom-margin-xxxl) - var(--app-earmark-pull)); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-app-good-for { justify-content: flex-start; margin-bottom: var(--app-default-top-bottom-margin-lg); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-app-store-pill-wrap { display: flex; margin-top: var(--gap-sm); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-app-store-pill { font-size: var(--body-text-sm); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-app-store-main { padding-left: var(--gap-md); padding-right: var(--gap-md); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-app-store-main:hover { filter: brightness(0.95); background: var(--orange-dark); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-app-store-arrow:hover { filter: brightness(0.95); background: var(--orange-dark); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-app-store-arrow-icon { font-size: var(--button-icon-sm); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-split-pill-icon { flex-shrink: 0; width: var(--button-size-md); display: inline-flex; align-items: center; justify-content: center; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-app-store-icon { font-size: var(--button-icon-md); line-height: var(--default-line-height-single); } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer) .drawer-split-pill-label { flex: 1 1 0%; display: block; align-items: center; justify-content: flex-start; gap: 0; overflow: visible; font-size: inherit; text-align: left; } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer) .drawer-split-pill-label-text { flex: 1 1 0%; white-space: normal; overflow: visible; text-overflow: clip; font-size: var(--body-text-lg); text-align: left; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-app-stores-table { display: flex; flex-flow: row; flex-shrink: 0; gap: 0; width: 100%; margin: 0 0 var(--app-default-top-bottom-margin-md); padding: var(--app-default-top-bottom-margin-lg) 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-app-stores-table::-webkit-scrollbar { display: none; width: 0; height: 0; } /* used: library-marketplace */
@media (max-width: 899px) {
  :where(.page-uma-library .uma-product-drawer) .drawer-split-pill-label-text { font-size: var(--body-text-sm); } /* used: library-marketplace */
}

/* The podcast and video drawers (.uma-product-drawer--media): the player
   runs full width across the top, the details sit on the band below it */
:where(.page-uma-library) .drawer-podcast-player-full { position: relative; flex-shrink: 0; width: 100%; aspect-ratio: var(--carouselle-card-ratio-video); overflow: hidden; border-radius: 0; background: var(--platform-spotify); } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-video-full { position: relative; flex-shrink: 0; width: 100%; aspect-ratio: var(--carouselle-card-ratio-video); overflow: hidden; border-radius: 0; background: var(--platform-spotify); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-podcast-player-full:has(iframe[src*="podcasts.apple.com"]) { background: var(--platform-apple); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-podcast-player-full.is-platform-apple { background: var(--platform-apple); } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-video-full:has(iframe[src*="podcasts.apple.com"]) { background: var(--platform-apple); } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-video-full.is-platform-apple { background: var(--platform-apple); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-media-embed { position: absolute; inset: auto 0 0; display: block; width: 100%; height: 100%; border: none; border-radius: 0; background: var(--platform-spotify); } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--video .drawer-media-embed { z-index: 2; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-media-embed[src*="spotify"] { height: var(--platform-spotify-height); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-media-embed[src*="podcasts.apple.com"] { height: var(--platform-apple-height); background: var(--platform-apple); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-media-embed[src*="youtube.com"] { top: 0; bottom: 0; height: 100%; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-media-embed[src*="youtu.be"] { top: 0; bottom: 0; height: 100%; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-media-embed[src*="youtube-nocookie.com"] { top: 0; bottom: 0; height: 100%; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-media-embed[src*="vimeo.com"] { top: 0; bottom: 0; height: 100%; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-podcast-spotify-mask { position: absolute; top: 0; right: 0; z-index: 2; width: var(--spotify-mask-size); height: var(--spotify-mask-size); background: var(--platform-spotify); pointer-events: none; display: none; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-video-thumbnail { width: 100%; height: 100%; object-fit: cover; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-earmark-left { top: 0; left: 0; right: auto; border-radius: 0; } /* used: library-marketplace */
:where(.page-uma-library) .earmark-corner-left { transform: scaleX(-1); } /* used: library-marketplace */
/* The script rewrites the heart's class when it fills, so the heart is placed through the earmark */
:where(.page-uma-library) .drawer-earmark-left .uma-wishlist-earmark-icon { left: var(--wand-icon-right); right: auto; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--media .uma-product-drawer-body { align-items: flex-start; gap: var(--gap-xxl); padding: 0; background: var(--t-band); border: none; box-shadow: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--media .uma-product-drawer-content-col { flex: 1 1 auto; align-self: flex-start; width: 100%; max-width: 100%; margin: 0; padding: 0; background: var(--t-band); border: none; box-shadow: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--media .uma-product-drawer-section--first { margin: 0; padding: var(--app-default-top-bottom-margin-xl) var(--drawer-media-padding) 0; background: var(--t-band); border: none; box-shadow: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--media .uma-product-drawer-actions { margin-top: var(--app-default-top-bottom-margin-xl); margin-bottom: var(--app-default-top-bottom-margin-xxxl); } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--media .uma-product-drawer-below-hero { margin: 0; padding: 0 var(--drawer-media-padding) var(--app-default-top-bottom-margin-xl); background: var(--t-band); border: none; box-shadow: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--media .drawer-book-product-details { background: var(--t-band-alt); --stat-label-gap: var(--gap-xs); } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--media .uma-reviews-inset { padding-left: 0; padding-right: 0; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--media .uma-product-drawer-section--reviews { margin: 0; padding-top: var(--app-default-top-bottom-margin-xxxl); padding-bottom: var(--app-default-top-bottom-margin-xxxl); } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--media .uma-product-drawer-desc { margin: var(--gap-md) 0 var(--app-default-top-bottom-margin-md); } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--media .uma-product-drawer-section-title--reviews { display: flex; align-items: center; min-height: var(--button-size-lg); padding-left: var(--app-default-top-bottom-margin-xl); padding-right: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--media .reviews-controls { position: static; margin: var(--gap-sm) 0 var(--app-default-top-bottom-margin-lg); padding: 0 var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--media .uma-drawer-reviews-switch { display: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--media .uma-product-drawer-reviews-carousel { flex-direction: column; gap: var(--gap-lg); max-height: var(--feedback-panel-min-height); overflow-x: hidden; overflow-y: auto; padding: var(--app-default-top-bottom-margin-xxxl) var(--app-default-top-bottom-margin-xl); scroll-padding-top: var(--app-default-top-bottom-margin-xxxl); scroll-padding-bottom: var(--app-default-top-bottom-margin-xxxl); scroll-snap-type: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--media .uma-drawer-reviews-header { display: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--media .uma-drawer-post-btn { display: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--media .uma-product-drawer-panel-write { display: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--video .uma-product-drawer-panel-write { flex-direction: column; align-items: stretch; gap: var(--app-default-top-bottom-margin-md); width: 100%; max-width: 100%; margin: var(--gap-lg) 0 0; } /* used: library-marketplace */
/* The podcast and video comments: the words in a white card, the name and date under it */
:where(.page-uma-library) .drawer-comment-card { flex: 0 0 auto; flex-direction: column-reverse; align-self: stretch; width: 100%; min-width: 0; max-width: 100%; height: auto; aspect-ratio: auto; padding: 0; background: transparent; border-radius: 0; overflow: visible; scroll-snap-align: none; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-comment-card:last-child { margin-right: var(--drawer-media-padding); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-comment-band { display: flex; flex-direction: column; gap: var(--comment-meta-gap); margin-top: 0; padding: var(--link-line-height) var(--gap-md) 0; background: transparent; color: var(--mid-charcoal); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-comment-meta { display: flex; flex-direction: column; gap: var(--comment-meta-gap); color: var(--mid-charcoal); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-comment-name { display: block; font-size: var(--body-text-sm); font-weight: var(--font-weight-medium); color: var(--t-drawer-text); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-comment-date { display: block; color: var(--t-drawer-text); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-comment-body { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: var(--earmark-size); padding: var(--gap-lg) var(--gap-lg) var(--gap-md); background: var(--t-comment-card); border-radius: var(--app-default-radius-lg); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-comment-quote { margin: 0; font-family: 'Merriweather', serif; font-size: var(--body-text-md); font-style: italic; line-height: normal; color: var(--t-drawer-text); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-comment-quote:last-of-type { margin-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--podcast .drawer-media-listen-pill { gap: 0; margin-bottom: var(--app-default-top-bottom-margin-xxxl); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-media-listen-main:hover { background: var(--orange-dark); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-media-listen-arrow:hover { background: var(--orange-dark); } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--podcast .drawer-media-listen-main { margin: 0; border-right: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--podcast .drawer-media-listen-arrow { margin: 0; border-radius: 0; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-media-listen-icon { font-size: var(--button-icon-xxl); line-height: var(--default-line-height-single); } /* used: library-marketplace */
/* View transcript */
:where(.page-uma-library) .btn-linkish { display: inline-flex; align-items: center; gap: var(--gap-xs); margin: 0 0 var(--app-default-top-bottom-margin-xl); padding: 0; background: transparent; border: none; color: var(--t-linkish); font-family: inherit; font-size: var(--body-text-sm); font-weight: var(--font-weight-medium); text-decoration: none; cursor: pointer; } /* used: library-marketplace */
:where(.page-uma-library) .btn-linkish:hover { color: var(--orange); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-transcript-panel { background: var(--t-transcript-bg); border-radius: var(--app-default-radius-md); padding: 0 var(--gap-md); margin: 0 0 var(--gap-md); max-height: 0; overflow: hidden; transition: max-height var(--cover-zoom-duration), padding var(--cover-zoom-duration), margin var(--cover-zoom-duration); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-transcript-panel.is-open { max-height: var(--accordion-open-max-height); padding: var(--gap-md); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-transcript-text { margin: 0 0 var(--app-default-top-bottom-margin-sm); font-size: var(--body-text-sm); line-height: var(--default-line-height-medium); color: var(--t-drawer-text); white-space: pre-wrap; } /* used: library-marketplace */
/* Join the conversation: the comment box under the podcast and video comments */
:where(.page-uma-library) .uma-comment-input-area { display: flex; flex-direction: column; gap: var(--gap-sm); width: 100%; box-sizing: border-box; margin: var(--app-default-top-bottom-margin-xxxxl) 0 var(--gap-md); padding: var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-xl) var(--gap-lg); background: transparent; border-top: var(--stroke-hairline) solid var(--t-comment-line); } /* used: library-marketplace */
:where(.page-uma-library) .uma-comment-input-label { color: var(--t-drawer-text); } /* used: library-marketplace */
:where(.page-uma-library) .uma-comment-textarea { width: 100%; box-sizing: border-box; min-height: var(--comment-textarea-min-height); padding: var(--gap-md); resize: vertical; background: var(--t-comment-field-bg); border: var(--stroke-hairline) solid var(--t-comment-field-line); border-radius: var(--app-default-radius-md); color: var(--t-drawer-text); font-family: inherit; font-size: var(--body-text-md); line-height: var(--default-line-height-medium); } /* used: library-marketplace */
:where(.page-uma-library) .uma-comment-textarea::placeholder { color: var(--t-comment-placeholder); } /* used: library-marketplace */
:where(.page-uma-library) .uma-comment-input-actions { display: flex; justify-content: flex-start; } /* used: library-marketplace */
:where(.page-uma-library) .uma-comment-submit:disabled { background: var(--t-border); border-color: var(--t-border); color: var(--t-text-secondary); cursor: not-allowed; opacity: 1; filter: none; } /* used: library-marketplace */

/* The show drawer */
:where(.page-uma-library) .uma-product-drawer--show .uma-product-drawer-image-col { overflow: visible; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-show-card { --library-card-show: var(--drawer-card); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-show-artwork { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--app-default-radius-lg); transition: filter var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-show-artwork[src=""] { display: none; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-show-follow-note { margin: var(--gap-md) 0 var(--app-default-top-bottom-margin-sm); font-size: var(--body-text-sm); line-height: var(--default-line-height-medium); color: var(--t-drawer-text); } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--show .uma-product-drawer-below-hero { margin-bottom: 0; padding-left: 0; padding-right: 0; padding-bottom: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer--show .uma-product-drawer-desc { padding-left: var(--app-default-top-bottom-margin-xl); padding-right: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-show-episodes-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-md); margin: var(--app-default-top-bottom-margin-lg) 0 var(--app-default-top-bottom-margin-md); padding: 0 var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-show-episodes-title-group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--app-default-top-bottom-margin-md); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-show-episodes-title { margin: 0; font-size: var(--heading-size-md); font-weight: var(--font-weight-light); color: var(--t-drawer-heading); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-sort-select { appearance: none; width: 100%; height: var(--split-pill-height); padding-left: var(--gap-lg); padding-right: var(--sort-select-caret-room); background: var(--t-sort-bg); border: var(--stroke-hairline) solid var(--t-sort-line); border-radius: var(--btn-radius); color: var(--t-drawer-text); cursor: pointer; font-family: inherit; font-size: var(--body-text-xs); transition: border-color var(--transition-fast); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-sort-select:hover { border-color: var(--t-sort-line-hover); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-show-episodes-list { display: flex; flex-direction: column; gap: var(--gap-md); margin-bottom: 0; padding: 0 var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-show-episodes-list--podcasts { gap: var(--gap-regular); } /* used: library-marketplace */
@media (max-width: 965px) {
  :where(.page-uma-library) .uma-product-drawer--podcast .uma-product-drawer-content-col { flex: 1 1 0%; } /* used: library-marketplace */
}
@media (max-width: 599px) {
  :where(.page-uma-library) .uma-product-drawer--media .uma-product-drawer-body { align-items: stretch; } /* used: library-marketplace */
  :where(.page-uma-library) .uma-product-drawer--media .uma-product-drawer-content-col { margin-top: var(--app-default-top-bottom-margin-xl); padding-top: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
  :where(.page-uma-library) .drawer-media-embed[src*="spotify"] ~ .drawer-podcast-spotify-mask { display: block; } /* used: library-marketplace */
  :where(.page-uma-library) .drawer-show-episodes-list { flex-direction: row; gap: var(--gap-regular); padding-right: 0; overflow-x: auto; overflow-y: visible; scroll-padding-left: var(--default-left-right-mob-body-padding); scroll-snap-type: x mandatory; scrollbar-width: none; } /* used: library-marketplace */
  :where(.page-uma-library) .drawer-show-episodes-list::-webkit-scrollbar { display: none; } /* used: library-marketplace */
  :where(.page-uma-library) .drawer-show-episodes-list--podcasts { flex-direction: column; padding-right: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
}
@media (max-width: 449px) {
  :where(.page-uma-library) .uma-product-drawer--show .uma-product-drawer-image-col { width: calc(var(--drawer-cover-smaller) + var(--drawer-media-padding)); min-width: var(--drawer-cover-smaller); } /* used: library-marketplace */
}

@media (max-width: 700px) {
  :where(.page-uma-library) .drawer-meet-author-body { flex-direction: column; align-items: flex-start; } /* used: library-marketplace */
  :where(.page-uma-library) .drawer-meet-author-video { align-self: flex-start; order: 1; } /* used: library-marketplace */
  :where(.page-uma-library) .drawer-meet-author-info { align-items: flex-start; width: 100%; order: 2; } /* used: library-marketplace */
}

/* The page: the temporary header and sidebar, the hero. The marketplace
   shares the sidebar, the hero's frame and the voices band. */
:where(.page-uma-library, .page-uma-marketplace, .page-uma-discounts) .proto-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-width); background: var(--navy); z-index: 99; } /* used: library-marketplace */
:where(.page-uma-library) .proto-header { position: relative; top: 0; left: 0; right: 0; height: var(--fixed-header-height); background: var(--t-proto-header); backdrop-filter: blur(var(--blur-lg)); border-bottom: var(--stroke-hairline) solid var(--t-proto-header-line); z-index: 99; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-hero { position: relative; width: 100%; min-height: var(--hero-min-height); display: flex; align-items: center; justify-content: center; background: var(--navy-40); padding-top: var(--app-default-top-bottom-margin-xxxxl); padding-bottom: var(--app-default-top-bottom-margin-xxxxxl); } /* used: library-marketplace */
:where(.page-uma-library) .uma-hero::before { content: ""; position: absolute; inset: 0; background-image: url("https://firebasestorage.googleapis.com/v0/b/more-human-uma.firebasestorage.app/o/bookstore.jpeg?alt=media&token=a13a11ea-c564-495f-8419-bc77b727ead4"); background-size: cover; background-position: center center; filter: brightness(0.3) saturate(0.9); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-hero-inner { position: relative; z-index: 1; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-hero-title { max-width: var(--hero-title-width); margin-left: auto; margin-right: auto; color: rgba(var(--mid-white-rgb), var(--opacity-near-full)); font-size: var(--heading-size-xxxxl); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-x-small); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-header-intro { max-width: var(--max-content-width-golden-section-large); margin-left: auto; margin-right: auto; font-size: var(--body-text-xl); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-hero-intro { color: rgba(var(--mid-white-rgb), var(--opacity-very-high)); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-header-intro:last-of-type { margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .hero-button-below-intro { margin-top: var(--app-default-top-bottom-margin-sm); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .btn-cta { min-width: var(--carouselle-card-xs); } /* used: library-marketplace */

/* The voices bands: text on one side, a picture on the other */
:where(.page-uma-library, .page-uma-marketplace) .uma-library-voices { display: flex; flex-direction: row; align-items: stretch; background: var(--t-voices-bg); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-voices-mic { background: var(--t-voices-mic-bg); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-library-voices-left { flex-shrink: 0; max-width: 100%; background: var(--t-voices-left-bg); padding: var(--app-default-top-bottom-margin-xxxxl) var(--default-left-right-desk-body-padding) var(--app-default-top-bottom-margin-xxxxxl); } /* used: library-marketplace */
:where(.page-uma-library) .voices-left-mic { background: var(--t-voices-mic-left-bg); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-library-voices-right { flex: 1 1 0%; overflow: hidden; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-voices-mic-image { background: url("https://firebasestorage.googleapis.com/v0/b/more-human-uma.firebasestorage.app/o/colour_coded_books.jpeg?alt=media&token=fdd25d65-afb7-4ae0-9450-e3d6fcd930c5") center center / cover no-repeat; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .text-column-large { max-width: var(--max-content-width-golden-section-large); width: 100%; } /* used: library-marketplace */
:where(.page-uma-library) .text-column-centred { margin-left: auto; margin-right: auto; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-library-header-emoji { font-size: var(--ing-circle-size); line-height: var(--default-line-height-single); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .voices-emoji { margin-bottom: var(--app-default-top-bottom-margin-lg); text-align: inherit; } /* used: library-marketplace */
:where(.page-uma-library) .voices-h2 { font-size: var(--heading-size-xl); margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .panel-paragraph-text { font-size: var(--body-text-lg); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-affiliate-link { color: inherit; text-decoration: none; border-bottom: none; transition: color var(--transition-fast); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-affiliate-link:hover { color: var(--orange); text-decoration: none; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-affiliate-link-name { font-weight: var(--font-weight-medium); } /* used: library-marketplace */
/* Bibliosmia (and the marketplace's Self-care): a dictionary entry over a
   photograph of old books */
:where(.page-uma-library, .page-uma-marketplace) .uma-bibliosmia-panel { position: relative; display: flex; flex-direction: column; overflow: visible; border-radius: 0; background: url("https://images.unsplash.com/photo-1615800098799-0ccb261b1f92?q=80&w=1610&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") center center / cover no-repeat; padding: var(--app-default-top-bottom-margin-xxxxl) var(--default-left-right-desk-body-padding) var(--app-default-top-bottom-margin-xxxxxl); color: var(--mid-charcoal); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-bibliosmia-word { max-width: var(--max-content-width-golden-section-small); margin-bottom: var(--app-default-top-bottom-margin-xs); font-family: Merriweather, Georgia, serif; font-size: var(--heading-size-xl); font-weight: var(--font-weight-bold); color: inherit; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-bibliosmia-phonetic { max-width: var(--max-content-width-golden-section-small); margin-bottom: var(--app-default-top-bottom-margin-sm); font-family: Merriweather, Georgia, serif; font-size: var(--body-text-lg); color: inherit; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-bibliosmia-rule { width: 100%; max-width: var(--max-content-width-golden-section-small); height: var(--stroke-thin); background: var(--mid-mushroom); margin-bottom: var(--app-default-top-bottom-margin-md); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-bibliosmia-definition { max-width: var(--max-content-width-golden-section-small); margin: 0; font-family: Merriweather, Georgia, serif; font-size: var(--body-text-lg); line-height: var(--default-line-height-large); color: inherit; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-bibliosmia-definition:last-of-type { margin-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .flex-1 { flex: 1 1 0%; } /* used: library-marketplace */

/* Search the library: the heading band, then the sticky search and tabs */
:where(.page-uma-library) .uma-library-content { background: var(--t-library-content-bg); padding-top: var(--app-default-top-bottom-margin-xxxxl); padding-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-section-heading { line-height: var(--default-line-height-x-small); font-size: var(--heading-size-xxl); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-section-heading-narrow { max-width: var(--section-heading-narrow-width); text-wrap: pretty; margin-left: auto; margin-right: auto; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-sticky-container { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(var(--blur-md)); background: var(--t-sticky-bg); transition: opacity var(--transition-base) ease, visibility var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-uma-library) .uma-filter-drawer-open .uma-library-sticky-container { z-index: var(--filter-drawer-open-layer); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-panels-container { padding-top: var(--app-default-top-bottom-margin-xxxl); background: var(--t-sticky-bg); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-nav-wrapper { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; padding: var(--app-default-top-bottom-margin-lg) 0 0; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-tab-nav { width: 100%; justify-content: center; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-tab-nav-inner { display: flex; flex-direction: column; align-items: stretch; width: 100%; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-search-controls { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: var(--gap-md); width: 100%; box-sizing: border-box; padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); margin-bottom: var(--app-default-top-bottom-margin-xxl); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-nav-wrapper.is-sticky .uma-library-search-controls { margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .field-pill { border-radius: var(--radius-pill); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .field-action--in-search-controls { flex: 1 1 0%; min-width: 0; max-width: var(--golden-width-small); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-library-search-icon-wrap { display: inline-flex; align-items: center; flex-shrink: 0; padding-left: var(--field-padding-x); color: var(--light-charcoal); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-library-search-icon { font-size: var(--button-icon-md); color: var(--t-search-text-muted); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-library-search-input { padding-left: var(--gap-xs); caret-color: var(--t-search-caret); color: var(--t-search-text); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-library-search-input::placeholder { color: var(--t-search-text-muted); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-library-search-input::-webkit-search-cancel-button { display: none; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-library-search-clear { flex-shrink: 0; margin-right: var(--gap-xs); background: transparent; border: none; color: var(--light-charcoal); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-search-mic { flex-shrink: 0; align-self: center; width: var(--button-size-md); height: var(--button-size-md); margin-right: calc((var(--field-height) - var(--button-size-md)) / 2); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-library-search-mic-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 0; font-size: var(--button-icon-md); line-height: var(--default-line-height-single); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-search-no-results { text-align: center; color: var(--light-charcoal); padding: var(--app-default-top-bottom-margin-xl); width: 100%; } /* used: library-marketplace */
/* The tab bar: a pill-shaped bar while the tabs fit; full width and
   scrolling when they do not; full width with square ends once stuck */
:where(.page-uma-library) .pill-filter-bar--library-pill-bar-shift-to-full-width-scrollable { box-sizing: border-box; max-width: calc(100% - var(--default-left-right-desk-body-padding) * 2); margin-left: auto; margin-right: auto; } /* used: library-marketplace */
:where(.page-uma-library) .pill-filter-bar--library-pill-bar-shift-to-full-width-scrollable.is-overflowing { box-sizing: border-box; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; border-radius: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; justify-content: flex-start; padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); } /* used: library-marketplace */
:where(.page-uma-library) .pill-filter-bar--library-pill-bar-shift-to-full-width-scrollable.is-overflowing::-webkit-scrollbar { display: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-nav-wrapper.is-stuck .pill-filter-bar--library-pill-bar-shift-to-full-width-scrollable:not(.is-overflowing) { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; border-radius: 0; justify-content: center; } /* used: library-marketplace */
:where(.page-uma-library) .uma-marketplace-filters-tab--under-last-pill { right: calc(var(--filters-tab-right) + var(--app-default-top-bottom-margin-xl)); } /* used: library-marketplace */
/* While a video plays full screen, the bars step out of the way */
:where(.page-uma-library) .uma-video-playing .uma-chrome-main-header { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--transition-fast) ease, visibility var(--transition-fast) ease; } /* used: library-marketplace */
:where(.page-uma-library) .uma-video-playing .uma-library-sticky-container { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--transition-fast) ease, visibility var(--transition-fast) ease; } /* used: library-marketplace */
:where(.page-uma-library) .uma-video-playing .uma-chrome-feedback-tab { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--transition-fast) ease, visibility var(--transition-fast) ease; } /* used: library-marketplace */
:where(.page-uma-library) .uma-video-playing .uma-chrome-wishlist-float-btn { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--transition-fast) ease, visibility var(--transition-fast) ease; } /* used: library-marketplace */
:where(.page-uma-library) .uma-video-playing .uma-marketplace-filters-tab { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--transition-fast) ease, visibility var(--transition-fast) ease; } /* used: library-marketplace */

@media (min-width: 1101px) {
  :where(.page-uma-library, .page-uma-marketplace) .uma-library-voices-left { flex: 0 0 50%; max-width: 50%; aspect-ratio: unset; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-library-voices-right { flex: 0 0 50%; max-width: 50%; } /* used: library-marketplace */
}
@media (max-width: 1100px) {
  :where(.page-uma-library, .page-uma-marketplace) .uma-library-voices { flex-direction: column; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-library-voices-left { order: 2; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-bibliosmia-panel { order: 1; } /* used: library-marketplace */
  :where(.page-uma-library) .uma-library-voices-mic-image { order: 1; height: var(--voices-picture-height); } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-bibliosmia-word { max-width: var(--max-content-width-golden-section-large); } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-bibliosmia-phonetic { max-width: var(--max-content-width-golden-section-large); } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-bibliosmia-rule { max-width: var(--max-content-width-golden-section-large); } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-bibliosmia-definition { max-width: var(--max-content-width-golden-section-large); } /* used: library-marketplace */
}
@media (max-width: 900px) {
  :where(.page-uma-library, .page-uma-marketplace) .uma-hero-title { font-size: var(--heading-size-xxxl); } /* used: library-marketplace */
  :where(.page-uma-library) .uma-library-section-heading { font-size: var(--heading-size-xl); } /* used: library-marketplace */
  :where(.page-uma-library) .uma-library-tab-nav { flex-direction: column; } /* used: library-marketplace */
  :where(.page-uma-library) .uma-library-search-controls { margin-bottom: var(--app-default-top-bottom-margin-xl); margin-left: var(--default-left-right-mob-body-padding); margin-right: var(--default-left-right-mob-body-padding); width: calc(100% - var(--default-left-right-mob-body-padding) * 2); } /* used: library-marketplace */
}
@media (max-width: 750px) {
  :where(.page-uma-library, .page-uma-marketplace) .uma-library-voices-left { aspect-ratio: unset; max-width: 100%; width: 100%; padding-bottom: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .voices-left-first { order: 1; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-library-voices-right { flex: unset; width: 100%; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-bibliosmia-panel { order: 2; height: auto; min-height: var(--voices-picture-height); } /* used: library-marketplace */
}
@media (max-width: 600px) {
  :where(.page-uma-library, .page-uma-marketplace) .proto-header { left: 0; right: auto; width: 100dvw; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-hero-title { font-size: var(--heading-size-xxl); } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .btn-cta { min-width: 0; width: 100%; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-bibliosmia-panel { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
  :where(.page-uma-library) .uma-library-panels-container { padding-top: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
  :where(.page-uma-library) .field-action--in-search-controls { padding-right: calc(var(--gap-xs) / 2); } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-library-search-clear { margin-right: calc(var(--gap-xs) / 2); } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-filters-tab-label { font-size: 0; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-filters-tab-label::after { content: "Filter and sort"; font-size: var(--body-text-xs); } /* used: library-marketplace */
}
@media (max-width: 599px) {
  :where(.page-uma-library, .page-uma-marketplace, .page-uma-discounts) .proto-sidebar { display: none; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-library-voices-left { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--app-default-top-bottom-margin-xl); text-align: center; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .voices-emoji { margin-left: auto; margin-right: auto; } /* used: library-marketplace */
  :where(.page-uma-library) .voices-h2 { margin-left: auto; margin-right: auto; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .panel-paragraph-text { margin-left: auto; margin-right: auto; } /* used: library-marketplace */
  :where(.page-uma-library) .uma-library-search-controls { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); width: 100%; margin-left: 0; margin-right: 0; max-width: none; } /* used: library-marketplace */
  :where(.page-uma-library) .field-action--in-search-controls { height: var(--button-size-lg); max-width: none; } /* used: library-marketplace */
  :where(.page-uma-library) .uma-library-search-mic { aspect-ratio: 1 / 1; } /* used: library-marketplace */
  :where(.page-uma-library) .pill-filter-bar--library-pill-bar-shift-to-full-width-scrollable { max-width: calc(100% - var(--default-left-right-mob-body-padding) * 2); } /* used: library-marketplace */
  :where(.page-uma-library) .pill-filter-bar--library-pill-bar-shift-to-full-width-scrollable.is-overflowing { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
}

/* The rails of cards: voices, books, audiobooks, shows, episodes, videos, apps.
   Each card takes its width from a token, so the rail in a drawer can set
   smaller ones. */
:where(.page-uma-library) .uma-library-panel { display: block; overflow: visible; } /* used: library-marketplace */
:where(.page-uma-library) .library-carouselle { display: flex; gap: var(--gap-regular); width: 100%; overflow-x: scroll; overflow-y: visible; padding: var(--app-default-top-bottom-margin-xl) var(--default-left-right-desk-body-padding); scroll-snap-type: x proximity; scroll-padding-left: var(--default-left-right-desk-body-padding); scroll-padding-right: var(--default-left-right-desk-body-padding); scroll-behavior: smooth; scrollbar-width: none; } /* used: library-marketplace */
:where(.page-uma-library) .library-carouselle::-webkit-scrollbar { display: none; } /* used: library-marketplace */
:where(.page-uma-library) .library-item-default-card { position: relative; display: flex; flex-direction: column; flex-shrink: 0; height: auto; scroll-snap-align: start; transform-origin: center center; transition: transform var(--cover-zoom-ease); will-change: transform; } /* used: library-marketplace */
:where(.page-uma-library) .library-item-default-card:last-child { scroll-snap-align: end; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-voice-card { flex: 0 0 var(--library-card-voice); width: var(--library-card-voice); min-width: var(--library-card-voice); max-width: var(--library-card-voice); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-book-card { flex: 0 0 var(--library-card-book); width: var(--library-card-book); min-width: var(--library-card-book); max-width: var(--library-card-book); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-audiobook-card { flex: 0 0 var(--library-card-book); width: var(--library-card-book); min-width: var(--library-card-book); max-width: var(--library-card-book); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-podcast-card { flex: 0 0 var(--library-card-podcast); width: var(--library-card-podcast); min-width: var(--library-card-podcast); max-width: var(--library-card-podcast); border-radius: var(--app-default-radius-lg); overflow: visible; background: transparent; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-podcast-card--show { flex: 0 0 var(--library-card-show); width: var(--library-card-show); min-width: var(--library-card-show); max-width: var(--library-card-show); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-video-card { flex: 0 0 var(--library-card-video); width: var(--library-card-video); min-width: var(--library-card-video); max-width: var(--library-card-video); background: transparent; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-app-card { width: var(--library-card-app); } /* used: library-marketplace */
/* The rail at the foot of a drawer takes the drawer's card sizes */
:where(.page-uma-library) .uma-cross-sell-rail { --library-card-voice: var(--drawer-card); --library-card-book: var(--drawer-card); --library-card-show: var(--drawer-card); --library-card-podcast: var(--drawer-card-podcast); --library-card-video: var(--drawer-card-video); --library-card-app: var(--drawer-card-app); } /* used: library-marketplace */

/* The picture or player at the top of a card */
:where(.page-uma-library) .library-image-and-media-container { position: relative; width: 100%; flex-shrink: 0; overflow: hidden; border-radius: var(--app-default-radius-lg); transform-origin: center center; transition: transform var(--cover-zoom-ease); will-change: transform; } /* used: library-marketplace */
:where(.page-uma-library) .library-image-and-media-container:has(.card-circular-plus-btn-on-dark:hover) { transform: scale(var(--card-lift-scale)); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-voice-card-media { aspect-ratio: var(--carouselle-card-ratio-nine-by-sixteen); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-voice-card-media:has(.card-circular-search-btn-on-dark:hover) { transform: scale(var(--card-lift-scale)); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-book-card-media { position: relative; width: 100%; height: 0; padding-bottom: 150%; aspect-ratio: var(--carouselle-card-ratio-book); overflow: hidden; border-radius: var(--app-default-radius-lg); transition: filter var(--transition-base) ease-in-out, transform var(--cover-zoom-ease); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-audiobook-card-media { position: relative; width: 100%; height: 0; padding-bottom: 100%; aspect-ratio: var(--carouselle-card-ratio-square); overflow: hidden; border-radius: var(--app-default-radius-lg); transition: filter var(--transition-base) ease-in-out, transform var(--cover-zoom-ease); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-app-card-media { height: 0; padding-bottom: 100%; aspect-ratio: var(--carouselle-card-ratio-square); border-radius: var(--radius-squircle); border-top-right-radius: var(--app-default-radius-lg); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-video-card-media { aspect-ratio: var(--carouselle-card-ratio-video); transition: filter var(--transition-base) ease, transform var(--cover-zoom-ease); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-podcast-card-media { display: flex; flex-direction: column; overflow: visible; } /* used: library-marketplace */
@media (max-width: 965px) {
  :where(.page-uma-library) .uma-library-book-card-media { max-width: 100%; } /* used: library-marketplace */
  :where(.page-uma-library) .uma-library-audiobook-card-media { max-width: 100%; } /* used: library-marketplace */
  :where(.page-uma-library) .uma-library-app-card-media { max-width: 100%; } /* used: library-marketplace */
  :where(.page-uma-library) .uma-library-podcast-card-media { max-width: 100%; } /* used: library-marketplace */
}
:where(.page-uma-library) .library-media-positioned { position: relative; } /* used: library-marketplace */
:where(.page-uma-library) .library-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter var(--transition-base) ease-in-out; } /* used: library-marketplace */
:where(.page-uma-library) .library-card-app-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter var(--transition-fast); } /* used: library-marketplace */
:where(.page-uma-library) .library-card-video-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-uma-library) .image-cover-and-clip { width: 100%; height: 100%; object-fit: cover; } /* used: library-marketplace */
/* Pictures dim on hover, except while the heart is hovered */
:where(.page-uma-library) .uma-library-book-card:hover .library-card-img { filter: var(--t-card-dim-strong); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-audiobook-card:hover .library-card-img { filter: var(--t-card-dim); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-video-card:hover .library-card-video-img { filter: var(--t-card-dim); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-app-card:hover .library-card-app-img { filter: var(--t-card-dim); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-book-card:has(.uma-wishlist-earmark:hover) .library-card-img { filter: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-audiobook-card:has(.uma-wishlist-earmark:hover) .library-card-img { filter: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-video-card:has(.uma-wishlist-earmark:hover) .library-card-video-img { filter: none; } /* used: library-marketplace */
/* Podcast artwork with the player under it; a show's artwork has all four corners round */
:where(.page-uma-library) .uma-library-podcast-card-artwork { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bright-teal); border-radius: var(--app-default-radius-lg) var(--app-default-radius-lg) 0 0; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-podcast-card-artwork-all-corners { border-radius: var(--app-default-radius-lg); } /* used: library-marketplace */
:where(.page-uma-library) .library-card-artwork-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* used: library-marketplace */
:where(.page-uma-library) .library-card-artwork-img[src=""] { display: none; } /* used: library-marketplace */
:where(.page-uma-library) .library-card-artwork-img:not([src]) { display: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-podcast-card-player { width: 100%; line-height: 0; margin-top: 0; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-podcast-card-player-frame { display: block; width: 100%; height: var(--platform-spotify-height-compact); border: none; border-radius: 0 0 var(--app-default-radius-lg) var(--app-default-radius-lg); margin-top: var(--podcast-player-tuck); } /* used: library-marketplace */

/* What sits over the picture: the heart, the follow switch, the rollover
   with its button, the round plus and search buttons, the social icons */
:where(.page-uma-library) .uma-library-voice-card:hover .uma-wishlist-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-book-card:hover .uma-wishlist-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-book-card:focus-within .uma-wishlist-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-audiobook-card:hover .uma-wishlist-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-audiobook-card:focus-within .uma-wishlist-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-app-card:hover .uma-wishlist-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-app-card:focus-within .uma-wishlist-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-video-card:hover .uma-wishlist-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-video-card:focus-within .uma-wishlist-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-podcast-card:hover .uma-wishlist-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-podcast-card:focus-within .uma-wishlist-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-follow-earmark { position: absolute; top: var(--app-default-top-bottom-margin-sm); left: var(--app-default-top-bottom-margin-sm); z-index: 4; width: var(--switch-mini-width); height: var(--switch-mini-height); padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; opacity: 0; transition: opacity var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-follow-earmark::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100%, var(--hit-area-comfort)); height: max(100%, var(--hit-area-comfort)); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-voice-card:hover .uma-follow-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-voice-card:focus-within .uma-follow-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-podcast-card--show:hover .uma-follow-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-podcast-card--show:focus-within .uma-follow-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-follow-earmark--added { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-follow-earmark-track { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: var(--radius-pill); background: rgba(var(--black-rgb), var(--opacity-low)); backdrop-filter: blur(var(--blur-md)); transition: background var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-follow-earmark-thumb { position: absolute; top: var(--switch-thumb-inset); left: var(--switch-thumb-inset); z-index: 2; width: var(--switch-mini-thumb); height: var(--switch-mini-thumb); border-radius: var(--radius-circle); background: var(--bright-white); box-shadow: 0 2px 4px rgba(var(--black-rgb), var(--opacity-low)); transition: left var(--play-hover-duration) ease, background var(--play-hover-duration) ease; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-follow-earmark-icon { position: absolute; top: 50%; right: var(--switch-thumb-inset); transform: translateY(-50%); z-index: 3; display: flex; align-items: center; justify-content: center; width: var(--switch-mini-thumb); height: var(--switch-mini-thumb); color: var(--bright-white); font-size: var(--button-icon-sm); pointer-events: none; transition: left var(--play-hover-duration) ease, right var(--play-hover-duration) ease, color var(--play-hover-duration) ease; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-follow-earmark--added .uma-follow-earmark-track { background: var(--yellow); backdrop-filter: none; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-follow-earmark--added .uma-follow-earmark-thumb { left: calc(100% - var(--switch-mini-thumb) - var(--switch-thumb-inset)); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-follow-earmark--added .uma-follow-earmark-icon { right: auto; left: var(--switch-thumb-inset); color: var(--bright-white); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-wishlist-earmark-corner { position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 var(--wand-earmark-size) var(--wand-earmark-size) 0; border-color: transparent; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-wishlist-earmark--added .uma-wishlist-earmark-corner { border-color: transparent var(--yellow) transparent transparent; } /* used: library-marketplace */
:where(.page-uma-library) .library-image-and-media-container:hover .card-image-rating-overlay { opacity: 1; pointer-events: auto; } /* used: library-marketplace */
:where(.page-uma-library) .uma-wishlist-earmark:hover ~ .card-image-rating-overlay { visibility: visible; opacity: 1; pointer-events: auto; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-video-card-media:has(.uma-wishlist-earmark:hover) .card-image-rating-overlay { opacity: 0; pointer-events: none; } /* used: library-marketplace */
:where(.page-uma-library) .card-image-rating-overlay--earmark-active { opacity: 0; pointer-events: none; } /* used: library-marketplace */
:where(.page-uma-library) .card-overlay-round { border-radius: inherit; box-sizing: border-box; } /* used: library-marketplace */
:where(.page-uma-library) .card-image-ing-btn { gap: var(--gap-xs); line-height: var(--default-line-height-single); white-space: nowrap; pointer-events: auto; scroll-margin-top: 0; } /* used: library-marketplace */
:where(.page-uma-library) .frosted-secondary-white-btn { color: var(--mid-white); } /* used: library-marketplace */
:where(.page-uma-library) .card-overlay-squircle { box-sizing: border-box; overflow: hidden; border-radius: var(--radius-squircle); border-top-right-radius: var(--app-default-radius-lg); } /* used: library-marketplace */
:where(.page-uma-library) .play-btn-icon { position: relative; top: var(--play-icon-nudge); margin-left: 0; font-size: var(--button-icon-xxl); line-height: var(--default-line-height-single); vertical-align: middle; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .card-circular-plus-btn-on-dark { position: absolute; bottom: var(--card-corner-btn-inset); right: var(--card-corner-btn-inset); z-index: 3; display: flex; align-items: center; justify-content: center; width: var(--button-size-md); height: var(--button-size-md); padding: 0; border: none; border-radius: 0; background: var(--bright-white); cursor: pointer; opacity: 0; transition: opacity var(--transition-base) ease, filter var(--transition-base) ease; mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'><path fill='black' fill-rule='evenodd' d='M180,0A180,180,0,1,0,360,180,180,180,0,0,0,180,0ZM280,180a12,12,0,0,1-12,12H192v76a12,12,0,0,1-24,0V192H92a12,12,0,0,1,0-24h76V92a12,12,0,0,1,24,0v76h76A12,12,0,0,1,280,180Z'/></svg>"); mask-repeat: no-repeat; mask-size: 100% 100%; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .card-circular-plus-btn-on-dark:focus-visible { opacity: var(--opacity-visible); } /* used: library-marketplace */
:where(.page-uma-library) .card-plus-inset { bottom: calc(var(--app-default-top-bottom-margin-xxxl) - var(--app-plus-pull)); right: calc(var(--app-default-top-bottom-margin-xxxl) - var(--app-plus-pull)); } /* used: library-marketplace */
/* On a white or very light picture the plus is a grey circle with a charcoal plus */
:where(.page-uma-library) .card-circular-plus-btn-on-dark--on-light-image { background: var(--dark-white); mask-image: none; border-radius: var(--radius-circle); } /* used: library-marketplace */
:where(.page-uma-library) .card-circular-plus-btn-on-dark--on-light-image::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-circle); background: var(--mid-charcoal); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m28.87,20c0,.59-.48,1.06-1.06,1.06h-6.74v6.74c0,.59-.48,1.06-1.06,1.06s-1.06-.48-1.06-1.06v-6.74h-6.74c-.59,0-1.06-.48-1.06-1.06s.48-1.06,1.06-1.06h6.74v-6.74c0-.59.48-1.06,1.06-1.06s1.06.48,1.06,1.06v6.74h6.74c.59,0,1.06.48,1.06,1.06Z'/></svg>"); mask-repeat: no-repeat; mask-size: 100% 100%; } /* used: library-marketplace */
:where(.page-uma-library) .card-circular-plus-btn-on-dark--on-light-image:hover::after { background: var(--dark-charcoal); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .card-circular-search-btn-on-dark { position: absolute; bottom: var(--card-corner-btn-inset); right: var(--card-corner-btn-inset); z-index: 3; display: flex; align-items: center; justify-content: center; width: var(--button-size-md); height: var(--button-size-md); padding: 0; border: none; border-radius: 0; background: var(--bright-white); cursor: pointer; opacity: 0; transition: opacity var(--transition-base) ease, filter var(--transition-base) ease; mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'><path fill='black' fill-rule='evenodd' d='M180,0A180,180,0,1,0,360,180,180,180,0,0,0,180,0ZM284.49,267.51,237,220a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM96,164a68,68,0,1,1,68,68A68.07,68.07,0,0,1,96,164Z'/></svg>"); mask-repeat: no-repeat; mask-size: 100% 100%; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .card-circular-search-btn-on-dark:focus-visible { opacity: var(--opacity-visible); } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-video-card-media:hover .card-circular-play-btn-on-dark { opacity: 1; pointer-events: auto; } /* used: library-marketplace */
/* Under the card: the role chips and the rail's arrows */
:where(.page-uma-library) .card-role-chips { display: flex; flex-wrap: wrap; gap: var(--gap-xs); margin: var(--gap-xs) 0 var(--app-default-top-bottom-margin-md); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .good-for-tag { display: inline-flex; align-items: center; height: var(--button-size-xs); padding: 0 var(--gap-md); border-radius: var(--radius-pill); font-size: var(--body-text-xs); line-height: var(--default-line-height-single); pointer-events: none; user-select: none; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .good-for-tag--light { background: var(--t-chip-light-bg); color: var(--t-chip-light-text); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-carousel-nav { display: flex; justify-content: flex-start; gap: var(--gap-sm); margin-top: calc(0px - var(--app-default-top-bottom-margin-xs)); margin-bottom: var(--app-default-top-bottom-margin-lg); padding-left: var(--default-left-right-desk-body-padding); } /* used: library-marketplace */
:where(.page-uma-library) .uma-carousel-nav--with-post { align-items: center; padding-right: var(--default-left-right-desk-body-padding); } /* used: library-marketplace */
:where(.page-uma-library) .uma-carousel-nav--with-post .uma-drawer-post-btn { margin-left: auto; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .carousel-nav-btn:disabled { cursor: default; opacity: var(--t-carousel-spent-opacity); pointer-events: none; } /* used: library-marketplace */
/* In the drawers the arrows sit closer under the rail, in line with the drawer's text */
:where(.page-uma-library .uma-product-drawer) .uma-carousel-nav { margin: var(--gap-sm) 0 var(--app-default-top-bottom-margin-lg); padding-left: var(--drawer-media-padding); padding-right: var(--drawer-media-padding); } /* used: library-marketplace */
/* Under the app's screenshots the arrows line up with the screenshots */
:where(.page-uma-library .uma-product-drawer--app .uma-product-drawer-below-hero) .uma-carousel-nav { padding-left: 0; padding-right: 0; } /* used: library-marketplace */
/* The rail at the foot of a drawer cuts long names short with dots */
:where(.page-uma-library .uma-cross-sell-rail) .uma-library-card-body { max-width: 100%; } /* used: library-marketplace */
:where(.page-uma-library .uma-cross-sell-rail) .card-brand { overflow: hidden; text-overflow: ellipsis; } /* used: library-marketplace */
:where(.page-uma-library .uma-cross-sell-rail) .uma-library-card-title { overflow: hidden; text-overflow: ellipsis; } /* used: library-marketplace */
:where(.page-uma-library .uma-cross-sell-rail) .uma-library-card-subtitle { overflow: hidden; text-overflow: ellipsis; } /* used: library-marketplace */
@media (hover: hover) {
  :where(.page-uma-library) .library-image-and-media-container:hover .uma-wishlist-earmark { opacity: 1; } /* used: library-marketplace */
  :where(.page-uma-library) .library-image-and-media-container:hover .card-circular-plus-btn-on-dark { opacity: 1; } /* used: library-marketplace */
  :where(.page-uma-library) .uma-library-voice-card-media:hover .card-circular-search-btn-on-dark { opacity: 1; } /* used: library-marketplace */
}
@media (hover: none) {
  :where(.page-uma-library, .page-uma-marketplace) .card-circular-plus-btn-on-dark { opacity: 1; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .card-circular-search-btn-on-dark { opacity: 1; } /* used: library-marketplace */
}
@media (max-width: 600px) {
  :where(.page-uma-library) .library-carouselle { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); scroll-padding-left: var(--default-left-right-mob-body-padding); scroll-padding-right: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
}

/* The app logo and the show artwork in their drawers. They come after the
   card rules because they reshape the same picture boxes. */
:where(.page-uma-library) .drawer-app-image-square { position: relative; flex-shrink: 0; width: var(--drawer-app-card-width); max-width: var(--drawer-app-card-width); height: var(--drawer-app-card-width); min-height: 0; aspect-ratio: 1 / 1; padding-bottom: 0; margin-bottom: var(--app-default-top-bottom-margin-lg); overflow: hidden; transform-origin: center center; transition: transform var(--cover-zoom-ease); will-change: transform; } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer--show) .uma-library-podcast-card-media { max-width: 100%; } /* used: library-marketplace */
:where(.page-uma-library .uma-product-drawer--show) .uma-library-podcast-card-artwork { overflow: visible; max-width: 100%; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-show-artwork-box { height: auto; } /* used: library-marketplace */
/* Book covers in the rail at the foot of a drawer fill their card. Two
   classes, to outweigh the drawer's own cover size (.uma-product-drawer--book) */
:where(.page-uma-library) .uma-cross-sell-rail .uma-library-book-card-media { width: 100%; max-width: 100%; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-app-website { color: var(--t-linkish); border-color: var(--t-linkish); } /* used: library-marketplace */
@media (max-width: 899px) {
  :where(.page-uma-library) .drawer-app-website { height: var(--button-size-md); font-size: var(--body-text-sm); } /* used: library-marketplace */
  /* Two classes, to outweigh the button size rule for icons (.btn-lg i) */
  :where(.page-uma-library) .drawer-app-website .drawer-app-website-icon { font-size: var(--button-icon-md); } /* used: library-marketplace */
}
@media (max-width: 599px) {
  :where(.page-uma-library) .drawer-app-image-square { width: 100%; max-width: 100%; height: auto; } /* used: library-marketplace */
  :where(.page-uma-library) .drawer-app-website { height: var(--button-size-sm); padding: 0 var(--gap-xxs); font-size: var(--body-text-xs); } /* used: library-marketplace */
}

/* Parts the scripts add to the drawers when one opens */
:where(.page-uma-library) .uma-product-drawer-image-col:hover .uma-wishlist-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .uma-product-drawer-image-col:focus-within .uma-wishlist-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-split-pill-price { flex-shrink: 0; margin-left: auto; font-weight: var(--font-weight-medium); white-space: nowrap; font-size: var(--body-text-lg); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-split-pill-menu { position: absolute; top: calc(100% + var(--gap-xs)); left: 0; right: 0; z-index: 20; display: none; overflow: hidden; background: var(--bright-white); border: var(--stroke-hairline) solid var(--dark-white); border-radius: var(--app-default-radius-md); box-shadow: var(--canvas-sheet-shadow); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-split-pill-menu.is-open { display: block; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-split-pill-menu-item { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); width: 100%; min-height: var(--button-size-lg); padding: 0 var(--btn-padding-x); border: none; background: transparent; color: var(--navy); cursor: pointer; text-align: left; font-family: inherit; font-size: var(--body-text-md); transition: background var(--transition-quick) ease; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-split-pill-menu-item + .drawer-split-pill-menu-item { border-top: var(--stroke-hairline) solid var(--dark-white); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-split-pill-menu-item:hover { background: var(--mid-white); outline: none; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-split-pill-menu-item.is-current { font-weight: var(--font-weight-medium); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-split-pill-menu-icon { font-size: var(--button-icon-md); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-split-pill-menu-label { flex: 1 1 auto; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-split-pill-menu-item-external { margin-left: auto; color: var(--light-charcoal); font-size: var(--button-icon-md); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-buy-dropdown-item { display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-sm); width: 100%; min-height: var(--button-size-lg); padding: 0 var(--btn-padding-x); border: none; background: transparent; color: var(--mid-charcoal); cursor: pointer; text-align: left; font-size: var(--body-text-lg); transition: background var(--transition-quick) ease; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-buy-dropdown-item:hover { background: var(--mid-white); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-buy-dropdown-item + .drawer-buy-dropdown-item { border-top: var(--stroke-hairline) solid var(--dark-white); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-buy-dropdown-item-label { flex: 1 1 0%; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-buy-dropdown-item-price { flex-shrink: 0; text-align: right; font-weight: var(--font-weight-medium); } /* used: library-marketplace */
/* The app's screenshots */
:where(.page-uma-library) .drawer-app-screenshots-carousel { display: flex; gap: var(--gap-regular); height: auto; width: calc(100% + 2 * var(--drawer-media-padding)); margin-left: calc(-1 * var(--drawer-media-padding)); margin-right: calc(-1 * var(--drawer-media-padding)); padding: var(--app-default-top-bottom-margin-xl) 0 var(--app-default-top-bottom-margin-md); overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding-left: var(--drawer-media-padding); scroll-padding-right: var(--drawer-media-padding); scrollbar-width: none; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-app-screenshots-carousel::-webkit-scrollbar { display: none; width: 0; height: 0; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-app-screenshot { flex: 0 0 auto; width: var(--drawer-screenshot-width); aspect-ratio: var(--carouselle-card-ratio-nine-by-sixteen); border-radius: var(--app-default-radius-md); overflow: hidden; scroll-snap-align: start; background: var(--dark-white); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-app-screenshot-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* used: library-marketplace */
/* The show drawer's episodes: players, or video tiles with the text beside them */
:where(.page-uma-library) .uma-product-drawer--show .drawer-book-product-details { border-bottom: var(--stroke-hairline) solid var(--dark-white); } /* used: library-marketplace */
/* The marketplace's favourite episodes (in the wish list's Library side) are
   the same rows */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode { position: relative; height: auto; min-height: 0; overflow: hidden; background: var(--platform-spotify); border-radius: var(--app-default-radius-md); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode:has(iframe[src*="podcasts.apple.com"]) { background: var(--platform-apple); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode--video { display: flex; flex-direction: row; align-items: flex-start; gap: var(--gap-lg); width: 100%; max-width: none; padding: var(--gap-sm) 0; background: transparent; border-radius: 0; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-player { position: relative; width: 100%; height: auto; min-height: 0; line-height: 0; background: var(--platform-spotify); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-player:has(iframe[src*="podcasts.apple.com"]) { background: var(--platform-apple); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-frame { display: block; width: 100%; height: var(--platform-spotify-height-compact); border: none; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-frame[src*="podcasts.apple.com"] { height: var(--platform-apple-height-compact); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-frame[src*="youtube.com"] { height: auto; aspect-ratio: var(--carouselle-card-ratio-video); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-frame[src*="youtu.be"] { height: auto; aspect-ratio: var(--carouselle-card-ratio-video); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-frame[src*="youtube-nocookie.com"] { height: auto; aspect-ratio: var(--carouselle-card-ratio-video); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-frame[src*="vimeo.com"] { height: auto; aspect-ratio: var(--carouselle-card-ratio-video); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-video-thumb { position: relative; flex: 0 0 auto; width: var(--episode-thumb-width); aspect-ratio: var(--carouselle-card-ratio-video); border-radius: var(--app-default-radius-md); overflow: hidden; background: var(--dark-white); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-video-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-show-episode-corner-mask { position: absolute; top: 0; right: 0; z-index: 4; width: var(--wand-earmark-size); height: var(--wand-earmark-size); background: var(--platform-spotify); border-top-right-radius: var(--app-default-radius-md); pointer-events: none; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-show-episode:has(iframe[src*="podcasts.apple.com"]) .drawer-show-episode-corner-mask { background: var(--platform-apple); } /* used: library-marketplace */
:where(.page-uma-library) .drawer-show-episode--video .drawer-show-episode-corner-mask { display: none; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-earmark { position: absolute; top: 0; right: 0; z-index: 5; opacity: 1; pointer-events: auto; border-top-right-radius: var(--app-default-radius-lg); overflow: hidden; } /* used: library-marketplace */
:where(.page-uma-library) .episode-earmark-corner { border-color: transparent var(--yellow) transparent transparent; opacity: 0; transition: opacity var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-show-episode-earmark[aria-pressed="true"] .episode-earmark-corner { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .episode-earmark-icon { color: var(--bright-white); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-earmark[aria-pressed="true"] .episode-earmark-icon { color: var(--navy); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-video-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-xs); padding: 0; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .uma-library-card-meta-right { position: relative; flex-shrink: 0; margin-left: var(--gap-sm); font-size: var(--body-text-xs); font-weight: var(--font-weight-normal); color: var(--t-card-figure); white-space: nowrap; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-video-card-clickable { cursor: pointer; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-search-results-tab.selected { color: var(--bright-white); } /* used: library-marketplace */
@media (max-width: 899px) {
  :where(.page-uma-library) .drawer-split-pill-price { font-size: var(--body-text-sm); } /* used: library-marketplace */
  :where(.page-uma-library) .drawer-buy-dropdown-item { min-height: var(--button-size-md); font-size: var(--body-text-sm); } /* used: library-marketplace */
}
/* On small phones the store and listen pills show the short label the script
   puts in data-short, in place of the full one */
@media (max-width: 499px) {
  :where(.page-uma-library) .drawer-app-store-label[data-short] { font-size: 0; } /* used: library-marketplace */
  :where(.page-uma-library) .drawer-app-store-label[data-short]::before { content: attr(data-short); font-size: var(--body-text-sm); } /* used: library-marketplace */
  :where(.page-uma-library) .drawer-media-listen-label[data-short] { font-size: 0; } /* used: library-marketplace */
  :where(.page-uma-library) .drawer-media-listen-label[data-short]::before { content: attr(data-short); font-size: var(--body-text-sm); } /* used: library-marketplace */
}
/* The buy menus in the drawers keep the middle height on phones */
@media (max-width: 600px) {
  :where(.page-uma-library) .buy-dropdown-item-compact { min-height: var(--button-size-md); } /* used: library-marketplace */
}
@media (max-width: 599px) {
  :where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode--video { flex-direction: column; flex: 0 0 auto; scroll-snap-align: start; } /* used: library-marketplace */
}

/* The library's heart corner: a folded corner that turns yellow when added.
   On a light picture the heart is charcoal; on touch screens the heart sits in
   its own small circle until it is added. The corner itself is with the cards. */
@media (hover: hover) {
  :where(.page-uma-library) .uma-wishlist-earmark--on-light-image:not(.uma-wishlist-earmark--added) .uma-wishlist-earmark-icon { color: var(--mid-charcoal); } /* used: library-marketplace */
}
@media (hover: none) {
  :where(.page-uma-library, .page-uma-marketplace) .uma-wishlist-earmark { opacity: 1; top: var(--app-default-top-bottom-margin-sm); right: var(--app-default-top-bottom-margin-sm); width: var(--button-size-xs); height: var(--button-size-xs); overflow: visible; display: flex; align-items: center; justify-content: center; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-wishlist-earmark-corner { display: none; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-wishlist-earmark-icon { position: static; color: var(--navy); font-size: var(--button-icon-md); } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-wishlist-earmark--added { top: 0; right: 0; width: var(--wand-earmark-size); height: var(--wand-earmark-size); background: transparent; border-radius: 0 var(--app-default-radius-lg) 0 0; overflow: hidden; display: block; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-wishlist-earmark--added .uma-wishlist-earmark-corner { display: block; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .uma-wishlist-earmark--added .uma-wishlist-earmark-icon { position: absolute; top: var(--wand-icon-top); right: var(--wand-icon-right); color: var(--bright-white); font-size: var(--button-icon-xl); } /* used: library-marketplace */
}

/* The video player that opens under the library (and the marketplace) */
:where(.page-uma-library, .page-uma-marketplace) .video-inline-player { display: none; width: 100%; margin-top: var(--app-default-top-bottom-margin-xxl); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .video-inline-player.is-open { display: block; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .video-inline-player-inner { position: relative; width: 100%; aspect-ratio: var(--carouselle-card-ratio-video); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .video-inline-player-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } /* used: library-marketplace */

/* The close X on the player and on the panels below: a ring with an X. UMA.css
   places it and draws the ring; these give it its shape when it is not a .btn */
:where(.page-uma-library, .page-uma-marketplace) .video-inline-player-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer; } /* used: library-marketplace */
:where(.page-uma-library) .video-inline-player-close-on-white:hover { background: var(--hover-overlay-light); } /* used: library-marketplace */

/* The add to the library and get featured panels. They take turns in one
   place, so the wrappers stack them in a single grid cell */
:where(.page-uma-library) .uma-curated-panels-wrap { display: grid; grid-template-rows: 1fr; } /* used: library-marketplace */
:where(.page-uma-library) .uma-featured-flow { width: 100%; } /* used: library-marketplace */
:where(.page-uma-library) .uma-featured-panels-wrap { display: grid; grid-template-rows: 1fr; } /* used: library-marketplace */
:where(.page-uma-library) .red-panel { color: var(--mid-white); } /* used: library-marketplace */
:where(.page-uma-library) .panel-column-flush { padding-left: 0; padding-right: 0; } /* used: library-marketplace */
/* The add and featured columns: room above and below as margins, not padding */
:where(.page-uma-library) .centred-column-spaced { margin-top: var(--app-default-top-bottom-margin-xxxxxl); margin-bottom: var(--app-default-top-bottom-margin-xxl); padding: 0; } /* used: library-marketplace */
@media (max-width: 600px) {
  :where(.page-uma-library) .centred-column-spaced { margin-top: var(--app-default-top-bottom-margin-xxxl); margin-left: 0; margin-right: 0; width: 100%; } /* used: library-marketplace */
}
:where(.page-uma-library) .panel-heading-tight { margin-bottom: 0; } /* used: library-marketplace */

/* Thanks for adding: a tick and a line of text */
:where(.page-uma-library) .uma-curated-success-msg { display: flex; align-items: center; gap: var(--gap-sm); max-width: var(--max-content-width-golden-section-large); margin: 0; font-size: var(--body-text-lg); } /* used: library-marketplace */
:where(.page-uma-library) .uma-curated-success-msg:last-of-type { margin-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-library) .uma-curated-success-icon { flex-shrink: 0; font-size: var(--heading-size-md); color: var(--success); } /* used: library-marketplace */

/* Add a book: an orange split pill, the menu of other types under its arrow */
:where(.page-uma-library) .uma-add-split-pill { position: relative; display: inline-flex; width: 100%; min-width: var(--add-a-pill-min-width); max-width: var(--max-content-width-golden-section-small); border-radius: var(--radius-pill); overflow: visible; white-space: nowrap; } /* used: library-marketplace */
:where(.page-uma-library) .uma-add-split-pill-main { flex: 1 1 0%; display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-sm); height: var(--button-size-lg); padding: 0 var(--btn-padding-x); border: none; border-radius: var(--radius-pill) 0 0 var(--radius-pill); color: var(--mid-white); font-family: inherit; font-size: var(--body-text-sm); line-height: var(--default-line-height-x-small); cursor: pointer; transition: background var(--transition-fast) ease; } /* used: library-marketplace */
:where(.page-uma-library) .uma-add-split-pill-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: var(--button-size-md); } /* used: library-marketplace */
/* The script swaps the icon's whole class list, so it is reached through the pill */
:where(.page-uma-library .uma-add-split-pill-icon) .ph-fill { font-size: var(--button-icon-xxl); line-height: var(--default-line-height-single); } /* used: library-marketplace */
:where(.page-uma-library) .uma-add-split-pill-label { flex: 1 1 0%; display: flex; align-items: center; justify-content: flex-start; gap: 0; overflow: hidden; text-align: left; } /* used: library-marketplace */
:where(.page-uma-library) .uma-add-split-pill-label-text { flex: 1 1 0%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; } /* used: library-marketplace */
:where(.page-uma-library) .uma-add-split-pill-arrow { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: var(--button-size-lg); height: var(--button-size-lg); padding: 0; border: none; border-left: var(--stroke-hairline) solid var(--add-pill-divider); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; color: var(--mid-white); cursor: pointer; transition: background var(--transition-fast) ease; } /* used: library-marketplace */
:where(.page-uma-library) .add-pill-caret-icon { display: block; font-size: var(--button-icon-md); line-height: var(--default-line-height-single); } /* used: library-marketplace */

/* The add panels: a link field with a Paste button, OR, then a search */
:where(.page-uma-library) .centred-or { align-self: center; margin: 0; font-size: var(--body-text-sm); letter-spacing: 0.05em; text-align: center; } /* used: library-marketplace */
:where(.page-uma-library) .centred-or:last-of-type { margin-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-library) .uma-add-gif-label { margin: 0; font-size: var(--body-text-sm); } /* used: library-marketplace */
:where(.page-uma-library) .uma-add-gif { display: block; width: 100%; max-width: var(--max-content-width-golden-section-small); border-radius: var(--app-default-radius-sm); } /* used: library-marketplace */

/* Did we find the right one? The card, dimmed, with Yes and No over it */
:where(.page-uma-library) .uma-confirm-card--overlay { position: relative; display: flex; justify-content: center; width: 100%; max-width: var(--max-content-width-golden-section-small); margin-inline: auto; } /* used: library-marketplace */
:where(.page-uma-library) .confirm-card-before-cta { --confirm-card-gap: 0px; --confirm-card-body-bottom: 0px; } /* used: library-marketplace */
:where(.page-uma-library) .is-template { pointer-events: none; margin-bottom: var(--confirm-card-gap, var(--app-default-top-bottom-margin-lg)); } /* used: library-marketplace */
:where(.page-uma-library) .confirm-card-media { position: relative; } /* used: library-marketplace */
:where(.page-uma-library) .confirm-card-media::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: rgba(var(--black-rgb), var(--opacity-high)); opacity: var(--confirm-card-dim); pointer-events: none; transition: opacity var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-uma-library) .confirm-card-media-video::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: rgba(var(--black-rgb), var(--opacity-high)); opacity: var(--confirm-card-dim-video); pointer-events: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-library-podcast-card-artwork-image { display: block; width: 100%; height: 100%; object-fit: cover; } /* used: library-marketplace */
:where(.page-uma-library) .confirm-card-body { align-items: center; padding-bottom: var(--confirm-card-body-bottom, var(--app-default-top-bottom-margin-xxl)); text-align: center; color: var(--t-flow-text); } /* used: library-marketplace */
:where(.page-uma-library) .confirm-card-brand { justify-content: center; width: 100%; } /* used: library-marketplace */
:where(.page-uma-library) .uma-confirm-btns--overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: var(--z-confirm-overlay); display: flex; align-items: center; justify-content: center; gap: var(--gap-md); width: auto; height: auto; margin: 0; pointer-events: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-confirm-btns { display: flex; justify-content: center; gap: var(--gap-md); width: 100%; max-width: var(--max-content-width-golden-section-small); margin-inline: auto; } /* used: library-marketplace */
:where(.page-uma-library) .uma-confirm-btn { flex-shrink: 0; width: var(--button-size-xxl); pointer-events: auto; } /* used: library-marketplace */
:where(.page-uma-library) .uma-confirm-btn--yes-solid { background: var(--bright-white); color: var(--navy); border: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-confirm-btn--yes-solid:hover { background: var(--bright-white); filter: brightness(0.95); } /* used: library-marketplace */
:where(.page-uma-library) .uma-confirm-btn--no-glass { backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); background: rgba(var(--black-rgb), var(--opacity-low)); border: var(--stroke-hairline) solid var(--bright-white); color: var(--mid-white); } /* used: library-marketplace */
:where(.page-uma-library) .uma-confirm-btn--no-glass:hover { background: rgba(var(--black-rgb), var(--opacity-moderate)); } /* used: library-marketplace */

/* Your details: first and last name side by side, a red tab on a field with an error */
:where(.page-uma-library) .form-first-and-last-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); width: 100%; } /* used: library-marketplace */
:where(.page-uma-library) .form-required-marker { margin-left: var(--app-default-top-bottom-margin-xxxxs); color: inherit; } /* used: library-marketplace */
:where(.page-uma-library) .uma-form-input-wrap { position: relative; display: flex; align-items: stretch; } /* used: library-marketplace */
:where(.page-uma-library) .uma-form-input-invalid-icon { position: absolute; top: 0; right: 0; display: none; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; padding: 0; border: none; border-radius: 0 var(--btn-radius) var(--btn-radius) 0; background: var(--error); color: var(--bright-white); cursor: pointer; transition: background-color var(--transition-fast) ease; } /* used: library-marketplace */
:where(.page-uma-library) .uma-form-input-invalid-icon:hover { background: var(--red-dark); } /* used: library-marketplace */
:where(.page-uma-library .uma-form-input-invalid-icon) .ph-x-circle { font-size: var(--button-icon-lg); } /* used: library-marketplace */
:where(.page-uma-library) .form-group.has-error .uma-form-input-invalid-icon { display: flex; } /* used: library-marketplace */
:where(.page-uma-library) .field-error-message { display: none; } /* used: library-marketplace */
:where(.page-uma-library) .form-group.has-error .field-error-message { display: block; } /* used: library-marketplace */
:where(.page-uma-library) .featured-identity { appearance: none; -webkit-appearance: none; border-color: var(--light-charcoal); padding-left: var(--gap-lg); padding-right: var(--sort-select-caret-room); font-size: var(--body-text-xs); cursor: pointer; } /* used: library-marketplace */
:where(.page-uma-library) .dropdown-caret-on-field { color: var(--light-charcoal); } /* used: library-marketplace */
@media (max-width: 480px) {
  :where(.page-uma-library) .form-first-and-last-name-row { grid-template-columns: 1fr; } /* used: library-marketplace */
}

/* Read our terms: a plus that opens the two switches */
:where(.page-uma-library) .signup-terms { margin: var(--app-default-top-bottom-margin-md) 0 0; text-align: left; } /* used: library-marketplace */
:where(.page-uma-library) .signup-terms-toggle { position: relative; display: inline-flex; gap: var(--gap-xs); width: 100%; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--navy); font-family: inherit; font-size: var(--body-text-sm); font-weight: var(--font-weight-medium); cursor: pointer; } /* used: library-marketplace */
:where(.page-uma-library) .signup-terms-toggle::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: var(--terms-toggle-hit-height); transform: translateY(-50%); } /* used: library-marketplace */
:where(.page-uma-library) .signup-terms-toggle--on-dark { color: var(--mid-white); } /* used: library-marketplace */
/* FLAG: the plus and minus are drawn by an image mask, so their shape is a literal inside the image data */
:where(.page-uma-library) .signup-terms-plus { display: inline-flex; flex: none; justify-content: center; width: var(--button-icon-md); height: var(--button-icon-md); background-color: currentColor; -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cline x1='40' y1='128' x2='216' y2='128' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='128' y1='40' x2='128' y2='216' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E"); mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cline x1='40' y1='128' x2='216' y2='128' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E"); } /* used: library-marketplace */
:where(.page-uma-library) .signup-terms.is-open .signup-terms-plus { -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cline x1='40' y1='128' x2='216' y2='128' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E"); mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cline x1='40' y1='128' x2='216' y2='128' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E"); } /* used: library-marketplace */
:where(.page-uma-library) .signup-terms-body { max-height: 0; overflow: hidden; opacity: var(--opacity-hidden); transition: max-height var(--transition-base) ease, margin var(--transition-base) ease, opacity var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-uma-library) .signup-terms.is-open .signup-terms-body { max-height: var(--accordion-open-max-height); opacity: var(--opacity-visible); margin-top: var(--app-default-top-bottom-margin-xxxxs); } /* used: library-marketplace */
:where(.page-uma-library) .signup-terms-intro { margin-bottom: var(--app-default-top-bottom-margin-sm); font-size: var(--body-text-sm); font-weight: var(--font-weight-medium); } /* used: library-marketplace */
:where(.page-uma-library) .uma-form-switches { display: flex; flex-direction: column; } /* used: library-marketplace */
:where(.page-uma-library) .uma-form-switch-row { display: flex; justify-content: space-between; gap: var(--gap-regular); padding: var(--gap-md) 0; border-bottom: var(--stroke-hairline) solid rgba(var(--bright-white-rgb), var(--opacity-low)); } /* used: library-marketplace */
:where(.page-uma-library) .uma-form-switch-row:last-child { border-bottom: none; } /* used: library-marketplace */
:where(.page-uma-library) .uma-form-switch-label { flex: 1 1 0%; font-size: var(--body-text-xs); line-height: var(--default-line-height-small); cursor: pointer; } /* used: library-marketplace */
:where(.page-uma-library) .form-switch-link { display: inline-flex; align-items: baseline; gap: var(--gap-xxs); color: var(--bright-white); text-decoration: none; } /* used: library-marketplace */
:where(.page-uma-library) .form-switch-link:hover { color: var(--navy); } /* used: library-marketplace */
:where(.page-uma-library) .form-switch-link-icon { font-size: var(--button-icon-xs); } /* used: library-marketplace */
:where(.page-uma-library) .switch--on-red .switch-track { background: var(--navy); } /* used: library-marketplace */

/* The buttons on the red panels are navy with mid white text, disabled or not */
:where(.page-uma-library) .red-panel-btn { background: var(--navy); color: var(--mid-white); border-color: var(--navy); } /* used: library-marketplace */
:where(.page-uma-library) .red-panel-btn:disabled { background: var(--navy); color: var(--mid-white); border-color: var(--navy); } /* used: library-marketplace */
:where(.page-uma-library) .red-panel-btn:hover:not(:disabled) { background: var(--navy-dark); color: var(--mid-white); border-color: var(--navy-dark); filter: none; } /* used: library-marketplace */

/* Upload your video and your profile picture */
:where(.page-uma-library) .featured-upload-plus-disc { display: block; flex-shrink: 0; width: var(--button-size-xl); height: var(--button-size-xl); border-radius: var(--radius-circle); background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'><path fill='white' fill-rule='evenodd' d='M180,0A180,180,0,1,0,360,180,180,180,0,0,0,180,0ZM280,180a12,12,0,0,1-12,12H192v76a12,12,0,0,1-24,0V192H92a12,12,0,0,1,0-24h76V92a12,12,0,0,1,24,0v76h76A12,12,0,0,1,280,180Z'/></svg>") center / 100% 100% no-repeat; color: transparent; font-size: 0; line-height: 1; } /* used: library-marketplace */
:where(.page-uma-library) .uma-featured-criteria-list { color: rgba(var(--mid-white-rgb), var(--opacity-very-high)); } /* used: library-marketplace */
:where(.page-uma-library) .uma-featured-upload-status { color: var(--mid-white); } /* used: library-marketplace */

/* We have your video: green ticks */
:where(.page-uma-library) .uma-featured-steps { color: var(--mid-charcoal); } /* used: library-marketplace */
:where(.page-uma-library .uma-featured-steps) .tick-list-item { color: var(--t-flow-text); } /* used: library-marketplace */
:where(.page-uma-library) .tick-list-icon-green { color: var(--t-flow-tick); } /* used: library-marketplace */

/* Add your video bio: sized to its text above phone width */
@media (min-width: 601px) {
  :where(.page-uma-library) .button-fits-text-above-mobile { width: auto; align-self: flex-start; } /* used: library-marketplace */
}

/* The full screen video, over everything but the header and sidebar */
:where(.page-uma-library) .uma-video-drawer { position: fixed; top: var(--fixed-header-height); left: var(--sidebar-width); right: 0; bottom: 0; z-index: var(--z-video-drawer); display: none; flex-direction: column; background: var(--black); } /* used: library-marketplace */
:where(.page-uma-library) .uma-video-drawer.is-open { display: flex; } /* used: library-marketplace */
:where(.page-uma-library) .uma-video-drawer-close { position: absolute; top: var(--app-default-top-bottom-margin-md); right: var(--app-default-top-bottom-margin-md); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: var(--button-size-md); height: var(--button-size-md); padding: 0; border: var(--stroke-hairline) solid var(--bright-white); border-radius: var(--radius-circle); background: transparent; color: var(--bright-white); font-size: var(--button-icon-md); cursor: pointer; transition: background var(--transition-base); } /* used: library-marketplace */
:where(.page-uma-library) .uma-video-drawer-close:hover { background: rgba(var(--bright-white-rgb), var(--opacity-low)); } /* used: library-marketplace */
:where(.page-uma-library) .uma-video-drawer-content { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; } /* used: library-marketplace */
:where(.page-uma-library) .uma-video-drawer-iframe { display: block; width: 100%; height: 100%; border: none; } /* used: library-marketplace */
@media (max-width: 600px) {
  :where(.page-uma-library) .uma-video-drawer { top: 0; left: 0; } /* used: library-marketplace */
}

/* While a drawer is open the page behind it does not scroll */
:where(.page-uma-library).drawer-scroll-lock { overflow: hidden; overscroll-behavior: none; touch-action: none; } /* used: library-marketplace */
:where(.page-uma-library) .drawer-scroll-lock { touch-action: none; } /* used: library-marketplace */

/* The tabs keep a comfortable hit area */
:where(.page-uma-library) .pill-filter-item::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100%, var(--hit-area-comfort)); height: max(100%, var(--hit-area-comfort)); } /* used: library-marketplace */

/* LAST IN THE LIBRARY SECTION: the scripts on the library and the
   marketplace hide and show parts with .is-hidden. It has to win over every
   display the parts set, so it keeps the pages' !important. */
:where(.page-uma-library, .page-uma-marketplace) .is-hidden { display: none !important; } /* used: library-marketplace */


/* ==========================================================================
   MARKETPLACE (/marketplace). The page carries .page-uma-marketplace and
   .page-catalogue on <html>. It shares the library's tokens and theme, the
   sidebar, the hero's frame, the voices band, the search field and the
   drawer's plain close X (written in the library section with both pages
   named), the filter tab and drawer, and the catalogue cards.
   ========================================================================== */
:root:where(.page-uma-marketplace) { /* used: library-marketplace */
  --hero-title-width: 25ch;
  --t-proto-header: rgba(var(--bright-white-rgb), var(--opacity-very-high));
  --opacity-card-text: 0.85;
  --charity-logo-height: 3rem;
  --charity-button-min-width: 220px;
  --hero-video-filter: brightness(0.45) saturate(0.9);
  --header-tint-bleed: 30px;
  --intervention-header-tint: var(--opacity-low);
  --intervention-header-image: none;
  --header-fade-duration: 0.35s;
  --header-fade-blur: 24px;
  --t-glass: rgba(var(--black-rgb), var(--opacity-low));
  --t-sticky-pill: var(--navy);
  --t-sticky-pill-hover: var(--navy-dark);
  --t-sticky-pill-hover-bg: var(--hover-overlay-dark);
  --z-shop-sticky-bar: 100;
  --z-header-video-toggle: 100;
  --z-wishlist-pill-bar: 800;
  --z-sidebar-over-filters: 10000040;
  --t-drawer-close: var(--navy);
  --t-chip-light-text: var(--navy);
  /* The product drawer */
  --product-drawer-scrim: transparent;
  --product-drawer-hero-image: 360px;
  --product-drawer-hero-image-min: 200px;
  --t-drawer-save-bg: var(--mid-white);
  --t-strip-line: var(--mid-mushroom);
  --t-drawer-col-bg: transparent;
  --t-subheader-left-bg: var(--filter-nav-wide-bg);
  --t-verdict-tabs-bg: var(--t-tab-bg);
  --t-verdict-tab-bg: var(--t-tab-bg);
  /* The filter drawer's price slider and ingredient picker */
  --cycle-slider-thumb-width: 24px;
  --cycle-slider-thumb-height: 32px;
  --cycle-slider-thumb-radius: var(--radius-square-letter);
  --cycle-slider-track-height: 6px;
  --cycle-slider-track-radius: 3px;
  --price-pill-arrow: 6px;
  --price-handle-shadow: 0 2px 8px rgba(var(--black-rgb), 0.15);
  --price-handle-press: 0.05s;
  --price-handle-press-scale: 1.05;
  --ing-earmark-size: 60px;
  --ing-earmark-icon-inset: 9px;
  --t-price-pill-bg: rgba(var(--dark-teal-rgb), 0.15);
  --t-price-pill-text: var(--dark-teal);
  --t-picker-card: var(--bright-white);
  --t-picker-card-hover: var(--light-white);
  --t-picker-pill-hover: var(--navy-dark);
  --t-picker-pill-hover-bg: var(--hover-overlay-dark);
  /* The wish list drawer */
  --orange-rgb: 234, 113, 0;
  --wishlist-drawer-width: 700px;
  --wishlist-drawer-width-lg: 800px;
  --wishlist-tile-image-lg: 200px;
  --wishlist-tile-image-sm: 180px;
  --wishlist-tile-image-xs: 140px;
  --wishlist-tile-image-xxs: 120px;
  --wishlist-bin-size: 32px;
  --wishlist-scope-height: 44px;
  --wishlist-scope-radius: 12px;
  --wishlist-buy-width: 80px;
  --wishlist-promo-emoji-size: 3.5rem;
  --wishlist-buy-menu-max-width: 480px;
  --t-wishlist-bg: var(--bright-white);
  --t-wishlist-text: var(--navy);
  --t-wishlist-line: var(--dark-white);
  --t-wishlist-tile: var(--new-white);
  --t-wishlist-tile-hover: var(--light-white);
  --t-wishlist-muted: var(--light-charcoal);
  --t-wishlist-promo: var(--mid-white);
  --t-wishlist-figure: var(--light-charcoal);
  --t-empty-cta: var(--navy);
  --t-empty-cta-line: var(--navy);
  --t-scope-bg: transparent;
  --t-scope-line: var(--navy);
  --t-scope-line-style: solid;
  /* The pause and play discs are UMA.css's (set there for the home page) */
  --button-size-video-control: 2.1875rem;
  --icon-play-disc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m20,0C8.95,0,0,8.95,0,20s8.95,20,20,20,20-8.95,20-20S31.05,0,20,0Zm8.24,21.05l-11.18,6.84c-.38.23-.86.24-1.26.02-.39-.22-.63-.63-.63-1.07v-13.68c0-.45.24-.86.63-1.07.39-.22.87-.21,1.26.02l11.18,6.84c.37.22.59.62.59,1.05,0,.43-.22.83-.59,1.05Z'/></svg>");
  --icon-pause-disc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m20,0C8.95,0,0,8.95,0,20s8.95,20,20,20,20-8.95,20-20S31.05,0,20,0Zm-1.24,26.21c0,.69-.56,1.24-1.24,1.24h-3.1c-.69,0-1.24-.56-1.24-1.24v-12.41c0-.69.56-1.24,1.24-1.24h3.1c.69,0,1.24.56,1.24,1.24v12.41Zm8.07,0c0,.69-.56,1.24-1.24,1.24h-3.1c-.69,0-1.24-.56-1.24-1.24v-12.41c0-.69.56-1.24,1.24-1.24h3.1c.69,0,1.24.56,1.24,1.24v12.41Z'/></svg>");
  /* The white slider behind the chosen struggle; the page script moves it */
  --pill-slider-top: 0px;
  --pill-slider-left: -1000px;
  --pill-slider-width: 0px;
  /* The fact cards in the grid */
  --fact-card-mark-size: var(--uma-xxxxl);
  --fact-card-mark-line-height: var(--default-line-height-single);
  --fact-card-text-size: var(--body-text-xxl);
  /* The height of the sticky search and struggles bar. The header above it
     keeps this much room at its foot so the bar can sit over it. */
  --intervention-nav-height: calc(var(--app-default-top-bottom-margin-lg) + var(--field-height) + var(--app-default-top-bottom-margin-xl) + var(--app-default-top-bottom-margin-xl) + var(--button-size-md) + var(--app-default-top-bottom-margin-xl) + var(--app-default-top-bottom-margin-lg));
}
@media (min-width: 901px) {
  :root:where(.page-uma-marketplace) { --intervention-nav-height: calc(var(--app-default-top-bottom-margin-lg) + var(--field-height) + var(--app-default-top-bottom-margin-xxxxs) + var(--app-default-top-bottom-margin-xl) + var(--button-size-md) + var(--app-default-top-bottom-margin-xl) + var(--app-default-top-bottom-margin-lg)); } /* used: library-marketplace */
}
@media (max-width: 600px) {
  :root:where(.page-uma-marketplace) { --intervention-nav-height: calc(var(--app-default-top-bottom-margin-sm) + var(--button-size-md) + var(--app-default-top-bottom-margin-md) + var(--pill-filter-selected-height) + var(--app-default-top-bottom-margin-sm)); } /* used: library-marketplace */
}
@media (max-width: 599px) {
  :root:where(.page-uma-marketplace) { --intervention-nav-height: calc(var(--app-default-top-bottom-margin-sm) + var(--field-height) + var(--app-default-top-bottom-margin-md) + var(--pill-filter-selected-height) + var(--app-default-top-bottom-margin-sm)); } /* used: library-marketplace */
}
:root[data-theme="dark"]:where(.page-uma-marketplace) { /* used: library-marketplace */
  --t-section-white: var(--t-band-alt);
  --t-ing-text: var(--t-text-strong);
  --t-ing-muted: var(--t-text-strong);
  --t-ing-line: var(--t-divider);
  --t-ing-circle: var(--t-card);
  --t-ing-badge-bg: var(--t-tab-bg);
  --t-ing-badge-text: var(--t-text-strong);
  --t-chip-light-bg: var(--navy-dark);
  --t-price-pill-bg: var(--dark-teal);
  --t-price-pill-text: var(--t-text-strong);
  --t-picker-card: var(--t-band-alt);
  --t-picker-card-hover: var(--t-card);
  --t-picker-pill-hover: var(--t-text-strong);
  --t-picker-pill-hover-bg: var(--t-tab-bg);
  --t-drawer-save-bg: var(--t-page-bg);
  --t-shop-ink: var(--t-text-strong);
  --t-shop-muted: var(--t-text-strong);
  --t-price-ink: var(--t-text-strong);
  --t-search-text: var(--mid-charcoal);
  --t-search-text-muted: var(--light-charcoal);
  --t-search-caret: var(--navy);
  --t-subheader-left-bg: var(--t-card);
  --t-drawer-col-bg: var(--t-band-alt);
  --t-strip-line: var(--t-divider);
  --t-verdict-tabs-bg: var(--navy);
  --t-verdict-tab-bg: transparent;
  --t-tab-divider: transparent;
  --t-card-panel: var(--t-card);
  --t-card-light: var(--t-card);
  --t-card-light-text: var(--t-page-text);
  --t-card-light-hover: var(--t-card);
  --t-card-light-strong: var(--t-text-strong);
  --t-card-light-muted: var(--t-text-secondary);
  --t-card-light-figure: var(--t-text-strong);
  --t-chip-text: var(--bright-white);
  --t-chip-line: rgba(var(--bright-white-rgb), var(--opacity-moderate));
  --t-chip-bg: transparent;
  --t-wishlist-bg: var(--navy-40);
  --t-wishlist-text: var(--bright-white);
  --t-wishlist-line: rgba(var(--bright-white-rgb), var(--opacity-low));
  --t-wishlist-tile: var(--navy);
  --t-wishlist-tile-hover: var(--navy);
  --t-wishlist-muted: var(--t-text-strong);
  --t-wishlist-promo: var(--navy);
  --t-wishlist-figure: var(--t-text-secondary);
  --t-empty-cta: var(--bright-white);
  --t-empty-cta-line: rgba(var(--bright-white-rgb), var(--opacity-moderate));
  --t-scope-bg: var(--navy);
  --t-scope-line: transparent;
  --t-scope-line-style: none;
  --t-glass: rgba(var(--navy-60-rgb), var(--opacity-very-high));
  --t-sticky-pill: var(--bright-white);
  --t-sticky-pill-hover: var(--bright-white);
  --t-sticky-pill-hover-bg: rgba(var(--bright-white-rgb), var(--opacity-low));
}

:where(.page-uma-marketplace) .marketplace-body { background: var(--t-page-bg); color: var(--t-page-text); } /* used: library-marketplace */

/* The temporary header, beside the sidebar */
:where(.page-uma-marketplace) .proto-header { position: relative; top: 0; left: var(--sidebar-width); right: 0; width: calc(100% - var(--sidebar-width)); height: var(--fixed-header-height); background: var(--t-proto-header); backdrop-filter: blur(var(--blur-lg)); border-bottom: var(--stroke-hairline) solid var(--t-proto-header-line); z-index: 99; transition: filter var(--transition-base) ease; } /* used: library-marketplace */

/* The hero: a video under a navy veil, the title and intro in a golden
   column. The frame (height, centring, navy) is the library's. */
:where(.page-uma-marketplace) .uma-hero { padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); box-sizing: border-box; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-hero::before { content: ""; position: absolute; inset: 0; background: var(--navy); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 25% center; z-index: 0; filter: var(--hero-video-filter); pointer-events: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-hero-video-toggle { position: absolute; bottom: var(--app-default-top-bottom-margin-xl); right: var(--app-default-top-bottom-margin-xl); z-index: 2; } /* used: library-marketplace */
:where(.page-uma-marketplace) .panel-column-golden { width: 100%; max-width: var(--max-content-width-golden-section-large); margin-left: auto; margin-right: auto; box-sizing: border-box; text-align: center; } /* used: library-marketplace */
/* The science panel: the band runs edge to edge and its column carries the side room */
:where(.page-uma-marketplace) .panel-section-flush { padding-left: 0; padding-right: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .science-column { width: 100%; max-width: calc(var(--max-content-width-golden-section-large) + var(--default-left-right-desk-body-padding) * 2); margin-left: auto; margin-right: auto; padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); box-sizing: border-box; text-align: center; } /* used: library-marketplace */
@media (max-width: 600px) {
  :where(.page-uma-marketplace) .science-column { width: calc(100% - var(--default-left-right-mob-body-padding) * 2); max-width: var(--max-content-width-golden-section-large); margin-left: var(--default-left-right-mob-body-padding); margin-right: var(--default-left-right-mob-body-padding); padding-left: 0; padding-right: 0; } /* used: library-marketplace */
}
:where(.page-uma-marketplace) .uma-marketplace-hero-intro { font-size: var(--body-text-xl); } /* used: library-marketplace */
:where(.page-uma-marketplace) .panel-heading-second-line { display: block; } /* used: library-marketplace */

/* The header over the struggles: a muted video, the heading and intro on
   the left. Its foot leaves room for the sticky bar, which sits over it. */
:where(.page-uma-marketplace) .video-header-band { position: relative; z-index: 1; overflow: hidden; padding-bottom: calc(var(--app-default-top-bottom-margin-xl) + var(--intervention-nav-height)); backdrop-filter: blur(var(--blur-md)); transition: filter var(--transition-base) ease; } /* used: library-marketplace */
/* The tint over the band's picture. The page script swaps the picture and
   the tint for each pill through --intervention-header-image and -tint, and
   blurs it while the new picture fades in */
:where(.page-uma-marketplace) .video-header-band::before { content: ""; position: absolute; inset: calc(-1 * var(--header-tint-bleed)); background: linear-gradient(rgba(var(--black-rgb), var(--intervention-header-tint)), rgba(var(--black-rgb), var(--intervention-header-tint))), var(--intervention-header-image) center / cover no-repeat; transition: filter var(--header-fade-duration); z-index: 0; pointer-events: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .is-image-fading::before { filter: blur(var(--header-fade-blur)); } /* used: library-marketplace */
:where(.page-uma-marketplace) .intervention-menu-header-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--transition-base); pointer-events: none; z-index: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .has-video .intervention-menu-header-video { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-marketplace) .intervention-menu-video-toggle { position: absolute; top: var(--app-default-top-bottom-margin-xl); right: var(--app-default-top-bottom-margin-xl); z-index: var(--z-header-video-toggle); opacity: 0; pointer-events: none; transition: opacity var(--transition-base); } /* used: library-marketplace */
:where(.page-uma-marketplace) .has-video .intervention-menu-video-toggle { opacity: 1; pointer-events: auto; } /* used: library-marketplace */
/* UMA.css leaves room on the right of this text for the sidebar; here the
   room is the page padding */
:where(.page-uma-marketplace) .header-text-even-padding { --mirror-right-padding: var(--default-left-right-desk-body-padding); width: 100%; box-sizing: border-box; } /* used: library-marketplace */
:where(.page-uma-marketplace) .intervention-menu-heading { max-width: 15ch; margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-sm); padding-top: 0; font-size: var(--heading-size-xl); font-weight: var(--font-weight-light); line-height: var(--default-line-height-x-small); color: rgba(var(--mid-white-rgb), var(--opacity-near-full)); } /* used: library-marketplace */
/* UMA.css sets .intervention-menu-header p; the two classes are for weight */
:where(.page-uma-marketplace) .video-header-band .intervention-menu-intro { max-width: var(--max-content-width-golden-section-large); font-size: var(--body-text-lg); color: rgba(var(--mid-white-rgb), var(--opacity-very-high)); } /* used: library-marketplace */
@media (prefers-reduced-motion: reduce) {
  :where(.page-uma-marketplace) .uma-hero-video,
  :where(.page-uma-marketplace) .intervention-menu-header-video { display: none; } /* used: library-marketplace */
}

/* The sticky bar: the search field and the struggles. It sits over the foot
   of the header, clear, and frosts once it sticks. */
:where(.page-uma-marketplace) .shop-sticky-bar { top: 0; z-index: var(--z-shop-sticky-bar); margin-top: calc(-1 * var(--intervention-nav-height)); background: transparent; transition: background var(--transition-base) ease, backdrop-filter var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-uma-marketplace) .shop-sticky-bar.is-sticky { backdrop-filter: blur(var(--blur-md)); background: var(--t-glass); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-drawer-open .shop-sticky-bar { z-index: var(--filter-drawer-open-layer); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-drawer-open .proto-sidebar { z-index: var(--z-sidebar-over-filters); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-drawer-open .fact-card-download-overlay { display: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-library-nav-wrapper { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; padding: var(--app-default-top-bottom-margin-lg) var(--default-left-right-desk-body-padding) 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-library-tab-nav-inner { display: inline-flex; flex-direction: column; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-library-search-controls { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: var(--gap-md); width: 100%; margin-bottom: var(--app-default-top-bottom-margin-xl); transition: filter var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-uma-marketplace) .field-action--in-search-controls { padding-right: calc(var(--gap-xs) / 2); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-library-search-clear,
:where(.page-uma-marketplace) .uma-library-search-mic { position: relative; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-library-search-clear::after,
:where(.page-uma-marketplace) .uma-library-search-mic::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100%, var(--hit-area-comfort)); height: max(100%, var(--hit-area-comfort)); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-library-search-mic { flex-shrink: 0; align-self: center; width: calc(var(--field-height) - var(--gap-sm)); height: calc(var(--field-height) - var(--gap-sm)); } /* used: library-marketplace */
/* The struggles: the chosen one is navy text on the white slider */
:where(.page-uma-marketplace) .uma-fullscreen-default-carouselle { position: relative; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-fullscreen-default-carouselle::before { content: ""; position: absolute; top: var(--pill-slider-top); left: var(--pill-slider-left); width: var(--pill-slider-width); height: var(--button-size-md); background: var(--bright-white); border-radius: var(--radius-pill); z-index: 1; pointer-events: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .intervention-menu-item { position: relative; z-index: 2; padding-top: 0; padding-bottom: 0; cursor: pointer; } /* used: library-marketplace */
:where(.page-uma-marketplace) .intervention-menu-item:hover .intervention-menu-item-label { background: rgba(var(--black-rgb), var(--opacity-moderate)); } /* used: library-marketplace */
:where(.page-uma-marketplace) .intervention-menu-item:active .intervention-menu-item-label { background: var(--bright-white); color: var(--navy); border-color: var(--bright-white); } /* used: library-marketplace */
:where(.page-uma-marketplace) .shop-sticky-bar.is-sticky .intervention-menu-item-label { color: var(--t-sticky-pill); border-color: var(--t-sticky-pill); } /* used: library-marketplace */
:where(.page-uma-marketplace) .shop-sticky-bar.is-sticky .intervention-menu-item:hover .intervention-menu-item-label { background: var(--t-sticky-pill-hover-bg); color: var(--t-sticky-pill-hover); border-color: var(--t-sticky-pill-hover); } /* used: library-marketplace */
/* The chosen pill last, so it wins over the hover and sticky lines above:
   these carry the same weight and come later. */
:where(.page-uma-marketplace) .intervention-menu-item .intervention-menu-item-pill-selected,
:where(.page-uma-marketplace) .intervention-menu-item:hover .intervention-menu-item-pill-selected,
:where(.page-uma-marketplace) .intervention-menu-item:active .intervention-menu-item-pill-selected,
:where(.page-uma-marketplace) .shop-sticky-bar.is-sticky .intervention-menu-item .intervention-menu-item-pill-selected,
:where(.page-uma-marketplace) .shop-sticky-bar.is-sticky .intervention-menu-item:hover .intervention-menu-item-pill-selected { background: transparent; color: var(--navy); border-color: transparent; } /* used: library-marketplace */

/* The products: a carousel on phones, a grid of two from 850 and three
   from 1204 */
:where(.page-uma-marketplace) .market-place-grid-to-carouselle { display: flex; gap: var(--gap-regular); width: 100%; height: fit-content; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding: var(--app-default-top-bottom-margin-xl) var(--default-left-right-desk-body-padding); scroll-padding-left: var(--default-left-right-desk-body-padding); scroll-padding-right: var(--default-left-right-desk-body-padding); transition: filter var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-uma-marketplace) .market-place-grid-to-carouselle::-webkit-scrollbar { display: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .fact-card-download-icon { font-size: var(--button-icon-lg); } /* used: library-marketplace */

/* The brand line over a card's name sits tight; the price under it keeps
   its own gap (:last-of-type is for weight against UMA.css's p:last-of-type) */
:where(.page-uma-marketplace) .catalogue-eyebrow { line-height: var(--default-line-height-single); } /* used: library-marketplace */
:where(.page-uma-marketplace .card-body) .card-price--light:last-of-type { margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: library-marketplace */
:where(.page-uma-marketplace) .fact-card { z-index: 0; } /* used: library-marketplace */

/* The cards' plus button, bottom right of the picture */
:where(.page-uma-marketplace) .card-add-btn { position: absolute; bottom: var(--gap-sm); right: var(--gap-sm); z-index: 3; display: flex; align-items: center; justify-content: center; width: var(--button-size-md); height: var(--button-size-md); padding: 0; border: none; border-radius: var(--radius-circle); background: var(--bright-white); color: var(--navy); cursor: pointer; opacity: 0; transition: opacity var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-uma-marketplace) .card-add-btn::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100%, var(--hit-area-comfort)); height: max(100%, var(--hit-area-comfort)); } /* used: library-marketplace */
:where(.page-uma-marketplace) .card-add-btn:focus-visible { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-marketplace) .card-add-btn-icon { font-size: var(--button-icon-md); color: var(--mid-charcoal); mix-blend-mode: multiply; } /* used: library-marketplace */
:where(.page-uma-marketplace) .card-add-btn:hover .card-add-btn-icon { color: var(--dark-charcoal); } /* used: library-marketplace */
/* The card's back: what is in it */
:where(.page-uma-marketplace) .card-back-header { display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0; padding-top: var(--app-default-top-bottom-margin-xl); padding-bottom: var(--gap-md); } /* used: library-marketplace */
:where(.page-uma-marketplace) .card-back-scrollable { flex: 1 1 0%; min-height: 0; overflow-y: auto; padding-top: var(--app-default-top-bottom-margin-lg); scrollbar-width: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .card-back-scrollable::-webkit-scrollbar { display: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .card-back-section { margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-uma-marketplace) .card-back-section-label { margin-bottom: var(--app-default-top-bottom-margin-xxxs); padding-bottom: var(--gap-xxs); border-bottom: var(--stroke-hairline) solid var(--t-ing-line); font-size: var(--body-text-xs); font-weight: var(--font-weight-normal); color: var(--t-ing-muted); } /* used: library-marketplace */
:where(.page-uma-marketplace .card-back) .ing-table { display: contents; } /* used: library-marketplace */
:where(.page-uma-marketplace) .btn-label-full { display: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .btn-label-short { display: inline; } /* used: library-marketplace */
:where(.page-uma-marketplace) .ing-visual-benefit { display: inline-flex; align-items: center; gap: var(--gap-xxs); height: var(--button-size-xs); padding: 0 var(--gap-md); border-radius: var(--radius-pill); background: var(--t-ing-badge-bg); color: var(--t-ing-badge-text); font-size: var(--body-text-xs); pointer-events: none; user-select: none; } /* used: library-marketplace */
/* The ingredient badges here are a little taller than the discounts page's,
   and can be pressed where their row allows it */
:where(.page-uma-marketplace) .ing-badge { height: auto; min-height: var(--button-size-xs); line-height: var(--default-line-height-small); cursor: pointer; pointer-events: inherit; transition: background var(--transition-base); } /* used: library-marketplace */
:where(.page-uma-marketplace) .ing-visual-name { line-height: var(--default-line-height-x-small); } /* used: library-marketplace */
@media (hover: hover) {
  :where(.page-uma-marketplace) .card-image:hover .card-add-btn { opacity: 1; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .ing-badge:hover { background: var(--bright-teal); color: var(--bright-white); } /* used: library-marketplace */
}
@media (hover: none) {
  :where(.page-uma-marketplace) .card-add-btn { opacity: 1; } /* used: library-marketplace */
}
@media (min-width: 1280px) {
  :where(.page-uma-marketplace) .btn-label-full { display: inline; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .btn-label-short { display: none; } /* used: library-marketplace */
}
:where(.page-uma-marketplace) .fact-card--paper { color: var(--mid-charcoal); background: var(--dark-white) url("https://images.unsplash.com/photo-1615800098799-0ccb261b1f92?q=80&w=1610&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") center center / cover no-repeat; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-bibliosmia-definition--card { font-size: var(--body-text-sm); } /* used: library-marketplace */
/* The signposting card: a teal card in the fact card's frame. Its words are
   UMA.css's signposting classes; on this page they are mid-white. */
:where(.page-uma-marketplace) .charity-card { padding: var(--app-default-top-bottom-margin-xl); box-sizing: border-box; background: var(--dark-teal); color: var(--bright-white); z-index: auto; } /* used: library-marketplace */
:where(.page-uma-marketplace) .charity-card-eyebrow { --bright-white-rgb: var(--mid-white-rgb); } /* used: library-marketplace */
:where(.page-uma-marketplace) .charity-card-title { --white-text-default: var(--mid-white); } /* used: library-marketplace */
:where(.page-uma-marketplace) .charity-card-text { --bright-white-rgb: var(--mid-white-rgb); } /* used: library-marketplace */
:where(.page-uma-marketplace) .charity-logo-spaced { margin-bottom: var(--app-default-top-bottom-margin-md); } /* used: library-marketplace */
/* Her footer: the address and the Uma mark, small and faded */
:where(.page-uma-marketplace) .charity-card-footer { color: rgba(var(--mid-white-rgb), var(--opacity-high)); font-size: var(--body-text-xxs); font-weight: var(--font-weight-medium); } /* used: library-marketplace */
:where(.page-uma-marketplace) .charity-card-footer-link { flex: 1 1 0%; color: inherit; text-decoration: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .charity-card-footer-link:hover { color: var(--orange); } /* used: library-marketplace */
:where(.page-uma-marketplace) .charity-button { min-width: var(--charity-button-min-width); flex-shrink: 1; background: var(--bright-white); color: var(--dark-teal); line-height: normal; transition: background var(--transition-fast); } /* used: library-marketplace */
:where(.page-uma-marketplace) .charity-button:hover { background: var(--new-white); } /* used: library-marketplace */
/* UMA.css sizes .btn-md i; the two classes are for weight */
:where(.page-uma-marketplace) .charity-button .charity-button-icon { font-size: var(--button-icon-sm); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-marketplace-empty-state { text-align: center; padding: calc(var(--gap-lg) + var(--app-default-top-bottom-margin-xl)) 0 var(--gap-lg); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-marketplace-empty-text { margin: 0; color: var(--t-emphasis); } /* used: library-marketplace */

@media (min-width: 601px) {
  :where(.page-uma-marketplace .market-place-grid-to-carouselle) .product-card { container-type: inline-size; } /* used: library-marketplace */
  :where(.page-uma-marketplace .market-place-grid-to-carouselle) .card-front { min-height: calc(100cqi / (var(--carouselle-card-ratio-nine-by-sixteen))); } /* used: library-marketplace */
}
@media (min-width: 601px) and (max-width: 1279px) {
  :where(.page-uma-marketplace .market-place-grid-to-carouselle) .card-good-for { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-right: calc(-1 * var(--app-default-top-bottom-margin-lg)); padding-right: var(--app-default-top-bottom-margin-lg); } /* used: library-marketplace */
  :where(.page-uma-marketplace .market-place-grid-to-carouselle) .card-good-for::-webkit-scrollbar { display: none; } /* used: library-marketplace */
  :where(.page-uma-marketplace .market-place-grid-to-carouselle .card-good-for) .good-for-tag { flex-shrink: 0; } /* used: library-marketplace */
}
@media (min-width: 850px) {
  :where(.page-uma-marketplace) .market-place-grid-to-carouselle { display: grid; grid-template-columns: repeat(2, max-content); grid-auto-rows: 1fr; align-items: stretch; column-gap: var(--default-gap); row-gap: var(--default-gap); overflow-y: visible; height: auto; min-height: 0; } /* used: library-marketplace */
}
@media (min-width: 901px) {
  :where(.page-uma-marketplace) .uma-library-search-controls { margin-bottom: var(--app-default-top-bottom-margin-xxxxs); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-library-nav-wrapper.is-sticky .uma-library-search-controls { margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-drawer-open .video-header-band { z-index: calc(var(--filter-backdrop-layer) + 1); } /* used: library-marketplace */
}
@media (min-width: 1204px) {
  :where(.page-uma-marketplace) .market-place-grid-to-carouselle { grid-template-columns: repeat(3, max-content); } /* used: library-marketplace */
}
@media (min-width: 1280px) {
  :where(.page-uma-marketplace) .fact-card-mark { margin-bottom: calc(-1 * var(--app-default-top-bottom-margin-xxs)); } /* used: library-marketplace */
}
@media (min-width: 900px) and (max-width: 1279px) {
  :where(.page-uma-marketplace) .fact-card-mark { margin-bottom: calc(-1 * var(--app-default-top-bottom-margin-lg)); } /* used: library-marketplace */
}
@media (min-width: 601px) and (max-width: 899px) {
  :where(.page-uma-marketplace) .fact-card-mark { margin-bottom: calc(-1 * var(--app-default-top-bottom-margin-xl)); } /* used: library-marketplace */
}
@media (max-width: 899px) {
  :where(.page-uma-marketplace) .uma-hero { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
  /* Below 900 a card's words sit straight on the page, under a rounded picture */
  :where(.page-uma-marketplace) .card-image { border-radius: var(--app-default-radius-lg); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .card-body--light { padding-top: var(--app-default-top-bottom-margin-sm); background: transparent; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .card-body--light:hover { background: transparent; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .card-body--light.card-body--hovered { background: transparent; } /* used: library-marketplace */
}
@media (max-width: 850px) {
  :where(.page-uma-marketplace) .uma-library-tab-nav-inner { width: 100%; } /* used: library-marketplace */
}
@media (max-width: 600px) {
  :where(.page-uma-marketplace) .proto-header { left: 0; right: auto; width: 100dvw; transition: transform var(--transition-base) ease; will-change: transform; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-header-hidden .proto-header { transform: translateY(-100%); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .header-text-even-padding { --mirror-right-padding: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .shop-sticky-bar { padding-bottom: var(--app-default-top-bottom-margin-sm); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-library-nav-wrapper { padding: var(--app-default-top-bottom-margin-sm) 0 0; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-library-search-controls { width: calc(100% - var(--default-left-right-mob-body-padding) * 2); margin: 0 var(--default-left-right-mob-body-padding) var(--app-default-top-bottom-margin-md); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .field-action--in-search-controls { max-width: none; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-fullscreen-default-carouselle { padding-top: 0; padding-bottom: 0; gap: var(--gap-xxs); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-fullscreen-default-carouselle::before { height: var(--pill-filter-selected-height); } /* used: library-marketplace */
  :where(.page-uma-marketplace .uma-fullscreen-default-carouselle) .intervention-menu-item-label { height: var(--pill-filter-selected-height); line-height: var(--pill-filter-selected-height); border-radius: calc(var(--pill-filter-selected-height) / 2); padding-left: var(--nav-link-padding-horizontal); padding-right: var(--nav-link-padding-horizontal); font-size: var(--body-text-xs); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .market-place-grid-to-carouselle { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); scroll-padding-left: var(--default-left-right-mob-body-padding); scroll-padding-right: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
  :where(.page-uma-marketplace .card-good-for) .good-for-tag { display: none; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .fact-card-text { margin-top: calc(-1 * var(--app-default-top-bottom-margin-xxl)); } /* used: library-marketplace */
}
@media (max-width: 599px) {
  :where(.page-uma-marketplace) .field-action--in-search-controls { height: var(--button-size-lg); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-library-search-mic { aspect-ratio: 1 / 1; width: var(--button-size-md); height: var(--button-size-md); } /* used: library-marketplace */
}

/* --------------------------------------------------------------------------
   The product drawer: the library drawer's width. The picture square and the
   name, price and Buy side by side, the ways to save under them, then the
   details strip and the sections stacked, then the reviews.
   -------------------------------------------------------------------------- */
:where(.page-uma-marketplace) .uma-product-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-product-drawer); display: flex; flex-direction: column; width: 100%; max-width: var(--drawer-width); overflow-x: hidden; overflow-y: auto; background: var(--t-drawer-bg); color: var(--navy); visibility: hidden; transform: translateX(100%); transition: transform var(--product-drawer-slide) ease-in-out, visibility linear var(--product-drawer-slide); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-body { flex-shrink: 0; display: flex; flex-direction: column; padding: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-hero { display: flex; flex-direction: row; align-items: flex-start; column-gap: var(--app-default-top-bottom-margin-lg); row-gap: 0; padding: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-image-col { display: flex; flex: 0 0 auto; align-self: flex-start; width: var(--product-drawer-hero-image); min-width: var(--product-drawer-hero-image-min); background: var(--pure-white); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-image-stack { width: var(--product-drawer-hero-image); height: var(--product-drawer-hero-image); aspect-ratio: 1 / 1; background: var(--pure-white); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-preview-slide { position: relative; display: flex; align-items: center; justify-content: center; width: var(--product-drawer-hero-image); height: var(--product-drawer-hero-image); min-height: var(--product-drawer-hero-image); max-height: var(--product-drawer-hero-image); aspect-ratio: 1 / 1; overflow: hidden; border-radius: 0; background: var(--pure-white); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-preview-image { padding: 0; background: var(--pure-white); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-earmark { position: absolute; top: 0; right: 0; } /* used: library-marketplace */
/* On the white picture the heart is charcoal */
:where(.page-uma-marketplace) .uma-product-drawer-earmark .uma-wishlist-earmark-icon { color: var(--mid-charcoal); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-earmark:hover .uma-wishlist-earmark-icon,
:where(.page-uma-marketplace) .uma-product-drawer-earmark[aria-pressed="true"] .uma-wishlist-earmark-icon { color: var(--dark-charcoal); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-hero-info { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: flex-start; gap: 0; min-width: 0; padding: var(--app-default-top-bottom-margin-xl) var(--drawer-media-padding) 0 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-name { margin: calc(var(--gap-sm) - var(--app-default-top-bottom-margin-xxs)) 0 var(--gap-sm); font-size: var(--heading-size-md); font-weight: var(--font-weight-light); line-height: var(--default-line-height-x-small); color: var(--t-shop-ink); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-sold-by { margin: 0 0 var(--app-default-top-bottom-margin-lg); font-size: var(--body-text-xs); line-height: var(--default-line-height-single); color: var(--t-shop-muted); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer-hero-info) .catalogue-eyebrow { color: var(--light-charcoal); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer-hero-info) .uma-product-drawer-price { margin-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-sm); margin: 0; padding-top: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-save-more { display: flex; flex-direction: column; gap: var(--gap-xl); align-self: stretch; margin: var(--app-default-top-bottom-margin-xl) var(--drawer-media-padding) var(--app-default-top-bottom-margin-sm); padding: var(--gap-xl); background: var(--t-drawer-save-bg); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer-save-more) .uma-product-drawer-save-row { padding: 0; background: transparent; } /* used: library-marketplace */
:where(.page-uma-marketplace) .copy-btn-icon { font-size: var(--button-icon-sm); } /* used: library-marketplace */
/* Below the picture: the details strip, then the sections */
:where(.page-uma-marketplace) .uma-product-drawer-content-col { width: 100%; max-width: 100%; margin: 0 0 var(--app-default-top-bottom-margin-xxxl); padding: 0; box-sizing: border-box; text-align: left; background: var(--t-drawer-col-bg); } /* used: library-marketplace */
:where(.page-uma-marketplace) .drawer-book-product-details { display: flex; flex-flow: row; gap: 0; width: 100%; max-width: 100%; margin: 0; padding: var(--app-default-top-bottom-margin-xl) var(--drawer-media-padding) 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .drawer-book-product-details::-webkit-scrollbar { display: none; width: 0; height: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-book-product-details) .ing-row { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: flex-start; min-width: var(--uma-xxxl); padding: 0 var(--gap-md); text-align: center; border-bottom: none; border-right: var(--stroke-hairline) solid var(--t-strip-line); } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-book-product-details) .ing-row:last-child { border-right: none; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer) .ing-rda { color: var(--mid-charcoal); } /* used: library-marketplace */
:root[data-theme="dark"]:where(.page-uma-marketplace) .verdict-tab-second { border-left-style: none; } /* used: library-marketplace */
:root[data-theme="dark"]:where(.page-uma-marketplace) :where(.uma-product-drawer) .brand-link { color: var(--t-text-strong); } /* used: library-marketplace */
:root[data-theme="dark"]:where(.page-uma-marketplace) :where(.uma-product-drawer) .take-note-box { color: var(--t-text-strong); } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-book-product-details) .ing-amount { order: 1; font-size: var(--heading-size-sm); font-weight: var(--font-weight-medium); line-height: var(--default-line-height-x-small); color: var(--t-stat-value); white-space: nowrap; } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-book-product-details) .ing-name { order: 2; margin-top: var(--gap-xs); font-size: var(--body-text-xxs); font-weight: var(--font-weight-normal); letter-spacing: var(--stat-label-letter-spacing); text-transform: uppercase; color: var(--t-stat-label); white-space: nowrap; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer-content-col) .uma-product-drawer-section { display: flex; flex-direction: column; gap: var(--gap-lg); max-width: none; margin: 0; padding: var(--app-default-top-bottom-margin-xxxxl) var(--drawer-media-padding) 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-section-title { margin: var(--app-default-top-bottom-margin-xl) 0 var(--app-default-top-bottom-margin-md); font-size: var(--heading-size-xs); font-weight: var(--font-weight-light); color: var(--t-shop-ink); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer-content-col) .uma-product-drawer-section-title { margin: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer-content-col) .ing-badges { margin-top: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer-content-col) .ing-visual { margin-top: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer-content-col) .ing-visual-text { gap: var(--gap-md); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer-content-col) .ing-visual-name { margin-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer-content-col) .ing-table { display: block; margin-top: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer-content-col) .ing-table-header { align-items: baseline; margin-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer-content-col) .uma-product-drawer-safety-note { margin: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .product-description { margin: 0; font-size: var(--body-text-xs); line-height: var(--default-line-height-large); color: var(--t-shop-ink); } /* used: library-marketplace */
/* Take note: a soft box */
:where(.page-uma-marketplace) .take-note-box { display: flex; flex-direction: column; gap: var(--gap-xs); padding: var(--gap-xl); border-radius: var(--app-default-radius-md); background: var(--t-drawer-save-bg); } /* used: library-marketplace */
/* UMA.css gives the last paragraph 2rem with p:last-of-type; :last-of-type
   is here for weight */
:where(.page-uma-marketplace) .product-description:last-of-type { margin-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-safety-note:last-of-type { margin-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .review-card-quote:last-of-type { margin-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .ing-badge[href="#"] { display: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .support-for-group { display: none; } /* used: library-marketplace */

/* The reviews: the heading, the thumbs and the sort menu, the cards, then
   the arrows and Post review in a row under them */
:where(.page-uma-marketplace .uma-product-drawer-reviews-full) .uma-product-drawer-section--reviews { position: relative; display: flex; flex-direction: column; align-items: stretch; width: 100%; min-height: var(--reviews-section-min-height); margin-bottom: 0; padding: var(--app-default-top-bottom-margin-xl) 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-section-title--reviews { display: block; margin: 0 0 var(--app-default-top-bottom-margin-md); font-size: var(--heading-size-lg); font-weight: var(--font-weight-light); line-height: var(--default-line-height-x-small); color: var(--t-drawer-heading); text-align: left; } /* used: library-marketplace */
:where(.page-uma-marketplace) .reviews-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-md); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-reviews-inset { padding-left: var(--drawer-media-padding); padding-right: var(--drawer-media-padding); } /* used: library-marketplace */
:where(.page-uma-marketplace) .reviews-controls { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--app-default-top-bottom-margin-lg); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-drawer-reviews-sort { height: var(--field-height); } /* used: library-marketplace */
/* The thumbs: in dark the pair sits on navy and only the chosen one is filled */
:where(.page-uma-marketplace) .uma-drawer-reviews-tabs { background-color: var(--t-verdict-tabs-bg); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-drawer-reviews-tabs) .verdict-tab { background-color: var(--t-verdict-tab-bg); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-drawer-reviews-tabs) .verdict-tab--selected { background-color: var(--t-tab-selected-bg); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-reviews-carousel { display: flex; flex-direction: row; gap: var(--gap-regular); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: var(--app-default-top-bottom-margin-xl) var(--drawer-media-padding) var(--app-default-top-bottom-margin-xxxxl); scroll-padding-left: var(--drawer-media-padding); scroll-padding-right: var(--drawer-media-padding); scrollbar-width: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .drawer-close-plain { color: var(--t-drawer-close); font-size: var(--gap-lg); } /* used: library-marketplace */
:where(.page-uma-marketplace) .product-drawer-close { color: var(--navy); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-bibliosmia-panel { overflow: hidden; } /* used: library-marketplace */
:where(.page-uma-marketplace) .card-back--savings { overflow: visible; } /* used: library-marketplace */
/* The X and the round closes keep a comfortable hit area */
:where(.page-uma-marketplace) .review-form-close::after,
:where(.page-uma-marketplace) .drawer-close-plain::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100%, var(--hit-area-comfort)); height: max(100%, var(--hit-area-comfort)); } /* used: library-marketplace */
/* Post is grey until a rating is given */
:where(.page-uma-marketplace) .drawer-review-submit:disabled { background: var(--dark-white); color: var(--light-charcoal); border-color: var(--dark-white); opacity: 1; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer) .uma-carousel-nav { padding-left: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
:where(.page-uma-marketplace .reviews-bottom-row) .uma-carousel-nav { margin: 0 auto 0 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .drawer-reviews-bottom-row { justify-content: flex-end; padding-right: var(--drawer-media-padding); padding-bottom: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-drawer-reviews-header { display: flex; align-items: baseline; justify-content: flex-end; top: var(--drawer-post-btn-top); right: var(--app-default-top-bottom-margin-xl); z-index: 2; margin: 0; padding: 0; background: transparent; } /* used: library-marketplace */
/* The panels: reading the reviews, or writing one */
:where(.page-uma-marketplace .uma-product-drawer-reviews-full) .uma-chrome-feedback-panel-tab { display: none; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer-reviews-full) .uma-chrome-feedback-panel-tab.is-active { display: block; width: 100%; padding-left: 0; padding-right: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-product-drawer-panel-read,
:where(.page-uma-marketplace) .uma-product-drawer-panel-write { margin-left: auto; margin-right: auto; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer-reviews-full) .uma-product-drawer-panel-write.is-active { display: flex; flex-direction: column; align-items: stretch; gap: var(--app-default-top-bottom-margin-md); width: 100%; max-width: var(--golden-width-small); } /* used: library-marketplace */
:where(.page-uma-marketplace) .review-form-close { position: absolute; top: var(--app-default-top-bottom-margin-xl); right: var(--app-default-top-bottom-margin-xl); padding: 0 var(--app-default-top-bottom-margin-lg); border-radius: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-drawer-write-heading { margin: 0 0 var(--app-default-top-bottom-margin-md); padding: 0 var(--button-size-md); font-size: var(--heading-size-md); font-weight: var(--font-weight-light); color: var(--t-drawer-heading); text-align: center; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer-reviews-full) .uma-chrome-feedback-rating-block { margin-bottom: var(--app-default-top-bottom-margin-md); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-drawer-review-actions { display: flex; flex-direction: row; align-items: center; gap: var(--gap-md); width: 100%; margin-top: var(--gap-md); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-drawer-review-actions) .btn { flex: 1 0 0; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-product-drawer-panel-write:not(.is-active)) .uma-drawer-review-actions { display: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-drawer-review-cancel { display: none; border: none; } /* used: library-marketplace */
@media (min-width: 601px) {
  :where(.page-uma-marketplace) .uma-product-drawer-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; flex-wrap: wrap; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-product-drawer-hero-info { flex-basis: 0; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-product-drawer-save-more { grid-column: 1 / -1; flex: 1 0 calc(100% - 2 * var(--drawer-media-padding)); } /* used: library-marketplace */
}
@media (min-width: 900px) {
  :where(.page-uma-marketplace) .uma-product-drawer-body { display: block; align-items: start; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-product-drawer-content-col { background: var(--t-drawer-bg); } /* used: library-marketplace */
}
@media (max-width: 899px) {
  :where(.page-uma-marketplace) .uma-product-drawer-content-col { flex: 1 1 0%; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-product-drawer-image-stack { width: 100%; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-product-drawer-preview-slide { width: 100%; } /* used: library-marketplace */
}
@media (max-width: 600px) {
  :where(.page-uma-marketplace) .uma-product-drawer { max-width: 100%; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-product-drawer-hero { flex-direction: column; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-product-drawer-image-col { width: 100%; max-width: 100%; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-product-drawer-hero-info { padding-left: var(--drawer-media-padding); } /* used: library-marketplace */
}
@media (max-width: 599px) {
  :where(.page-uma-marketplace) .marketplace-body:has(.uma-product-drawer.is-open .uma-product-drawer-panel-write.is-active) .product-drawer-close { visibility: hidden; } /* used: library-marketplace */
}

/* --------------------------------------------------------------------------
   The wish list drawer: slides in from the right. Two sides (Wishlist and
   Library), tabs under them, the tiles, and the totals at the foot. The
   close X is the library's plain X (.drawer-close-plain).
   -------------------------------------------------------------------------- */
:where(.page-uma-marketplace) .uma-wishlist-drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(var(--black-rgb), var(--opacity-medium-low)); z-index: var(--z-product-drawer-backdrop); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-drawer-backdrop.is-open { display: block; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-product-drawer); display: flex; flex-direction: column; width: var(--wishlist-drawer-width); min-width: var(--wishlist-drawer-width); max-width: var(--wishlist-drawer-width); overflow: hidden; box-sizing: border-box; background: var(--t-wishlist-bg); color: var(--t-wishlist-text); visibility: hidden; transform: translateX(100%); transition: transform var(--product-drawer-slide) ease-in-out, visibility linear var(--product-drawer-slide); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform var(--product-drawer-slide) ease-in-out, visibility; } /* used: library-marketplace */

/* The two sides: Wishlist and Library */
:where(.page-uma-marketplace) .uma-wishlist-drawer-header { position: relative; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--app-default-top-bottom-margin-lg) var(--gap-lg); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-scope-toggle { display: inline-flex; margin: 0 auto; overflow: hidden; background: var(--t-scope-bg); border: var(--stroke-hairline) var(--t-scope-line-style) var(--t-scope-line); border-radius: var(--wishlist-scope-radius); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-scope-btn { display: flex; align-items: center; justify-content: center; height: var(--wishlist-scope-height); min-height: var(--wishlist-scope-height); max-height: var(--wishlist-scope-height); margin: 0; padding: 0 var(--gap-lg); box-sizing: border-box; appearance: none; border: none; border-radius: 0; background: transparent; color: var(--t-wishlist-text); font-family: inherit; font-size: var(--body-text-sm); font-weight: var(--font-weight-medium); line-height: var(--default-line-height-single); white-space: nowrap; cursor: pointer; transition: background var(--transition-quick), color var(--transition-quick); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-scope-btn.is-active { background: var(--t-selected-bg); color: var(--t-selected-text); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-scope-btn:not(.is-active):hover { background: var(--hover-overlay-dark); } /* used: library-marketplace */
:where(.page-uma-marketplace) .scope-label-full { display: inline; } /* used: library-marketplace */
:where(.page-uma-marketplace) .scope-label-short { display: none; } /* used: library-marketplace */

/* The tabs under them */
:where(.page-uma-marketplace) .uma-wishlist-drawer-tabs { flex-shrink: 0; display: flex; justify-content: center; padding: 0 var(--default-left-right-mob-body-padding) var(--gap-md); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-drawer-tabs[hidden] { display: none; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-wishlist-drawer-tabs) .pill-filter-bar { justify-content: safe center; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-wishlist-drawer-tabs) .pill-filter-bar-wrapper { z-index: var(--z-wishlist-pill-bar); } /* used: library-marketplace */
:where(.page-uma-marketplace) .wishlist-tab-short { display: none; } /* used: library-marketplace */

/* The list */
:where(.page-uma-marketplace) .uma-wishlist-drawer-body { flex: 1 1 0%; min-width: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; padding: var(--gap-lg) 0 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-panel { display: none; min-width: 0; width: 100%; box-sizing: border-box; padding-bottom: var(--app-default-top-bottom-margin-xxl); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-panel.is-active { display: block; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-panel:has(> .uma-wishlist-promo:not(.is-hidden)) { padding-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-group { margin-bottom: var(--app-default-top-bottom-margin-xxxl); padding: 0 var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-group:last-child { margin-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-group-heading { margin-bottom: var(--app-default-top-bottom-margin-lg); font-size: var(--heading-size-sm); line-height: var(--default-line-height-x-small); text-align: left; color: var(--t-wishlist-text); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-empty { margin: 0; padding: var(--gap-lg) 0; text-align: center; color: var(--t-wishlist-muted); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-empty-cta { display: block; margin: var(--app-default-top-bottom-margin-md) auto 0; color: var(--t-empty-cta); border-color: var(--t-empty-cta-line); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-empty-cta[hidden] { display: none; } /* used: library-marketplace */
/* The tool promos on the Sensory and Workplace tabs */
:where(.page-uma-marketplace) .uma-wishlist-promo:last-child { margin-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-promo { margin-bottom: var(--app-default-top-bottom-margin-xxxl); padding: var(--app-default-top-bottom-margin-lg) var(--default-left-right-mob-body-padding); background: var(--t-wishlist-promo); color: var(--t-wishlist-text); text-align: left; } /* used: library-marketplace */
:where(.page-uma-marketplace) .wishlist-promo-emoji { font-size: var(--wishlist-promo-emoji-size); text-align: inherit; } /* used: library-marketplace */
:where(.page-uma-marketplace) .wishlist-promo-heading { font-size: var(--heading-size-sm); } /* used: library-marketplace */

/* A tile: the picture on the left, the words and the price on the right */
:where(.page-uma-marketplace) .uma-wishlist-tile { --t-card-light-figure: var(--t-wishlist-figure); --t-card-subtitle: var(--t-wishlist-figure); position: relative; display: flex; flex-direction: row; min-height: var(--wishlist-tile-image-lg); margin-bottom: var(--gap-md); border-radius: var(--app-default-radius-lg); background: var(--t-wishlist-tile); scroll-snap-align: none; flex: unset; width: 100%; min-width: 0; max-width: none; transition: background var(--transition-fast); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-tile:hover { background: var(--t-wishlist-tile-hover); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-tile:last-child { margin-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-tile-image { position: relative; flex-shrink: 0; align-self: stretch; aspect-ratio: 1 / 1; min-width: var(--wishlist-tile-image-sm); max-width: var(--wishlist-tile-image-sm); overflow: hidden; background: var(--pure-white); border-top-left-radius: var(--app-default-radius-lg); border-bottom-left-radius: var(--app-default-radius-lg); } /* used: library-marketplace */
:where(.page-uma-marketplace) .wishlist-tile-img { display: block; width: 100%; height: 100%; object-fit: contain; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-tile-type { position: absolute; top: var(--gap-regular); left: var(--gap-regular); z-index: 2; color: var(--bright-white); font-size: var(--button-icon-lg); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-tile-info { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; padding: var(--app-default-top-bottom-margin-xl) var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-wishlist-tile) .card-front { flex: 1 1 0%; flex-direction: column; width: auto; height: auto; overflow: visible; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-tile-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap-md); margin-bottom: var(--app-default-top-bottom-margin-xxs); line-height: var(--default-line-height-single); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-tile-row:has(+ .uma-library-card-subtitle) { margin-bottom: var(--app-default-top-bottom-margin-xxxxs); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-wishlist-tile) .catalogue-eyebrow { line-height: var(--default-line-height-small); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-library-card-subtitle { padding-right: var(--app-default-top-bottom-margin-xxl); } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-show-episode-video-meta) .uma-library-card-subtitle { padding-right: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-tile-name { padding-right: 0; margin-bottom: 0; cursor: pointer; transition: color var(--transition-quick); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-tile-name:hover { color: var(--orange); } /* used: library-marketplace */
/* The price is part of the row; its button is only a wrapper */
:where(.page-uma-marketplace) .uma-wishlist-tile-buy-btn { display: contents; pointer-events: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-buy-inner { display: flex; align-items: baseline; align-self: flex-start; gap: var(--gap-sm); height: min-content; margin: 0; padding: 0; line-height: var(--default-line-height-single); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-wishlist-buy-inner) .card-price { margin: 0; line-height: var(--default-line-height-single); white-space: nowrap; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-wishlist-buy-inner) .card-price-original { margin: 0; line-height: var(--default-line-height-single); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-tile-buy-row-mobile { display: flex; justify-content: flex-end; margin-top: var(--app-default-top-bottom-margin-xxs); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-tile-buy-mobile { display: block; flex-shrink: 1; align-items: normal; justify-content: normal; width: var(--wishlist-buy-width); padding: 0; font-weight: var(--font-weight-medium); line-height: normal; } /* used: library-marketplace */
:where(.page-uma-marketplace) .orange-btn-white-text { color: var(--bright-white); } /* used: library-marketplace */
/* The bin, top right; hovering it turns the tile tomato and its words white */
:where(.page-uma-marketplace) .uma-wishlist-tile-bin { position: absolute; top: var(--gap-regular); right: var(--gap-regular); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: var(--wishlist-bin-size); height: var(--wishlist-bin-size); padding: 0; border: none; background: transparent; color: var(--t-wishlist-muted); font-size: var(--button-icon-sm); cursor: pointer; opacity: 0; transition: opacity var(--transition-fast), color var(--transition-fast); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-tile:hover .uma-wishlist-tile-bin { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-tile-bin:focus-visible { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-tile-bin:hover { color: var(--bright-white); } /* used: library-marketplace */
:where(.page-uma-marketplace) .flipped .uma-wishlist-tile-bin { display: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-tile:has(.uma-wishlist-tile-bin:hover) { background: var(--tomato); --t-card-light-strong: var(--bright-white); --t-card-light-muted: var(--bright-white); --t-card-light-figure: var(--bright-white); --t-chip-text: var(--bright-white); --t-chip-line: var(--bright-white); --t-wishlist-muted: var(--bright-white); color: var(--bright-white); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-tile:has(.uma-wishlist-tile-bin:hover) .uma-wishlist-tile-buy-row-mobile { visibility: hidden; } /* used: library-marketplace */
/* The savings back of a tile sits beside the picture */
:where(.page-uma-marketplace .uma-wishlist-tile) .card-back--savings { left: var(--wishlist-tile-image-lg); padding: var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-xxxxl) var(--app-default-top-bottom-margin-xl) var(--app-default-top-bottom-margin-sm); border-radius: 0 var(--app-default-radius-lg) var(--app-default-radius-lg) 0; overflow: visible; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-wishlist-tile) .card-back-close-row { position: absolute; top: var(--gap-regular); right: var(--gap-regular); z-index: 3; margin: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-wishlist-tile) .card-back-body { flex: 0 0 auto; justify-content: flex-start; padding: 0; overflow: visible; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-wishlist-tile) .card-back-text { font-size: var(--body-text-xs); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-wishlist-tile) .card-back-actions { align-items: flex-start; margin-top: auto; } /* used: library-marketplace */
/* The buttons on a tile's back are a size up from the cards' */
:where(.page-uma-marketplace) .tile-action-btn { width: auto; height: var(--button-size-md); min-height: 0; padding-left: var(--gap-md); padding-right: var(--gap-md); font-size: var(--body-text-sm); white-space: nowrap; } /* used: library-marketplace */

/* The book tiles' buy pill: orange, with a menu of other shops */
:where(.page-uma-marketplace) .drawer-split-pill--tile { position: relative; display: flex; width: max-content; min-width: min-content; max-width: 100%; height: var(--button-size-md); box-sizing: border-box; overflow: visible; border: var(--stroke-hairline) solid transparent; border-radius: var(--radius-pill); background: var(--orange); color: var(--bright-white); font-size: var(--body-text-lg); } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-split-pill-main { flex: 1 1 0%; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; line-height: var(--default-line-height-single); padding: 0 var(--btn-padding-x); border: none; border-radius: var(--radius-pill) 0 0 var(--radius-pill); background: transparent; color: var(--bright-white); font-family: inherit; font-size: var(--body-text-lg); cursor: pointer; } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-split-pill-main:hover { background: rgba(var(--orange-rgb), var(--opacity-extra-low)); } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-split-pill-label { flex: 1 1 0%; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 0; overflow: hidden; font-size: inherit; text-align: left; } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-split-pill-label-text { flex: 1 1 0%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: inherit; text-align: left; } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-split-pill-arrow { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: var(--button-size-lg); padding: 0; border: none; border-left: var(--stroke-hairline) solid currentColor; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: transparent; color: var(--bright-white); cursor: pointer; } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-split-pill-arrow-icon { font-size: var(--body-text-sm); } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-buy-dropdown { position: absolute; top: calc(100% + var(--gap-xs)); left: auto; right: 0; z-index: 10; min-width: 100%; width: max-content; max-width: min(90vw, var(--wishlist-buy-menu-max-width)); overflow: hidden; background: var(--bright-white); border: var(--stroke-hairline) solid var(--dark-white); border-radius: var(--app-default-radius-md); box-shadow: 0 4px 12px var(--shadow-overlay); } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-buy-dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); width: 100%; min-height: var(--button-size-md); padding: 0 var(--btn-padding-x); border: none; background: transparent; color: var(--navy); font-family: inherit; font-size: var(--body-text-lg); text-align: left; white-space: nowrap; cursor: pointer; } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-buy-dropdown-item:hover { background: var(--mid-white); } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-buy-dropdown-item + .drawer-buy-dropdown-item { border-top: var(--stroke-hairline) solid var(--dark-white); } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-buy-dropdown-item-label { flex: 1 1 0%; min-width: 0; overflow: visible; white-space: nowrap; text-overflow: clip; text-align: left; } /* used: library-marketplace */
:where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-buy-dropdown-item-price { flex-shrink: 0; font-weight: var(--font-weight-medium); text-align: right; } /* used: library-marketplace */

/* The totals at the foot; the Library side has none */
:where(.page-uma-marketplace) .uma-wishlist-drawer-footer { flex: 0 0 auto; z-index: 3; padding: var(--gap-lg) var(--default-left-right-mob-body-padding); border-top: var(--stroke-hairline) solid var(--t-wishlist-line); background: var(--t-wishlist-bg); color: var(--t-wishlist-text); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-drawer:has(.uma-wishlist-panel.is-active[data-scope-panel="favourites"]) .uma-wishlist-drawer-footer { display: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-totals { display: flex; flex-direction: column; gap: var(--gap-xs); margin-bottom: var(--gap-md); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-total-row { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--body-text-sm); color: var(--navy); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-total-label { color: var(--t-wishlist-text); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-total-row--gross { font-weight: var(--font-weight-medium); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-total-value { font-variant-numeric: tabular-nums; color: var(--t-wishlist-text); } /* used: library-marketplace */

/* The Library side: favourite voices, pods, episodes, books and apps */
:where(.page-uma-marketplace) .uma-wishlist-fav-grid { display: grid; gap: var(--gap-regular); grid-template-columns: repeat(3, 1fr); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-fav-grid--books,
:where(.page-uma-marketplace) .uma-wishlist-fav-grid--apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-fav-grid--episodes { display: flex; flex-direction: column; gap: var(--gap-md); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-fav-card { position: relative; cursor: pointer; text-align: left; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-fav-card-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--app-default-radius-lg); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-wishlist-fav-grid--books) .uma-wishlist-fav-card-media { aspect-ratio: var(--carouselle-card-ratio-book); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-wishlist-fav-grid--apps) .uma-wishlist-fav-card-media { border-radius: var(--app-icon-radius); } /* used: library-marketplace */
:where(.page-uma-marketplace) .wishlist-fav-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--transition-fast); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-fav-card:hover .wishlist-fav-img { opacity: var(--opacity-moderate); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-fav-card:hover .uma-follow-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-fav-card:focus-within .uma-follow-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-fav-card-name { margin-top: var(--gap-sm); font-size: var(--body-text-xs); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-x-small); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-wishlist-fav-grid--books) .uma-library-card-body { padding: var(--app-default-top-bottom-margin-lg) 0 0; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-wishlist-fav-grid--books) .uma-library-card-title { padding-right: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-wishlist-fav-grid--books) .uma-library-card-subtitle { margin-bottom: 0; padding-right: 0; color: var(--t-text-secondary); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-wishlist-fav-grid--apps) .card-circular-plus-btn-on-dark { bottom: calc(var(--app-default-top-bottom-margin-xxxl) - var(--app-plus-pull)); right: calc(var(--app-default-top-bottom-margin-xxxl) - var(--app-plus-pull)); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-fav-empty { padding: var(--uma-xxl) 0; font-size: var(--body-text-sm); text-align: center; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-wishlist-fav-episodes-header { display: flex; align-items: center; justify-content: flex-end; margin-bottom: var(--gap-regular); } /* used: library-marketplace */
@media (hover: hover) {
  :where(.page-uma-marketplace) .uma-wishlist-fav-card-media:hover .card-circular-plus-btn-on-dark { opacity: 1; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-fav-card-media:hover .card-circular-search-btn-on-dark { opacity: 1; } /* used: library-marketplace */
}
@media (hover: none) {
  :where(.page-uma-marketplace) .uma-wishlist-tile-bin { opacity: 1; } /* used: library-marketplace */
}
@media (min-width: 800px) {
  :where(.page-uma-marketplace) .uma-wishlist-drawer { width: var(--wishlist-drawer-width-lg); min-width: var(--wishlist-drawer-width-lg); max-width: var(--wishlist-drawer-width-lg); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-tile-image { min-width: var(--wishlist-tile-image-lg); max-width: var(--wishlist-tile-image-lg); } /* used: library-marketplace */
}
@media (max-width: 899px) {
  :where(.page-uma-marketplace) .wishlist-tab-full { display: none; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .wishlist-tab-short { display: inline; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .drawer-split-pill--tile { font-size: var(--body-text-sm); } /* used: library-marketplace */
  :where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-split-pill-main { font-size: var(--body-text-sm); } /* used: library-marketplace */
  :where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-split-pill-arrow { width: var(--button-size-md); } /* used: library-marketplace */
  :where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-buy-dropdown-item { font-size: var(--body-text-sm); } /* used: library-marketplace */
}
@media (max-width: 799px) {
  :where(.page-uma-marketplace .uma-wishlist-tile) .card-back--savings { left: var(--wishlist-tile-image-sm); } /* used: library-marketplace */
}
@media (max-width: 699px) {
  :where(.page-uma-marketplace) .uma-wishlist-drawer { width: 100vw; min-width: 0; max-width: 100vw; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-tile-image { min-width: var(--wishlist-tile-image-xs); max-width: var(--wishlist-tile-image-xs); } /* used: library-marketplace */
  :where(.page-uma-marketplace .uma-wishlist-tile) .card-back--savings { left: var(--wishlist-tile-image-xs); } /* used: library-marketplace */
}
@media (max-width: 600px) {
  :where(.page-uma-marketplace) .uma-wishlist-fav-grid { grid-template-columns: repeat(2, 1fr); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-fav-grid--books,
  :where(.page-uma-marketplace) .uma-wishlist-fav-grid--apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* used: library-marketplace */
}
@media (max-width: 599px) {
  :where(.page-uma-marketplace) .uma-wishlist-drawer-header { margin: 0; padding: 0; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-scope-toggle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; margin: 0; border: none; border-radius: 0; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-scope-btn { flex: 1 1 0%; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-scope-btn[data-scope="favourites"] { padding-right: calc(var(--button-size-md) + var(--gap-md)); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .scope-label-full { display: none; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .scope-label-short { display: inline; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-drawer-tabs { margin-top: 0; padding: 0; } /* used: library-marketplace */
  :where(.page-uma-marketplace .uma-wishlist-drawer-tabs) .pill-filter-bar-wrapper { flex: 1 1 auto; width: 100%; max-width: none; margin: 0; padding: 0; border-radius: 0; } /* used: library-marketplace */
  :where(.page-uma-marketplace .uma-wishlist-drawer-tabs) .pill-filter-bar { width: 100%; border-radius: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } /* used: library-marketplace */
  :where(.page-uma-marketplace .uma-wishlist-drawer-tabs) .pill-filter-bar::-webkit-scrollbar { display: none; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .wishlist-drawer-close { top: calc((var(--wishlist-scope-height) - var(--button-size-md)) / 2); right: var(--gap-sm); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-drawer[data-scope="favourites"] ~ .wishlist-drawer-close .drawer-close-plain-icon { color: var(--bright-white); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-tile-bin { opacity: 1; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-tile-buy-row-mobile { justify-content: flex-start; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-tile-buy-mobile { height: var(--button-size-sm); font-size: var(--body-text-xs); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .tile-action-btn { height: var(--button-size-sm); font-size: var(--body-text-xs); } /* used: library-marketplace */
  :where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-buy-dropdown { left: 0; right: auto; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .drawer-split-pill--tile { height: var(--button-size-sm); font-size: var(--body-text-xs); } /* used: library-marketplace */
  :where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-split-pill-main { padding: 0 var(--gap-md); font-size: var(--body-text-xs); } /* used: library-marketplace */
  :where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-split-pill-arrow { width: var(--button-size-sm); } /* used: library-marketplace */
  :where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-buy-dropdown-item { min-height: var(--button-size-sm); padding: 0 var(--gap-md); font-size: var(--body-text-xs); } /* used: library-marketplace */
}
@media (max-width: 549px) {
  :where(.page-uma-marketplace .drawer-split-pill--tile) .drawer-buy-dropdown { width: calc(100vw - var(--app-default-top-bottom-margin-xxxxl)); min-width: 0; max-width: calc(100vw - var(--app-default-top-bottom-margin-xxxxl)); } /* used: library-marketplace */
}
@media (max-width: 499px) {
  :where(.page-uma-marketplace) .uma-wishlist-tile-image { min-width: var(--wishlist-tile-image-xxs); max-width: var(--wishlist-tile-image-xxs); } /* used: library-marketplace */
  :where(.page-uma-marketplace .uma-wishlist-tile) .card-back--savings { left: var(--wishlist-tile-image-xxs); } /* used: library-marketplace */
  /* The row opens up so the price can drop under the name */
  :where(.page-uma-marketplace) .uma-wishlist-tile-row { display: contents; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-tile-info { align-items: flex-start; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-buy-inner { flex-direction: row; align-items: baseline; margin-top: var(--app-default-top-bottom-margin-xs); margin-bottom: var(--app-default-top-bottom-margin-xs); } /* used: library-marketplace */
  :where(.page-uma-marketplace .uma-wishlist-buy-inner) .card-price-discounted { order: 1; } /* used: library-marketplace */
  :where(.page-uma-marketplace .uma-wishlist-buy-inner) .card-price-original { order: 2; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-tile:has(.uma-library-card-subtitle) .uma-wishlist-buy-inner { order: 5; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-tile:has(.uma-library-card-subtitle) .uma-wishlist-tile-buy-row-mobile { order: 6; } /* used: library-marketplace */
  /* A book tile says which format it is, after the price */
  :where(.page-uma-marketplace) .uma-wishlist-tile[data-format="ebook"] .uma-wishlist-buy-inner::after { content: "(ebook)"; order: 99; align-self: baseline; margin-left: 0; font-size: var(--body-text-sm); color: var(--light-charcoal); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-tile[data-format="audiobook"] .uma-wishlist-buy-inner::after { content: "(audiobook)"; order: 99; align-self: baseline; margin-left: 0; font-size: var(--body-text-sm); color: var(--light-charcoal); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-wishlist-tile:has(.uma-wishlist-tile-bin:hover) .uma-wishlist-buy-inner::after { content: none; } /* used: library-marketplace */
  :where(.page-uma-marketplace .uma-wishlist-tile) .drawer-split-pill-label-text[data-short] { font-size: 0; } /* used: library-marketplace */
  :where(.page-uma-marketplace .uma-wishlist-tile) .drawer-split-pill-label-text[data-short]::before { content: attr(data-short); font-size: var(--body-text-xs); } /* used: library-marketplace */
}

/* --------------------------------------------------------------------------
   The filter drawer's own parts on this page: the price slider, and the
   ingredient picker (categories on the left, the ingredients by category on
   the right, pills across the top on smaller screens). The rest of the
   drawer is in the shared filter section.
   -------------------------------------------------------------------------- */
/* The price slider */
:where(.page-uma-marketplace) .uma-price-scrub { width: 100%; max-width: var(--golden-width-small); margin: 0; padding: var(--app-default-top-bottom-margin-xl) var(--gap-md) var(--app-default-top-bottom-margin-lg); box-sizing: border-box; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-price-scrub-labels { position: relative; height: var(--button-size-md); margin-bottom: calc(var(--gap-xs) + var(--cycle-slider-thumb-height) / 2 - var(--cycle-slider-track-height) / 2); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-price-scrub-pill { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; height: var(--button-size-md); padding: 0 var(--gap-lg); border-radius: var(--radius-pill); background: var(--t-price-pill-bg); color: var(--t-price-pill-text); font-size: var(--body-text-sm); font-weight: var(--font-weight-medium); white-space: nowrap; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-price-scrub-pill::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: var(--price-pill-arrow) solid transparent; border-right: var(--price-pill-arrow) solid transparent; border-top: var(--price-pill-arrow) solid var(--t-price-pill-bg); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-price-scrub-track { position: relative; width: 100%; height: var(--cycle-slider-track-height); margin: calc(var(--cycle-slider-thumb-height) / 2) 0; box-sizing: border-box; border-radius: var(--cycle-slider-track-radius); background: rgba(var(--dark-teal-rgb), var(--opacity-low)); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-price-scrub-fill { position: absolute; top: 0; bottom: 0; border-radius: var(--cycle-slider-track-radius); background: var(--bright-teal); pointer-events: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-price-scrub-handle { position: absolute; top: 50%; z-index: 2; transform: translate(-50%, -50%); width: var(--cycle-slider-thumb-width); height: var(--cycle-slider-thumb-height); padding: 0; border: none; border-radius: var(--cycle-slider-thumb-radius); background: var(--dark-teal); box-shadow: var(--price-handle-shadow); cursor: grab; touch-action: none; transition: background var(--transition-quick), transform var(--price-handle-press); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-price-scrub-handle:hover { background: var(--bright-teal); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-price-scrub-handle:active { cursor: grabbing; transform: translate(-50%, -50%) scale(var(--price-handle-press-scale)); } /* used: library-marketplace */

/* The ingredient picker: the category list */
:where(.page-uma-marketplace) .uma-filter-picker-list { display: flex; flex-direction: column; gap: 0; margin-left: calc(-1 * var(--app-default-top-bottom-margin-xl)); border-right: var(--stroke-thin) solid var(--filter-divider); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-list--scroll { max-height: calc(8 * var(--concertina-closed-drawer-height)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; transform: translateZ(0); will-change: scroll-position; contain: paint; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-list--scroll::-webkit-scrollbar { display: none; width: 0; height: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-option { display: flex; align-items: center; gap: var(--gap-sm); width: 100%; height: var(--filter-drawer-row-height); min-height: var(--filter-drawer-row-height); padding: 0 var(--app-default-top-bottom-margin-xl); box-sizing: border-box; border: none; border-bottom: var(--stroke-thin) solid var(--filter-divider); background: transparent; color: var(--filter-text); font-family: inherit; font-size: var(--body-text-sm); text-align: left; cursor: pointer; transition: color var(--transition-base); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-option:hover { color: var(--orange); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-option.is-selected-category { color: var(--orange); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-label { flex: 1 1 auto; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-category-count { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: var(--switch-mini-width); height: var(--switch-mini-height); margin-left: auto; padding: 0 var(--gap-sm); border-radius: var(--radius-pill); background: var(--filter-pill-bg); color: var(--filter-pill-text); font-size: var(--body-text-sm); font-weight: var(--font-weight-semi-bold); line-height: var(--default-line-height-single); } /* used: library-marketplace */
:where(.page-uma-marketplace .uma-filter-picker-option) .uma-filter-picker-category-count { display: none; } /* used: library-marketplace */
/* The ingredients, by category */
:where(.page-uma-marketplace) .uma-filter-picker-drilldown { display: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-drilldown.is-open { position: relative; display: block; height: 100%; max-height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; scroll-behavior: auto; padding-block: var(--app-default-top-bottom-margin-xl); scroll-padding-block: var(--app-default-top-bottom-margin-xl); scroll-padding-inline-start: var(--app-default-top-bottom-margin-xl); transform: translateZ(0); will-change: scroll-position; contain: paint; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-drilldown::-webkit-scrollbar { display: none; width: 0; height: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-section { padding-bottom: var(--app-default-top-bottom-margin-xxxl); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-section:last-child { padding-bottom: 0; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-section-title { display: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-ingredient-list { display: flex; flex-direction: column; gap: var(--gap-md); padding-bottom: 0; scroll-padding-bottom: var(--app-default-top-bottom-margin-xxxl); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-ingredient { position: relative; overflow: hidden; padding: var(--app-default-top-bottom-margin-lg) var(--app-default-top-bottom-margin-xl); border-radius: var(--app-default-radius-md); background: var(--t-picker-card); cursor: pointer; pointer-events: auto; transition: background var(--transition-fast); contain: layout paint; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-ingredient:hover { background: var(--t-picker-card-hover); } /* used: library-marketplace */
/* The plus corner on an ingredient: teal, top right */
:where(.page-uma-marketplace) .uma-ing-earmark { position: absolute; top: 0; right: 0; z-index: 4; width: var(--ing-earmark-size); height: var(--ing-earmark-size); margin: 0; padding: 0; overflow: hidden; border: 0; border-top-right-radius: var(--app-default-radius-md); background: transparent; cursor: pointer; opacity: 0; transition: opacity var(--transition-base) ease; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-ingredient:hover .uma-ing-earmark { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-ing-earmark--added { opacity: 1; } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-ing-earmark-corner { position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 var(--ing-earmark-size) var(--ing-earmark-size) 0; border-color: transparent var(--bright-teal) transparent transparent; transition: border-color var(--transition-fast); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-ing-earmark-icon { position: absolute; top: var(--ing-earmark-icon-inset); right: var(--ing-earmark-icon-inset); z-index: 5; color: var(--bright-white); font-size: var(--button-icon-sm); font-weight: var(--font-weight-bold); line-height: var(--default-line-height-single); } /* used: library-marketplace */
/* The category pills, across the top below 1200 */
:where(.page-uma-marketplace) .uma-filter-picker-pills { display: none; min-height: max-content; overflow-y: hidden; padding-top: var(--app-default-top-bottom-margin-sm); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-pill { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--gap-xs); height: var(--button-size-sm); padding: 0 var(--lozenge-padding-x); border: var(--stroke-hairline) solid var(--filter-text); border-radius: var(--radius-pill); background: transparent; color: var(--filter-text); font-family: inherit; font-size: var(--body-text-sm); line-height: var(--default-line-height-single); white-space: nowrap; cursor: pointer; transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-pill:hover { color: var(--orange); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-pill:not(.is-selected-category):hover { background: var(--t-picker-pill-hover-bg); border-color: var(--t-picker-pill-hover); color: var(--t-picker-pill-hover); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-pill.is-selected-category { background: var(--bright-teal); color: var(--bright-white); border-color: var(--bright-teal); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-pill-count { min-width: 0; margin-left: 0; padding: 0; background: transparent; color: inherit; font-weight: var(--font-weight-normal); } /* used: library-marketplace */
:where(.page-uma-marketplace) .uma-filter-picker-pill-count[hidden] { display: none; } /* used: library-marketplace */
/* The price slider's panel starts at the top; the slider sets its own room */
:where(.page-uma-marketplace) .uma-filter-panel:has(.uma-price-scrub) { padding-top: 0; } /* used: library-marketplace */
@media (hover: none) {
  :where(.page-uma-marketplace) .uma-filter-picker-ingredient { transition: none; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-ing-earmark { top: var(--app-default-top-bottom-margin-sm); right: var(--app-default-top-bottom-margin-sm); display: flex; align-items: center; justify-content: center; width: var(--button-size-xs); height: var(--button-size-xs); overflow: visible; border-radius: var(--radius-circle); background: var(--dark-white); opacity: 1; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-ing-earmark::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: var(--touch-target-min); min-height: var(--touch-target-min); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-ing-earmark-corner { display: none; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-ing-earmark-icon { position: static; color: var(--mid-charcoal); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-ing-earmark--added { top: 0; right: 0; display: block; width: var(--ing-earmark-size); height: var(--ing-earmark-size); overflow: hidden; border-radius: 0 var(--app-default-radius-md) 0 0; background: transparent; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-ing-earmark--added .uma-ing-earmark-corner { display: block; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-ing-earmark--added .uma-ing-earmark-icon { position: absolute; top: var(--ing-earmark-icon-inset); right: var(--ing-earmark-icon-inset); color: var(--bright-white); } /* used: library-marketplace */
}
@media (min-width: 900px) {
  :where(.page-uma-marketplace) .uma-filter-drawer-subheader-left { background: var(--t-subheader-left-bg); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-price-scrub { grid-column: 1 / -1; padding-top: calc(1.5 * var(--filter-drawer-row-height) - var(--button-size-md) - var(--gap-xs) - var(--cycle-slider-thumb-height) / 2); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-picker-option { padding-left: var(--app-default-top-bottom-margin-xxxxl); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-panel:has(.uma-filter-picker-list--scroll) { grid-column: 2; padding: 0; scroll-padding-top: 0; overflow: hidden; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-panel-inner:has(> .uma-filter-picker-list--scroll) { height: 100%; grid-template-rows: minmax(0, 1fr); column-gap: 0; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-picker-list--scroll { max-height: 100%; margin-left: 0; padding-top: 0; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-picker-pills { padding-inline: var(--app-default-top-bottom-margin-xl); scroll-padding-inline: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-picker-sections.is-open { max-width: calc(var(--golden-width-small) + 2 * var(--app-default-top-bottom-margin-xl)); padding-inline: var(--app-default-top-bottom-margin-xl); } /* used: library-marketplace */
}
@media (min-width: 900px) and (max-width: 1199px) {
  :where(.page-uma-marketplace) .uma-filter-picker-pills { display: flex; grid-column: 1 / -1; gap: var(--gap-sm); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: var(--gap-sm); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-picker-pills::-webkit-scrollbar { display: none; width: 0; height: 0; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-picker-pill { scroll-snap-align: start; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-panel-inner:has(> .uma-filter-picker-list--scroll) { grid-template-rows: auto minmax(0, 1fr); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-panel-inner:has(.uma-filter-picker-drilldown.is-open) .uma-filter-picker-list { display: none; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-picker-drilldown.is-open { grid-column: 1 / -1; max-width: var(--filter-drawer-column-width); padding-left: 0; border-left: none; } /* used: library-marketplace */
}
@media (min-width: 1200px) {
  :where(.page-uma-marketplace) .uma-filter-panel-inner:has(> .uma-filter-picker-list--scroll) { grid-template-columns: minmax(0, var(--filter-drawer-column-width)) minmax(var(--filter-drawer-column-min-width), 1fr); } /* used: library-marketplace */
}
@media (max-width: 899px) {
  :where(.page-uma-marketplace) .uma-filter-picker-option { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-panel-inner:has(.uma-filter-picker-drilldown.is-open) .uma-filter-picker-list { display: none; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-picker-list { width: calc(100% + 2 * var(--default-left-right-mob-body-padding)); margin-left: calc(-1 * var(--default-left-right-mob-body-padding)); margin-right: calc(-1 * var(--default-left-right-mob-body-padding)); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-picker-drilldown.is-open { width: 100%; max-width: calc(var(--golden-width-small) + 2 * var(--default-left-right-mob-body-padding)); padding-inline: var(--default-left-right-mob-body-padding); border-left: none; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-picker-ingredient { width: 100%; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-picker-pills { display: flex; gap: var(--gap-sm); width: 100%; margin-left: 0; padding: var(--app-default-top-bottom-margin-sm) var(--default-left-right-mob-body-padding) var(--gap-sm); scroll-padding-left: var(--default-left-right-mob-body-padding); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-picker-pills::-webkit-scrollbar { display: none; width: 0; height: 0; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-picker-pill { scroll-snap-align: start; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-panel.is-active:has([data-picker-sections]) { height: calc(100dvh - var(--intervention-nav-height) - 2 * var(--filter-drawer-row-height)); max-height: calc(100dvh - var(--intervention-nav-height) - 2 * var(--filter-drawer-row-height)); padding: 0; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-drawer:has(.uma-filter-selections-bar:not([hidden])) .uma-filter-panel.is-active:has([data-picker-sections]) { height: calc(100dvh - var(--intervention-nav-height) - 3 * var(--filter-drawer-row-height)); max-height: calc(100dvh - var(--intervention-nav-height) - 3 * var(--filter-drawer-row-height)); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-panel-inner:has(> [data-picker-sections]) { height: 100%; grid-template-rows: auto minmax(0, 1fr); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-filter-drawer.is-open .uma-filter-drawer-inner:has(.uma-filter-panel.is-active [data-picker-sections]) { overflow-y: hidden; } /* used: library-marketplace */
}
@media (max-width: 599px) {
  :where(.page-uma-marketplace) .uma-price-scrub { padding: var(--app-default-top-bottom-margin-lg) var(--gap-sm) var(--app-default-top-bottom-margin-md); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-price-scrub-labels { height: var(--button-size-sm); } /* used: library-marketplace */
  :where(.page-uma-marketplace) .uma-price-scrub-pill { height: var(--button-size-sm); font-size: var(--body-text-xs); } /* used: library-marketplace */
}


/* NEW STYLES: marketplace-superjuices, 1 Oct 2026, for: /marketplace */
/* ==========================================================================
   SUPERJUICES. Her recipe cards on the struggle pages, and the printed
   recipe. The card is the homepage flip card: .flippable-9-16-card, its
   front, media, card-eyebrow, vp-title, the round plus and close buttons,
   card-back-paragraph and card-hover-grow are UMA.css's own and are used as
   they are. The homepage gives its plus, back and close their places under
   :where(.page-home); the juice cards take the same values under their own
   classes. The download on hover is the fact cards' overlay and button.
   The recipe lines are UMA.css's flat brain-body stack list; its text cuts
   off with an ellipsis, so juice-recipe-text lets the line wrap.
   The printed recipe is the brain-body one-pager, under its own
   recipe-sheet classes, with the same values.
   ========================================================================== */
/* The homepage's card values, which UMA.css keeps on the homepage's root */
:root:where(.page-uma-marketplace) { /* used: library-marketplace */
  --card-eyebrow-colour: var(--t-home-muted);
  --vp-title-colour: var(--t-home-body);
  --vp-title-space-below: 0;
  --vp-title-space-right: 0;
  --vp-title-line-height: var(--default-line-height-x-small);
  --t-card-rgb: 242, 237, 234;
  --back-panel-ground: var(--t-card);
  --back-panel-ground-rgb: var(--t-card-rgb);
  --back-panel-fade-height: var(--app-default-top-bottom-margin-xxxl);
  --back-panel-text-max-width: var(--golden-width-small);
  --line-height-title-wrap: 1.3;
  --z-back-panel: 3;
  --plus-button-inset: 0.9rem;
  --opacity-play-glass: 0.15;
  --video-rest-brightness: 0.55;
  --transition-plus-press: 0.15s;
  --transition-card-scale: 0.35s;
  --card-hover-scale: 1.015;
  --default-line-height-compact: 1.4;
  --icon-disc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle fill='black' cx='20' cy='20' r='20'/></svg>");
  --icon-plus-disc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m20,0C8.95,0,0,8.95,0,20s8.95,20,20,20,20-8.95,20-20S31.05,0,20,0Zm7.81,21.06h-6.74v6.74c0,.59-.48,1.06-1.06,1.06s-1.06-.48-1.06-1.06v-6.74h-6.74c-.59,0-1.06-.48-1.06-1.06s.48-1.06,1.06-1.06h6.74v-6.74c0-.59.48-1.06,1.06-1.06s1.06.48,1.06,1.06v6.74h6.74c.59,0,1.06.48,1.06,1.06s-.48,1.06-1.06,1.06Z'/></svg>");
  --icon-close: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m26.27,26.27c-.42.42-1.09.42-1.51,0l-4.77-4.77-4.77,4.77c-.42.42-1.09.42-1.51,0s-.42-1.09,0-1.51l4.77-4.77-4.77-4.77c-.42-.42-.42-1.09,0-1.51s1.09-.42,1.51,0l4.77,4.77,4.77-4.77c.42-.42,1.09-.42,1.51,0s.42,1.09,0,1.51l-4.77,4.77,4.77,4.77c.42.42.42,1.09,0,1.51Z'/></svg>");
  --t-circle-wash: var(--dark-white);
  --t-circle-wash-blur: none;
  --t-circle-mark: var(--mid-charcoal);
  --t-circle-mark-hover: var(--dark-charcoal);
  /* the plus and the download sit above the card's words and picture */
  --z-juice-card-controls: 2;
  /* The printed recipe always prints light, so its colours are fixed, as on
     the one-pager: charcoal ink, new white paper, a bright white band, a
     dark white rule, the orange website line, a grey copyright line and the
     navy mark. */
  --recipe-sheet-ink: #333232;
  --recipe-sheet-paper: #F6F3F1;
  --recipe-sheet-band: #F9F9F9;
  --recipe-sheet-line: #DCD6D4;
  --recipe-sheet-link: #EA7100;
  --recipe-sheet-muted: #808080;
  --recipe-sheet-mark: #232F4B;
  --recipe-sheet-font: "Inter", system-ui, sans-serif;
}
@media (min-width: 951px) {
  :root:where(.page-uma-marketplace) { --back-panel-text-max-width: var(--max-content-width-golden-section-large); } /* used: library-marketplace */
}
:root[data-theme="dark"]:where(.page-uma-marketplace) { /* used: library-marketplace */
  --t-card-rgb: 35, 47, 75;
  --t-circle-wash: rgba(var(--bright-white-rgb), var(--opacity-play-glass));
  --t-circle-wash-blur: blur(var(--blur-md));
  --t-circle-mark: var(--bright-white);
  --t-circle-mark-hover: var(--bright-white);
}

/* The card takes the fact cards' size, so it sits in the row with them */
:where(.page-uma-marketplace) .juice-card { flex: 0 0 var(--product-card-width-sm); width: var(--product-card-width-sm); min-width: var(--product-card-width-sm); max-width: var(--product-card-width-sm); } /* used: library-marketplace */
@media (min-width: 900px) {
  :where(.page-uma-marketplace) .juice-card { flex: 0 0 var(--product-card-width-md); width: var(--product-card-width-md); min-width: var(--product-card-width-md); max-width: var(--product-card-width-md); } /* used: library-marketplace */
}
@media (min-width: 1280px) {
  :where(.page-uma-marketplace) .juice-card { flex: 0 0 var(--product-card-width-lg); width: var(--product-card-width-lg); min-width: var(--product-card-width-lg); max-width: var(--product-card-width-lg); } /* used: library-marketplace */
}
/* The plus that opens the back, bottom right */
:where(.page-uma-marketplace) .juice-card-plus { position: absolute; bottom: var(--app-default-top-bottom-margin-lg); right: var(--app-default-top-bottom-margin-lg); z-index: var(--z-juice-card-controls); } /* used: library-marketplace */
/* The download, as on the fact cards: it shows on hover and on focus, and
   goes while the back is open */
:where(.page-uma-marketplace) .juice-card-download { z-index: var(--z-juice-card-controls); } /* used: library-marketplace */
:where(.page-uma-marketplace) .juice-card:hover .juice-card-download,
:where(.page-uma-marketplace) .juice-card:focus-within .juice-card-download { opacity: 1; pointer-events: auto; background: rgba(var(--black-rgb), var(--opacity-extra-low)); } /* used: library-marketplace */
:where(.page-uma-marketplace) .card-back-open .juice-card-download { display: none; } /* used: library-marketplace */
/* The back: the recipe over the whole card, scrolling, with a fade at its foot */
:where(.page-uma-marketplace) .juice-card-back { /* used: library-marketplace */
  --card-eyebrow-colour: var(--t-text-secondary);
  --vp-title-colour: var(--t-home-body);
  --vp-title-space-below: var(--app-default-top-bottom-margin-sm);
  --vp-title-space-right: var(--app-default-top-bottom-margin-xxxxxl);
  --vp-title-line-height: var(--line-height-title-wrap);
  position: absolute;
  inset: 0;
  z-index: var(--z-back-panel);
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--app-default-top-bottom-margin-xxxl);
  padding-right: max(var(--app-default-top-bottom-margin-xxxl), calc(100% - var(--app-default-top-bottom-margin-xxxl) - var(--back-panel-text-max-width)));
  background-color: var(--back-panel-ground);
  background-image: linear-gradient(to top, var(--back-panel-ground), var(--back-panel-ground)), linear-gradient(to top, var(--back-panel-ground), rgba(var(--back-panel-ground-rgb), var(--opacity-hidden)));
  background-repeat: no-repeat, no-repeat;
  background-size: 100% var(--back-panel-fade-height), 100% var(--back-panel-fade-height);
  background-position: bottom, bottom;
  background-attachment: local, scroll;
}
/* UMA.css opens the back with .flippable-9-16-card-back-open; the closed rule
   above comes later, so the open state is named again here */
:where(.page-uma-marketplace) .juice-card-back.is-open { display: flex; } /* used: library-marketplace */
:where(.page-uma-marketplace) .juice-card-close { position: absolute; top: var(--app-default-top-bottom-margin-lg); right: var(--app-default-top-bottom-margin-lg); } /* used: library-marketplace */
/* The recipe: a line for each ingredient, the amount on the right. The words
   wrap instead of cutting off. */
:where(.page-uma-marketplace) .juice-recipe-list { margin-bottom: var(--app-default-top-bottom-margin-sm); } /* used: library-marketplace */
:where(.page-uma-marketplace) .juice-recipe-text { white-space: normal; overflow: visible; text-overflow: clip; } /* used: library-marketplace */
:where(.page-uma-marketplace) .juice-recipe-amount { flex: 0 0 auto; color: var(--t-text-secondary); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* used: library-marketplace */
:where(.page-uma-marketplace) .juice-recipe-heading { margin: var(--app-default-top-bottom-margin-xs) 0 var(--app-default-top-bottom-margin-xxs); font-size: var(--body-text-xs); font-weight: var(--font-weight-semi-bold); color: var(--t-page-text); } /* used: library-marketplace */
:where(.page-uma-marketplace) .juice-recipe-method { margin-top: var(--app-default-top-bottom-margin-xs); } /* used: library-marketplace */
/* Still motion: no grow and no fade on the picture */
:where(:root[data-motion="still"].page-uma-marketplace) .juice-card { --card-hover-scale: 1; transition: none; } /* used: library-marketplace */
:where(:root[data-motion="still"].page-uma-marketplace) .juice-card-picture { transition: none; } /* used: library-marketplace */

/* The printed recipe. Hidden on screen; it is the only thing printed while
   body carries is-printing-recipe, on its own A4 page with no margin. */
:where(.page-uma-marketplace) .recipe-sheet { display: none; box-sizing: border-box; width: 210mm; page: recipe-sheet; font-family: var(--recipe-sheet-font); color: var(--recipe-sheet-ink); background: var(--recipe-sheet-paper); } /* used: library-marketplace */
:where(.page-uma-marketplace .recipe-sheet) * { box-sizing: border-box; } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-band { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8mm; padding: 11mm 12mm 7mm; background: var(--recipe-sheet-band); } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-heading { flex: 1 1 auto; } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-eyebrow { margin: 0 0 2.5mm; font-size: 3.4mm; font-weight: 500; line-height: 1.35; color: var(--recipe-sheet-ink); } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-title { margin: 0; font-size: 9mm; font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; color: var(--recipe-sheet-ink); text-align: left; } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-body { padding: 8mm 12mm 6mm; background: var(--recipe-sheet-paper); } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-list { margin: 0 0 6mm; padding: 0; list-style: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-item { display: flex; align-items: baseline; justify-content: space-between; gap: 3mm; margin-bottom: 1.8mm; font-size: 3mm; line-height: 1.45; color: var(--recipe-sheet-ink); } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-text { flex: 1 1 auto; } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-amount { flex: 0 0 auto; color: var(--recipe-sheet-ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-subheading { margin: 0 0 2.5mm; font-size: 3.4mm; font-weight: 500; color: var(--recipe-sheet-ink); } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-method { margin: 0; font-size: 3mm; line-height: 1.7; color: var(--recipe-sheet-ink); } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-rule { height: 0.3mm; margin: 0 12mm; background: var(--recipe-sheet-line); } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-footer { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 6mm; padding: 5mm 12mm 8mm; background: var(--recipe-sheet-paper); } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-mark { flex: 0 0 auto; width: 8.1mm; height: 8.1mm; } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-mark-svg { display: block; width: 100%; height: 100%; overflow: visible; fill: var(--recipe-sheet-mark); } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-lines { flex: 1 1 auto; text-align: right; } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-website { margin: 0; font-size: 2.8mm; line-height: 1.5; color: var(--recipe-sheet-link); } /* used: library-marketplace */
:where(.page-uma-marketplace) .recipe-sheet-copyright { margin: 0; font-size: 2.6mm; line-height: 1.5; color: var(--recipe-sheet-muted); } /* used: library-marketplace */
@page recipe-sheet { size: A4 portrait; margin: 0; }
@media print {
  :root:where(.page-uma-marketplace):has(.is-printing-recipe) { background: var(--pure-white); height: auto; overflow: visible; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .is-printing-recipe { margin: 0; padding: 0; height: auto; overflow: visible; background: var(--pure-white); } /* used: library-marketplace */
  /* everything but the sheet goes. !important because the page's scripts
     set display on some of these in their style attribute */
  :where(.page-uma-marketplace .is-printing-recipe) > :not(.recipe-sheet) { display: none !important; } /* used: library-marketplace */
  :where(.page-uma-marketplace .is-printing-recipe) > .recipe-sheet { display: flex; flex-direction: column; min-height: 297mm; margin: 0 auto; } /* used: library-marketplace */
  :where(.page-uma-marketplace) .recipe-sheet-body { flex: 1 1 auto; } /* used: library-marketplace */
}


/* ==========================================================================
   SHARED: FOCUS, TAB ONLY. Last in the block on purpose, so it comes after
   every rule above.
   - Buttons, tabs, switches and links styled as buttons: an orange ring with
     a small gap round their edge, from UMA.css's focus tokens. :focus-visible
     only, so a click or a tap shows nothing. The :focus on the end is for
     weight: it lets the ring win, by coming later, over UMA.css's
     .keyboard-focus:focus and .carousel-nav-btn.keyboard-focus:focus, which
     switch outlines off.
   - Switches: the real checkbox is invisible, so the ring goes round the
     visible track.
   - Fields, selects and the search box get no ring: UMA.css turns their own
     stroke orange after Tab (.keyboard-focus), and leaves it plain on a click.
   - Nothing else gets a ring: cards, carousels, tracks, scroll areas, text
     and sections.
   ========================================================================== */
:where(.page-uma-library, .page-uma-marketplace, .page-uma-discounts, .page-uma-reviews, .page-statistics) :focus-visible { outline: none; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace, .page-uma-discounts, .page-uma-reviews, .page-statistics) :is(button, [role="button"], [role="tab"], [role="switch"], .btn):focus-visible:where(:not(.uma-input-pointer *)):focus { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); } /* used: library-marketplace */
/* The pill menu: the button is a plain box round its pill, so the ring goes on the pill */
:where(.page-uma-marketplace) .intervention-menu-item:focus-visible:focus { outline: none; } /* used: library-marketplace */
:where(.page-uma-marketplace) .intervention-menu-item:focus-visible:where(:not(.uma-input-pointer *)) .intervention-menu-item-label { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); } /* used: library-marketplace */
/* Options in a box that clips its edges: the ring sits just inside the option */
:where(.page-uma-library, .page-uma-marketplace, .page-uma-reviews) :is(.uma-wishlist-scope-btn, .verdict-tab, .uma-segmented-toggle-option):focus-visible:focus { outline-offset: calc(-1 * (var(--focus-outline-width) + var(--focus-ring-offset))); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace, .page-uma-discounts, .page-uma-reviews, .page-statistics) input:focus-visible:where(:not(.uma-input-pointer *)) ~ .switch-track { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); } /* used: library-marketplace */


/* NEW STYLES: screening-results-pages strip, 1 Oct 2026, for: /adhd-profile, /autism-profile, /cptsd-profile, /masking-profile, /rsd-profile, /brain-body-profile, /adhd-diagnostic-scoring, /autism-diagnostic-scoring, /cptsd-diagnostic-scoring, /health-self-report, /trauma-history, /hypermobility-eds, /mcas, /pots */

/* What these pages still need once their own CSS is gone and they link
   /UMA.css only. Goes at the bottom of UMA.css, after relay v43.

   Measured against each page as it was (30sep2026-v1), element by element,
   at 1280, 768 and 390 wide, light and dark: with relay v43 every page
   already matches. What is here is focus and the locks only: the Tab ring
   as she ruled it on 1 Oct (buttons and switches: an orange ring with a
   small gap; fields and selects: their own stroke turns orange, no gap;
   nothing on a click), and the lock on paid items.

   No new tokens. No ids. No !important. */


/* ===== A CLICK SHOWS ONLY THE CURSOR ===== */
/*the bubbles on brain-body and health history are drawn shapes that act as
  buttons. A click on one drew the browser's own dark square round it. This
  switches that off. It comes before the Tab ring rule below, which weighs the
  same, so Tab still draws the orange ring.*/
:where(.page-brain-body, .page-health-history) [role="button"]:focus { /* used: screening-results-pages */
  outline: none;
}


/* ===== THE TAB RING ON THE RESULTS PAGES ===== */
/*buttons, switches and links: a thin orange ring with a small gap round
  their edge (--focus-ring-offset, the gap UMA.css keeps for buttons).
  Relay v43's chrome focus block sets outline: none on .keyboard-focus:focus,
  so this puts the ring back for these pages only. It weighs the same as the
  chrome's rule and wins by coming last. It only draws once the chrome's Tab
  script has put keyboard-focus on the control, so a click shows nothing.*/
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile, .page-brain-body, .page-adhd-diagnostic, .page-autism-diagnostic, .page-cptsd-diagnostic, .page-health-history, .page-trauma-history, .page-hypermobility, .page-mcas, .page-pots) .keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: screening-results-pages */
  outline: var(--stroke-thin) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

/*buttons with their own stroke (the reference buttons, the filter pills and
  the carousel arrows): the same ring with a gap, and the stroke keeps its
  own colour, so there is one orange ring, not two. UMA.css turns the stroke
  orange and takes the ring off the carousel arrows; these weigh the same and
  come later. Found by pressing Tab through every page at 1280 and 390.*/
.profile-btn-secondary-navy-on-white.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: screening-results-pages */
  border-color: var(--t-emphasis);
  outline: var(--stroke-thin) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

.diagnostic-btn-secondary-navy-on-white.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: screening-results-pages */
  border-color: var(--t-emphasis);
  outline: var(--stroke-thin) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

.condition-btn-secondary-navy-on-white.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: screening-results-pages */
  border-color: var(--t-emphasis);
  outline: var(--stroke-thin) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

.health-history-btn-secondary-navy-on-white.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: screening-results-pages */
  border-color: var(--t-emphasis);
  outline: var(--stroke-thin) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

.trauma-history-btn-secondary-navy-on-white.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: screening-results-pages */
  border-color: var(--t-emphasis);
  outline: var(--stroke-thin) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

.carousel-nav-btn.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: screening-results-pages */
  border-color: var(--t-nav-control);
  outline: var(--stroke-thin) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

.condition-carousel-nav-btn.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: screening-results-pages */
  border-color: var(--t-nav-control);
  outline: var(--stroke-thin) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

.health-history-carousel-nav-btn.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: screening-results-pages */
  border-color: var(--t-nav-control);
  outline: var(--stroke-thin) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

.trauma-history-carousel-nav-btn.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: screening-results-pages */
  border-color: var(--t-nav-control);
  outline: var(--stroke-thin) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

/*fields and selects: their own stroke turns orange (UMA.css does that) with
  no ring and no gap. The trauma history age menu has a stroke. The add
  menu on health and trauma history has none, so it takes the thin orange
  line on its edge in place of a stroke, still with no gap.*/
.age-select.keyboard-focus:focus { /* used: screening-results-pages */
  outline: none;
}

.add-select.keyboard-focus:focus { /* used: screening-results-pages */
  outline-offset: 0;
}

/*the small delete button on each health and trauma history item. UMA.css
  gives it a ring on any focus, so a click showed it too. Now nothing shows on
  a click, and Tab draws the same ring with a gap as every other button. It
  still shows itself on focus, as before.*/
.health-history-delete-list-item-btn.del:focus { /* used: screening-results-pages */
  outline: none;
}

.trauma-history-delete-list-item-btn.del:focus { /* used: screening-results-pages */
  outline: none;
}

.health-history-delete-list-item-btn.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: screening-results-pages */
  outline: var(--stroke-thin) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

.trauma-history-delete-list-item-btn.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: screening-results-pages */
  outline: var(--stroke-thin) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

/*on MCAS the cards and their carousel stay ringless, as her page had them:
  a card's own content scrolls, so the browser makes it a Tab stop, and the
  page switched the ring off on them after the ring rule. Coming after the
  rule above, these do the same.*/
:where(.page-mcas) .cond-card:focus { /* used: screening-results-pages */
  outline: none;
}

:where(.page-mcas) .condition-centred-card-carousel:focus { /* used: screening-results-pages */
  outline: none;
}


/* ===== LOCKED ITEMS ===== */
/*the lock after a link or button to a paid feature, the same icon and lift
  as the lock in the main menu. Paid members do not see it, as in the menu:
  the chrome marks them as paid on the page.*/
.paid-feature-lock { /* used: screening-results-pages */
  position: relative;
  top: 1.5px;
}

/*v6: paid and founding members are read from data-account-type on <html>,
  which chrome v19 sets from her profile. Chrome v19 never sets user-paid on
  the body from her profile, so that class cannot be relied on.*/
:root[data-account-type="paid"] .paid-feature-lock { /* used: screening-results-pages */
  display: none;
}

:root[data-account-type="founding"] .paid-feature-lock { /* used: screening-results-pages */
  display: none;
}


/* ===== THE CLINICIAN PANEL ON THE SCORING PAGES ===== */
/*the panel is the work coach directory panel from Working with AuDHD, with
  its own classes from UMA.css (tracker-promo-card and the switch on dark).
  The one thing those classes read that the scoring pages do not have is the
  switch's off colour, which UMA.css sets only for the support tool pages.
  Same value here, so the switch track shows as it does on the coach panel.
  New token for these pages: --t-switch-off (already in UMA.css for
  .page-support-tools).*/
:root:where(.page-adhd-diagnostic, .page-autism-diagnostic, .page-cptsd-diagnostic) { /* used: screening-results-pages */
  --t-switch-off: rgba(var(--bright-white-rgb), var(--opacity-low));
}


/* ===== UPDATE YOUR STATUS (ADHD AND AUTISM PROFILES) ===== */
/*2 Oct 2026. A full-width bright blue band between the polar chart and the
  donut cards. Question on the left, Yes and No in a row on the right; on a
  phone the buttons drop under the question, still right-aligned. The
  buttons are UMA.css's btn-secondary-white-on-dark and the green Status
  updated pill is the profile's own (uma-profile-field-saved-pill), so the
  only new rules are the band and its row.*/
:where(.page-adhd-profile, .page-autism-profile) .status-update-band { /* used: screening-results-pages */
  width: 100%;
  background-color: var(--bright-blue);
  color: var(--bright-white);
}

:where(.page-adhd-profile, .page-autism-profile) .status-update-band[hidden] { /* used: screening-results-pages */
  display: none;
}

:where(.page-adhd-profile, .page-autism-profile) .status-update-row { /* used: screening-results-pages */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--app-default-top-bottom-margin-sm) var(--app-default-top-bottom-margin-xl);
  width: 100%;
  max-width: var(--max-body-wrapper-width);
  margin: 0 auto;
  padding: var(--app-default-top-bottom-margin-xl) var(--default-left-right-desk-body-padding);
}

:where(.page-adhd-profile, .page-autism-profile) .status-update-question { /* used: screening-results-pages */
  flex: 1 1 20rem;
  margin: 0;
  color: var(--bright-white);
  font-size: var(--body-text-md);
}

:where(.page-adhd-profile, .page-autism-profile) .status-update-actions { /* used: screening-results-pages */
  display: flex;
  gap: var(--app-default-top-bottom-margin-sm);
  margin-left: auto;
}

:where(.page-adhd-profile, .page-autism-profile) .status-update-actions[hidden] { /* used: screening-results-pages */
  display: none;
}

:where(.page-adhd-profile, .page-autism-profile) .status-update-row .uma-profile-field-saved-pill { /* used: screening-results-pages */
  margin-left: auto;
}

@media (max-width: 600px) {
  :where(.page-adhd-profile, .page-autism-profile) .status-update-row { /* used: screening-results-pages */
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }
}


/* ===== THE CLINICIAN PANEL ON A PHONE ===== */
/*2 Oct 2026. Her diagnostician directory words are longer than the coach
  panel's, and both paragraphs show at every width. Below 450px UMA.css
  keeps the card at 9:16 with its overflow hidden, so the second paragraph
  ran under the switch and was cut off at the card's edge. Here only, the
  card grows to fit its words, and the copy leaves room above the switch
  (the switch sits 2rem from the bottom and is about 2rem tall).
  v9: styled by the card's own class, clinician-promo-card (on the three
  scoring pages' panel), not by the section's id: no ids in CSS. Two
  classes so it outranks UMA.css's single-class tracker-promo rules
  wherever the block lands in UMA.css.*/
@media (max-width: 450px) {
  .tracker-promo-card.clinician-promo-card { /* used: screening-results-pages */
    aspect-ratio: auto;
  }
  .clinician-promo-card .tracker-promo-copy { /* used: screening-results-pages */
    padding-bottom: calc(var(--app-default-top-bottom-margin-xl) * 2 + var(--app-default-top-bottom-margin-sm));
  }
}


/* ===== THE EXAMPLE BANNER ON THE CONDITION PAGES ===== */
/*5 Oct 2026. Hypermobility and EDS, MCAS and POTS now show the same example
  banner as the other results pages when she has no health answers. UMA.css
  styles that banner only for the other results pages, so these are the
  same rules for .page-condition, values unchanged.*/
:root:where(.page-condition) { /* used: screening-results-pages */
  --example-state-banner-text-width: 16rem;
}

:where(.page-condition) .example-state-banner { /* used: screening-results-pages */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm);
  width: 100%;
  padding: var(--app-default-top-bottom-margin-sm) var(--default-left-right-desk-body-padding);
  background: var(--t-band-alt);
  border-bottom: var(--stroke-hairline) solid var(--t-divider);
  color: var(--t-page-text);
  font-size: var(--body-text-md);
  line-height: var(--default-line-height-medium);
}

:where(.page-condition) .example-state-banner-label { /* used: screening-results-pages */
  flex: 0 0 auto;
  padding: var(--gap-xxs) var(--gap-sm);
  border-radius: var(--radius-pill);
  background: var(--t-surface);
  border: var(--stroke-hairline) solid var(--t-border);
  font-size: var(--caption-text-sm);
  letter-spacing: var(--button-letter-spacing);
  text-transform: none;
}

/* two classes: the condition pages' own p and p:last-of-type rules would
   otherwise give the sentence a bottom margin and a smaller size */
:where(.page-condition) .example-state-banner .example-state-banner-text { /* used: screening-results-pages */
  flex: 1 1 var(--example-state-banner-text-width);
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

:where(.page-condition) .example-state-banner-action { /* used: screening-results-pages */
  flex: 0 0 auto;
}

:where(.page-condition) .example-state-banner[hidden] { /* used: screening-results-pages */
  display: none;
}

@media (max-width: 600px) {
  :where(.page-condition) .example-state-banner { /* used: screening-results-pages */
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }
}
/* NEW STYLES: sign-up and screenings, 1 Oct 2026, for: /sign-up, /verify-email, /set-pin, /security-setup, /log-in, /reset-pin, /log-out, /contact, /add-your-video-bio, /uma-adhd-screening, /uma-autism-screening, /uma-cptsd-screening, /uma-health-screening, /uma-masking-screening, /uma-rsd-screening, /uma-stimming-screening */
/* Goes at the bottom of UMA.css, after every other block. Only what these
   pages still need once their own style blocks are gone. No IDs, no
   !important, every value a UMA.css token. No new tokens.
   Focus comes from the chrome's Tab script: it puts keyboard-focus on what
   Tab lands on. Nothing here draws on a click, a tap, or a page-open focus.
   v2, 1 Oct 2026: on Tab, buttons and switches get the orange ring with a
   small gap around their edge and keep their own stroke colour (section 3);
   fields keep their own stroke turning orange, no gap, as before. */


/* ---------- 1. SIGN-UP PAGES: FIELDS ---------- */

/* A field the page focuses when it opens, or that is clicked: the stroke
   hides and keeps its hairline width, so only the cursor shows and nothing
   moves. Tab turns that same hairline orange (UMA.css .field-action:has(.keyboard-focus)
   and .field.keyboard-focus:focus). UMA.css widens the stroke on focus; these
   pages keep the hairline. */
.field-quiet-focus:focus-within:where(:not(.uma-input-pointer *)) { border-width: var(--stroke-hairline); } /* used: signup-screenings */

/* A field showing an error keeps its red edge while it is typed in or
   reached by Tab, as the pages had it. */
.has-error:focus-within:where(:not(.uma-input-pointer *)) { border-color: var(--error); border-width: var(--field-border-active); } /* used: signup-screenings */

/* The terms switches on sign-up: Tab draws the orange button ring round the
   switch's own rounded shape, with the small gap, one ring only. A click or a
   tap draws nothing. */
.switch--terms { border-radius: var(--radius-pill); } /* used: signup-screenings */
.switch--terms .keyboard-focus ~ .switch-track { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); } /* used: signup-screenings */


/* ---------- 2. SCREENINGS ---------- */
/* The pages' markup now carries the UMA.css screening classes for the bar,
   the title screens, the question number and the results text. These lines
   are only what those classes do not already give. */

/* No browser gap above the screening paragraphs: the question, the intro and
   pause-screen text, and any paragraph that carries paragraph-no-space-above.
   (paragraph-no-space-below is the UMA.css class for the gap below.) */
.screening-question-text { margin-top: 0; } /* used: signup-screenings */
.screening-intro-para-text { margin-top: 0; } /* used: signup-screenings */
.paragraph-no-space-above { margin-top: 0; } /* used: signup-screenings */

/* The arrow that confirms an answer is a bare icon button with no padding. */
.screening-confirm-arrow { padding: 0; } /* used: signup-screenings */

/* Checklist questions (trauma, stimming): the question is the large question
   size, and the answer pills sit 1.5rem below it with 2.5rem below them.
   UMA.css sets .multiple-choice-question-text smaller and .lozenge-container
   with no gap; the screenings keep their own sizes. */
.screening-checklist-question { font-size: var(--body-text-xxl); margin-top: 0; color: var(--t-page-text); } /* used: signup-screenings */
.screening-checklist-pills { margin-top: var(--app-default-top-bottom-margin-lg); margin-bottom: var(--app-default-top-bottom-margin-xxl); } /* used: signup-screenings */
.screening-trauma-age-gap { margin-bottom: var(--app-default-top-bottom-margin-xxl); } /* used: signup-screenings */

/* Trauma checklist colours that follow the theme (light values unchanged;
   dark mode reads the screening theme tokens). UMA.css gives these fixed
   light-mode colours. */
.screening-trauma-heading { color: var(--t-category-heading, var(--lozenge-selected-bg, var(--bright-blue))); } /* used: signup-screenings */
.screening-trauma-age-text { color: var(--t-page-text); } /* used: signup-screenings */
.screening-timeframe-text { color: var(--t-page-text); } /* used: signup-screenings */
.screening-trauma-age-select { background: var(--t-field-background, var(--dark-white)); color: var(--t-page-text); border-color: var(--t-field-border, var(--light-charcoal)); } /* used: signup-screenings */
.screening-trauma-caret-colour { color: var(--t-field-icon, var(--section-color)); } /* used: signup-screenings */

/* Pause screens (check-in, regulation, self-compassion, interventions): no
   space above or below, the same small inset on the left as every screen,
   and the text starts at the top. */
.screening-pause-screen { padding-top: 0; padding-bottom: 0; padding-left: var(--gap-xs); align-items: stretch; } /* used: signup-screenings */
/* UMA.css centres this column with a two-class rule
   (.screening-regulationPage .screening-reg-content), so this names the
   column's two classes to weigh the same and win by coming later. */
.screening-reg-content.screening-pause-content { justify-content: flex-start; } /* used: signup-screenings */

/* The skip link's words are the soft white used on colour, as the
   screenings had them (UMA.css .screening-skip-link uses bright white). */
.screening-skip-link-mid-white { color: var(--text-on-colour); } /* used: signup-screenings */

/* Stimming: the "as a child" heading is dark teal and the "as an adult"
   heading dark orange (white in dark mode), and the adult answer pills take
   the dark orange accent. UMA.css colours .screening-stim-heading-h2 from the
   section colour and has no orange-dark accent class. */
.screening-stim-heading-teal { color: var(--t-category-heading, var(--dark-teal)); } /* used: signup-screenings */
.screening-stim-heading-orange { color: var(--t-category-heading, var(--orange-dark)); } /* used: signup-screenings */
.answer-accent-orange-dark { --accent: var(--orange-dark); } /* used: signup-screenings */

/* Health: the title screen's words are white on the flood colour, and the
   title and question screens sit 0.5rem in from the left like every other
   screen; the question screen is centred at most 1280px wide. */
.health-screening-title-page { color: var(--white-text-default); padding-left: var(--gap-xs); } /* used: signup-screenings */
.health-screening-question-page { width: 100%; padding-left: var(--gap-xs); max-width: var(--max-body-content-width); margin-left: auto; margin-right: auto; } /* used: signup-screenings */
/* Answer pills, light mode: a chosen pill's words are the soft white used on
   colour and its letter circle is pure white, as the screenings had them.
   Dark mode keeps the UMA.css dark values (the dark theme block sets these
   same tokens and outweighs this one). */
:root:where(.page-screening) { --t-answer-selected-text: var(--text-on-colour); --t-answer-selected-marker: var(--pure-white); } /* used: signup-screenings */

/* Health (i) beside each answer: the section colour (soft white in dark
   mode), and the pill's own words colour once that answer is chosen. */
.screening-info-icon { color: var(--info-icon-on-pill, var(--t-info-icon, var(--info-icon-color))); } /* used: signup-screenings */
.screening-pill-row:has(.lozenge-selected) { --info-icon-on-pill: var(--t-answer-selected-text, var(--text-on-colour)); } /* used: signup-screenings */

/* The health introduction: balanced lines, and a gap above it the size of
   its own text, as the page had it. */
.screening-health-intro { text-wrap: balance; margin-top: var(--app-section-para-text); } /* used: signup-screenings */
/* The answers sit 1.5rem under the health question. */
.screening-answer-options-gap { margin-top: var(--app-default-top-bottom-margin-lg); } /* used: signup-screenings */
/* The group heading over the health answers takes the section colour. */
.screening-subcategory-heading-h3 { color: var(--t-category-heading, var(--info-icon-color)); } /* used: signup-screenings */
/* Start button: the arrow sits 0.5rem from the word. */
.screening-start-pill { gap: var(--gap-xs); } /* used: signup-screenings */
/* The (i) explanation box: charcoal with soft white words, normal line
   height. UMA.css .tooltip-more-info is a little lighter and taller. */
.screening-tooltip { line-height: var(--default-line-height-small); background-color: var(--mid-charcoal); color: var(--text-on-colour); } /* used: signup-screenings */
/* Behind the health pages the window shows the screen's own colour, not
   cream. Named with its tag to weigh the same as the UMA.css
   body.screening-page-health rule it replaces. */
body.screening-health-flood { background-color: var(--screen-background, var(--mid-white)); } /* used: signup-screenings */

/* RSD pause screens keep their space above and below the text on phones too. */
.screening-pause-content-roomy { padding-top: calc(var(--app-default-top-bottom-margin-xxxxl) + var(--app-default-top-bottom-margin-sm)); padding-bottom: var(--app-default-top-bottom-margin-xxxxl); } /* used: signup-screenings */

/* Phones: the answer pills have 2rem below them; the health screens get the
   same 0.5rem inset on the right as every other screen; the pause-screen
   text column keeps its own height instead of stretching. */
@media (max-width: 600px) {
  .screening-checklist-pills { margin-bottom: var(--app-default-top-bottom-margin-xl); } /* used: signup-screenings */
  .health-screening-title-page { padding-right: var(--gap-xs); } /* used: signup-screenings */
  .health-screening-question-page { padding-right: var(--gap-xs); } /* used: signup-screenings */
  .screening-reg-content.screening-pause-content { flex: 0 0 auto; } /* used: signup-screenings */
}

/* Tab on the screening text lines and their links (the skip link, the Credits
   and "Why we ask" lines): an orange line the width of a UMA.css stroke right
   on the edge, no gap. They are not buttons. The screenings have no chrome,
   so nothing gives them keyboard-focus-no-stroke; :focus-visible on a link is
   the browser's own "reached by keyboard", and a click never shows it. The
   orange Start, Continue and Next buttons take the button ring in section 3. */
.screening-tab-ring:focus-visible:where(:not(.uma-input-pointer *)) { outline: var(--stroke-thin) solid var(--orange); outline-offset: 0; } /* used: signup-screenings */

/* The slide-to-call button keeps its end space, the width of its round
   thumb (44px, the comfortable hit area). */
.screening-slide-spacer { flex-shrink: 0; width: var(--hit-area-comfort); } /* used: signup-screenings */

/* "Why we ask about trauma": the line is full white, and the box sits 2.5rem
   above what follows. The summary is named with its tag so it weighs the same
   as the UMA.css .screening-title-cites summary rule it replaces. */
summary.screening-why-summary { color: var(--bright-white); } /* used: signup-screenings */
.screening-title-why { margin-bottom: var(--app-default-top-bottom-margin-xxl); } /* used: signup-screenings */

/* Health: the introduction keeps its 3rem gap below on phones too (UMA.css
   drops the last intro paragraph's gap to 1.5rem on phones). Named with
   :last-of-type to weigh the same as that UMA.css line and win by coming later. */
.screening-health-intro:last-of-type { margin-bottom: var(--app-default-top-bottom-margin-xxxl); } /* used: signup-screenings */

/* The orange Next and finish buttons on the white question screens
   (stimming, trauma checklist, health): pure white words and arrow, as the
   pages had them. UMA.css gives orange buttons the soft white used on
   colour. While a button waits for an answer, the UMA.css grey still shows. */
.screening-next-white-words { color: var(--pure-white); } /* used: signup-screenings */

/* Stimming: "Add to my report" stays orange with white words before an
   answer is chosen, as the page had it. UMA.css greys a waiting confirm
   button. Named with :disabled to weigh the same and win by coming later. */
.screening-finish-stays-orange:disabled { background: var(--orange); color: var(--pure-white); } /* used: signup-screenings */

/* Health, dark mode: the progress track is the faint white of the other
   screenings, as the page had it. UMA.css keeps the light grey track for
   health with a two-class line, so this names the track's own two classes
   to weigh the same and win by coming later. */
.page-progress-bar-background.screening-progress-track { background-color: var(--t-progress-track, var(--dark-white)); } /* used: signup-screenings */

/* Masking: the "Too honest, too direct" word cloud keeps the page's own line
   height and the softer see-through steps of its words. UMA.css sets these
   words tighter (1.1) and with its own see-through steps. The words come
   from Firestore with no class of their own, so these lines reach them
   through the cloud's box (one class on the box the page makes). */
.screening-cloud-masking .screening-rc-word { line-height: var(--default-line-height-x-small); } /* used: signup-screenings */
.screening-cloud-masking .screening-rc-word:nth-child(1) { opacity: var(--opacity-very-high); } /* used: signup-screenings */
.screening-cloud-masking .screening-rc-word:nth-child(4) { opacity: var(--opacity-high); } /* used: signup-screenings */
.screening-cloud-masking .screening-rc-word:nth-child(5) { opacity: var(--opacity-very-high); } /* used: signup-screenings */
.screening-cloud-masking .screening-rc-word:nth-child(6) { opacity: var(--opacity-very-high); } /* used: signup-screenings */
.screening-cloud-masking .screening-rc-word:nth-child(7) { opacity: var(--opacity-very-high); } /* used: signup-screenings */
.screening-cloud-masking .screening-rc-word:nth-child(8) { opacity: var(--opacity-moderate); } /* used: signup-screenings */
.screening-cloud-masking .screening-rc-word:nth-child(11) { opacity: var(--opacity-very-high); } /* used: signup-screenings */
.screening-cloud-masking .screening-rc-word:nth-child(12) { opacity: var(--opacity-high); } /* used: signup-screenings */
.screening-cloud-masking .screening-rc-word:nth-child(13) { opacity: var(--opacity-very-high); } /* used: signup-screenings */
.screening-cloud-masking .screening-rc-word:nth-child(15) { opacity: var(--opacity-very-high); } /* used: signup-screenings */
.screening-cloud-masking .screening-rc-word:nth-child(16) { opacity: var(--opacity-very-high); } /* used: signup-screenings */


/* ---------- 3. TAB RING ON BUTTONS AND SWITCHES (v2, 1 Oct 2026) ----------
   Buttons and switches: on Tab, an orange ring 2.5px wide with a 2px gap
   round the button's own edge (the screenings' original button ring). The
   button's own stroke keeps its own colour inside the ring, so there is one
   orange ring, never two. Fields are not in here: their own stroke still
   turns orange with no gap (sections above and the UMA.css focus block).
   keyboard-focus is only put on by Tab, so a click or a tap shows nothing.
   Each line names the class with keyboard-focus and :focus, the same weight
   as the UMA.css lines that turn the stroke orange
   (.lozenge.keyboard-focus:focus and the rest), and wins by coming later. */

/* The ring. .btn covers every UMA.css button and a.btn link, the answer
   pills and lozenges, the screening Back and Exit buttons and the orange
   Start, Continue and Next buttons. The rest are buttons with their own class. */
.btn.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)),
.screening-likert-single-choice-option.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)),
.identity-square.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)),
.terms-concertina-header.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)),
.reveal-password.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)),
.uma-featured-upload-remove.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)),
.screening-secondary-btn.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)),
.screening-slide-btn.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)),
.screening-ibtn.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); } /* used: signup-screenings */

/* The orange Start, Continue and Next buttons on the screenings, when the
   browser's own keyboard check is what marks them (as v1 did for these). */
.screening-start-button:focus-visible:where(:not(.uma-input-pointer *)),
.screening-continue-button:focus-visible:where(:not(.uma-input-pointer *)),
.screening-start-pill:focus-visible:where(:not(.uma-input-pointer *)),
.screening-confirm-selection-button:focus-visible:where(:not(.uma-input-pointer *)) { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); } /* used: signup-screenings */

/* The resend button sits inside a stroked row that turns orange, like a
   field, so it keeps no ring of its own, as now. */
.timer-resend-button.keyboard-focus:focus { outline: none; } /* used: signup-screenings */

/* The remove (delete) button on a chosen photo or video is a button: it
   takes the ring above, so the box round it keeps its own dashed stroke
   (the same value UMA.css gives the box) instead of turning orange too.
   Tab into the box itself still turns the box's stroke orange, as now. */
.uma-featured-upload-zone:has(.uma-featured-upload-remove.keyboard-focus) { border-color: rgba(var(--white-rgb), var(--opacity-medium-low)); } /* used: signup-screenings */

/* Each button's own stroke colour, said again for Tab, so UMA.css's orange
   stroke does not show inside the ring. Same tokens as each one has unfocused. */
.btn-secondary-gray-on-white.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--light-charcoal); } /* used: signup-screenings */
.btn-secondary-navy-on-white.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--navy); } /* used: signup-screenings */
.btn-secondary-white-on-dark.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--bright-white); } /* used: signup-screenings */
.video-inline-player-close.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--bright-white); } /* used: signup-screenings */
.video-inline-player-close-on-white.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--light-charcoal); } /* used: signup-screenings */
.identity-square.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--bright-white); } /* used: signup-screenings */
.screening-secondary-btn.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--bright-white); } /* used: signup-screenings */
.screening-slide-btn.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--bright-white); } /* used: signup-screenings */
.screening-nav-icon-button.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--t-control, var(--bright-white)); } /* used: signup-screenings */
.answer-pill-on-white.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--t-answer-outline, var(--accent)); } /* used: signup-screenings */
.is-selected.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--t-answer-selected-fill, var(--accent)); } /* used: signup-screenings */

/* NEW STYLES: code-resend-row, 1 Oct 2026, for: /reset-pin, /security-setup, /verify-email */
/* The countdown and its "Resend code" or "Resend link" link, side by side and centred. The countdown keeps her .timer-readout; the link is a .form-alt-link */
.code-resend-row { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: var(--gap-regular); } /* used: auth */

/* NEW STYLES: boxes-shake and heading-error, 2 Oct 2026, for: /log-in, /set-pin, /security-setup, /reset-pin */
/* Contract v4 section 3a. A wrong PIN, a repeat PIN that doesn't match, or a wrong text message code:
   the row of boxes shakes side to side (about 3 shakes, about 10px, half a second), then the page
   clears it. With reduce motion on there is no shake; the page script clears the boxes at once.
   The two tokens, --shake-distance and --shake-duration, are in the UMA.css :root. */
.boxes-shake { animation: boxes-shake var(--shake-duration) ease-in-out; } /* used: auth */
@keyframes boxes-shake {
  0%, 100% { transform: translateX(0); } /* used: signup-screenings */
  16%, 50%, 84% { transform: translateX(calc(var(--shake-distance) * -1)); } /* used: signup-screenings */
  33%, 67% { transform: translateX(var(--shake-distance)); } /* used: signup-screenings */
} /* used: auth */
@media (prefers-reduced-motion: reduce) {
  .boxes-shake { animation: none; } /* used: auth */
}
/* The page heading carries the error above the boxes, in red ("Incorrect PIN. 4 attempts remaining.", "PINs don't match") */
.heading-error { color: var(--error); } /* used: auth */

/* NEW STYLES: sign-in pages dark mode, 2 Oct 2026, for: /sign-up, /verify-email, /create-passkey, /set-pin, /security-setup, /log-in, /reset-pin, /log-out, /contact */
/* The sign-in pages follow the chosen colour mode like every other Uma page.
   Dark takes the same colours as the screenings' and the chrome's dark blocks:
   navy-60 page, soft white words and logo. Fields, PIN tiles and code boxes
   stay soft white with charcoal words, as the profile and onboarding have them.
   Light is untouched: every line here only applies when data-theme is dark
   or sunset. Sunset is the UMA.css warm filter on html[data-theme="sunset"],
   as on the screenings; the pages carry the #uma-warm filter.
   The rules are wrapped in :where() so each weighs the same as the UMA.css
   line it changes and wins by coming later. No new tokens. */
:root[data-theme="dark"]:where(.page-auth) { /* used: signup-screenings */
  --bright-white: var(--mid-white);
  --bright-white-rgb: var(--panel-text-white-rgb);
  --t-page-bg: var(--navy-60);
  --t-page-text: var(--bright-white);
  --t-text-strong: var(--bright-white);
  --t-text-secondary: rgba(var(--bright-white-rgb), var(--opacity-high));
  --t-border: rgba(var(--bright-white-rgb), var(--opacity-low));
  --t-selected-bg: var(--bright-white);
  --t-disabled-fill: var(--t-border);
  --t-disabled-text: rgba(var(--bright-white-rgb), var(--opacity-moderate));
  --t-control-hover-fill: var(--t-selected-bg);
  --t-control-hover-icon: var(--t-page-bg);
} /* used: auth */
/* The page, its words, the headings and the Uma logo */
:where(:root[data-theme="dark"].page-auth) body { background-color: var(--t-page-bg); color: var(--t-page-text); } /* used: auth */
:where(:root[data-theme="dark"].page-auth) h1 { color: var(--t-text-strong); } /* used: auth */
:where(:root[data-theme="dark"].page-auth) .small-centred-column-centred-text svg { fill: var(--t-page-text); } /* used: auth */
/* "OR —", the countdown, the terms heading and the eye on the PIN */
:where(:root[data-theme="dark"].page-auth) .form-alt-link { color: var(--t-page-text); } /* used: auth */
:where(:root[data-theme="dark"].page-auth) .timer-readout { color: var(--t-page-text); } /* used: auth */
:where(:root[data-theme="dark"].page-auth) .terms-concertina-header { color: var(--t-page-text); } /* used: auth */
:where(:root[data-theme="dark"].page-auth) .reveal-password { color: var(--t-text-secondary); } /* used: auth */
:where(:root[data-theme="dark"].page-auth) .reveal-password:hover { color: var(--t-page-text); } /* used: auth */
/* The terms switches when off, as the profile's switches in dark */
:where(:root[data-theme="dark"].page-auth) .switch--terms .switch-track { background: var(--t-border); } /* used: auth */
/* The navy outline buttons ("Change your email", "Use membership card instead") become soft white outlines;
   hover fills soft white with navy-60 words, as the screenings' controls do. Tab keeps the soft white stroke inside the ring. */
:where(:root[data-theme="dark"].page-auth) .btn-secondary-navy-on-white { color: var(--t-page-text); border-color: var(--t-page-text); } /* used: auth */
:where(:root[data-theme="dark"].page-auth) .btn-secondary-navy-on-white:hover { background: var(--t-control-hover-fill); color: var(--t-control-hover-icon); border-color: var(--t-control-hover-fill); } /* used: auth */
:where(:root[data-theme="dark"].page-auth) .btn-secondary-navy-on-white.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { border-color: var(--t-page-text); } /* used: auth */
/* A button waiting for the form ("Sign up", "Send"), as the screenings' waiting buttons in dark */
:where(:root[data-theme="dark"].page-auth) .btn-disabled-on-white:disabled { background: var(--t-disabled-fill); color: var(--t-disabled-text); } /* used: auth */
/* The sign-up phone menu */
:where(:root[data-theme="dark"].page-auth) .nav-menu-button { color: var(--t-page-text); } /* used: auth */
:where(:root[data-theme="dark"].page-auth) .nav-overlay { background: var(--t-page-bg); } /* used: auth */
:where(:root[data-theme="dark"].page-auth) .nav-overlay-close-button { color: var(--t-page-text); } /* used: auth */
/* After "You are logged in" the screen fades to the page colour, not cream */
:where(:root[data-theme="dark"].page-auth) .animation-overlay-cream { background: var(--t-page-bg); } /* used: auth */
/* Sunset: the warm filter on html only paints as tall as html, so on these short pages the window
   showed white below the page. html is at least the window's height, as the screenings already are. */
:where(:root[data-theme="sunset"].page-auth) { min-height: 100%; } /* used: auth */


/* For the relay: add at the bottom of UMA.css, after sign-in block v3 (which brings .code-resend-row).
   No new tokens. */

/* NEW STYLES: profile-timer-readout, 1 Oct 2026, for: /profile (Login details: Change PIN, Change email, Change recovery phone) */
/* The sign-in countdown (.timer-readout) is navy, which suits the light-only sign-in pages. The profile also opens in dark, where navy vanishes, so the profile's countdown takes the page text colour. */
.profile-timer-readout { color: var(--t-page-text); } /* used: profile */


/* For the relay: add at the bottom of UMA.css. No new tokens. */

/* NEW STYLES: upgrade-code-pill, 1 Oct 2026, for: every page with the chrome (the upgrade panel), /profile (its upgrade panel) */
/* Her design: the code to use (STOPWAITING26, or the code she signed up with) in a pill above the Validate field, with a copy icon that turns into a green tick for 2 seconds. The pill itself is the panel's own .uma-upgrade-tag (the "1-year access" tag); these add only the space, the gap and the bare icon button. */
.uma-upgrade-code-pill-row { margin-bottom: var(--app-default-top-bottom-margin-xs); } /* used: chrome, profile */
.uma-upgrade-code-pill { gap: var(--gap-sm); } /* used: chrome, profile */
.uma-upgrade-code-pill-copy { display: inline-flex; align-items: center; padding: 0; border: none; background: transparent; color: inherit; font-size: var(--button-icon-sm); cursor: pointer; } /* used: chrome, profile */
.uma-upgrade-code-pill-copied { color: var(--success); } /* used: chrome, profile */


/* NEW STYLES: idle-notice, 1 Oct 2026, for: every signed-in page (the "Are you still there?" notice, uma-idle-signout.js) */
.idle-notice { max-width: var(--carouselle-card-420, var(--idle-notice-width)); border: none; border-radius: var(--default-radius); background: var(--t-card-surface, var(--card-default-background)); color: var(--t-card-text, var(--dark-charcoal)); padding: var(--default-card-top-padding) var(--default-card-left-right-padding); } /* used: idle-notice */
.idle-notice::backdrop { background: rgba(var(--black-rgb), .5); } /* used: idle-notice */
.idle-notice-heading { margin-top: 0; margin-bottom: var(--gap-sm); font-size: var(--heading-size-lg); } /* used: idle-notice */
.idle-notice-text { margin-top: 0; margin-bottom: var(--gap-md); } /* used: idle-notice */
.idle-notice-button { display: block; margin-left: auto; } /* used: idle-notice */


/* NEW STYLES: catalogue-picture-variants, 2 Oct 2026, for: /discounts (any catalogue card that carries a picture class) */
/* The discounts page now draws its cards with the marketplace card markup
   (.card-image > img.card-image-img). The picture variants a row asks for in
   img_class_css (product-img-full-bleed, uma-disc-product-img-full,
   product-img-pad-md) were still written only for the old wrapper
   (.uma-disc-product-img-wrap img...), so those rows, Flow among them, took
   the default 3rem padding. These carry the same variants onto the new
   markup. Two classes, so they win over the base .card-image-img line.
   Marketplace cards carry no picture class and are not touched.
   No new tokens. */
:where(.page-catalogue) .card-image-img.product-img-full-bleed { padding:0; object-fit:cover; } /* used: catalogue-picture-variants */
:where(.page-catalogue) .card-image-img.uma-disc-product-img-full { padding:0; width:auto; max-width:100%; margin:0 auto; object-fit:contain; } /* used: catalogue-picture-variants */
:where(.page-catalogue) .card-image-img.product-img-pad-md { padding:var(--uma-disc-card-img-padding-md); } /* used: catalogue-picture-variants */


/* NEW STYLES: tab-ring-all-buttons, 2 Oct 2026, for: every page with the chrome's Tab script (tool pages such as /access-to-work-assistant and /access-to-work-assistant-front, the results pages, the profile and the rest) */

/* Her answer, 2 Oct: buttons keep the gap (her switch buttons and orange
   buttons need the space), fields have no gap, and every button gets the
   same full ring.

   Why this was needed: the results pages' Tab line (THE TAB RING ON THE
   RESULTS PAGES) draws a 1px ring on every control. Every tool page carries
   the results-page class page-adhd-profile from her template, so that line
   reached the tool pages too. It came after the tab-ring-buttons and
   tab-ring-fields blocks and weighed the same, so it won: buttons without
   .btn (filter pills, card plus, feedback options, carousel arrows) got the
   1px ring, and fields got a 1px ring with a gap on top of their orange
   stroke. Only the .btn buttons kept the full ring, through a heavier line.

   These lines come last and weigh more, so they win everywhere. They only
   draw once the chrome's Tab script has put keyboard-focus on the control,
   so a click shows nothing. No new tokens. */

/* Every button: the full ring with the gap. */
:is(button, [role="button"]).keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: tab-ring-all-buttons */
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

/* The buttons that are part of a stroked control keep no ring of their own,
   as before: the action button inside a field, the segmented toggle's
   options, and the resend button inside its stroked row. The control's own
   stroke turns orange instead. */
.field-action-button.keyboard-focus:focus,
.timer-resend-button.keyboard-focus:focus { /* used: tab-ring-all-buttons */
  outline: none;
}

/* Fields (inputs, tick boxes, selects, text boxes): no outline, so only
   their own stroke turns orange, no gap. The results pages' add menu is
   left alone: it has no stroke, so its thin orange line is its stroke. A
   switch's own input is hidden; the ring goes on the switch round it. */
:is(input, select, textarea):not(.add-select).keyboard-focus:focus { /* used: tab-ring-all-buttons */
  outline: none;
}


/* For the relay: add at the bottom of UMA.css. Two new tokens, listed under
   NEW TOKENS below; they go in :root with the other motion tokens.
   The shake and the red heading are for every PIN and code box (auth contract
   v4 section 3a), so the sign-in pages can use the same two classes. */

/* NEW TOKENS: security-shake, 2 Oct 2026
   --shake-distance: 10px;   how far the boxes move each way
   --shake-duration: 0.5s;   the whole shake, about 3 times side to side */

/* NEW STYLES: security-shake, 2 Oct 2026, for: /profile (Security: Change PIN, codes), and the sign-in pages (contract v4 section 3a) */
/* A wrong PIN or code: the row of boxes shakes side to side, then the page clears it.
   With reduce motion on, the page never adds this class: the boxes just clear. */
@keyframes pin-shake { /* used: profile */
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(calc(var(--shake-distance) * -1)); }
  30%, 70% { transform: translateX(var(--shake-distance)); }
}
.pin-field-shake { animation: pin-shake var(--shake-duration) ease-in-out; } /* used: profile */
/* The heading above the boxes turns red with the message (contract v4 section 3a) */
.pin-heading-error { color: var(--error); } /* used: profile */

/* NEW STYLES: security-passkeys, 2 Oct 2026, for: /profile (Security: Passkeys) */
/* Her passkeys, one to a line, with Remove at the end of the line */
.security-passkey-list { display: flex; flex-direction: column; } /* used: profile */
.security-passkey-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap-regular); padding: var(--gap-regular) 0; border-bottom: var(--stroke-hairline) solid var(--t-divider); } /* used: profile */
.security-passkey-text { flex: 1; min-width: 0; } /* used: profile */


/* NEW STYLES: video-bio-dark-labels, 2 Oct 2026, for: /add-your-video-bio (page-video-bio only) */
/* Her answer, 2 Oct: in dark mode the labels on the red identity tiles
   (ADHD, Autistic, AuDHD, Neurotypical) are made brighter so they pass
   contrast. The label takes its colour from the tile, so the tile's words go
   from bright white to pure white (4.67 to 4.91 against the red). A chosen
   tile turns white with red words, so chosen tiles are left out. The letter
   badges keep their own colour. No new tokens. */
:root[data-theme="dark"]:where(.page-video-bio) .identity-square:not(.identity-square-selected) { /* used: video-bio */
  color: var(--pure-white);
}


/* NEW STYLES: tab-ring-links, 3 Oct 2026, for: the results pages (/adhd-profile, /autism-profile, /cptsd-profile, /masking-profile, /rsd-profile, /brain-body-profile, /adhd-diagnostic-scoring, /autism-diagnostic-scoring, /cptsd-diagnostic-scoring, /health-self-report, /trauma-history, /hypermobility-eds, /mcas, /pots) and the tool pages that carry page-adhd-profile */
/* Her answer, 3 Oct: links get the full ring with the gap, the same as
   buttons. On these pages the results pages' Tab line (THE TAB RING ON THE
   RESULTS PAGES) drew links with a 1px ring. This names the link as well,
   so it weighs more and wins. It only draws once the chrome's Tab script has
   put keyboard-focus on the link, so a click shows nothing. No new tokens. */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile, .page-brain-body, .page-adhd-diagnostic, .page-autism-diagnostic, .page-cptsd-diagnostic, .page-health-history, .page-trauma-history, .page-hypermobility, .page-mcas, .page-pots) a.keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { /* used: tab-ring-links */
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

/* ==== Appended for final build 46 (5 Oct 2026): outputs/qa-account-03oct2026/css/uma-block-qa-account-03oct2026-v1.css (qa-account at 8e24430), byte for byte below ==== */
/* QA 3 Oct 2026, group chrome. For the coordinator to merge into the relay. Existing classes only, no colour,
   size or look changes. */

/* QA 3 Oct 2026: reflow (WCAG 1.4.10). The feedback panel keeps a minimum height of
   --chrome-feedback-min-height (600px) with overflow hidden, so on a landscape phone (390px tall), at 200%
   zoom and at 400% reflow its lower half, with the Report bug and Post review buttons, was off the screen and
   could not be scrolled to. On short screens the minimum goes, the panel fits between its margins, and
   .uma-feedback-body (already overflow auto) scrolls. Checked at 844x390, 640x400 (200%) and 320x200 (400%). */
@media (max-height: 640px) {
  .uma-feedback-panel { min-height: 0; } /* used: chrome */
}

/* QA 3 Oct 2026: target size (WCAG 2.5.8), her ruling: an invisible hit area, the link unchanged. The flyout
   menu links are 19px tall, and Statistics and User reviews failed as too close to their neighbours (at
   390 and 1280). Each link's hit area grows by 0.2rem above and below (to about 25px), which stays inside the
   gap between links, so two hit areas never overlap. .uma-chrome-menu-link has no ::before or ::after in
   relay v76; position: relative only gives the hit area its box. */
.uma-chrome-menu-link { position: relative; } /* used: chrome */
.uma-chrome-menu-link::after { content: ""; position: absolute; top: calc(-1 * var(--app-default-top-bottom-margin-xxxxs)); right: 0; bottom: calc(-1 * var(--app-default-top-bottom-margin-xxxxs)); left: 0; background: transparent; } /* used: chrome */

/* QA 3 Oct 2026: reflow (WCAG 1.4.10). On short screens the wishlist drawer's header, tabs and totals stay put
   and only the list between them scrolls: 141px of list on a landscape phone, 151px at 200% zoom and 20px at
   400% reflow, where the list was all but unusable. On short screens the whole drawer scrolls instead and the
   list takes its full height. Taller screens are unchanged. Checked at 844x390, 640x400 and 320x200. */
@media (max-height: 640px) {
  .uma-wishlist-drawer { overflow-y: auto; } /* used: chrome */
  .uma-wishlist-drawer-body { flex: none; overflow-y: visible; } /* used: chrome */
}

/* ==== Appended for final build 46 (5 Oct 2026): outputs/qa-content-03oct2026/public/css-additions-learn-03oct2026-v1.css (qa-content at 3dfe2c3), byte for byte below ==== */
/* css-additions-learn-03oct2026-v1.css (QA content session, 3 Oct 2026, learn group).
   Two additive rules for the lead to append to UMA.css. Existing classes and UMA.css tokens only; nothing restyled,
   no colours changed, no button made bigger. */

/* 1. QA CONTENT 03OCT2026: focus ring on the Learn pages that run without the chrome (/about-adhd, /about-autism,
      /somatic-super-syndrome). Their own Tab script adds .keyboard-focus, but the page's inline "rings off" block
      then turns bordered buttons (mini-screen Yes and No, carousel arrows, NHS and RCPsych buttons) orange on the
      border only, and a later rule wins with the button's own grey border, so nothing shows at all. Inside the chrome
      the same buttons get the chrome's ring: orange, full, with the 2px gap. This draws exactly that ring here, and
      only here (the :not() keeps every chrome page untouched). */
.page-learn:not(.page-uma-app-chrome) :is(button, [role="button"]).keyboard-focus:focus-visible:where(:not(.uma-input-pointer *)) { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); } /* used: qa-content-learn */

/* 2. QA CONTENT 03OCT2026: the reference numbers on the condition pages (/hypermobility-eds, /mcas, /pots) are links
      5 to 9px wide. Same invisible hit area as the video player close and the library earmarks (--hit-area-comfort; --target-size-min is only declared for the home and Learn pages, so it cannot be used here); the number itself
      is drawn exactly as before. The box grows to the right of the number only (left: 0), so where two numbers sit
      side by side ("2,3") each number is still the link it shows. Its width is the smallest button size
      (--button-size-xs, declared for these pages) rather than the full comfort size: a 2.75rem-wide box on a number
      at the end of a line pushed the page 5px wider than a 360 or 390 phone. */
:where(.page-condition) sup > a { position: relative; } /* used: qa-content-learn */
:where(.page-condition) sup > a::after { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: max(100%, var(--button-size-xs)); height: max(100%, var(--hit-area-comfort)); } /* used: qa-content-learn */

/* ==== Appended for final build 46 (5 Oct 2026): outputs/qa-content-03oct2026/public/css-additions-library-03oct2026-v1.css (qa-content at 3dfe2c3), byte for byte below ==== */
/* css-additions-library-03oct2026-v1.css (QA content session, library group, 3 Oct 2026). For the lead to append to UMA.css.
   QA CONTENT 03OCT2026: at 400% zoom (320 x 200 CSS px), 200% zoom (640 x 400) and on a phone held sideways (844 x 390)
   the sticky search and tab bar (151 px plus the Filters tab) covered 48% to 92% of the screen, and the open Filters
   drawer was squeezed into what was left (49 px at 400%, its close button off screen, the page locked). On short
   screens only, the bar scrolls with the page and the Filters drawer takes its natural height and the page scrolls.
   Nothing changes on screens taller than 500 px. Existing classes only, no new tokens. */
@media (max-height: 500px) {
  :where(.page-uma-library) .uma-library-sticky-container { position: relative; } /* used: qa-content-library */
  :where(.page-uma-library) .uma-filter-drawer.is-open { height: auto; max-height: none; } /* used: qa-content-library */
  :where(.page-uma-library) .uma-filter-drawer-open { overflow: auto; } /* used: qa-content-library */
}

/* ==== Appended for final build 46 (5 Oct 2026): outputs/qa-content-03oct2026/public/css-additions-library-05oct2026-v2.css (qa-content at 3dfe2c3), byte for byte below ==== */
/* css-additions-library-05oct2026-v2.css (QA content session, library group, 5 Oct 2026). For the lead to append to UMA.css,
   after css-additions-library-03oct2026-v1.css (which stays as it is).
   QA CONTENT 05OCT2026: the full-screen video drawer now also plays video bios in a <video> (library-people v779, build 45).
   The drawer's content box is a column flex item that kept its automatic minimum height, so the video took its height from
   its own shape, not from the drawer: a square or portrait video bio (a phone recording) grew taller than the screen
   (1205 px in an 800 px window at 1280 wide), and the browser's controls (play, pause, captions) sat below the bottom edge
   with no way to scroll to them. The content box may now shrink to the drawer, so the video fits inside it and is letterboxed.
   The YouTube iframe already filled the box and looks the same. Existing classes only, no new tokens. */
:where(.page-uma-library) .uma-video-drawer-content { min-height: 0; } /* used: qa-content-library */

/* ==== Appended for final build 46 (5 Oct 2026): outputs/qa-content-03oct2026/public/css-additions-tools-03oct2026-v1.css (qa-content at 3dfe2c3), byte for byte below ==== */
/* css-additions-tools-03oct2026-v1.css (3 Oct 2026, QA content session, group tools). Additive rules for the lead to
   merge into UMA.css, next to section 9e (ACCESS TO WORK). Existing classes and tokens only.

   QA CONTENT 03OCT2026: Access to Work assistant front page reflow. With a mouse (so not the touch-screen message) at
   320 to 700 CSS px, which is also 200% and 400% zoom on a laptop, .assistant-split kept its two columns and the red
   checklist panel ran off the right edge (right edge 487px at 320px wide): horizontal scrolling, WCAG 1.4.10.
   The same pattern UMA.css already uses for .canvas-front-split: one column from 700px down, the side padding drops to
   the mobile padding from 600px down. The tool page (.assistant-tool-split) is left alone. */
@media (max-width: 700px) {
  .assistant-split:not(.assistant-tool-split) { /* used: qa-content-tools */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "checklist";
  }
}
@media (max-width: 600px) {
  .assistant-split:not(.assistant-tool-split) .assistant-intro,
  .assistant-split:not(.assistant-tool-split) .assistant-checklist-panel { /* used: qa-content-tools */
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }
}

/* QA CONTENT 03OCT2026: Access to Work tool title. .assistant-tool-title is white-space: nowrap, so with a mouse at 320 to
   about 480 CSS px (400% zoom on a laptop) "Uma Access to Work assistant" ran off the right and was cut off (WCAG 1.4.10).
   From 599px down (the header's own mobile breakpoint) it may wrap; it fits in the header's 7.5rem height. */
@media (max-width: 599px) {
  .assistant-tool-title { /* used: qa-content-tools */
    white-space: normal;
  }
}

/* QA CONTENT 03OCT2026: canvases, printing with no name typed. The PDF download drops the name and its "'s" when the name
   is empty, but the print dialogue (which is also what Download PDF falls back to when its libraries cannot load) printed
   a lone "'s" before the title. Same result as the PDF: the "'s" is not printed when the name is empty. */
@media print {
  .uma-canvas-name-input:empty + .uma-canvas-title-after-name .uma-canvas-name-possessive { /* used: qa-content-tools */
    display: none;
  }
}

/* ==== Appended for relay v81 (5 Oct 2026): outputs/qa-content-03oct2026/public/css-additions-shop-03oct2026-v1.css (qa-content at 3dfe2c3), byte for byte below ==== */
/* css-additions-shop-03oct2026-v1.css (QA content session, shop group: marketplace and discounts).
   Additive rules for the relay to merge at the foot of UMA.css. Existing classes and UMA.css tokens only.
   Each needs her yes (see the shop findings, "Changes needed"). */

/* 1. Marketplace "Analysis paralysis begone" band: its light heading and intro sit on the video. When the video is
      not showing (reduced motion hides it, or it is slow or blocked) there was nothing behind the words but a 20% tint
      over the light page, so they could not be read. Navy goes under the video and the pictures, as the hero above
      already has; with the video or a picture showing nothing changes. */
:where(.page-uma-marketplace) .video-header-band { background-color: var(--navy); } /* used: qa-content-shop */

/* 2. Marketplace: when the device asks for reduced motion both background videos are hidden (UMA.css), so their
      Pause buttons are hidden too, rather than offering to pause a video that is not there. */
@media (prefers-reduced-motion: reduce) {
  :where(.page-uma-marketplace) .uma-hero-video-toggle,
  :where(.page-uma-marketplace) .intervention-menu-video-toggle { display: none; } /* used: qa-content-shop */
}

/* 3. Marketplace and discounts: text links (brand names, the quote citations, the footer links) showed nothing at all
      when reached with Tab (these pages have no chrome, so .keyboard-focus never arrives, and UMA.css turns
      :focus-visible off). The same orange ring with a gap the buttons on these pages already get, Tab only. */
:where(.page-uma-marketplace, .page-uma-discounts) a[href]:focus-visible:where(:not(.uma-input-pointer *)):focus { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); } /* used: qa-content-shop */

/* ==== Appended for relay v81 (5 Oct 2026): the lines qa-screenings added to relay v77 in outputs/qa-screenings-03oct2026/public/UMA-qa-screenings-05oct2026-v1.css (qa-screenings, decision 33), byte for byte below except a used marker on the four self-report lines ==== */

/* ===== qa-screenings-05oct2026 v1: additions only (relay v77 above, unchanged). For her check. ===== */
/* Screenings: headings that receive focus when a new screen opens are not controls, so no ring (keyboard users only saw one). */
.screening-title-heading:focus, .screening-page-heading-h1:focus, .screening-results-heading-h1:focus, .multi-choice-list-category-heading-h2:focus, .health-category-heading-h1:focus, .screening-subcategory-heading-h3:focus { outline: none; } /* used: screenings */
/* Screenings home on phones: the bubbles no longer draw over the heading and each other. */
@media (max-width: 600px) { html.page-uma-screenings .uma-app-home-wrapper { min-height: calc(100vh - var(--fixed-header-height)); min-height: calc(100dvh - var(--fixed-header-height)); } } /* used: screenings-home */
/* Masking pause screen on phones: the strengths word cloud no longer runs onto the heading. */
@media (max-width: 480px) { .screening-cloud-masking .screening-rumination-cloud { aspect-ratio: auto; } } /* used: screenings */
/* Profiles at 320 px: the Donut view / Bar view switch wraps instead of pushing the page sideways. */
@media (max-width: 359px) { :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .results-view-header{flex-wrap:wrap;gap:var(--gap-xs);} } /* used: screening-results-pages */
/* Profiles on phones: the page heading stays invisible as she chose, but a screen reader hears it (needs the v1 profile pages). */
@media (max-width: 900px) { :where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .hero-text-mobile.hero-text-mobile{display:block;position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} } /* used: screening-results-pages */
/* Self-reports: section nav and options bar sit under the fixed top bar (needs the v2 self-report pages, which link UMA.css). */
.page-self-report-preview .self-report-section-nav{top:var(--fixed-header-height);} /* used: self-reports */
.page-self-report-preview .self-report-main{margin-top:calc(var(--fixed-header-height) + var(--subnav-row-height));} /* used: self-reports */
.page-self-report-preview .self-report-preview-bar{top:var(--fixed-header-height);} /* used: self-reports */
.page-self-report-preview.section-nav-showing .self-report-preview-bar{top:calc(var(--fixed-header-height) + var(--subnav-row-height));} /* used: self-reports */
/* ===== end qa-screenings-05oct2026 v1 ===== */


/* NEW STYLES: hero-film-and-idle-notice-dark, 5 Oct 2026, for: / (the homepage hero) and every page with the idle notice or the wish list sign-in notice */
/* The homepage hero film has z-index: -1 so it sits behind the hero words. With no
   layer of its own on the hero, it went behind the navy band as well, so the film
   and its poster were never seen. The hero now makes its own layer: the film sits
   above the navy and still below the words. Found by the homepage dates session.
   The words sit on the film, so a dark layer goes between them (after the film,
   below the words and the play mark): measured on frames every 5 seconds of the
   launch film, the intro words stay at 4.5 to 1 or more against the bright
   rocket only with 70% darkening (her card scrim, 45%, leaves them at 2.4).
   Until there is something to see (her poster, or the film once the play mark
   is pressed, which adds hero-launch-video--visible), the film box and the dark
   layer stay hidden, so the hero is the same navy as before.
   New token: --hero-film-scrim. */
.hero-section-with-video { /* used: homepage */
  isolation: isolate;
}
.hero-launch-video:not(.hero-launch-video--visible):not([poster]) { /* used: homepage */
  visibility: hidden;
}
.hero-section-with-video:has(.hero-launch-video--visible, .hero-launch-video[poster])::after { /* used: homepage */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-film-scrim);
  pointer-events: none;
}

/* The idle notice in dark mode, from the wish list session's idle-notice-surface
   addition (3 Oct): where a page sets no card tokens of its own (all but the
   homepage and Learn), the notice takes the chrome's wish list panel colours,
   so it matches the wish list drawer. The light fallbacks are on the idle-notice
   line above. No new tokens. */
:root[data-theme="dark"] .idle-notice { /* used: idle-notice */
  background: var(--t-card-surface, var(--chrome-wishlist-panel-bg));
  color: var(--t-card-text, var(--chrome-wishlist-panel-text));
}


/* ===== CAPTIONS BUTTON, 6 Oct 2026 (captions button session). Search: CAPTIONS BUTTON =====
   Added by /uma-video-captions.js v2 to any video whose captions (.vtt) have loaded:
   CC in a speech bubble, an inline SVG in currentColor. It takes the voice button's
   size, see-through and fade from .video-control-btn, and sits straight after it.
   Off: the outline. On (aria-pressed="true"): filled, with CC cut out.
   Only existing tokens and colours. */
.video-captions-btn {
  position: relative;
  flex: none;
  /* the voice button's size; pages without the homepage token take the same 35px button size */
  width: var(--button-size-video-control, var(--button-size-sm));
  height: var(--button-size-video-control, var(--button-size-sm));
  background-color: transparent;
  color: var(--bright-white);
  border-radius: var(--radius-circle);
}

.video-captions-btn svg {
  display: block;
  pointer-events: none;
}

.video-captions-btn[aria-pressed="true"] .video-captions-icon-off,
.video-captions-btn:not([aria-pressed="true"]) .video-captions-icon-on {
  display: none;
}

/* her rule for buttons: a full ring with a gap */
.video-captions-btn:focus-visible:where(:not(.uma-input-pointer *)) {
  opacity: var(--opacity-visible);
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
}

/* a larger hit area that cannot be seen; the button itself stays the voice button's size */
.video-captions-btn::after {
  content: "";
  position: absolute;
  inset: calc((var(--button-size-video-control, var(--button-size-sm)) - var(--hit-area-comfort)) / 2);
}

/* the corner row shows while a keyboard is in it, so the focus ring is never hidden */
.video-controls-row:focus-within {
  opacity: var(--opacity-visible);
  pointer-events: auto;
}

/* a row of its own, for videos without the homepage corner controls:
   under the video, at its right-hand edge, in the page's text colour */
.video-controls-row--own {
  position: static;
  z-index: auto;
  justify-content: flex-end;
  margin-top: var(--gap-sm);
  opacity: var(--opacity-visible);
  pointer-events: auto;
}

.video-controls-row--own .video-captions-btn {
  color: var(--t-text-strong);
}

/* the review lists (/admin-videos, /admin-moderation): under the player, in its column */
.video-review-item > .video-controls-row--own {
  grid-column: 1;
  grid-row: 2;
  margin-top: 0;
}

.video-review-item:has(> .video-controls-row--own) > .video-review-details {
  grid-column: 2;
  grid-row: 1 / span 2;
}

@media (max-width: 48rem) {
  .video-review-item > .video-controls-row--own,
  .video-review-item:has(> .video-controls-row--own) > .video-review-details {
    grid-column: auto;
    grid-row: auto;
  }
}

/* the video drawer (library, People and the Learn pages): beside the Close button */
.uma-video-drawer .video-controls-row--own {
  position: absolute;
  top: var(--app-default-top-bottom-margin-md);
  right: calc(var(--app-default-top-bottom-margin-md) + var(--button-size-md) + var(--gap-sm));
  z-index: 2;
  align-items: center;
  height: var(--button-size-md);
  margin-top: 0;
}

.uma-video-drawer .video-controls-row--own .video-captions-btn {
  color: var(--bright-white);
}

/* phones: the drawer starts at the very top, under the light top bar, so the CC
   goes just below that bar, straight under Close */
@media (max-width: 600px) {
  .uma-video-drawer .video-controls-row--own {
    top: calc(var(--fixed-header-height) + var(--app-default-top-bottom-margin-md));
    right: var(--app-default-top-bottom-margin-md);
    justify-content: center;
    width: var(--button-size-md);
  }
}

/* the homepage hero: over the launch film, top right below the header, once the film shows */
.hero-content > .video-controls-row--own {
  position: absolute;
  top: calc(var(--fixed-header-height) + var(--app-default-top-bottom-margin-lg));
  right: var(--app-default-top-bottom-margin-lg);
  z-index: 4;
  margin-top: 0;
}

.hero-content > .video-controls-row--own .video-captions-btn {
  color: var(--bright-white);
}

.hero-launch-video:not(.hero-launch-video--visible):not([poster]) + .video-controls-row--own {
  display: none;
}

/* the words themselves: light on a dark band, readable over any film, light or dark theme */
video::cue {
  color: var(--bright-white);
  background-color: rgba(var(--black-rgb), var(--opacity-very-high));
}
/* UMA-css-statistics-phone-06oct2026-v1.css (statistics test session, 6 Oct 2026). Append to the END of UMA.css.
   At 760 and below, UMA.css hides every .statistics-footnote on /statistics (the rule at about line 25135,
   ":where(.page-statistics) .statistics-footnote { display: none; }"). That also hides the "Last updated" line
   (#statsUpdated) and every "Not enough answers yet" note (map, demographics, bubbles), so on a phone the page shows
   empty panels and no date. These two lines bring back only those; the chart footnote (#footnote) stays as it is.
   No colour, size or wording changes: the notes take the .statistics-footnote styles they already have. */
@media (max-width: 760px) {
  :where(.page-statistics) #statsUpdated:not([hidden]) { display: block; } /* used: statistics */
  :where(.page-statistics) #mapview > .statistics-footnote, :where(.page-statistics) #demoview .statistics-footnote, :where(.page-statistics) #stage > .statistics-footnote { display: block; } /* used: statistics */
}

/* ==========================================================================================================
   A11Y SWEEP 6 OCT 2026, block v1 (claude/a11y-sweep-06oct2026). Appended to the very end of UMA.css; nothing
   above it is changed. Her house rules hold: no colour changes, no bigger buttons, no underlines before hover.

   1. HIT AREAS. Controls drawn smaller than 44 by 44 get an invisible hit area of at least 44 by 44 (a ::after
      with no colour, no border and no content). The control looks exactly as before; only the place a finger
      can press grows. position: relative is given with :where(), so it weighs nothing and any rule that already
      places the control (fixed, absolute) still wins. Every control listed was checked: none uses ::after.
      The preview dots are 14px apart, so theirs grows in height only (a wider one would cover the next dot). The
      glossary letters and the chart filter pills are left out: their neighbours, or the bar they scroll in, leave
      no room (in the report, for her decision).
   ========================================================================================================== */
:where(.form-alt-link a, .internal-footer .footer-hyperlinks a, .tools-footer .footer-hyperlinks a,
       .uma-chrome-sidebar-icon, #uma-chrome-feedback-tab, .uma-chrome-header-icon, a.uma-chrome-logo,
       #upgradeClose, .uma-upgrade-preview-dot, .login-buttons .btn, .video-control-btn, #uma-hero-video-toggle,
       .uma-canvas-close, .uma-canvas-download-button, .uma-canvas-preview-toggle, #zo, #zi, #prevCat, #nextCat,
       #revealPin, #exitButton, #exitBtn, .verdict-tab, .uma-drawer-post-btn,
       #umaScreeningsFirstGo, .radar-graph-tab, .fact-card-download-btn, .info-card-btn-primary, #moderation-refresh,
       a.adhd-autism-cptsd-profile-btn, button.adhd-autism-cptsd-profile-btn, .health-history-btn-pill,
       .trauma-history-btn-pill, .export-split-pill-main) {
  position: relative;
}
.form-alt-link a::after, .internal-footer .footer-hyperlinks a::after, .tools-footer .footer-hyperlinks a::after,
.uma-chrome-sidebar-icon::after, #uma-chrome-feedback-tab::after, .uma-chrome-header-icon::after, a.uma-chrome-logo::after,
#upgradeClose::after, .login-buttons .btn::after, .video-control-btn::after, #uma-hero-video-toggle::after,
.uma-canvas-close::after, .uma-canvas-download-button::after, .uma-canvas-preview-toggle::after, #zo::after, #zi::after,
#prevCat::after, #nextCat::after, #revealPin::after, #exitButton::after, #exitBtn::after,
.verdict-tab::after, .uma-drawer-post-btn::after, #umaScreeningsFirstGo::after, .radar-graph-tab::after,
.fact-card-download-btn::after, .info-card-btn-primary::after, #moderation-refresh::after,
a.adhd-autism-cptsd-profile-btn::after, button.adhd-autism-cptsd-profile-btn::after, .health-history-btn-pill::after,
.trauma-history-btn-pill::after, .export-split-pill-main::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
  background: none;
  border: 0;
  pointer-events: auto;
}
.uma-upgrade-preview-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 44px;
  transform: translateY(-50%);
  background: none;
  border: 0;
}

/* ==========================================================================================================
   2. FOCUS RING WITH A GAP. Her rule: a full ring with a gap. Keyboard focus only (:focus-visible), so a click or
      a tap shows nothing new. !important because several pages carry their own copy of the styles inline, after
      UMA.css.
      2a. Every ring already drawn keeps its width and colour and gets the gap (--focus-ring-offset, 2px). Left
          out: the review tabs, whose ring sits inside on purpose (their row clips anything outside).
      2b. The controls the sweep found with no ring at all get the ring UMA.css already draws on the results pages:
          --stroke-thin solid --focus-outline-color, set off by --focus-ring-offset. Links inside the condition
          cards keep their white ring.
      Not touched, by the earlier ruling that the stroke turns orange instead of a ring: text fields, the arrow
      button inside a field, the PIN boxes, and the screening answers, pills, back and X buttons.
   ========================================================================================================== */
:is(a[href], button, [role="button"], [role="link"], [role="tab"], [role="menuitem"], summary):focus-visible:not(.verdict-tab) {
  outline-offset: var(--focus-ring-offset, 2px) !important;
}
/* release build 91 (bug 61): :not(.uma-chrome-pointer-focus) below, so focus moved after a tap or a click draws no ring. */
:is(.skip-link, .tools-skip-link, a.uma-chrome-logo, .section-nav-link, #sosBtn, .legal-link, .uma-canvas-preview-toggle,
    #zo, #zi, .uma-canvas-download-button, .uma-canvas-close, .tools-filter-item, #prevCat, #nextCat, .tools-footer-text-link,
    .tools-footer-link, .internal-footer .footer-hyperlinks a, #moderation-refresh, .uma-affiliate-link,
    .intervention-menu-item, .keyboard-focus-no-stroke:not(.field-action *):not(.four-digit-code-field *):not(.uma-segmented-toggle *)):not(.uma-chrome-pointer-focus):focus-visible:where(:not(.uma-input-pointer *)),
a[href]:focus-visible:where(:not(.uma-input-pointer *)):not(.cond-card *):not(.verdict-tab) {
  outline: var(--stroke-thin, 1px) solid var(--focus-outline-color, #EA7100) !important;
  outline-offset: var(--focus-ring-offset, 2px) !important;
}

/* ==========================================================================================================
   3. NO FOCUS ON SOMETHING YOU CANNOT SEE. Controls that only fade in on hover now also show while the keyboard
      is on them, so the ring is never drawn round nothing. Opacity only; nothing moves.
      - homepage cards: the play, pause and sound row, and the campaign share icons
      - library, marketplace, discounts and condition pages: the buy and rating overlay on a product picture
      The homepage header's empty logo link (no picture in it yet, 0 by 0) leaves the Tab order until the logo
      goes in (:empty also matches a link that holds only a comment).
   ========================================================================================================== */
.video-controls-row:focus-within, .campaign-share-block:focus-within { opacity: 1 !important; }
.card-image-rating-overlay:focus-within { opacity: 1 !important; pointer-events: auto !important; }
.main-header .logo:empty { display: none; }

/* ==========================================================================================================
   RELEASE BUILD 91 (7 October 2026). Page fixes after launch, in their own block. Tokens from this file only;
   no new colours, no IDs, no !important.
   ========================================================================================================== */

/* Bug 35. The homepage header's menu button, phones only (the sidebar opens the menu above that). White over
   the navy hero; once the header turns light on scroll it takes the colour Log in takes there. */
.website-header-menu-button { display: none; }
@media (max-width: 599.98px) {
  .website-header-menu-button { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; width: var(--button-size-sm); height: var(--button-size-sm); background: transparent; border: none; color: var(--white-text-default); cursor: pointer; }
}
.main-header--scrolled .website-header-menu-button { color: var(--t-emphasis); }
.website-header-menu-icon { font-size: var(--chrome-hamburger-size); line-height: var(--default-line-height-single); }
.website-header-menu-button:focus-visible:where(:not(.uma-input-pointer *)) { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); }

/* Bug 38. The numbers in the unselected rating stars had no colour of their own and took the browser's button
   text colour (bright blue on iPhone Safari). The star buttons now carry navy, which the numbers inherit; the
   filled, hover and dark-mode colours are unchanged (they set their own). Chrome panel and homepage form. */
.uma-feedback-star, .uma-chrome-feedback-heart { color: var(--navy); }

/* Bugs 36, 37, 39 and 41. On phones the homepage's Post a review form opens as a full-screen panel over the
   page (the page behind stops scrolling, uma-chrome-scroll-locked), above the header, the Feedback tab and SOS.
   inset: 0 follows the visible screen, so the X is never under the browser bar. Full width with the page's own
   side padding; the same background as the reviews section. Above 600 px the form stays in the page as before. */
@media (max-width: 599.98px) {
  .page-home .uma-product-drawer-panel-write.is-active { position: fixed; inset: 0; z-index: var(--z-feedback-panel); box-sizing: border-box; width: 100%; max-width: none; margin: 0; overflow-y: auto; overscroll-behavior: contain; background-color: var(--t-band-alt); padding: calc(var(--app-default-top-bottom-margin-xl) + env(safe-area-inset-top, 0px)) var(--default-left-right-mob-body-padding) calc(var(--app-default-top-bottom-margin-xl) + env(safe-area-inset-bottom, 0px)); }
  .page-home .uma-product-drawer-panel-write.is-active .review-form-close { top: calc(var(--app-default-top-bottom-margin-xl) + env(safe-area-inset-top, 0px)); }
  .page-home .uma-product-drawer-panel-write.is-active .uma-drawer-write-heading { padding-right: var(--button-size-md); }
}

/* Bug 40. Cookiebot's own cookie settings button (a round button at the bottom left, its widget, shown after a
   choice is made) now shows on the homepage only. The widget box has no class, so it is found by the button inside
   it. The cookie banner itself is not touched, so a first visit on any page still gets the banner. */
html:not(.page-home) div:has(> .CookiebotWidget-logo) { display: none; }

/* Bugs 42 and 43. The SOS panel on phones: its top and the X could sit under the browser's address bar, and once
   the panel was scrolled down to the helplines the X had scrolled away, so it could not be closed. The panel is
   now held to the bottom of the screen (where the SOS button already sits) and is as tall as the visible screen
   (100dvh; without dvh it keeps inset 0), so its top is always on screen; scrolling inside it no longer scrolls the
   page behind (which made the address bar grow and shrink). On every width the row with the X stays at the top of
   the panel while it scrolls, on the panel's own background, so the X can always be reached. */
.uma-crisis-pane { overscroll-behavior: contain; }
.uma-crisis-pane .crisis-pane-inner { padding-top: 0; }
.uma-crisis-pane .crisis-pane-close-row { position: sticky; top: 0; z-index: var(--z-chrome-layer-10); padding-top: calc(var(--app-default-top-bottom-margin-lg) + env(safe-area-inset-top, 0px)); background: var(--dark-teal); }
@media (max-width: 599.98px) {
  @supports (height: 100dvh) {
    .uma-crisis-pane { top: auto; bottom: 0; height: 100dvh; }
  }
}

/* Bugs 45 and 46. On phones the SOS panel had big gaps above and below the breathing box (134 px from the words
   to the box, 126 px from the box to "Feeling trapped or suicidal?"). Three causes: the breathing words took the
   site's last-paragraph margin (32 px) on top of the grid gap; the box's stage was square (311 px tall) while the
   box never grows past 72% of it; the next heading added its own top margin to the grid gap. On phones the stage
   now takes the shape UMA.css already gives it below 1050 px (the box fills it at full breath, so the box itself
   breathes exactly as before), and the words and the heading leave the spacing to the grid gap (--gap-xl). */
@media (max-width: 599.98px) {
  .uma-crisis-pane { --uma-crisis-stage-ratio: var(--crisis-pane-breath-stage-ratio); --uma-crisis-height-small: var(--crisis-pane-breath-height-small); --uma-crisis-height-large: var(--crisis-pane-breath-height-large); }
  .uma-crisis-pane .crisis-pane-breath-text .crisis-pane-text { margin-bottom: 0; }
  .uma-crisis-pane .crisis-pane-help .crisis-pane-subheading:first-child { margin-top: 0; }
}

/* Bug 61. The SOS button's keyboard ring showed after a tap or a click, when the SOS panel closed and focus went
   back to it. The chrome now marks focus it moves after a tap or a click with uma-chrome-pointer-focus (taken off
   on blur and on the next key press), and no ring is drawn for it. The ring sweep in the a11y sweep block skips the
   class at its source (the :not() added there), so this needs no !important. Tab, Enter and Escape still show it. */
.uma-chrome-pointer-focus:focus-visible { outline: none; }
/* Bugs 48 and 49 (and 50, 55 on burnout-depression and somatic-super-syndrome). The library picks shelf on the
   Learn pages is now the standard Learn carousel (centred-card-carousel) with the standard arrows under it
   (centred-card-carousel-controls), so the library's own arrows that its script adds after the shelf are not shown. */
.learn-library-picks .uma-carousel-nav { display: none; }

/* Bug 59. The glossary's search box ran the full width of the glossary column. It now keeps the golden small
   width, as other constrained content does, starting at the column's left edge like the rest of the glossary. */
.glossary-tools .search-field-wrap { max-width: var(--golden-width-small); }
/* Bug 58. release build 91 (bug 58): the Uma big screen reel's eyebrow spacing and heading weight. The somatic page
   does not load this file (its UMA.css link sits inside a comment in the page's own style block), so the rules are
   at the end of uma-learn-media.css, the reel's own stylesheet, under "Bug 58.". */
/* Bug 60. The legal pages (Terms, Privacy, Cookies) now carry the website chrome. Their own column (.legal-page)
   already has the page's side padding and width, so the chrome's inner wrapper adds no width limit or side padding
   of its own (as on the homepage and the Learn pages); otherwise phones got the side padding twice. The chrome's top
   gap stays, so the page clears the top bar. */
:where(.page-legal) .uma-chrome-inner-content-wrapper { max-width: none; padding-left: 0; padding-right: 0; }
/* Bug 60. With the chrome the legal pages now follow the mode button, and their headings were fixed charcoal, so in
   dark mode they were charcoal on navy. UMA.css means them to be "the same as the text", so they take the text's
   colour: unchanged in light mode (charcoal), readable in sunset and dark. */
.page-legal .legal-heading { color: inherit; }
/* Bugs 27 and 28. Words spilling out of their boxes on phones (checked at 320, 375, 414 and 449).
   The 9:16 stat cards in #StopMakingWomenWait: the words under the number start on the golden line and ran
   past the foot of the card (clipped by up to 52px). Their paragraph takes the next size steps down, as the
   FAQ answers already do on phones; the number stays on the golden line. */
@media (max-width: 599.98px) {
  .stat-dark-para-txt { font-size: var(--body-text-sm); line-height: var(--default-line-height-small); }
}
@media (max-width: 449.98px) {
  .stat-dark-para-txt { font-size: var(--body-text-xs); }
}
/* How screening works: the three chart tiles are meant to grow to fit their words once stacked (the shape
   behind them keeps them 9:16 at least), but the 9:16 lock for tiles under 800 won, so the paragraph ran
   over the bar chart, the radar's Childhood and As an adult buttons and its A1 and A5 to A6 labels were
   cut off, and the donut's label was cut off. The download tile's button and the two security tiles'
   words were cut off at 320 in the same way. They stay 9:16 and grow only when their words need it. */
@media (max-width: 599.98px) {
  .tile-grows-to-fit { aspect-ratio: auto; }
  :where(.page-home) .portrait-tile-single-row, .fifty-fifty-portrait-tile { aspect-ratio: auto; min-height: calc(var(--carouselle-card-lg) / (var(--tile-ratio-portrait))); }
}
@media (max-width: 449.98px) {
  :where(.page-home) .portrait-tile-single-row, .fifty-fifty-portrait-tile { min-height: calc(var(--carouselle-card-width-mobile) / (var(--tile-ratio-portrait))); }
}
/* The FAQ answer with the email address: the address is one long word and ran 4px past the answer at 320. */
@media (max-width: 599.98px) {
  .faq-text { overflow-wrap: break-word; }
}
/* "Mission late-discovery": late-discovery cannot break (a non-breaking hyphen) and at 44px it needs 298px,
   which the column has from 362px up. Below that the heading takes the next size step down. */
@media (max-width: 361.98px) {
  .mission-heading { font-size: var(--heading-size-xl); }
}
/* The paid pricing card at 320: "1 yr membership" ran 28px past the card. Below 360 the tag may drop
   under the price. */
@media (max-width: 359.98px) {
  .pricing-card-header { flex-wrap: wrap; }
}
/* The thumbs up and down tabs over the reviews at 320: the row squeezed them 3px, which cut off the
   thumbs-down tab's right edge. They keep their size; the sort menu beside them gives the 3px. */
@media (max-width: 599.98px) {
  .verdict-tabs { flex-shrink: 0; }
}

/* Bug 30. Swiping the ADHD self-report pages on a phone. The page's script turns a page on a pointer
   swipe, but the browser took every touch drag over the card as its own scroll gesture and cancelled
   the pointer (pointercancel, so no pointerup), so a sideways swipe never turned a page and only the
   dots worked. The card now leaves sideways drags to the script and still scrolls the page up and down. */
.portrait-tile-report-preview { touch-action: pan-y; }

/* Bug 32. The lock film on the red "Uma gives women back control" tile played on black on iPhone. Her
   uma_lock_white.webm is VP9 with an alpha channel (alpha_mode 1, a white lock on clear); Safari plays
   WebM without its alpha, so the clear parts come out black. The lock is white only, so screen blending
   gives the same picture as the alpha: black lets the red through, white stays white. Where the alpha
   works (Chrome, Edge, Firefox) the picture is unchanged. No colour changes. */
.uma-lock-media { mix-blend-mode: screen; }

/* Bug 34. Review cards on phones: "Aug 2024" broke onto two lines beside the stars (the cards are 300px
   below 450, and the date's column was 73px for 75px of date). The gap between the stars and the date
   steps down from --gap-sm to --gap-xxs and the date keeps to one line. The date format is unchanged. */
@media (max-width: 599.98px) {
  .review-card-header { column-gap: var(--gap-xxs); }
  .review-card-date { white-space: nowrap; }
}

/* Bug 62. The website sign-in pages (log-in, sign-up) and contact now carry the website chrome. Their own centred
   column already has the page's side padding and width, so the chrome's inner wrapper adds no width limit or side
   padding of its own (otherwise phones got the side padding twice); its top gap stays, so the page clears the top
   bar. The navy lock screen after a passkey or PIN (and the cream one) covers the chrome's sidebar, Feedback tab and
   SOS, as it covered the whole page before. */
:where(.page-auth-website) .uma-chrome-inner-content-wrapper { max-width: none; padding-left: 0; padding-right: 0; }
.page-auth-website .animation-overlay { z-index: var(--z-chrome-close); }
/* Bug 64. release build 91 (bug 64): the Feedback tab and the menu buttons (the top bar's menu button and the
   desktop sidebar) had no keyboard ring. They now take the site's ring on :focus-visible only, as the homepage
   header's menu button does. Focus the chrome moves after a tap or a click carries uma-chrome-pointer-focus (bug 61's
   pattern, now also used when the menu and the Feedback panel close), so no ring shows after a tap or a click. */
.uma-feedback-tab:focus-visible:where(:not(.uma-input-pointer *)):not(.uma-chrome-pointer-focus),
.uma-chrome-hamburger:focus-visible:where(:not(.uma-input-pointer *)):not(.uma-chrome-pointer-focus),
.uma-chrome-side-bar:focus-visible:where(:not(.uma-input-pointer *)):not(.uma-chrome-pointer-focus) { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); }

/* Bug 66. release build 91 (bug 66): the menu panel was 100vh tall, which on iPhone Safari is the screen with the
   toolbar hidden, so with the toolbar showing the panel's foot (Upgrade and the voice switch) sat under it. The panel
   now follows the visible screen: top and bottom 0 where dvh is not known, and 100dvh held to the bottom of the
   screen where it is (as the SOS panel, bug 42), never 100vh. Its bottom row keeps clear of the iPhone home bar. */
.uma-chrome-menu-pane { bottom: 0; height: auto; }
@supports (height: 100dvh) {
  .uma-chrome-menu-pane { top: auto; height: 100dvh; }
}
.uma-chrome-menu-bottom { padding-bottom: calc(var(--flyout-padding-bottom-desktop) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 600px) {
  .uma-chrome-menu-bottom { padding-bottom: calc(var(--flyout-padding-bottom-mobile) + env(safe-area-inset-bottom, 0px)); }
}

/* Bug 68. release build 91 (bug 68): on desktop the Learn bar needed 1,096 px for its links and the Uma library
   pill but had 976 px from 1280 up (less below), so the pill was cut off at the right edge. From 901 px up (where the
   Learn title shows) the links sit a step closer (--gap-md each side in place of --gap-xl), so everything fits from
   1280 up; below that only the links scroll, inside their own list, and the pill beside them is always whole. The
   chrome slides the current page's link into view in whichever strip scrolls. Phones are unchanged. */
@media (min-width: 901px) {
  .page-learn .section-nav-link { padding-left: var(--gap-md); padding-right: var(--gap-md); }
  .page-learn .section-nav-scroller { overflow: visible; }
  .page-learn .section-nav-list { flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; }
  .page-learn .section-nav-list::-webkit-scrollbar { display: none; }
}
/* Bug 65. release build 91 (bug 65): the library, marketplace and discounts pages are now inside the website chrome.
   Their own main is drawn full width beside the chrome's sidebar, as it was beside the old prototype strip: the
   main carries tools-content-in-chrome (it does not clear the sidebar a second time) and the chrome's inner
   wrapper adds no width limit, side padding, top gap or foot padding of its own on these pages. */
:where(.page-catalogue) .uma-chrome-content-inner { max-width: none; padding-left: 0; padding-right: 0; padding-bottom: 0; margin-top: 0; }
/* Bug 65. The chrome's content band painted its own background over the page's (a lighter band behind the
   discounts intro, which then showed as a box). These pages keep their own background, as before. */
:where(.page-catalogue) .uma-chrome-content-band { background: none; }
/* Bug 65. The library and the marketplace start below the chrome's top bar, where they started below the old
   prototype header (discounts keeps its own wrapper's top gap, the same height). */
:where(.page-uma-library, .page-uma-marketplace) .uma-chrome-content-inner { margin-top: var(--fixed-header-height); }
/* Bug 65. The sticky search, filter and struggle bars stuck to the very top of the screen, under the chrome's fixed
   top bar (the old prototype header scrolled away with the page). They now stick just below the top bar. */
:where(.page-uma-library) .uma-library-sticky-container,
:where(.page-uma-marketplace) .shop-sticky-bar { top: var(--fixed-header-height); }
/* Bug 77. release build 91 (bug 77): the currency tabs (£, $, €) inside the filters (the marketplace's Price filter;
   the library's Currency filter). They are the profile's Mode tabs (.mode-tab-bar, .mode-tab-segment,
   .mode-tab-segment-selected), so they take the profile's own tab colours, which live on the profile page only:
   the same values are given here, on the tabs, light (and sunset, the warm filter over light) and dark.
   .currency-tab-bar only sizes the bar to its three tabs and centres it under the price range. */
:where(.page-catalogue) .currency-tab-bar { --t-profile-tab-bg: var(--dark-white); --t-profile-tab-border: var(--dark-white); --t-profile-tab-text: var(--mid-charcoal); --t-profile-tab-divider: rgba(var(--black-rgb), var(--opacity-faint)); --t-profile-tab-selected-bg: var(--navy); --t-profile-tab-selected-text: var(--bright-white); width: max-content; margin: var(--app-default-top-bottom-margin-lg) auto 0; }
:root[data-theme="dark"]:where(.page-catalogue) .currency-tab-bar { --t-profile-tab-bg: var(--t-surface); --t-profile-tab-border: var(--t-border); --t-profile-tab-text: var(--t-page-text); --t-profile-tab-divider: var(--t-border); --t-profile-tab-selected-bg: var(--bright-white); --t-profile-tab-selected-text: var(--navy); }
/* Bug 77. The keyboard ring (Tab only, :focus-visible) is her full ring with a gap, outside the tab, so the bar does not
   clip what is outside it here; the end tabs take the bar's rounded corners themselves (the bar's radius less its
   stroke), so the chosen tab still fills the bar's corners exactly as on the profile. */
:where(.page-catalogue) .currency-tab-bar { overflow: visible; }
:where(.page-catalogue) .currency-tab-bar .mode-tab-segment:first-child { border-radius: calc(var(--app-default-radius-md) - var(--stroke-thin)) 0 0 calc(var(--app-default-radius-md) - var(--stroke-thin)); }
:where(.page-catalogue) .currency-tab-bar .mode-tab-segment:last-child { border-radius: 0 calc(var(--app-default-radius-md) - var(--stroke-thin)) calc(var(--app-default-radius-md) - var(--stroke-thin)) 0; }
/* Bug 74. release build 91 (bug 74): the wish list's tool promos (sensory needs canvas, Access to Work assistant)
   now carry the paid lock after "Get started", as the marketplace's own promos do. The button lays its contents
   out in a row, so the space before the lock does not show; the lock takes the marketplace's gap instead. */
.uma-wishlist-promo .paid-feature-lock { margin-left: var(--gap-xs); }
/* Bug 76. release build 91 (bug 76): the "Someone hand them a mic" picture is a 20 MB, 5348 x 3691 file far down
   the library page, and it was fetched before anything else, so the header photo and every card picture waited
   behind it. Its box has no picture until it comes within a screen of view (library.html adds
   library-picture-near), then it gets its picture as before. */
:where(.page-uma-library) .uma-library-voices-mic-image:not(.library-picture-near) { background-image: none; }
/* Bug 76. Each card's picture box holds the card surface colour, in the box's own shape (the boxes already keep
   their picture's proportions), until its picture has arrived; library.html adds library-picture-loaded then.
   Pods keep their own artwork colour. */
:where(.page-uma-library) .uma-library-book-card-media:not(.library-picture-loaded),
:where(.page-uma-library) .uma-library-audiobook-card-media:not(.library-picture-loaded),
:where(.page-uma-library) .uma-library-app-card-media:not(.library-picture-loaded),
:where(.page-uma-library) .uma-library-video-card-media:not(.library-picture-loaded),
:where(.page-uma-library) .uma-library-voice-card-media:not(.library-picture-loaded) { background: var(--t-surface); }

/* Bug 17. release build 91 (bug 17, her final ruling): no focus ring on anything unless the keyboard put focus
   there. Every rule above that draws a ring (outline, a box-shadow ring, or a stroke turned orange) on focus now
   draws it on :focus-visible only, and each carries :where(:not(.uma-input-pointer *)), which weighs nothing. The
   chrome (and pages without the chrome, in their own script) puts uma-input-pointer on <html> on a mouse press or a
   tap and takes it off on Tab, the arrows, Enter, Space or Escape, so focus moved by a script after a tap (which
   Safari draws as keyboard focus) shows no ring either. After a key press nothing changes: the ring shows. */
:focus:not(:focus-visible) { outline: none; }
html.uma-input-pointer :focus-visible { outline: none; }
/* Bug 17 (her ruling on switches, 8 Oct). One ring only, on the control you can see, with the gap, keyboard only.
   A switch's input is invisible and its wrapper is a rectangle, so neither draws a ring (the a11y sweep's wrapper
   rule no longer lists .switch); the ring goes on the switch's own track and follows its rounded ends. The segmented
   toggle's group no longer turns orange; the option the keyboard is on draws the ring, just inside it, since the
   group clips anything outside (as on the library, marketplace and reviews pages already). */
.switch input:focus-visible:where(:not(.uma-input-pointer *)) ~ .switch-track,
.uma-chrome-menu-voice input:focus-visible:where(:not(.uma-input-pointer *)) ~ .uma-chrome-menu-voice-track { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); }
.uma-segmented-toggle-option:focus-visible:where(:not(.uma-input-pointer *)) { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: calc(-1 * (var(--focus-outline-width) + var(--focus-ring-offset))); }
/* Bug 17. The library's and the marketplace's search box drew nothing on Tab (no page Tab script there to give the
   field keyboard-focus, and :focus-within sets its stroke transparent). From the keyboard its own stroke turns
   orange, as every other field's does; from a tap or a click it stays as it is. */
.field-action:has(.field-action-input:focus-visible:where(:not(.uma-input-pointer *))) { border-color: var(--orange); }
/* Bug 17. One indicator per control from the keyboard. A text box inside a stroked field (sign-up, contact) drew the
   a11y sweep's ring round the box as well as the field's orange stroke; the sweep rule now skips a box inside
   .field-action, .four-digit-code-field or .uma-segmented-toggle, so only the field's stroke shows. Three controls
   that drew nothing from the keyboard get the site's ring: the reviews sort list, a review card the keyboard can
   reach, and the privacy page's scrolling table on phones. */
:where(.page-uma-library, .page-uma-marketplace, .page-uma-discounts, .page-uma-reviews, .page-statistics) select:focus-visible:where(:not(.uma-input-pointer *)),
.review-card:focus-visible:where(:not(.uma-input-pointer *)),
.legal-table:focus-visible:where(:not(.uma-input-pointer *)) { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); }
/* Bug 111. release build 91 (bug 111, her "103"): discount codes are for members only. A visitor who turns a discount
   card over sees what the discount is with "Sign up or Log in to get it" and two buttons, Sign up and Log in. They sit
   side by side (wrapping to two lines on a narrow card), with the actions' own gap. */
.card-back-actions.discount-gate-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
/* Bug 111. The product drawer's discount row: the two buttons sit in a row where the copy button sits for a member;
   the copy button and the buttons are hidden with the hidden attribute (their own display rules would show them). */
.drawer-discount-gate-actions { display: flex; flex-wrap: wrap; gap: var(--gap-xs); flex-shrink: 0; }
.drawer-discount-row .drawer-discount-gate-actions[hidden],
.drawer-discount-row .drawer-copy-code-btn[hidden] { display: none; }
/* Bug 95. release build 91 (bug 95): on the marketplace the chosen struggle is navy words on a white slider drawn
   behind it, placed by the page script once her pills are drawn. Until the slider is placed (the page marks the bar
   pill-slider-placed), the chosen pill fills itself with the same white, so All products is a white pill with navy
   words from the first moment, never navy words with no pill over the film. The other pills keep their white words
   and white stroke (bug 11). */
:where(.page-uma-marketplace) .uma-fullscreen-default-carouselle:not(.pill-slider-placed) .intervention-menu-item .intervention-menu-item-pill-selected,
:where(.page-uma-marketplace) .shop-sticky-bar.is-sticky .uma-fullscreen-default-carouselle:not(.pill-slider-placed) .intervention-menu-item .intervention-menu-item-pill-selected { background: var(--bright-white); border-color: var(--bright-white); }
:where(.page-uma-marketplace) .uma-fullscreen-default-carouselle:not(.pill-slider-placed)::before { visibility: hidden; }
/* Bug 80. release build 91 (bug 80): the Just-dropped episodes shelf. An episode card with a player shows the player
   only (the large picture above it repeated the cover), at the video cards' size: the same 16:9 box and the same
   widths at each screen width (--library-card-video). The player's logo corner is masked as in the drawer's episode
   list (the drawer's own mask, Spotify's colour, Apple's colour for an Apple player). The heart and the + are two
   round buttons above the episode title; the heart keeps its favourites class (uma-wishlist-earmark), so its corner
   placement is undone here. */
:where(.page-uma-library) .uma-library-podcast-card.library-episode-card { flex: 0 0 var(--library-card-video); width: var(--library-card-video); min-width: var(--library-card-video); max-width: var(--library-card-video); }
:where(.page-uma-library) .uma-library-podcast-card-media.library-episode-media { aspect-ratio: var(--carouselle-card-ratio-video); overflow: hidden; }
:where(.page-uma-library) .library-episode-player { position: relative; height: 100%; }
/* Bug 80. Apple's episode player draws at one fixed height (175 px) and leaves the rest of a taller frame empty, so an
   Apple player's box is the video cards' 16:9 up to that height (phones: exactly 16:9) and no taller. */
:where(.page-uma-library) .library-episode-media:has(iframe[src*="podcasts.apple.com"]) { max-height: var(--platform-apple-height-compact); }
:where(.page-uma-library) .uma-library-podcast-card-player-frame.library-episode-frame { height: 100%; margin-top: 0; border-radius: var(--app-default-radius-lg); }
:where(.page-uma-library) .library-episode-player .drawer-show-episode-corner-mask { border-top-right-radius: var(--app-default-radius-lg); }
:where(.page-uma-library) .library-episode-player:has(iframe[src*="podcasts.apple.com"]) .drawer-show-episode-corner-mask { background: var(--platform-apple); }
:where(.page-uma-library) .library-episode-actions { display: flex; gap: var(--gap-xs); margin-bottom: var(--app-default-top-bottom-margin-md); }
:where(.page-uma-library) .uma-wishlist-earmark.library-episode-heart { position: relative; top: auto; right: auto; z-index: auto; width: auto; height: var(--button-size-md); border: var(--stroke-hairline) solid var(--navy); border-radius: var(--radius-pill); background: transparent; display: inline-flex; align-items: center; overflow: visible; opacity: 1; justify-content: center; }
:where(.page-uma-library) .library-episode-heart .uma-wishlist-earmark-icon { position: static; color: inherit; font-size: var(--button-icon-md); }
:root[data-theme="dark"]:where(.page-uma-library) .library-episode-actions .btn-secondary-navy-on-white { color: var(--t-text-strong); border-color: var(--t-text-strong); }
/* Bug 81. release build 91 (bug 81): the "Watch on Uma" player (.uma-video-drawer) is the Uma big screen. It sat
   below the chrome's top bar and beside its side bar, with the Feedback tab, SOS and the floating buttons over it.
   While it is open (uma-big-screen-open on the html element, uma-library-additions.js) every part of the chrome is
   hidden, and the player takes the whole visible screen (inset 0, never 100vh), above everything. The chrome comes
   back when it closes. */
:where(.page-uma-library) .uma-video-drawer { top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-video-drawer); }
/* Bug 81. Its black was var(--black), a token this file does not define, so it was see-through: with a portrait
   player (bug 82) the page showed at the sides. It is her black (--black-rgb), as the rule meant. */
:where(.page-uma-library) .uma-video-drawer { background: rgb(var(--black-rgb)); }
.uma-big-screen-open .uma-chrome-top-bar,
.uma-big-screen-open .uma-chrome-side-bar,
.uma-big-screen-open .uma-chrome-sidebar-icon,
.uma-big-screen-open .uma-feedback-tab,
.uma-big-screen-open .uma-feedback-tab-bar,
.uma-big-screen-open .uma-chrome-sos,
.uma-big-screen-open .uma-crisis-pane,
.uma-big-screen-open .skip-link,
.uma-big-screen-open .uma-library-sticky-container,
.uma-big-screen-open .uma-marketplace-filters-tab,
.uma-big-screen-open .uma-chrome-wishlist-float-btn { visibility: hidden; pointer-events: none; }
/* Bug 82. release build 91 (bug 82): a vertical video (YouTube Short) shows YouTube's portrait picture of its frame
   (uma-library-additions.js puts it in and marks the box library-video-vertical), so there is no blown-up copy behind
   it. Release build 94: shown whole at its true shape on black (her ruling below), no longer cropped. On the Uma big screen
   it plays in a portrait player (9:16, the full height of the screen, centred). */
/* Her ruling of 8 Oct 2026 (answer 1): the video shows at its true shape in the middle; only the space either side of it
   is black. No blurred picture behind it, no cropping. So the portrait picture is shown whole (contain), not cropped. */
:where(.page-uma-library) .uma-library-video-card-media.library-video-vertical,
:where(.page-uma-library) .uma-product-drawer-video-full.library-video-vertical { background: rgb(var(--black-rgb)); }
:where(.page-uma-library) .library-video-vertical img { object-fit: contain; object-position: center; }
:where(.page-uma-library) .uma-video-drawer-portrait .uma-video-drawer-iframe { width: auto; max-width: 100%; height: 100%; aspect-ratio: var(--carouselle-card-ratio-nine-by-sixteen); }
/* Bug 83. release build 91 (bug 83): a drawer's comments with none yet. "No comments yet" (uma-media-reviews.js)
   stands where the cards would be, in the page's own empty review line (.uma-reviews-empty) without its tall
   padding; the empty rail and its thumbs and sort controls are hidden, so the comment box sits directly under it. */
:where(.page-catalogue) .uma-drawer-reviews-is-empty .uma-product-drawer-reviews-carousel,
:where(.page-catalogue) .uma-drawer-reviews-is-empty .reviews-controls { display: none; }
:where(.page-catalogue) .uma-drawer-reviews-empty { padding-top: var(--app-default-top-bottom-margin-md); padding-bottom: 0; margin: 0; text-align: left; color: var(--t-text-secondary); }
:where(.page-catalogue) .uma-drawer-reviews-is-empty .uma-comment-input-area { margin-top: var(--app-default-top-bottom-margin-md); }
:where(.page-catalogue) .uma-product-drawer--media .uma-drawer-reviews-empty { padding-left: var(--app-default-top-bottom-margin-xl); padding-right: var(--app-default-top-bottom-margin-xl); }
/* Bug 91. release build 91 (bug 91): no reviews yet: her words "No review yet, leave the first review" in the
   drawers' empty line (bug 83's), and on the reviews page. Signed out, Post review shows the heart's sign-in notice
   (.idle-notice) with two real buttons, Sign up and Log in, side by side at its foot. In dark mode the Sign up
   button takes the notice's own text colour, as the library's other navy outline buttons do. */
.review-sign-in-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--gap-sm); }
:root[data-theme="dark"] .review-sign-in-actions .btn-secondary-navy-on-white { color: var(--t-text-strong); border-color: var(--t-text-strong); }
/* Bug 90. release build 91 (bug 90): the app drawer's screenshots carousel had no space at its start and end; it
   takes the drawers' other carousels' start and end padding (--drawer-media-padding). */
:where(.page-uma-library) .drawer-app-screenshots-carousel.default-carousel-product-drawers { padding-left: var(--drawer-media-padding); padding-right: var(--drawer-media-padding); }
/* Bug 89. release build 91 (bug 89): the app drawer's stats bar (Uma ratings, App Store, Google Play, Downloads, Age,
   Size, Category) sat in a band with 24 px of empty drawer colour above and below it and a gap under it, which showed
   as white strips between the description and the screenshots. The band is now the bar itself (no padding or gap) in
   the drawer's own shade, and the reviews below the screenshots take the drawer's shade, so the sections alternate her
   two drawer shades (--t-drawer-bg, --t-drawer-band) from top to bottom with nothing between them. */
:where(.page-uma-library) .drawer-app-stores-table { margin: 0; padding-top: 0; padding-bottom: 0; background: var(--t-drawer-bg); }
:where(.page-uma-library) .uma-product-drawer--app .uma-product-drawer-reviews-full { background: var(--t-drawer-bg); }
/* Bug 77 phase 2. release build 91 (bug 77, phase 2): the library's Currency row, last in the filter list. It is a
   row like her filter rows (their height, divider, padding and colours at each width), with no drill-down: the three
   currency tabs sit in the row itself, on the right, where the other rows show their summary. */
.uma-filter-currency-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); width: 100%; min-height: var(--filter-drawer-row-height); color: var(--filter-text); font-size: var(--body-text-sm); box-sizing: border-box; }
.uma-filter-currency-row .currency-tab-bar { margin: 0; flex-shrink: 0; }
@media (max-width: 899px) {
  .uma-filter-currency-row { background: var(--filter-solid-bg); border-bottom: var(--stroke-thin) solid var(--filter-divider); margin-left: calc(-1 * var(--default-left-right-mob-body-padding)); margin-right: calc(-1 * var(--default-left-right-mob-body-padding)); padding: var(--gap-xs) var(--default-left-right-mob-body-padding); width: calc(100% + 2 * var(--default-left-right-mob-body-padding)); }
}
@media (min-width: 900px) {
  .uma-filter-currency-row { grid-column: 1; position: relative; z-index: 1; padding: var(--gap-xs) var(--app-default-top-bottom-margin-xl); background: var(--filter-nav-wide-bg); border-bottom: var(--stroke-thin) solid var(--filter-divider); border-right: var(--stroke-thin) solid var(--filter-divider); white-space: nowrap; }
}
/* Bug 77 phase 2. At 900 and up the last filter row paints the rest of the column under itself (::after); the
   Currency row sits above that paint. */
/* Bug 77 phase 2. Each currency tab's name ("British pound (GBP)", "US dollar (USD)", "Euro (EUR)", also its
   accessible name) shows as a tooltip on hover and on keyboard focus (:focus-visible), above the tab, in the colours
   of the site's .tooltip; library and marketplace. */
.currency-tab-bar .mode-tab-segment { position: relative; }
.currency-tab-bar .mode-tab-segment[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + var(--gap-xs)); left: 50%; transform: translateX(-50%); z-index: 5; padding: var(--gap-xs) var(--gap-sm); border-radius: var(--app-default-radius-md); background: var(--mid-charcoal); color: var(--bright-white); font-size: var(--body-text-sm); line-height: var(--default-line-height-single); white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--transition-fast) ease; }
.currency-tab-bar .mode-tab-segment[data-tip]:hover::after,
.currency-tab-bar .mode-tab-segment[data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
/* Bug 108. release build 91 (bug 108): the marketplace product drawer with no reviews yet. Her line "No review yet,
   leave the first review" took the reviews section's whole minimum height (a tall empty band before Post review);
   with no reviews the section is only as tall as its line and Post review. */
:where(.page-uma-marketplace) .uma-product-drawer-section--reviews.uma-drawer-reviews-is-empty { min-height: 0; }
:where(.page-uma-marketplace) .uma-drawer-reviews-is-empty .uma-drawer-reviews-empty { flex: 0 0 auto; padding-bottom: var(--app-default-top-bottom-margin-md); }
/* Bug 99. release build 91 (bug 99): a product picture that fills its tile edge to edge (partner brands), on the card
   and in the drawer, when her Products column image_full_bleed says so. No such column yet, so nothing changes today. */
:where(.page-uma-marketplace) .card-image-img.product-picture-full-bleed,
:where(.page-uma-marketplace) .uma-product-drawer-preview-image.product-picture-full-bleed { padding: 0; object-fit: cover; }

/* Bug 116. release build 91 (bug 116): the filter panel (library and marketplace) fits the visible screen. Since bug 65
   the search bar sticks below the chrome's top bar (--fixed-header-height), but the open panel was still the screen
   less the bar alone, so its bottom (the last filter row, and the end of the options) hung below the screen by the top
   bar's height and could not be reached. The open panel is now the visible screen (dvh) less the top bar and the bar;
   a browser without dvh gives the panel its natural height and the page scrolls (as on short library screens). */
:where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer.is-open { height: calc(100dvh - var(--fixed-header-height) - var(--intervention-nav-height)); max-height: calc(100dvh - var(--fixed-header-height) - var(--intervention-nav-height)); }
@supports not (height: 1dvh) {
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer.is-open { height: auto; max-height: none; }
}
/* Bug 116. Short library screens keep their natural height panel (QA content 3 Oct, unchanged). */
@media (max-height: 500px) {
  :where(.page-uma-library) .uma-filter-drawer.is-open { height: auto; max-height: none; }
}
/* Bug 116. Phones: the rows scroll inside the panel, clear of the iPhone home bar; the ingredients list keeps its own
   height, less the top bar too. */
@media (max-width: 899px) {
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-inner { padding-bottom: env(safe-area-inset-bottom, 0px); }
  :where(.page-uma-marketplace) .uma-filter-panel.is-active:has([data-picker-sections]) { height: calc(100dvh - var(--fixed-header-height) - var(--intervention-nav-height) - 2 * var(--filter-drawer-row-height)); max-height: calc(100dvh - var(--fixed-header-height) - var(--intervention-nav-height) - 2 * var(--filter-drawer-row-height)); }
  :where(.page-uma-marketplace) .uma-filter-drawer:has(.uma-filter-selections-bar:not([hidden])) .uma-filter-panel.is-active:has([data-picker-sections]) { height: calc(100dvh - var(--fixed-header-height) - var(--intervention-nav-height) - 3 * var(--filter-drawer-row-height)); max-height: calc(100dvh - var(--fixed-header-height) - var(--intervention-nav-height) - 3 * var(--filter-drawer-row-height)); }
}
/* Bug 116. 900 and up: the filter rows on the left and the options on the right scroll on their own. The rows' list
   (the grid) is the scroll box; the open options column is placed on the panel's inner box (which does not scroll),
   in the same place and width as before (the two option columns, or to the right edge for the ingredients), so it
   stays put while the rows scroll and scrolls its own options. The last row's paint down the rest of the column now
   stops at the bottom of the panel (it was a screen tall, which would have made the rows scroll into empty space). */
@media (min-width: 900px) {
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer.is-open .uma-filter-drawer-inner { container-type: size; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-inner .uma-filter-drawer-grid { position: static; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; box-sizing: border-box; padding-bottom: env(safe-area-inset-bottom, 0px); }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-inner .uma-filter-drawer-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid > .uma-filter-panel { left: var(--filter-drawer-nav-column-width); right: auto; width: clamp(calc(2 * var(--filter-drawer-column-min-width)), calc(100% - var(--filter-drawer-nav-column-width)), calc(2 * var(--filter-drawer-column-width))); overscroll-behavior: contain; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid > .uma-filter-panel:not(:has(.uma-filter-picker-list--scroll)) { padding-bottom: calc(var(--app-default-top-bottom-margin-xl) + env(safe-area-inset-bottom, 0px)); }
  :where(.page-uma-marketplace) .uma-filter-drawer-grid > .uma-filter-panel:has(.uma-filter-picker-list--scroll) { right: 0; width: auto; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid > .uma-filter-nav-btn:last-of-type::after { height: max(0px, calc(100cqh - var(--filter-nav-rows) * var(--filter-drawer-row-height))); }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid:has(> .uma-filter-nav-btn:nth-of-type(1)) { --filter-nav-rows: 1; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid:has(> .uma-filter-nav-btn:nth-of-type(2)) { --filter-nav-rows: 2; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid:has(> .uma-filter-nav-btn:nth-of-type(3)) { --filter-nav-rows: 3; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid:has(> .uma-filter-nav-btn:nth-of-type(4)) { --filter-nav-rows: 4; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid:has(> .uma-filter-nav-btn:nth-of-type(5)) { --filter-nav-rows: 5; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid:has(> .uma-filter-nav-btn:nth-of-type(6)) { --filter-nav-rows: 6; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid:has(> .uma-filter-nav-btn:nth-of-type(7)) { --filter-nav-rows: 7; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid:has(> .uma-filter-nav-btn:nth-of-type(8)) { --filter-nav-rows: 8; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid:has(> .uma-filter-nav-btn:nth-of-type(9)) { --filter-nav-rows: 9; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid:has(> .uma-filter-nav-btn:nth-of-type(10)) { --filter-nav-rows: 10; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid:has(> .uma-filter-nav-btn:nth-of-type(11)) { --filter-nav-rows: 11; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid:has(> .uma-filter-nav-btn:nth-of-type(12)) { --filter-nav-rows: 12; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid:has(> .uma-filter-nav-btn:nth-of-type(13)) { --filter-nav-rows: 13; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid:has(> .uma-filter-nav-btn:nth-of-type(14)) { --filter-nav-rows: 14; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid:has(> .uma-filter-nav-btn:nth-of-type(15)) { --filter-nav-rows: 15; }
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer-grid:has(> .uma-filter-nav-btn:nth-of-type(16)) { --filter-nav-rows: 16; }
}
/* Bug 116. Short library screens: the panel takes its natural height there, so its inner box is not a size box. */
@media (min-width: 900px) and (max-height: 500px) {
  :where(.page-uma-library) .uma-filter-drawer.is-open .uma-filter-drawer-inner { container-type: normal; }
}
@supports not (height: 1dvh) {
  :where(.page-uma-library, .page-uma-marketplace) .uma-filter-drawer.is-open .uma-filter-drawer-inner { container-type: normal; }
}
/* Bug 102. release build 91 (bug 102): on the marketplace each filter option shows how many of her products it
   matches, on the right of its words (before the switch), in the words' own colour, the size of the rows' summaries
   (as "By category" on Sort by). Nothing shows until the products are in. */
.uma-filter-option-count { flex-shrink: 0; margin-left: auto; padding-left: var(--gap-sm); color: var(--filter-text); font-size: var(--body-text-xs); font-weight: var(--font-weight-normal); font-variant-numeric: tabular-nums; line-height: var(--default-line-height-single); }
.uma-filter-option-count:empty { display: none; }
/* Bug 102. A filter row's count of her picks shows only once she has picked something (it was 0 on every row). */
.uma-filter-nav-btn-count[hidden] { display: none; }
/* Bug 114. release build 91 (bug 114): the voice search mic (library and marketplace) while it is listening: pressed,
   in Uma's orange (the colours of .btn-primary-orange), its hover the darker orange. Hidden where the browser has no
   speech recognition. */
.uma-library-search-mic[hidden] { display: none; }
.uma-library-search-mic.is-listening,
.uma-library-search-mic[aria-pressed="true"] { --btn-color: var(--orange); background: var(--orange); color: var(--bright-white); }
.uma-library-search-mic.is-listening:hover,
.uma-library-search-mic[aria-pressed="true"]:hover { background: var(--orange-dark); }
/* Bug 128. release build 91 (bug 128): the awareness cards' Download and Share buttons under the homepage stat cards
   (#StopMakingWomenWait). A row of two .btn pills on the carousel's own left edge, as the arrows above them. With a
   mouse the arrows' row ends in its bottom padding, so the buttons sit up under the arrows and the row keeps that
   padding below; on touch screens the arrows are hidden and the buttons sit under the cards. In dark mode Share
   takes the page's strong text colour, as the reviews' Sign up button does (bug 91). */
.awareness-deck-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-sm); margin-top: calc(var(--gap-md) - var(--app-default-top-bottom-margin-xxxl)); padding-left: var(--default-left-right-desk-body-padding); padding-right: var(--default-left-right-desk-body-padding); padding-bottom: var(--app-default-top-bottom-margin-xxxl); }
:root[data-theme="dark"] .awareness-deck-actions .btn-secondary-navy-on-white { color: var(--t-text-strong); border-color: var(--t-text-strong); }
@media (min-width: 1280px) {
  .awareness-deck-actions { padding-left: calc(((100% - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding)); }
}
@media (max-width: 600px) {
  .awareness-deck-actions { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); }
}
@media (pointer: coarse) {
  .awareness-deck-actions { margin-top: 0; }
}

/* Bug 78. release build 91 (bug 78): Top voices from her People list. A person without a video bio shows her words
   and the "Upload video bio" button in the card's picture box, centred, in the page's own text colour; the follow,
   heart and search buttons stay in their corners above it. */
:where(.page-uma-library) .voice-card-no-video { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-md); padding: var(--app-default-top-bottom-margin-md); text-align: center; color: var(--t-text-strong); }
:where(.page-uma-library) .voice-card-no-video-text { margin: 0; font-size: var(--body-text-md); line-height: var(--default-line-height-compact); }
:root[data-theme="dark"]:where(.page-uma-library) .voice-card-no-video .btn-secondary-navy-on-white { color: var(--t-text-strong); border-color: var(--t-text-strong); }

/* Bug 98. release build 91 (bug 98): the Self-care and Bibliosmia paper cards, moved from the marketplace to the
   library's eBooks shelf. The marketplace's paper look (same paper picture and colours, same definition size), the
   book cards' width, and Download and Share side by side. On touch a tap and hold shows them (hover and keyboard focus
   show them already, with the existing fact card rules). */
:where(.page-uma-library) .fact-card--paper { color: var(--mid-charcoal); background: var(--dark-white) url("https://images.unsplash.com/photo-1615800098799-0ccb261b1f92?q=80&w=1610&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") center center / cover no-repeat; }
:where(.page-uma-library) .uma-bibliosmia-definition--card { font-size: var(--body-text-sm); }
:where(.page-uma-library) .library-carouselle .library-quote-tile { flex: 0 0 var(--library-card-book); width: var(--library-card-book); min-width: var(--library-card-book); max-width: var(--library-card-book); }
:where(.page-uma-library) .library-quote-tile-actions { flex-wrap: wrap; gap: var(--gap-md); }
:where(.page-uma-library) .library-quote-tile.library-quote-tile-held .fact-card-download-overlay { opacity: 1; pointer-events: auto; background: rgba(var(--black-rgb), var(--opacity-extra-low)); }

/* Bug 76, part 2. release build 91 (bug 76): the library's two big photos are served as smaller copies made from
   her own files (bookstore.jpeg 4000 px, 2.5 MB, to 1920 px, about 0.5 MB; colour_coded_books.jpeg 5348 px, 20 MB,
   to 1600 px, about 0.4 MB), from /media with the pages. Same pictures, same crop and filters; these rules only
   swap the file, and the mic picture still waits until its section is near (bug 76). */
.page-uma-library .uma-hero::before { background-image: url("/media/library-bookstore-1920-v1.jpg"); }
.page-uma-library .uma-library-voices-mic-image.library-picture-near { background-image: url("/media/library-colour-coded-books-1600-v1.jpg"); }
/* Bug 85. release build 91 (bug 85, her "73"): pressing a heart flashed orange. It was not a focus ring (no outline at
   any moment of a tap or a click, bug 17 holds) and not a pressed (:active) colour (none is set on the heart): it was
   the "Not favourited" pill (library) and "Off wishlist" pill (marketplace), which flash over the picture for 1.3 s
   when a heart is pressed off, in --tomato (an orange). Favourites are yellow on Uma: a heart's pill when it is pressed
   off takes the favourite yellow (--yellow, the earmark's own token) with navy words and icon, as the earmark's own
   label does. The follow pills (a bell icon) keep their colours. */
:where(.page-catalogue) .uma-wishlist-pill--off:not(:has(.ph-bell-simple-slash)) { background: var(--yellow); color: var(--navy); }
/* Bug 122. release build 91 (bug 122): an alert with her own words shows them first and the item's title on a second
   line under them, a size smaller, in the alert's own colour. */
.uma-alerts-context { display: block; margin-top: var(--gap-xxs); font-size: var(--body-text-xs); overflow-wrap: anywhere; }
/* Bug 126. release build 91 (bug 126): the sign-in notice for "I'm interested" and "Not interested" is the heart's
   notice (.idle-notice with .review-sign-in-actions). The results and support pages (page-profile) set every margin
   to 0, which took the notice out of the middle of the screen and put it in the top corner; open as a modal it is
   centred again, as on every other page (the heart's own notice on those pages too). */
.idle-notice:modal { margin: auto; }
/* Bug 126. release build 91 (bug 126): /admin-interests, one tile per interest on the admin pages' card
   (.video-review-item), one column at every width; the totals use the stat tiles (.app-drawer-stat); the members are a
   plain table, lines in the stat tiles' own line colour, long emails wrap. */
.admin-interest-tile { grid-template-columns: minmax(0, 1fr); gap: var(--gap-md); }
.admin-interest-stats { margin: 0; padding: 0; }
.admin-interest-table { width: 100%; border-collapse: collapse; font-size: var(--body-text-sm); }
.admin-interest-table th,
.admin-interest-table td { padding: var(--gap-xs) var(--gap-sm) var(--gap-xs) 0; text-align: left; vertical-align: top; border-bottom: var(--stroke-hairline) solid var(--mid-mushroom); overflow-wrap: anywhere; }
.admin-interest-table th { font-weight: var(--font-weight-medium); }
/* Bug 127. release build 91 (bug 127): jump links land directly under whatever stays fixed at the top of the screen.
   ONE token, --uma-fixed-top-offset: what stays fixed at the top once the page has moved.
   - Pages with no fixed top bar (no chrome: the admin pages, the canvases, the sign-in pages): 0.
   - Pages whose chrome top bar stays (the chrome marks them page-uma-app-chrome; data-uma-chrome="page" or no
     attribute): the top bar, --fixed-header-height.
   - Pages with a section bar (data-uma-chrome="section": the Learn pages and the results pages): the top bar slides away
     as soon as the page moves and the bar takes its place at the very top, so only the bar, --subnav-row-height.
   - The homepage (data-uma-no-topbar): 0.
   - The mini screens: the Learn bar tucks itself away while they are on the screen (section-nav-bar-cards-active),
     so nothing stays above them: 0.
   Every jump target takes scroll-margin-top from it (the Learn sections' old 120 px, header plus bar, was the gap:
   the header is gone by then, and the previous section's carousel arrows showed in it). Pages that work out their own
   offset in their scripts read this same value (the strategies pages, through the frame's scroll-margin-top). */
:root { --uma-fixed-top-offset: 0px; }
:root.page-uma-app-chrome { --uma-fixed-top-offset: var(--fixed-header-height); }
:root[data-uma-chrome="section"] { --uma-fixed-top-offset: var(--subnav-row-height); }
:root[data-uma-no-topbar] { --uma-fixed-top-offset: 0px; }
.learn-section:has(.mini-screen-button-row) { --uma-fixed-top-offset: 0px; }
:target,
.learn-section,
.intervention-frame-band { scroll-margin-top: var(--uma-fixed-top-offset); }

/* ══════════════════════════════════════════════════════════════════════════
   RELEASE BUILD 93 (8 October 2026). One block, every new rule of this build.
   Flat classes, tokens from :root above, no id, no !important.
   ══════════════════════════════════════════════════════════════════════════ */

/* Bug 35: the menu button over a hero (the top bar see-through) is white, as Log in is there (btn-secondary-white-on-dark). */
.uma-chrome-hamburger-over-hero { color: var(--bright-white); } /* used: chrome */

/* Bug 26 and the no-inline-style rule: builds 89 and 90 hid the members counter and the library's Add button with
   style="" attributes. The same, as classes: the counter waits blank (its space kept) until a real number is read;
   the Add button stays off until a member is signed in (the drawer pill's display rule outweighs [hidden]). */
.counter-waiting { visibility: hidden; } /* used: home */
.drawer-split-pill-off { display: none; } /* used: library */

/* Bugs 36, 37, 39, 41, 42 and 43 (iPhone Safari): the feedback panel, the wish list drawer and the menu wait
   off screen as fixed panels pushed sideways. Safari counts them as page width, so the page became wider than the
   phone and scale 1 was treated as zoomed in. Fixed panels then sit against the wider page instead of the screen:
   their top goes under the address bar, their right side (where the X is) off the edge, no side padding shows, and
   the page shows around them. The page's root now clips sideways overflow (the root's clip goes to the viewport, so
   no new scroll box: sticky bars still stick), and a scroll inside a full-screen panel no longer moves the page
   behind it. The menu takes the visible height (dvh) where the browser knows it. */
.page-uma-app-chrome { overflow-x: hidden; } /* used: chrome (on <html>) */
.uma-chrome-page { overflow-x: clip; } /* used: chrome (on <body>) */
.uma-feedback-body, .uma-chrome-menu-pane, .uma-wishlist-drawer { overscroll-behavior: contain; } /* used: chrome (release build 94: the SOS panel's is in the build 91 block, bugs 42 and 43; the menu's height is build 91's bug 66) */

/* Bug 25: her hero poster as a picture behind the launch film, the film's own box and cover fill, so the hero is
   filled edge to edge even where Safari letterboxes the video's poster. Drawn below the film and the dark layer. */
.hero-launch-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; z-index: -1; } /* used: homepage */

/* Her ruling (8 Oct): no prototype reviews. The homepage reviews section stays hidden until a published review of
   Uma is read. */
.reviews-section-waiting { display: none; } /* used: home */

/* Her ruling (8 Oct): the chrome on every page. A full-screen page that keeps its own layout (the canvases, onboarding,
   add your video bio) is moved down by the top bar and right by the sidebar, so the chrome sits beside it, not on it. */
/* (html and body padding and margin are forced to 0 with !important near the top of this file, so the room is made with
   a transparent border on <html>, which nothing forces.) */
.uma-chrome-own-layout { border-top: var(--fixed-header-height) solid transparent; border-left: var(--sidebar-width) solid transparent; } /* used: chrome (on <html>) */

/* Her ruling (8 Oct): website pages show her website chrome (uma-website-chrome-v148) to visitors. The chrome adds
   page-uma-website-chrome to <html> for a visitor on a website page, so these follow that one state. */
:where(.uma-chrome-menu-auth) { display: contents; } /* used: chrome (no weight, so uma-chrome-part-off hides it for a signed-in member) */
:where(.page-uma-website-chrome) .beta-text { display: none; } /* used: chrome */
@media (min-width: 601px) {
  :where(.page-uma-website-chrome) .uma-chrome-logo { position: absolute; left: 50%; transform: translateX(-50%); } /* used: chrome */
}
@media (max-width: 600px) {
  :where(.page-uma-website-chrome) .uma-chrome-top-bar-heart { display: none; } /* used: chrome */
}

/* Her ruling (8 Oct): discounts now loads the chrome. It keeps its own content wrappers, so the chrome's own wrappers
   (the band and its inner box) add no width limit, side padding, top gap, hairline or second sidebar offset. */
:where(.page-uma-discounts) .uma-chrome-content-band { border-top: none; } /* used: discounts */
:where(.page-uma-discounts) .uma-chrome-content-inner { max-width: none; padding-left: 0; padding-right: 0; margin-top: 0; } /* used: discounts */
:where(.page-uma-discounts) .discounts-content-wrapper { margin-left: 0; width: 100%; } /* used: discounts */
/* Profile and the three canvases draw their page as one screen pinned to the window (position: fixed, from the top
   left), which no border moves, so on an own-layout page that screen starts below the top bar and right of the
   sidebar. (Two classes: their own rules for these screens come later than this file.) */
.uma-chrome-own-layout .uma-navy-root, .uma-chrome-own-layout .uma-canvas-wrapper { top: var(--fixed-header-height); left: var(--sidebar-width); right: 0; bottom: 0; width: auto; height: auto; } /* used: profile, canvases */
@media (max-width: 600px) {
  /* a phone has no sidebar, so no room is kept for it */
  .uma-chrome-own-layout { border-left-width: 0; } /* used: chrome (on <html>) */
  .uma-chrome-own-layout .uma-navy-root, .uma-chrome-own-layout .uma-canvas-wrapper { left: 0; } /* used: profile, canvases */
}

/* Bugs 53 to 55 (release build 93): homepage cards in dark mode */

/* release build 93 (bug 53): the phone and tablet films in the health data security section have --navy (#232F4B)
   baked into their dark cut (iPhone_navy.mp4, iPad_navy.mp4: Y 56, Cb 142, Cr 122, which is --navy encoded in
   BT.709). In dark mode both tiles take --navy itself, so the tile and the film are one blue. Light mode is unchanged. */
:root[data-theme="dark"]:where(.page-home) .security-film-tile {
  background-color: var(--navy);
}

/* release build 93 (bug 54): the film and photograph fronts (the brain-body tracker, the canvases, the community
   discounts and the Access to Work cards) stay pale in dark mode, so their eyebrow and heading keep the homepage's
   text colour for pale grounds, --mid-charcoal, instead of turning pale with the theme. */
:root[data-theme="dark"]:where(.page-home) :where(.tracker-card-front, .light-photo-card-front) {
  --card-eyebrow-colour: var(--mid-charcoal);
  --vp-title-colour: var(--mid-charcoal);
}

/* release build 93 (bug 55): the plus on those pale fronts goes back to its own look, a solid --dark-white disc with a
   --mid-charcoal plus (--dark-charcoal on hover), in dark mode as in light. The dark theme's see-through wash is for
   navy grounds and is kept for the plus on the brain card and the close button on every card back. */
:root[data-theme="dark"]:where(.page-home) :where(.tracker-card-front, .light-photo-card-front) ~ .circular-plus-btn-on-light {
  --t-circle-wash: var(--dark-white);
  --t-circle-wash-blur: none;
  --t-circle-mark: var(--mid-charcoal);
  --t-circle-mark-hover: var(--dark-charcoal);
}

/* Bug 48 (release build 93): the words over the homepage hero hide while the launch film plays (space kept). */
.hero-launch-text-off { visibility: hidden; } /* used: home */

/* Bug 74 (release build 93): library drawer sections alternate with no gaps */
/* Library drawer sections alternate between two shades only: --t-drawer-band (light: mid white, dark: navy 60)
   and --t-drawer-bg (the drawer's own ground; light: bright white, dark: navy 40, the same as the book drawer's
   stats bar, --t-drawer-details-bg).
   Cause: in the podcast episode and video drawers the stats bar (Duration, First aired, Explicit) took a third
   shade, --t-band-alt (light: new white), and its bottom margin let the drawer's own bright white show through as
   a strip before the comments. The app drawer's store ratings bar had no background and the same margin, so the
   drawer showed through it. Each bar now takes the drawer shade itself and has no margin below it; its own padding
   keeps the spacing inside it, and the next section's top padding is unchanged. */
.uma-product-drawer--media .drawer-book-product-details { margin-bottom: 0; background: var(--t-drawer-bg); } /* used: library */

/* Bug 99 (release build 93): sticky struggle pills stay white over the frosted bar */
/* Cause: once the struggle bar sticks, the page script adds .is-sticky to .shop-sticky-bar, and the sticky rule gives
   the unchosen pills --t-sticky-pill for their words and outline. In the light theme that token was --navy, so the
   pills turned navy on the frosted bar; the dark theme already gave --bright-white. The token now gives the same
   --bright-white the pills use over the hero video in both themes. The chosen pill (navy words on the white slider),
   the sticky hover tokens and the keyboard focus ring are unchanged. */
:root:where(.page-uma-marketplace) { --t-sticky-pill: var(--bright-white); } /* used: library-marketplace */

/* Bug 76 (release build 93): favourite heart charcoal on light pictures, white on dark */
/* /uma-heart-contrast.js reads the picture (or the colour) under each heart on the library and the
   marketplace and puts uma-wishlist-earmark--on-light-image on it when that is white or light. The
   heart is then charcoal; on a coloured or dark picture it keeps its white. A heart on its own
   surface (the touch screen circle, the yellow corner) never gets the class, so it keeps its colour. */
:where(.page-uma-library, .page-uma-marketplace) .uma-wishlist-earmark--on-light-image .uma-wishlist-earmark-icon { color: var(--mid-charcoal); } /* used: library-marketplace */

/* Bug 119 (release build 93): round play button on library video cards */
/* The library video cards now carry the round play button the drawers use (.card-circular-play-btn-on-dark
   .drawer-play-btn) in place of the Watch on Uma pill. While the Favourited / Not favourited pill flashes
   over the picture, the play button steps back, as the Watch on Uma pill did. */
:where(.page-uma-library) .uma-library-video-card-media:has(.uma-wishlist-pill.show) .drawer-play-btn { opacity: var(--opacity-hidden); pointer-events: none; } /* used: library-marketplace */

/* Bug 130 (release build 93): search box clear button centred */
/* The clear (X) button in the library and marketplace search boxes is a fixed size UMA.css .btn-md
   inside the .field-action row, which stretches its children. A fixed height cannot stretch, so the
   button sat at the top of the row, 3px above the middle. It now sits in the middle of the row, the
   same as the search icon and the mic button. */
:where(.page-uma-library, .page-uma-marketplace) .uma-library-search-clear { align-self: center; } /* used: library-marketplace */

/* Bug 117 (release build 93): library and marketplace info cards at least square in two columns */
/* Cause: from 1101 the voices band sits as two columns, the "Warm fuzzies" and "For the love of a real book" card on
   the left and the Bibliosmia card (Self-care on the marketplace) on the right, each half the band's width. Their
   height came only from their words, so on wide screens (1440 on the library) both came out shorter than they are
   wide. The band now measures its own width (container-type) and each card's minimum height is half of it, which
   is the card's own width: never shorter than square. It is a minimum, not a height, so a card whose words need
   more room grows past square and the words never spill out (aspect-ratio was tried and set aside: with it the
   left card was held to square and its words overflowed). Below 1101 the band is one column and is left as it is.
   The marketplace grid is two columns from 850 to 1203. Its fact cards (quote, picture and paper cards) and the
   charity card are already about 9:16 there, as tall as the products in their row; each now also takes its own
   width token as a minimum height, so it can never come out shorter than square. The juice cards keep their 9:16
   flip card ratio, which is always taller than square, so they are left alone. */
@media (min-width: 1101px) {
  :where(.page-uma-library, .page-uma-marketplace) :where(.uma-library-voices:has(> .uma-bibliosmia-panel)) { container-type: inline-size; } /* used: library-marketplace */
  :where(.page-uma-library, .page-uma-marketplace) .voices-left-first,
  :where(.page-uma-library, .page-uma-marketplace) .uma-bibliosmia-panel { min-height: 50cqi; } /* used: library-marketplace */
}
@media (min-width: 850px) and (max-width: 899px) {
  :where(.page-uma-marketplace .market-place-grid-to-carouselle) .fact-card { min-height: var(--product-card-width-sm); } /* used: library-marketplace */
}
@media (min-width: 900px) and (max-width: 1203px) {
  :where(.page-uma-marketplace .market-place-grid-to-carouselle) .fact-card { min-height: var(--product-card-width-md); } /* used: library-marketplace */
}

/* Bug 123 (release build 93): trailer soundwave bars move while playing */
/* Cause: the four bars in the "Listen to audio trailer" button (.audio-preview-wave-bar) already had their paused and
   running states (the page script adds .is-playing to the button while the trailer plays and takes it off on pause and
   when the trailer ends) and a staggered delay per bar, but no animation was ever named and there was no keyframe, so
   there was nothing to run. The bars now rise and fall between --audio-wave-rest-scale and full height, one cycle every
   --audio-wave-duration, only while .is-playing is on. Longhands are used so the existing play state and per bar delays
   still apply. When Uma's motion switch is still (data-motion="still", which the motion gate also sets when the device
   asks for reduced motion), the bars do not move and stay at their full drawn height, as they looked before this fix;
   the media query covers a page without the motion gate. */
:root { --audio-wave-rest-scale: 0.3; } /* used: library-marketplace */
@keyframes audio-preview-wave-bounce { /* used: library-marketplace */
  0%, 100% { transform: scaleY(var(--audio-wave-rest-scale)); }
  50% { transform: scaleY(1); }
}
:where(.page-uma-library) .audio-preview-wave-bar { transform: scaleY(var(--audio-wave-rest-scale)); animation-name: audio-preview-wave-bounce; animation-duration: var(--audio-wave-duration); animation-timing-function: ease-in-out; animation-iteration-count: infinite; } /* used: library-marketplace */
:where(:root[data-motion="still"]) .audio-preview-wave-bar { transform: none; animation-name: none; } /* used: library-marketplace */
@media (prefers-reduced-motion: reduce) {
  :where(:root:not([data-motion])) .audio-preview-wave-bar { transform: none; animation-name: none; } /* used: library-marketplace */
}

/* Bug 129 (release build 93): text keeps its reading width, picture yields first and sits above in one column */
/* The library's two voices bands (Warm fuzzies with Bibliosmia, and Someone hand them a mic with the books
   picture). Each text column holds .text-column-large, the golden section width rule
   (--max-content-width-golden-section-large, 0.618 of the page column).
   Side by side (1280px and up): the words half was a fixed 50%, so on narrower screens the text shrank with the
   picture. The words half now takes the golden section width plus its own side padding and keeps it; the
   picture half takes what is left, so the picture narrows first.
   One column (below 1280px, the existing 1279px breakpoint): below 1280px the picture half would be too thin
   (Bibliosmia's words would stack a few letters wide), so the band goes to one column there instead of at
   1100px, with the picture above the words, as the 1100px rules already do. The books picture also had height 0
   between 751px and 1100px (its flex-basis of 0 overrode its picture height), so it vanished; the picture half
   now sizes as it already does at 750px and below. The Warm fuzzies words keep the full band width (the page
   script's square sizing puts an inline width on that column; min-width stops it narrowing). */
@media (min-width: 1280px) {
  :where(.page-uma-library) .uma-library-voices-left { flex: 0 0 calc(var(--max-content-width-golden-section-large) + 2 * var(--default-left-right-desk-body-padding)); max-width: 100%; } /* used: library */
  :where(.page-uma-library) .uma-library-voices-right { flex: 1 1 0%; max-width: 100%; min-width: 0; } /* used: library */
}
@media (max-width: 1279px) {
  :where(.page-uma-library) .uma-library-voices { flex-direction: column; } /* used: library */
  :where(.page-uma-library) .uma-library-voices-left { order: 2; flex: unset; min-width: 100%; max-width: 100%; } /* used: library */
  :where(.page-uma-library) .uma-library-voices-right { order: 1; flex: unset; width: 100%; max-width: 100%; } /* used: library */
  :where(.page-uma-library) .uma-library-voices-mic-image { height: var(--voices-picture-height); } /* used: library */
  :where(.page-uma-library) .uma-bibliosmia-word, :where(.page-uma-library) .uma-bibliosmia-phonetic, :where(.page-uma-library) .uma-bibliosmia-rule, :where(.page-uma-library) .uma-bibliosmia-definition { max-width: var(--max-content-width-golden-section-large); } /* used: library */
}
@media (max-width: 750px) {
  :where(.page-uma-library) .voices-left-first { order: 1; } /* used: library */
  :where(.page-uma-library) .uma-bibliosmia-panel { order: 2; } /* used: library */
}

/* Bugs 117 and 129 together (release build 93): library voices band, each card at least square at its own width */
/* Bug 129 gives the library band a fixed golden section text card from 1280 (803 wide) and one column from 1101 to 1279,
   so bug 117's "half the band" minimum no longer matches the cards there. On the library only: one column from 1101 to
   1279 takes no minimum (the stacked cards are left as they are, as below 1101); from 1280 the text card's minimum
   height is its own fixed width and the Bibliosmia card's is the rest of the band (100cqi less the text card), so
   each is never shorter than square and still grows with its words. The marketplace band keeps bug 117's rule. */
@media (min-width: 1101px) and (max-width: 1279px) {
  :where(.page-uma-library) .voices-left-first,
  :where(.page-uma-library) .uma-bibliosmia-panel { min-height: auto; } /* used: library */
}
@media (min-width: 1280px) {
  :where(.page-uma-library) .voices-left-first { min-height: calc(var(--max-content-width-golden-section-large) + 2 * var(--default-left-right-desk-body-padding)); } /* used: library */
  :where(.page-uma-library) .uma-bibliosmia-panel { min-height: calc(100cqi - var(--max-content-width-golden-section-large) - 2 * var(--default-left-right-desk-body-padding)); } /* used: library */
}

/* Bug 125 (release build 93): library page sections alternate shades
   The library's sections take turns between two shades: --t-section-white (bright white in the light theme,
   --t-band in the dark theme) and --t-band-alt (new white in the light theme, the lighter navy in the dark theme).
   "Knowledge is not power" uses --t-section-white, and "Someone hand them a mic" (with Meet the creator) used
   bright white too in the light theme, so the two ran together. The mic section now takes --t-band-alt in both
   themes (the dark theme already did), and its text column is see-through, as it already was in the dark theme,
   so the section's shade shows behind it. The footer below takes --t-section-white through the existing
   panel-section-white class in the page markup, so it no longer matches the mic section.
   On phones the chrome leaves room at the foot of the page (padding under the footer), which shows the chrome's
   band behind it, a strip of the other shade under the footer. On the library that room moves inside the footer,
   so it is the footer's shade; the page is the same height. */
:root:where(.page-uma-library) { --t-voices-mic-bg: var(--t-band-alt); --t-voices-mic-left-bg: transparent; } /* used: library-marketplace */
@media (max-width: 600px) {
  :where(.page-uma-library) .uma-chrome-content-inner { padding-bottom: 0; } /* used: library-marketplace */
  :where(.page-uma-library) .footer-override { padding-bottom: calc(var(--app-default-top-bottom-margin-xl) + var(--app-default-top-bottom-margin-xxxl)); } /* used: library-marketplace */
}

/* Bug 75 (release build 93): card layers, darkening inside the picture box, earmark above */
/* Cause: on an app card the outer box (.uma-library-app-card-media) was the only clip. Its top right corner is
   nearly square (--app-default-radius-lg) to seat the earmark, but the app icon is a square picture with its own
   rounded corners drawn in, so the square corner of the picture showed there, and the rollover dimmed it with the
   rest of the picture. The layers are now separate: the outer box holds the icon and the earmark, has no
   background and clips nothing; the icon is the picture box, clipped to its own rounded shape on all four corners,
   so the rollover dimming (its own filter, unchanged) stays inside the icon; the earmark keeps its place on the
   outer box, above the icon, and is never cut. Book, video, podcast and marketplace pictures already fill their
   clipped box edge to edge, so they are unchanged. Heart colour, tap targets and focus rings are unchanged. */
:where(.page-uma-library .uma-library-app-card) .uma-library-app-card-media { overflow: visible; } /* used: library-marketplace, learn-pages */
:where(.page-uma-library .uma-library-app-card) .library-card-app-img { border-radius: var(--radius-squircle); } /* used: library-marketplace, learn-pages */

/* Bug 114 (release build 93): pill highlight stays on the selected pill when the bar changes width */
/* The library script adds this class for one style pass while it puts the highlight back where it was on
   screen after the bar's edge moved, so that step is not animated; the glide to the selected pill follows. */
:where(.page-catalogue) .selected-pill-in-tab-filter-hold { transition: none; } /* used: library-marketplace */
/* Reduced motion (Uma's setting or the device's): the highlight moves without a glide. */
:where(:root[data-motion="still"].page-catalogue) .selected-pill-in-tab-filter { transition: none; } /* used: library-marketplace */

/* Bug 131 (release build 93): library podcast players all look the same */
/* 1. Every Spotify player now loads in Spotify's dark grey theme (theme=0, added in library.html), so the
      library's Spotify background token takes that grey. The square that hides the logo behind the heart
      (bug 68), the episode card and the drawer's own player all use the token, so the square is the
      player's own colour and disappears. TOKEN VALUE CHANGED on the library: --platform-spotify was
      rgb(31, 31, 31), now #282828 (Spotify's dark embed grey).
   2. Apple players get clean rounded corners like the Spotify ones: the frame and its wrapper are
      rounded with the same token as the Spotify episode cards (--app-default-radius-md) and the wrapper
      clips. Nothing coloured sits behind an Apple player any more, so its own corners no longer show
      dark slivers at the left. The square behind the heart keeps --platform-apple.
   3. The drawer X: no focus ring after a click or a tap. library.html marks it drawer-close-after-pointer
      on a pointer press and takes the mark off on any key, so the keyboard ring stays. */
:root:where(.page-uma-library) { --platform-spotify: #282828; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-player { border-radius: var(--app-default-radius-md); overflow: hidden; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-frame { border-radius: var(--app-default-radius-md); } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode:has(iframe[src*="podcasts.apple.com"]) { background: transparent; } /* used: library-marketplace */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-player:has(iframe[src*="podcasts.apple.com"]) { background: transparent; } /* used: library-marketplace */

/* Learn charts (release build 93): charts keep the page content width, centred */
/* The rollercoaster chart on She's hormonal and the eustress chart on Burnout ran edge to edge, past the text
   column on wide screens. Their inner boxes now stop at the same --max-body-wrapper-width as the Learn pages'
   section-centred-without-carousel and sit centred, so the side padding they already carry lines the plot up
   with the text column. The coloured band behind each chart still runs full width. Chart.js is responsive, so
   the canvas redraws to the new width. Below that width nothing changes. */
:where(.page-learn) .cycle-chart-inner, :where(.page-learn) .eustress-chart-scroll { max-width: var(--max-body-wrapper-width); margin-left: auto; margin-right: auto; } /* used: learn-pages-homepage-legal */


/* Mini-screen cards (release build 93): opening and closing card text centred */
/* the first and last cards of each mini-screen hold their words in the middle
   of the card, the same space above and below. The bottom padding gives back
   the last paragraph's own bottom margin (p:last-of-type), so the space under
   the words matches the top padding. The opening card's watermark is placed
   absolutely, so it stays on the foot of the card. "safe" drops the words back
   to the top rather than cutting them off if they ever outgrow the card. A
   plain class, not :where(), as it has to win over .miniscreencard and
   .title-miniscreencard, which set the same two properties earlier in this
   file. */
.miniscreencard-centred {
  justify-content: safe center;
  padding-bottom: calc(var(--default-card-top-padding) - var(--app-default-top-bottom-margin-xl));
}

/* Mini-screen cards (release build 93), her CPTSD closing card: a card whose text starts with a paragraph (no heading
   above it) drops that paragraph's top margin, which only spaced it from a heading, so the text sits in the middle. */
.miniscreencard-centred > .title-card-para:first-child { margin-top: 0; } /* used: learn-pages */

/* Glossary letters (release build 93): headings land below the sticky letter pills; ring for keyboard only */
/* 1. A letter jump stops its heading just below the bar of letters. Once the page has moved, the bar sticks at
      --subnav-row-height (.glossary-tools-chrome-hidden), level with the bottom of the chrome's top bar, so the stop is
      that, plus the bar's own height, plus a small gap. The bar's height is measured by the glossary script and kept
      up to date on .glossary-column as --glossary-tools-height, so it stays right when the letters wrap onto a second
      row or the window changes size. The same idea as .learn-section, which clears the fixed bars with
      scroll-margin-top. The group carries it without the gap, so a link straight to a letter (/glossary#glossary-w)
      clears the bar too. */
:where(.glossary-letter-heading) { scroll-margin-top: calc(var(--subnav-row-height) + var(--glossary-tools-height, 0px) + var(--app-default-top-bottom-margin-xxs)); } /* used: learn-pages-homepage-legal */
:where(.glossary-group), .glossary-group:target { scroll-margin-top: calc(var(--subnav-row-height) + var(--glossary-tools-height, 0px)); } /* used: learn-pages-homepage-legal */
/* release build 94: .glossary-group:target, so a link straight to a letter keeps this stop (below the bar of letters) over
   the build 91 block's general :target offset (bug 127), which knows only the Learn bar. */

/* Mini-screen + and X (release build 93): the crisis card's plus and close on About CPTSD, Burnout and depression and
   She's hormonal are the homepage's own buttons (.circular-plus-btn-on-light, .circular-close-btn-on-light). UMA.css gives
   those buttons their values only on the homepage (:root:where(.page-home)); the Learn pages take the same values here,
   copied as they are, light and dark. */
:root:where(.page-learn) { --t-circle-wash: var(--dark-white); --t-circle-wash-blur: none; --t-circle-mark: var(--mid-charcoal); --t-circle-mark-hover: var(--dark-charcoal); --opacity-play-glass: 0.15; --plus-button-inset: 0.9rem; --transition-plus-press: 0.15s; --icon-plus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m28.87,20c0,.59-.48,1.06-1.06,1.06h-6.74v6.74c0,.59-.48,1.06-1.06,1.06s-1.06-.48-1.06-1.06v-6.74h-6.74c-.59,0-1.06-.48-1.06-1.06s.48-1.06,1.06-1.06h6.74v-6.74c0-.59.48-1.06,1.06-1.06s1.06.48,1.06,1.06v6.74h6.74c.59,0,1.06.48,1.06,1.06Z'/></svg>"); --icon-close: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='black' d='m26.27,26.27c-.42.42-1.09.42-1.51,0l-4.77-4.77-4.77,4.77c-.42.42-1.09.42-1.51,0s-.42-1.09,0-1.51l4.77-4.77-4.77-4.77c-.42-.42-.42-1.09,0-1.51s1.09-.42,1.51,0l4.77,4.77,4.77-4.77c.42-.42,1.09-.42,1.51,0s.42,1.09,0,1.51l-4.77,4.77,4.77,4.77c.42.42.42,1.09,0,1.51Z'/></svg>"); }
:root[data-theme="dark"]:where(.page-learn) { --t-circle-wash: rgba(var(--bright-white-rgb), var(--opacity-play-glass)); --t-circle-wash-blur: blur(var(--blur-md)); --t-circle-mark: var(--bright-white); --t-circle-mark-hover: var(--bright-white); }

/* Learn hero (release build 93): dots heading and Discover more above the fold */
/* learn-hero-fold sits on the opening section of the six Learn pages (the
   dots heading on About ADHD, About autism and About CPTSD, the bubble
   cluster on She's hormonal, Burnout and depression and Somatic super
   syndrome). The section clears the fixed top bar and leaves the sub nav
   row clear where a page shows one, with only a small gap after that. The
   animation is held to the visible screen height, so the heading, the
   animation and Discover more all open on the first screen. svh is the
   screen with the phone browser bars showing; the vh line before it is the
   fallback for browsers without svh. The lg allowance keeps Discover more
   off the very bottom edge. Three of the pages carry their own copy
   of the hero rules after UMA.css, so these rules hold one element or one
   class more than those rules do, and no more. */
section.learn-hero-fold {
  margin-top: var(--fixed-header-height);
  padding-top: var(--subnav-row-height);
  padding-bottom: 0;
}

/*the 16 by 9 floor is what made the hero taller than the screen*/
section.learn-hero-fold::before {
  content: none;
}

/*the sub nav row above is the only gap the content needs*/
.learn-hero-fold .about-hero,
.learn-hero-fold .section-centred-without-carousel {
  padding-top: 0;
  padding-bottom: var(--app-default-top-bottom-margin-sm);
}

/*the dots: the word box keeps its 3 by 2 shape where the screen has room and
  gives up height where it does not, leaving room for the bars, the gaps and
  the largest Discover more button. The dots size the word to this box*/
.learn-hero-fold .about-hero-animation {
  max-height: calc(100vh - var(--fixed-header-height) - var(--subnav-row-height) - var(--button-size-xl) - 3 * var(--app-default-top-bottom-margin-sm) - var(--app-default-top-bottom-margin-lg));
  max-height: calc(100svh - var(--fixed-header-height) - var(--subnav-row-height) - var(--button-size-xl) - 3 * var(--app-default-top-bottom-margin-sm) - var(--app-default-top-bottom-margin-lg));
}

/*the bubbles: beside the copy, the cluster keeps its usual floor but never
  asks for more than the screen below the bars*/
.learn-hero-fold .term-cluster-spacer {
  min-height: min(var(--term-cluster-min-height), calc(100vh - var(--fixed-header-height) - var(--subnav-row-height) - var(--app-default-top-bottom-margin-sm) - var(--app-default-top-bottom-margin-lg)));
  min-height: min(var(--term-cluster-min-height), calc(100svh - var(--fixed-header-height) - var(--subnav-row-height) - var(--app-default-top-bottom-margin-sm) - var(--app-default-top-bottom-margin-lg)));
}

/*stacked, the cluster goes above the heading and takes a share of the
  screen height, so the heading and copy follow it on the first screen*/
@media (max-width: 900px) {
  .learn-hero-fold .term-cluster-spacer {
    aspect-ratio: auto;
    min-height: 0;
    height: 35vh;
    height: 35svh;
    margin-bottom: var(--app-default-top-bottom-margin-sm);
  }
}

/* Bug 15 (release build 93): the "Add your video bio" pop-up for signed-out visitors (library, homepage).
   It is the wish list sign-in notice (.idle-notice, a native <dialog>) with her words as its heading, two
   UMA.css buttons in a .button-row (Sign up, Log in) and the library's close X (.video-inline-player-close).
   Here: the X sits in the notice's top right corner, the heading leaves room for it, and in dark mode the X
   and the Log in outline take the notice's own text colour, since charcoal and navy do not show on the navy
   notice. No new tokens. */
:where(.video-bio-notice-heading) { padding-right: calc(var(--back-next-button-diameter) + var(--gap-md)); }
:where(.video-bio-notice) .video-bio-notice-close { top: var(--gap-md); right: var(--gap-md); }
:where(:root[data-theme="dark"]) .video-bio-notice-close,
:where(:root[data-theme="dark"]) .video-bio-notice-log-in { color: var(--t-card-text, var(--chrome-wishlist-panel-text)); border-color: var(--t-card-text, var(--chrome-wishlist-panel-text)); }
:where(:root[data-theme="dark"]) .video-bio-notice-close:hover,
:where(:root[data-theme="dark"]) .video-bio-notice-log-in:hover { color: var(--t-card-text, var(--chrome-wishlist-panel-text)); border-color: var(--t-card-text, var(--chrome-wishlist-panel-text)); background: rgba(var(--bright-white-rgb), var(--opacity-very-low)); }

/* Follow-ups (release build 93): library video card play button, shown on hover with a mouse, always on touch */
/* Bug 119 follow-up. The round play button on the library video cards (rendered by renderVideos in library.html and
   its Learn page copy in uma-library-cards.js) is now a UMA.css button: .btn .btn-circular .btn-xxl give it its
   round 70px shape (in place of .card-circular-play-btn-on-dark, whose shape and size the .btn classes cover), and
   .drawer-play-btn keeps the drawers' white play glyph, frosted backdrop, centring and hover zoom, so it looks the
   same as before (no extra CSS was needed for the look). It now follows the
   cards' other hover controls. With a mouse (hover: hover and pointer: fine) it is hidden at rest and fades in when
   the pointer is over the picture, or when the button or anything else on the card has keyboard focus (the card's
   :focus-visible, or a :focus-visible child, the keyboard only form of :focus-within, so a mouse click on the
   heart does not leave it showing). On touch and other coarse pointers it stays visible, as before. The fade
   uses --transition-fast, as the hover plus button does, and keeps the hover zoom's --play-hover-duration. The
   rules name the card's media box as well as the button so they outweigh the /uma-learn-media.css copy of
   .drawer-play-btn that the Learn pages load after this file. The Favourited pill rule (bug 119 above) still
   hides the button while the pill shows: it weighs more than these. */
:where(.page-uma-library) .uma-library-video-card-media .drawer-play-btn { opacity: var(--opacity-visible); pointer-events: auto; transition: opacity var(--transition-fast), transform var(--play-hover-duration); } /* used: library-marketplace, learn-pages */
@media (hover: hover) and (pointer: fine) {
  :where(.page-uma-library) .uma-library-video-card-media .drawer-play-btn { opacity: var(--opacity-hidden); pointer-events: none; } /* used: library-marketplace, learn-pages */
  :where(.page-uma-library) .uma-library-video-card-media:hover .drawer-play-btn,
  :where(.page-uma-library) .uma-library-video-card:focus-visible .drawer-play-btn,
  :where(.page-uma-library) .uma-library-video-card:has(:focus-visible) .drawer-play-btn { opacity: var(--opacity-visible); pointer-events: auto; } /* used: library-marketplace, learn-pages */
}

/* BUG MAIL 8 OCT 2026 (item-b-bugmail): /admin-feedback, the Resolved button's results and the £10 codes list */
/* Layout only, from the page's own video-review classes; no new tokens, colours or sizes. Each report's results
   (feedback-rewards) and the codes given (feedback-codes-list) are plain lists of video-review-note lines, without
   bullets, spaced like the details beside them. The words wrap anywhere so a long code or member line never widens
   the page at 375. */
.feedback-rewards,
.feedback-codes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-xs); min-width: 0; } /* used: admin-feedback */
.feedback-rewards > li,
.feedback-codes-list > li { overflow-wrap: anywhere; } /* used: admin-feedback */
.feedback-codes { padding: var(--gap-xl); border-radius: var(--default-radius); background: var(--t-card); } /* used: admin-feedback */