/* uma-build-95.css (release build 95, 8 Oct 2026): the separate second style block.
   Her rule for build 95: never edit UMA.css itself; all new CSS goes here. This file is linked straight after
   /UMA.css on every page, so it can use every UMA.css :root token. Flat single-class selectors with hyphens only,
   no IDs, no !important, sizes in rem, every value a UMA.css token where one exists (new tokens are listed at the
   top of each section). Focus rings only on :focus-visible, with a gap. One section per area, headed by its L numbers. */

/* ===== sign-up-log-in: L34, L35, L36, L38, L99 ===== */
/* REQUEST for uma-build-95.css (not linked; the coordinator appends it at the END of uma-build-95.css).
   Tested by injecting this file into sign-up, log-in and contact in headless Chrome at 375 and 1280.
   New tokens: none. L99 re-points the existing --field-border-active at --focus-outline-width (see below).
   The one viewport value (100svh) has no UMA.css token. */


/* ---------- L34, L35: Try Uma and Log in keep the footer below the first screen ----------
   The page's own wrapper is at least one screen tall, so the terms box and the line above it start below
   the first screen, at 375 and on desktop. Class added to the wrapper on sign-up.html and log-in.html. */
.first-screen-clear { min-height: 100svh; }


/* ---------- L36: the email error's ways on are not red ----------
   "This email is already registered." stays the red error line; the line under it ("Log in — OR — Reset your
   pin", and "Email me a link to finish setting up") is in the page's own text colour with orange links, as the
   "OR — Log in" line under the form. */
.error-next-steps { margin-top: var(--app-default-top-bottom-margin-xxxs); text-align: left; font-size: var(--body-text-xs); color: inherit; }
.error-next-step-link { color: var(--orange); text-decoration: none; }
.error-next-step-link:hover { text-decoration: underline; text-underline-offset: 0.25rem; }
.error-next-step-link:focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); border-radius: var(--app-default-radius-xs); }


/* ---------- L99: every field's stroke is the switch focus ring's thickness ----------
   The switch focus ring is --focus-outline-width (= --stroke-extra-thick, 2.5px; .switch input:focus-visible ~
   .switch-track). Before: every field's focus and error stroke was --field-border-active (= --stroke-thick, 2px),
   and the quiet fields on sign-up, log-in, reset-pin and contact (.field-quiet-focus) stayed a 0.5px hairline
   on focus; a click took the stroke off altogether (UMA.css "a click leaves only the cursor").
   After: one token. --field-border-active is pointed at --focus-outline-width, so every field rule in UMA.css
   that draws a focus or error stroke (plain, multiline, composite, PIN and code tiles, has-input) is 2.5px.
   html:root gives it the weight to survive the self-report pages' second UMA.css.
   SUGGESTION for UMA.css itself (not edited): line 329 could read --field-border-active: var(--focus-outline-width);
   and then the first rule below is not needed.
   Fields are typed into, so the orange shows on :focus from the keyboard AND a click or tap: the rules below have
   no uma-input-pointer guard. Switches and buttons keep :focus-visible and the guard (nothing here touches them). */
html:root { --field-border-active: var(--focus-outline-width); }

/* Orange on focus, keyboard or click */
.field:focus { border-color: var(--focus-outline-color); border-width: var(--field-border-active); }
.field-multiline:focus { border-color: var(--focus-outline-color); border-width: var(--field-border-active); }
.field-action:focus-within { border-color: var(--focus-outline-color); border-width: var(--field-border-active); }
.field-quiet-focus:focus-within { border-color: var(--focus-outline-color); border-width: var(--field-border-active); }
.uma-profile-edit-input:focus { border-color: var(--focus-outline-color); border-width: var(--field-border-active); }
.single-digit-input-box:focus { border-color: var(--focus-outline-color); border-width: var(--field-border-active); }
.drawer-show-format-input:focus { border-color: var(--focus-outline-color); border-width: var(--field-border-active); }
.onb-textarea-field:focus { border-color: var(--focus-outline-color); border-width: var(--field-border-active); }
.search-field:focus { border-color: var(--focus-outline-color); border-width: var(--field-border-active); }
/* PIN and code tiles: the focused tile is orange (red while the row shows its error) */
.pin-field-digit:focus { border-color: var(--focus-outline-color); border-width: var(--field-border-active); }

/* Red on error, focused or not, at the same thickness. These come after the orange rules and carry two
   pseudo-classes, so an error field stays red when clicked into. */
.has-error:not(:focus-within) { border-color: var(--error); border-width: var(--field-border-active); }
.has-error:focus-within { border-color: var(--error); border-width: var(--field-border-active); }
.has-error:focus:focus-within { border-color: var(--error); border-width: var(--field-border-active); }
.is-error:focus:focus-within { border-color: var(--error); border-width: var(--field-border-active); }
.is-error:not(:focus-within) { border-color: var(--error); border-width: var(--field-border-active); }
/* UMA.css's .field-action:has(.field-action-input:focus-visible) turns a typed-in field orange with three classes'
   weight; this keeps an error field red while she types in it */
.has-error:has(.field-action-input:focus) { border-color: var(--error); }
/* (a box holding a typed field only, so the red end button inside a composite field is left alone) */
.is-invalid:has(input:focus) { border-color: var(--error); border-width: var(--field-border-active); }
.pin-field-digit:focus:where(.pin-field-error *) { border-color: var(--error); }

/* ===== homepage: L1, L2 ===== */
/* New token (L2): the launch film's own shape. Her film in /media/ (uma-launch-hero-v1.mp4, 1280 x 968, and the
   phone copy, 720 x 544) is not 16:9: its black side bars were cut off in release build 91. */
:root {
  --hero-film-ratio: 1280 / 968;
}

/* L1: the hero goes edge to edge of its section at every width (it stopped at the page's 1220px wrapper width,
   leaving navy bands either side on wide screens). The words inside keep their own measure. */
.hero-section-with-video {
  max-width: none;
}

/* L2: once the launch film plays, it is drawn whole: its width sets its height, so nothing is cut off.
   The page script adds hero-film-whole to the hero, which grows to at least the film's height (taller still where
   the words need it, as on a phone), and hero-launch-video--visible to the film, which sits full width, centred.
   The poster picture that fills the hero is put away while the film shows (hero-launch-poster-off). */
/* Replaced (her hero spec, 9 Oct 2026: the hero's size never depends on play; see "hero: always its ratio" at the end).
   What was here: .hero-film-whole { aspect-ratio: var(--hero-film-ratio); }
   .hero-launch-video--visible { top: 50%; height: auto; translate: 0 -50%; object-fit: contain; } */

.hero-launch-poster-off {
  visibility: hidden;
}

/* ===== homepage: L50 (reviews page, reviews.html) ===== */
/* With no reviews: her words and, under them, Post review in the centre (the page script writes these into the
   grid). That button shows only below 850 wide, where the right-aligned Post review under the carousel shows;
   the script hides that right-aligned one (reviews-post-slot-off). Wider screens keep Post review by the heading. */
.reviews-empty-block {
  flex: 1 1 100%;
  min-width: 0;
}

.reviews-empty-post {
  display: none;
}

.reviews-post-slot-off {
  display: none;
}

@media (max-width: 849px) {
  .reviews-empty-post {
    display: flex;
    justify-content: center;
  }
}

/* ===== library: L12, L15, L16, L17, L23b, L24, L70, L71 ===== */

/* L12: Warm fuzzies and the Bibliosmia quote split 50/50 again, side by side (1280px and up). Release build 93
   (bug 129) gave the words column the golden section width and the quote what was left (about 803 / 417 at 1280).
   Only this band changes: the mic band keeps its build 93 widths. Below 1280px the band stays one column. */
@media (min-width: 1280px) {
  .voices-left-first { flex: 0 0 50%; max-width: 50%; }
  .uma-bibliosmia-panel { flex: 0 0 50%; max-width: 50%; }
}

/* ===== favourites-filter-search: L65, L91 (L20, L21, L22, L23a below as they are added) ===== */
/* New tokens (none in UMA.css :root has these sizes):
   --filter-currency-tab-height: 3.125rem   the library filter's currency tabs (L65)
   --filter-currency-tab-gap: 0.3125rem     the space above and below them inside the 3.75rem row (L65) */
:root { --filter-currency-tab-height: 3.125rem; --filter-currency-tab-gap: 0.3125rem; }

/* L65: the Currency row in the library's Sort by panel. The tab bar is 3.125rem tall (its edge included), with
   0.3125rem above and below it inside the row. The classes are added by library.html to this row's tabs only. */
.uma-filter-currency-row { padding-top: var(--filter-currency-tab-gap); padding-bottom: var(--filter-currency-tab-gap); }
.filter-currency-tabs { height: var(--filter-currency-tab-height); box-sizing: border-box; align-items: stretch; }
.filter-currency-tab { height: auto; width: calc(var(--filter-currency-tab-height) - 2 * var(--stroke-thin)); flex-basis: calc(var(--filter-currency-tab-height) - 2 * var(--stroke-thin)); }

/* L20: the favourites Episodes tab opens on Listen (the headphones), shown selected in navy. The chrome marks it with
   .uma-segmented-toggle-option-active (UMA.css line 15103, --wishlist-seg-active-bg, navy), but on the library and
   marketplace pages the later rule :where(.page-uma-library, .page-uma-marketplace) .uma-segmented-toggle-option
   (UMA.css line 25886) sets every option's background to transparent, so the selected one did not show. The same
   tokens again, after UMA.css: */
.uma-segmented-toggle-option-active { background: var(--wishlist-seg-active-bg); color: var(--wishlist-seg-active-text); }

/* L22: the number favourited after each favourites tab name (Voices, Pods, Episodes, Books, Apps). The span reuses the
   marketplace ingredient picker's count class (.uma-filter-picker-pill-count: the number in the tab's own text, hidden
   at 0); that class is styled only on the marketplace page, so the space before the number is given here. */
.uma-wishlist-tab-count { margin-left: var(--gap-xs); font-weight: var(--font-weight-normal); }
.uma-wishlist-tab-count[hidden] { display: none; }

/* L23a: book favourites. The author line (p.card-brand) is the last paragraph in the card text, so the generic
   p:last-of-type margin (--app-default-top-bottom-margin-xl) won over .card-brand's own margin and left a big gap
   above the title. The main timeline's gap (.card-brand, --app-default-top-bottom-margin-xxs) again. Measured: the
   library's own cards already have this (227 checked on the library page), so only the chrome drawer changes. */
.card-brand:last-of-type { margin-bottom: var(--app-default-top-bottom-margin-xxs); }

/* L91: library and marketplace search placeholders in grey, the glossary search's colours (.search-field::placeholder
   is --t-text-muted there: --lightest-charcoal, and 70% white in dark mode). --t-text-muted is not declared on these
   two pages, so the same values are used directly. */
.uma-library-search-input::placeholder { color: var(--lightest-charcoal); opacity: 1; }
:root[data-theme="dark"] .uma-library-search-input::placeholder { color: rgba(var(--bright-white-rgb), 0.7); }

/* ===== marketplace: L53, L57, L61, L95, L96 ===== */

/* L53: the Good for tags on the product tiles wrap onto a new line (between 601px and 1279px wide they ran off the
   card in one scrolling row) */
.card-good-for { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; }

/* L57: the + on a product tile shows all the time (before, only while the picture was hovered) */
.card-add-btn { opacity: var(--opacity-visible); }
/* L57: the heart shows on hover (as now); on a touch screen (coarse pointer) it shows all the time */
@media (pointer: coarse) {
  .uma-wishlist-earmark { opacity: var(--opacity-visible); }
}

/* L96: the glass pills in the marketplace hero go to a darker glass with blur on hover, as the library's glass buttons
   do (uma-confirm-btn--no-glass), and never turn navy. Once the bar has stuck, its hover colours are the bar's own
   tokens, so they are set here for the bar alone (the same darker glass, white words and edge). */
.shop-sticky-bar { --t-sticky-pill-hover-bg: rgba(var(--black-rgb), var(--opacity-moderate)); --t-sticky-pill-hover: var(--bright-white); }
.intervention-menu-item-label:hover { backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); }

/* L95: while the filter panel is open the page was locked with overflow: hidden on the body. That made the body its
   own scroller, so the search and pills bar stopped sticking and fell back to where it sits in the page: opened after
   the bar had stuck, the panel opened over the faded top bar and did not line up. The bar now keeps sticking (as on
   the library page, where the lock was already lifted), so the panel opens in the same place at every scroll position. */
.uma-filter-drawer-open { overflow: visible; }

/* ===== learn: L79, L80, L82, L88, L89 ===== */

/* L79 and L80. Learn sub-nav. Release build 91 (bug 68, commit 2d111d79, UMA.css "Bug 68" block) made two changes
   from 901 px up: the links' side padding went from her --gap-xl (1.5rem, 24 px) to --gap-md (0.8rem, 12.8 px),
   and only the links scrolled, inside their own list, so the Uma library pill stayed pinned on the right.
   Her spacing is back (--gap-xl, as on phones), and the whole row scrolls again with the Uma library pill as its
   last item. Same selectors as the bug 68 block (two classes, inside the same media query), because a single
   class cannot outweigh it; this file loads after UMA.css, so these win. */
@media (min-width: 901px) {
  .page-learn .section-nav-link { padding-left: var(--gap-xl); padding-right: var(--gap-xl); }
  .page-learn .section-nav-scroller { overflow-x: auto; overflow-y: hidden; }
  .page-learn .section-nav-list { flex: 0 0 auto; min-width: max-content; overflow: visible; }
}

/* L82. White space above the opening hero and below Discover more, on every Learn page with a hero (the dots
   heading on About ADHD, About autism and About CPTSD; the bubble cluster on Burnout vs depression, PME vs PMDD
   and Somatic super syndrome). On the hero's content block (.about-hero or .goldensectionpanel-items), which
   holds Discover more as its last item. */
.learn-hero-space {
  margin-top: var(--app-default-top-bottom-margin-xl);
  margin-bottom: var(--app-default-top-bottom-margin-xl);
}

/* L88. Uma big screen heading: line height 1.3 (big-screen-title is on the heading in somatic-super-syndrome.html).
   Two classes, because the reel's own rule (.uma-big-screen-reel__title, line-height 1) is in uma-learn-media.css,
   which loads after this file. */
.uma-big-screen-reel .big-screen-title { line-height: var(--default-line-height-x-small); }

/* L89. Uma big screen: a dark layer over the full-size card while "Uma big screen", the heading and the play button
   show (the same 0.5 darkening the picture had), until she hovers over the play button (the script adds
   big-screen-dark-overlay-lifted) or presses play (the overlay hides and the video plays). On the reel's own overlay
   class (it has no background of its own), because adding a plain class to the overlay in the page was not allowed
   in this session; the coordinator may move this rule to a plain class on that div. */
.uma-big-screen-reel__overlay {
  background-color: rgba(var(--black-rgb), var(--opacity-moderate));
  border-radius: var(--reel-radius);
}
.big-screen-dark-overlay-lifted { background-color: transparent; }

/* ===== chrome: L10 / L32 / L94, L11, L93, L30, L31, L39, L81 ===== */
/* For the coordinator to append to outputs/release/public/uma-build-95.css (not linked anywhere itself).
   Only existing UMA.css tokens. No new tokens. */

/* L10 / L32 / L94: the Uma logo sits on the left, next to the BETA tag, on every page, in the website chrome and the
   web app chrome, on a phone and on a computer. UMA.css centred it in the website chrome above 600px (position
   absolute, left 50%) and took the logo and BETA away below 601px. One class each; this file comes after UMA.css. */
.uma-chrome-logo { position: static; transform: none; }
@media (max-width: 600px) {
  /* On a phone the website bar holds the menu button and the logo (button-sized). Her ruling, 8 Oct 2026: below 600
     Log in, Try Uma and BETA are not in the header; the flyout has all three (its title "Uma BETA", and Log in and
     Try Uma in its foot). What was here: BETA shown (display: inline-flex, over UMA.css's display: none) and the
     header's Log in and Try Uma with tightened gaps. */
  .app-main-nav { padding-left: var(--gap-md); padding-right: var(--gap-md); }
  .uma-chrome-logo { display: block; margin-left: var(--gap-xs); }
  .uma-chrome-logo-svg { width: var(--button-size-sm); height: var(--button-size-sm); }
  .uma-chrome-beta-tag { display: none; }
  .uma-chrome-top-bar-right { gap: var(--gap-xs); }
  .uma-chrome-header-auth { display: none; }
}

/* L11 (library) and L93 (marketplace): a hero the page marks with data-uma-hero runs up under the see-through top bar,
   as the homepage's does. The chrome adds this class to that hero (uma-chrome.js, PAGE KINDS, part 3). The hero keeps
   its own top padding below the bar. The two thin strokes are the hairlines above the hero on both pages (the chrome's
   content band and the page's own content wrapper each have a 1px top border). */
.uma-chrome-hero-under-bar { margin-top: calc(-1 * (var(--fixed-header-height) + 2 * var(--stroke-thin))); padding-top: calc(var(--app-default-top-bottom-margin-xxxxl) + var(--fixed-header-height)); }

/* L30: the menu's Log in (navy menu) keeps white words on hover; the button's own hover turned them navy. */
.uma-chrome-menu-login:hover { color: var(--bright-white); background: rgba(var(--bright-white-rgb), var(--opacity-low)); }

/* L39: the SOS pane's words and breathing box sit centred in the same max-width box as the page's content. The box was
   pushed right by the sidebar's width twice (the pane already starts after the sidebar) and its two columns sat at the
   left of the box. */
.crisis-pane-inner { margin-left: auto; margin-right: auto; }
.crisis-pane-split { justify-content: center; }

/* L31: room on both sides of the chrome's switches and lists, so a keyboard focus ring (drawn outside the control, with
   its gap) is not cut off by the box around it. The wish list's Saved / Favourites switch clips what is outside its
   rounded edge (overflow hidden, for the corners), and its pill list scrolls sideways on a phone with no room at the
   ends. (The switch's two lines here are gone: the Wishlist / Library tabs have one definition, WISHLIST TABS ONE
   DEFINITION, 10 Oct 2026.) */
@media (max-width: 600px) {
  .uma-wishlist-pill-bar { padding: var(--gap-xxs) var(--gap-md); }
}

/* L81: moving between pages, the browser keeps the page you are leaving on screen until the new one is ready to show,
   then cross-fades, with the top bar and the sidebar held still as the same pieces on both pages (Chrome, Edge and
   Safari 18.2 or later; other browsers ignore this and change pages as before). Not with reduced motion. The chrome
   itself is now built before the new page's first paint (uma-chrome.js), so the held top bar and sidebar meet their
   twins on the new page. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .uma-chrome-top-bar { view-transition-name: uma-chrome-top-bar; }
  .uma-chrome-side-bar { view-transition-name: uma-chrome-side-bar; }
}

/* ===== feedback-wishlist: L25, L26, L28 ===== */
/* L25: the "Sign up or Log in to follow" / "Sign up or Log in to save this" notice (uma-wishlist-sync.js gives the
   dialog this class next to .idle-notice). Wide enough for either heading on one line on a desktop (the longer one
   is 27rem at the notice's heading size, plus the notice's side padding). On a phone it is as wide as the screen
   allows (the browser's own dialog margin) and a heading longer than that still wraps.
   NEW TOKEN (local to this class): --wish-sign-in-notice-width: 32rem. */
.wish-sign-in-notice { --wish-sign-in-notice-width: 32rem; max-width: var(--wish-sign-in-notice-width); }

/* L26: the feedback panel's two tabs, Report bug and Post review (chrome MARKUP gives both .uma-feedback-pill-item).
   - Selected: white text (light theme), the chrome's own selected pill text token. On the library and the marketplace
     a later UMA.css line for .pill-filter-item (page-catalogue) made it charcoal on navy.
   - Hover: no orange. The text keeps its own colour and is underlined. The :not() keeps the selected tab as it is
     and gives this line the weight to beat UMA.css's page-catalogue hover line. */
.uma-chrome-pill-item-selected { color: var(--chrome-pill-selected-text); }
.uma-feedback-pill-item:hover:not(.uma-chrome-pill-item-selected) { color: var(--chrome-pill-text); text-decoration: underline; text-underline-offset: var(--link-underline-offset); }

/* L28: the bar under Add screenshot that fills while the screenshot is taken (made by the feedback script).
   NEW TOKEN (local to this class): --uma-feedback-shot-bar-height: 0.375rem. */
.uma-feedback-shot-progress { --uma-feedback-shot-bar-height: 0.375rem; width: 100%; height: var(--uma-feedback-shot-bar-height); margin: 0 0 var(--app-default-top-bottom-margin-sm); accent-color: var(--chrome-feedback-primary-bg); }

/* ===== feedback-wishlist: L73, L75, L76, L77 (the wish list drawer) ===== */
/* L73: the wish list's prices, "See price on Amazon" among them, in the wish list's own colours (navy on the light
   tile, white on the tomato bin hover). uma-wishlist-saved-items.js gives each saved tile's price these classes.
   On the library a page line (.card-price-discounted under page-catalogue, for the dark marketplace cards) made
   them white on the light tile. The words may wrap: at 375 "See price on Amazon" ran off the tile. No new tokens. */
.uma-wishlist-price { color: var(--wishlist-ink, var(--wishlist-price)); white-space: normal; }
.uma-wishlist-price-was { color: var(--wishlist-ink, var(--wishlist-muted)); }

/* L75: the author line turns white with the rest of the tile on the red bin's hover (the tile sets --wishlist-ink).
   On the library a page line for .card-brand kept it grey. No new tokens. */
.uma-wishlist-tile-brand { color: var(--wishlist-ink, var(--wishlist-muted)); }

/* L76: the Sensory needs canvas and Access to Work assistant cards sit flush on the subtotals. The drawer body and
   the open panel are columns that fill the drawer, and the card goes to the foot of it with no space under it.
   No new tokens. */
.uma-wishlist-drawer-body { display: flex; flex-direction: column; }
/* The :not() gives this line the weight of the marketplace's own ".uma-wishlist-panel.is-active { display: block }"
   (marketplace.html now gives its open panel .uma-wishlist-panel-active too). */
.uma-wishlist-panel-active:not(.is-hidden) { display: flex; flex-direction: column; flex: 1 0 auto; }
.uma-wishlist-promo { margin-top: auto; margin-bottom: 0; }

/* L77: round an audiobook cover, the tile's own colour instead of white (uma-wishlist-saved-items.js gives the
   picture box this class for audiobooks only). No new tokens. */
.uma-wishlist-tile-image-audio { background: var(--wishlist-tile-bg); }

/* L74: the Buy button with its arrow stays inside the tile on a phone (at 375 the arrow was off the screen and the
   list opened past the right edge). The label shortens with "..." as the chrome's split button already allows.
   No new tokens. */
.uma-wishlist-split { min-width: 0; }
.uma-wishlist-tile-buy-row-mobile { min-width: 0; max-width: 100%; }
/* L74: the list opens leftwards from the arrow and stays on the screen; on a phone its lines may wrap. The library's
   own .drawer-buy-dropdown line (left: 0) made it open rightwards, off the screen at 375. No new tokens. */
.uma-wishlist-buy-menu { left: auto; right: 0; max-width: min(var(--wishlist-dropdown-max), 70vw); }
.uma-wishlist-buy-menu-label { white-space: normal; min-width: 50%; }
.uma-wishlist-buy-menu-price { flex-shrink: 1; white-space: normal; }

/* ===== coordinator: L100 (dark mode feedback fields) ===== */
/* L100: in dark mode the feedback tab's fields were navy-dark (#192032) on the navy-40 panel (#151C2D) with a 1px edge
   at 20% white, so they barely showed. Dark mode now gives them the lightest navy token and a white edge at
   --opacity-medium-high. Light mode is unchanged (the edge falls back to --opacity-low, as UMA.css draws it).
   Focus (orange) and error (red) outlines come from the L99 rules, which outweigh this one. New token:
   --chrome-feedback-field-edge-opacity (dark mode only). */
:root[data-theme="dark"] {
  --chrome-feedback-field-bg: var(--navy);
  --chrome-feedback-field-edge-opacity: var(--opacity-medium-high);
}
.uma-feedback-textarea {
  border-color: rgba(var(--chrome-feedback-field-edge-rgb), var(--chrome-feedback-field-edge-opacity, var(--opacity-low)));
}

/* ===== coordinator: timer and resend split button (her design, 8 Oct 2026) ===== */
/* Her split button is back on Check your email, the set-up text code, Reset PIN and the profile's changes (UMA.css
   .timer-resend-row: one box, timer on the left, Resend on the right). Her design: the Resend half goes navy on hover,
   and after a resend it turns green with the tick while it shows "sent" (UMA.css only turned it green on hover).
   No new tokens. */
.timer-resend-button:hover {
  background: var(--navy);
  color: var(--bright-white);
  border-left-color: var(--navy);
}
.timer-resend-button {
  white-space: nowrap;   /* "Link sent" and "Code resent" stay on one line at 375 */
}
.timer-resend-button-done {
  background: var(--bright-green);
  color: var(--mid-white);
  border-left-color: var(--bright-green);
}
.timer-resend-button-done:hover {
  background: var(--bright-green);
  color: var(--mid-white);
  border-left-color: var(--bright-green);
}

/* ===== homepage round 3: L103 ===== */
/* For the coordinator to append to outputs/release/public/uma-build-95.css (not linked anywhere itself).
   L103: the homepage's own header (index.html, .main-header) now holds the Uma logo (the chrome's logo picture) and
   the chrome's BETA tag. Over the hero both are white (the logo white, BETA a white tag with navy words, the chrome's
   uma-chrome-beta-tag-dark); once the header frosts, the page script takes home-header-logo-on-hero and
   uma-chrome-beta-tag-dark off, so the logo is the header logo colour and BETA the chrome's yellow tag. */
.home-header-logo-svg {
  fill: var(--t-header-logo);
  transition: fill var(--transition-base) ease;
}

.home-header-logo-on-hero {
  fill: var(--bright-white);
}

/* The logo link sits clear of the sidebar (shown above 600 wide), 20px from its edge as Log in is from the right edge.
   The link no longer carries UMA.css's .logo class, which centred it on phones over Log in. */
.home-header-logo {
  display: flex;
  align-items: center;
  margin-left: var(--sidebar-width);
}

/* On a 375 phone the bar holds the menu button, the logo, BETA, Log in and Try Uma, so the logo is the button-sized
   one and the spaces are tightened, as the chrome's bar does (build 95 L10): Log in and Try Uma take the chrome's
   header button padding. */
@media (max-width: 37.5rem) {
  .home-header-logo {
    margin-left: var(--gap-xs);
  }

  .home-header-logo-svg {
    width: var(--button-size-sm);
    height: var(--button-size-sm);
  }

  .home-header-beta-tag {
    margin: 0 var(--gap-xs);
    padding: 0 var(--gap-xs);
  }

  .home-header-auth-btn {
    --btn-padding-x: var(--chrome-auth-pad-x);
  }
}

/* ===== homepage round 3: L105, L106, L107 ===== */
/* L105 is in index.html only: the hero film has no controls attribute until it plays (no CSS).
   L106 / L107: her ruling, the playing film is 16:9 with the big widescreen feel. This replaces build 95 L2's film
   shape (--hero-film-ratio, 1280 / 968, in the build 95 homepage section, which stays but is no longer the shape used
   once this section comes after it). Her film in /media/ is 1280 x 968, so in a 16:9 frame:
     56.25rem (900) wide and up: the frame is the whole hero (the hero is 16:9 while it plays) and the film is drawn
       whole inside it (contain): nothing cut off, dark bars either side (at 1280: film 906 x 686 in a 1220 x 686 frame).
     below 56.25rem: the frame is 16:9, full width, and the film fills it (cover): its top and bottom edges are cut
       off (about 12.8% each), nothing at the sides. */
/* Her ruling (8 Oct 2026, later, replacing the contain above): 56.25rem (900) and up, the playing film is 16:9 and full
   width, filling the frame (cover, centred); below 56.25rem it is 4:3, cover, centred (her film is 1280 x 968, about
   4:3, so almost nothing is cut there). In both, the width sets the height through the ratio. */
/* Replaced (her hero spec, 9 Oct 2026; see "hero: always its ratio" at the end). What was here:
   .hero-film-whole { aspect-ratio: 16 / 9; }
   .hero-launch-video--visible { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
   @media (max-width: 56.25rem) { .hero-film-whole { aspect-ratio: 4 / 3; } .hero-launch-video--visible { aspect-ratio: 4 / 3; } } */

/* L106: the page's own header (logo, BETA, the menu button on a phone, Log in, Try Uma) is off the film while it
   plays; the page script adds this class on play and takes it off on pause and at the end. The SOS button and the
   Feedback tab go through the chrome's own window.umaChrome.hide and show (no CSS needed). */
.home-header-film-off {
  visibility: hidden;
  opacity: 0;
}

/* ===== round 3 dark mode: L115, timer and resend split button in dark (her report 8 Oct), tick gap ===== */
/* For the coordinator: append at the END of uma-build-95.css, AFTER the coordinator's own
   "timer and resend split button" section (these lines lean on its hover and done rules coming first).
   No new tokens. L114 needed no CSS (it is a script change in index.html, see the notes). */

/* L115: the "Build your brain-body profile" card stays cream in dark mode, as the brain-body tracker and canvases
   fronts do (their films are cream). The front fills the whole card, so it takes the light card colour, --mid-white,
   and the homepage's words for pale grounds; its plus goes back to the light look, as bug 55 did for the tracker. */
:root[data-theme="dark"]:where(.page-home) .brain-card-front {
  background-color: var(--mid-white);
  --card-eyebrow-colour: var(--light-charcoal);
  --vp-title-colour: var(--mid-charcoal);
}
:root[data-theme="dark"]:where(.page-home) .brain-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);
}

/* Her report, 8 Oct: on Check your email in dark the countdown could not be seen. The split button
   (UMA.css .timer-resend-row) kept its white box while the countdown took the dark page's pale words.
   Her rule for dark: whites turn navy. So in dark the box turns navy (--navy-dark, so that the Resend half's
   --navy hover still shows against it; --navy-40 is not defined on every one of these pages), with the dark pages'
   pale hairline; the countdown and "Resend" are pale.
   Hover is still navy, and after a resend it is still green with the tick. Same on verify-email, security-setup,
   reset-pin and the profile. */
:root[data-theme="dark"] .timer-resend-row {
  background: var(--navy-dark);
  border-color: rgba(var(--bright-white-rgb), var(--opacity-low));
}
:root[data-theme="dark"] .timer-readout {
  color: var(--bright-white);
}
:root[data-theme="dark"] .timer-resend-button {
  color: var(--bright-white);
  border-left-color: rgba(var(--bright-white-rgb), var(--opacity-low));
}
:root[data-theme="dark"] .timer-resend-button:hover {
  background: var(--navy);
  color: var(--bright-white);
  border-left-color: var(--navy);
}
:root[data-theme="dark"] .timer-resend-button-done,
:root[data-theme="dark"] .timer-resend-button-done:hover {
  background: var(--bright-green);
  color: var(--mid-white);
  border-left-color: var(--bright-green);
}

/* Her report, 8 Oct: after a resend the tick and "Link sent" / "Code resent" touched. The Resend half is a flex
   box, so a gap puts space between the tick (.onboarding-success-tick) and its words. */
.timer-resend-button {
  gap: var(--gap-xs);
}

/* ===== coordinator: dark mode product card plus (her design, 8 Oct 2026) ===== */
/* Her icon (icons_for_uma "Artboard 2 copy 4"): in dark mode the product card's + is a dark disc (#0e0f15, nearest UMA.css
   token --navy-60) with a mid grey plus (#808080 = --light-charcoal); the light grey plus was lost on dark cards.
   Dark mode is an attribute on <html>, so this cannot be a single class. No new tokens. */
:root[data-theme="dark"] .card-add-btn {
  background: var(--navy-60);
}
:root[data-theme="dark"] .card-add-btn-icon {
  color: var(--light-charcoal);
  mix-blend-mode: normal;
}
:root[data-theme="dark"] .card-add-btn:hover .card-add-btn-icon {
  color: var(--mid-white);
}

/* ===== coordinator: header logo hover in dark mode (her ruling, 8 Oct 2026) ===== */
/* In dark mode the header's Uma logo stays white and goes to the brightest white on hover (UMA.css turned her navy on
   hover, which vanished on the dark bar). Over a hero the white logo also goes to the brightest white, fully opaque.
   Dark mode is an attribute on <html>, so this cannot be a single class. No new tokens. */
:root[data-theme="dark"] .uma-chrome-logo:hover .uma-chrome-logo-svg {
  fill: var(--pure-white);
}
.uma-chrome-logo:hover .uma-chrome-logo-svg-dark {
  fill: var(--pure-white);
  opacity: 1;
}

/* ===== chrome round 3: L102, L104, L116, L112, L113, L117 (and the logo's press area) ===== */
/* Not linked anywhere. For the coordinator to append to the END of uma-build-95.css (it must come after the build 95
   sections it corrects: L10, L26, L30 and L100). Only UMA.css tokens; one new token, --chrome-footer-edge (below). */

/* Header logo press area (found while testing L104). Build 95 L10 gave .uma-chrome-logo position: static, so UMA.css's
   44px press area for the logo (a.uma-chrome-logo::after, position absolute) was placed against the whole top bar:
   the logo's link covered the full width of the bar, and Log in and Try Uma could not be hovered or pressed with a
   mouse (a press on them went to the logo). position: relative keeps the press area on the logo; left: auto undoes
   UMA.css's centring (left: 50%), which L10 took off. */
.uma-chrome-logo { position: relative; left: auto; }

/* L104 and L116: the header's Log in turns solid white on hover whenever it is the white button (over a hero, in the
   see-through bar, and in dark mode). The chrome gives it uma-chrome-header-login-white at exactly those times
   (uma-chrome.js, PAGE KINDS part 3 and L101). UMA.css's hover only turned its words navy (--flood-color), which read
   as blue on the dark film. */
.uma-chrome-header-login-white:hover { background: var(--bright-white); border-color: var(--bright-white); color: var(--navy); }

/* L116 (and L30 corrected): the menu's Log in turns solid white on hover, as her website chrome drew it (UMA.css
   .uma-chrome-flyout-bottom-bar .btn-secondary-white-on-dark:hover). Replaces build 95 L30's hover (white words on a
   faint white). The menu is navy in both modes, so this is the same in light and dark. */
.uma-chrome-menu-login:hover { background: var(--bright-white); border-color: var(--bright-white); color: var(--navy); }

/* L102: the website chrome's two sidebar icons (heart, mode) move up one place, so the bottom place is left for
   Cookiebot's round cookie button. Website chrome only (a visitor on a website page); the web app's sidebar is
   unchanged. UMA.css had calm 0, heart 1. */
.page-uma-website-chrome { --chrome-sidebar-calm-slot: 1; --chrome-sidebar-heart-slot: 2; }

/* L112: Report bug and Post review (the feedback panel's two tabs) are buttons: no underline on hover. Build 95 L26
   underlined them; this line has the same selector, so it wins by coming later. (Coordinator: or simply take
   "text-decoration: underline; text-underline-offset: var(--link-underline-offset);" out of the L26 line.) */
.uma-feedback-pill-item:hover:not(.uma-chrome-pill-item-selected) { text-decoration: none; }

/* L113: dark mode, the feedback text boxes stand out from the panel by their fill alone (navy on the navy-40 panel,
   from build 95 L100), with no white outline. Build 95 L100 drew the edge at 60% white; it is now hidden in dark mode.
   Light mode is unchanged. Focus (orange) and error (red) outlines are separate rules and still show. */
:root[data-theme="dark"] { --chrome-feedback-field-edge-opacity: var(--opacity-hidden); }

/* L117: dark mode, the footer's outline takes the chrome's dark edge (--t-border, white at --opacity-low) instead of
   mushroom. Light mode keeps mushroom. The footer box draws its edge with UMA.css .content-box-stroked-mushroom
   (border: 0.5px solid var(--mushroom)), so the footer box's own --mushroom is set to the new token; this also holds
   on the self-report pages, which load UMA.css again after this file. NEW TOKEN: --chrome-footer-edge (mushroom in
   light mode, --t-border in dark mode). */
:root { --chrome-footer-edge: var(--mushroom); }
:root[data-theme="dark"] { --chrome-footer-edge: var(--t-border); }
.footer-text-content { --mushroom: var(--chrome-footer-edge); }

/* ===== coordinator: L103 logo fully white over a hero (her ruling) ===== */
/* Over the homepage, library and marketplace heroes the Uma logo shows in white at full strength (UMA.css drew the white
   logo at --chrome-logo-dark-opacity, 0.8, which looked grey on the film). No new tokens. */
.uma-chrome-logo-svg-dark {
  opacity: 1;
}

/* ===== coordinator: log-in arrow working state (her report, 8 Oct 2026) ===== */
/* While log-in waits on the server, the arrow becomes a turning circle at once, so a press never looks as if nothing
   happened. Still with reduced motion. No new tokens. */
.field-action-button-working i {
  animation: uma-working-turn 0.9s linear infinite;
}
/* the same working circle after a full button's words (Sign up, her live test S1) */
.button-working-icon {
  margin-left: var(--gap-xs);
  animation: uma-working-turn 0.9s linear infinite;
}
@keyframes uma-working-turn {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .field-action-button-working i { animation: none; }
  .button-working-icon { animation: none; }
}
:root[data-motion="still"] .field-action-button-working i,
:root[data-motion="still"] .button-working-icon {
  animation: none;
}

/* ===== r4 learn: L130, L131 ===== */

/* L130. The Learn heading in the sub-nav drops off when the row overflows, the way the ADHD and autism results
   pages do it. Their code (UMA.css, the "max-width:900px" block for .page-adhd-profile and .page-autism-profile)
   hides .section-nav-title-wrapper, and the Learn pages' own copy of that block (UMA.css, :where(.page-home,
   .page-learn), max-width 900px) also lets the scroller take the row's left inset. These are the same three rules.
   They apply at every width on the Learn pages, because with her 1.5rem link spacing (build 95 L80) the Learn row
   overflows at every width: measured from 901 to 1480 px wide it needs 121 px more than it has (the side insets
   grow with the screen on both sides, so it never catches up). With the heading showing, the links scrolled
   underneath its edge and read "Learnm". Two classes, because the build 95 L79 rules for this row are two
   classes too. */
.page-learn .section-nav-title-wrapper { display: none; }
.page-learn .section-nav-row { padding-left: 0; }
.page-learn .section-nav-scroller { padding-left: var(--section-nav-edge-inset); }

/* L131. Bubble cluster hero (Burnout vs depression, PME vs PMDD, Somatic super syndrome): 4rem more space above
   and 2rem more below, on top of build 95 L82's learn-hero-space (2rem each). bubble-hero-space sits on the same
   block as learn-hero-space (.goldensectionpanel-items in the hero) and comes later, so it wins. Above:
   2rem + 4rem = 6rem. Below: 2rem + 2rem = 4rem. */
.bubble-hero-space {
  margin-top: calc(var(--app-default-top-bottom-margin-xl) + var(--app-default-top-bottom-margin-xxxxl));
  margin-bottom: calc(var(--app-default-top-bottom-margin-xl) + var(--app-default-top-bottom-margin-xl));
}

/* ===== Wish list round 4: L154, L156 ===== */

/* L154: her Wishlist / Library switch (the straight split at every width) now lives in one block, WISHLIST TABS ONE
   DEFINITION (10 Oct 2026), near the end of this file. Its lines here were taken out (git history keeps them). */

/* L156: a saved book's Buy button shows its price at its end, and each shop in its menu shows its price with
   "Last checked ..." under it (classes written by uma-wishlist-saved-items.js). */
.uma-wishlist-split-price { flex-shrink: 0; margin-left: var(--gap-sm); font-weight: var(--font-weight-medium); white-space: nowrap; }
/* on a narrow phone the button's short words give way to "Buy £9.99" */
@media (max-width: 499px) {
  .uma-wishlist-split-price { margin-left: 0; }
  .uma-wishlist-split-price::before { content: attr(data-buy); font-weight: var(--font-weight-normal); }
}
.uma-wishlist-buy-menu-price-box { display: flex; flex-direction: column; align-items: flex-end; flex: 0 1 auto; min-width: 0; text-align: right; }
.uma-wishlist-buy-menu-checked { font-size: var(--body-text-xxs); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-small); color: inherit; white-space: normal; }   /* the menu is light in both modes */

/* ===== Wish list round 4: L158, L159 ===== */
/* L158: the app's short description under its name, as the library's app card's subtitle (classes written by
   uma-favourites-sync.js). */
.uma-wishlist-fav-card-name-tight { margin-bottom: var(--gap-xxs); }
.uma-wishlist-fav-card-description { margin-top: 0; margin-bottom: var(--app-default-top-bottom-margin-sm); font-size: var(--body-text-xxs); font-weight: var(--font-weight-normal); line-height: var(--default-line-height-small); color: var(--wishlist-muted); }

/* L159: the heart inset in the app icon's top right corner, as on the library's app card: the icon box does not clip
   (so the corner is not rounded away), the icon keeps its own rounded corners, and the saved heart is the yellow
   corner with the white heart (the library card's 75px corner and 24px heart, the drawer's own sizes already). */
.uma-wishlist-fav-app-media { overflow: visible; border-radius: 0; }
.uma-wishlist-fav-app-image { border-radius: var(--radius-app-icon); }
.uma-wishlist-fav-heart-inset { opacity: var(--opacity-visible); }
.uma-wishlist-fav-heart-icon { color: var(--bright-white); }   /* the library and marketplace make a drawer heart navy */
.uma-wishlist-fav-heart-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; }

/* ===== Library round 4: L164 (episode tiles), L165 (library pills) ===== */

/* L164: a Just-dropped episode tile is the video cards' 16:9 box at the video cards' widths (the card width rule
   .library-episode-card in UMA.css is kept), with the heart (top right) and + (bottom right) on top of it exactly as
   on the video cards. The podcast players only draw 152 to 175 px tall (Apple leaves the rest of a taller frame
   empty), so the player sits in the middle of the 16:9 tile on her black, the way a video that does not fill
   16:9 sits on black on the video cards. On phones (169 px tall tile) the player is the full tile height. */
.library-episode-tile-media { aspect-ratio: var(--carouselle-card-ratio-video); overflow: hidden; justify-content: center; background: rgb(var(--black-rgb)); }
/* Her ruling (8 Oct 2026, Apple's embed guide): the players fill the space they are given (Apple's minimum 175 high,
   290 wide; Spotify likewise), so the player fills the whole 16:9 tile, with no black band. */
.library-episode-player-centred { width: 100%; height: 100%; min-height: var(--platform-apple-height-compact); }

/* L165: from 600 px wide up, library pills that fit across the full width are centred on a full-width bar (the same
   look as the bar when it is stuck to the top), instead of starting the left-aligned scrolling bar. library.html adds
   the class only when the pills then fit; pills that still overflow, and every screen under 600, scroll as before. */
.library-pills-full-width { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; border-radius: 0; justify-content: center; }

/* L136: the marketplace search box stays light in dark mode, so its "Search the marketplace" placeholder keeps the
   light-mode grey there (L91's dark rule made it light on light: unreadable). */
:root[data-theme="dark"] .marketplace-search-input::placeholder { color: var(--lightest-charcoal); }

/* ===== homepage round 4: L106, L107, L126 ===== */
/* For the coordinator to append at the END of outputs/release/public/uma-build-95.css (not linked anywhere itself).
   Her words (L126): above 900 wide, 16:9 widescreen, fitted not cropped, height follows width. Below 900, 4:3 cover.
   This REPLACES the object-fit in the "homepage round 3: L105, L106, L107" section (her later ruling there,
   .hero-launch-video--visible { ... object-fit: cover; ... }): above 56.25rem (900) the playing film is now drawn
   whole (contain) inside the hero's 16:9 frame, whose height still comes from the width (aspect-ratio 16 / 9 on
   .hero-film-whole, unchanged). Her film is 1280 x 968, so at 1280 wide it is about 906 x 686 in a 1220 x 686 frame,
   navy either side, nothing cut off. At 56.25rem and narrower the round 3 rules stand: 4:3 frame, cover.
   If the coordinator prefers to edit the round 3 section instead: change its object-fit: cover to contain and add
   object-fit: cover inside its @media (max-width: 56.25rem) block; the two rules below then are not needed. */
/* Replaced (her hero spec, 9 Oct 2026; see "hero: always its ratio" at the end). What was here:
   .hero-launch-video--visible { object-fit: contain; }
   @media (max-width: 56.25rem) { .hero-launch-video--visible { object-fit: cover; } } */

/* ===== homepage round 4: hero darkening, hero pause centred (her items, 8 Oct 2026) ===== */
/* Hero darkening: what darkened the playing film is UMA.css's
   .hero-section-with-video:has(.hero-launch-video--visible, .hero-launch-video[poster])::after, a layer of
   --hero-film-scrim (black at 70%) laid over the film for the hero words. The words are off while the film plays
   (release build 93, bug 48), so the page script now adds hero-film-playing to the hero on play and takes it off on
   pause and at the end; while it is on, the layer's colour is see-through, so the film is at full brightness. The
   token is set on the hero itself (the ::after reads it from there), so no extra selector weight is needed.
   Before play and on pause the darkening behind the words is as before. */
.hero-film-playing {
  --hero-film-scrim: transparent;
}

/* Hero pause centred: while the film plays, the pause mark sits dead centre of the film. The hero
   (.hero-section-with-video, position: relative) is its frame; the film is centred in the hero (build 95 L2: top 50%,
   translate -50%), so the hero's centre is the film's centre at every width. Replaces, while playing, UMA.css's
   .hero-launch-play (position: relative, in the flow under the words, margin-top). The script adds
   hero-launch-play-on-film on play and takes it off on pause and at the end; the mark keeps its look, its hover scale
   (transform) and its show and hide (circular-play-button-on-dark--hidden). */
.hero-launch-play-on-film {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 0;
  translate: -50% -50%;
}

/* While the mark is on the film, its place under the words is kept (the same size and gap as the mark in the flow:
   UMA.css's .circular-play-button-on-dark size and .hero-launch-play margin-top), so the hero keeps its height and the
   film does not move (on a 375 phone the hero would otherwise shrink by about 94px when play starts). */
.hero-content-mark-space::after {
  content: "";
  display: block;
  width: var(--button-size-xxl);
  height: var(--button-size-xxl);
  margin-top: var(--app-default-top-bottom-margin-lg);
}

/* ===== homepage round 4: L170 (the awareness cards on screen) ===== */
/* Her words: every card is 9:16, the size of a social media story; on screen they show at most 600px wide. The
   #StopMakingWomenWait cards (.non-flippable-9-16-card, 9:16 from UMA.css) are 310 to 380px wide today
   (--carouselle-card-*), so nothing changes now; this cap keeps any later width at 37.5rem (600px) or less.
   No token holds 37.5rem; a new one (for example --story-card-max-width: 37.5rem) could if she wants it named. */
.non-flippable-9-16-card {
  max-width: 37.5rem;
}

/* ===== round 4 marketplace: L140, L141, L142, L148, L153 ===== */
/* Not linked anywhere. For the coordinator to append to the END of uma-build-95.css (after the coordinator's dark mode
   product card plus section, which must keep winning in dark mode). Only UMA.css tokens; no new tokens. */

/* L140: the circle behind the + on the product tiles is the homepage "more than" tiles' light circle
   (.circular-plus-btn-on-light: --t-circle-wash = --dark-white, the mark --t-circle-mark = --mid-charcoal, going to
   --dark-charcoal on hover). Light mode only: the dark mode rule (:root[data-theme="dark"] .card-add-btn, a dark disc
   with a grey plus) is more specific, so it still wins in dark mode. */
.card-add-btn { background: var(--dark-white); }
.card-add-btn-icon { color: var(--mid-charcoal); mix-blend-mode: normal; }

/* L141: the empty heart on the marketplace product tiles shows all the time (before, only while the tile was hovered).
   The class is added by the marketplace page to its product tiles only. */
.heart-always-shown { opacity: var(--opacity-visible); }

/* L142: the currency tabs in the filter (marketplace and library) are 2.5rem tall (were 3.125rem). The row stays
   3.75rem: the space above and below the tabs grows to 0.625rem each. Both are the round 1 tokens (L65), set again. */
:root { --filter-currency-tab-height: 2.5rem; --filter-currency-tab-gap: 0.625rem; }

/* L148: 1rem less space under the struggle pills in the glass panel (the bar once it sticks). The bar keeps its place
   in the page (the 1rem goes below it as margin), so the products start where they did. */
.shop-sticky-bar { padding-bottom: calc(var(--app-default-top-bottom-margin-lg) - var(--app-default-top-bottom-margin-sm)); margin-bottom: var(--app-default-top-bottom-margin-sm); }
@media (max-width: 600px) {
  .shop-sticky-bar { padding-bottom: calc(var(--app-default-top-bottom-margin-sm) - var(--app-default-top-bottom-margin-sm)); }
}

/* L153: above 600px wide every tile in the marketplace list (products, recipe, quote, charity, podcast and video cards)
   is a 9:16 portrait; a product tile's picture area stays the square at the top (its width). The class is added by
   the marketplace page to every tile it draws. Rows no longer stretch to the tallest tile; a tile's words that do not
   fit are cut at the tile's edge rather than making the tile taller. */
@media (min-width: 601px) {
  .marketplace-portrait-card { aspect-ratio: var(--carouselle-card-ratio-nine-by-sixteen); height: auto; min-height: 0; overflow: hidden; }
  .market-place-grid-to-carouselle { grid-auto-rows: auto; }
}

/* ===== chrome round 4: L121/L122, L123, L124, L125, L147, L157 ===== */
/* Not linked anywhere. For the coordinator to append to the END of uma-build-95.css. */

/* L123: over a photo or the hero film (homepage, library, marketplace) the BETA tag is slightly see-through: the white
   tag (UMA.css .uma-chrome-beta-tag-dark, solid --bright-white) is now white at --opacity-very-high (0.8), so the
   picture shows a little through it; its navy words stay solid, so it is still easy to read. Away from a hero the
   yellow tag is unchanged. No new tokens. */
.uma-chrome-beta-tag-dark { background-color: rgba(var(--bright-white-rgb), var(--opacity-very-high)); }

/* L147: library and marketplace. While the chrome's top bar has scrolled away (scrolling down; uma-chrome.js gives the
   bar UMA.css's uma-chrome-main-header-hidden), the sticky search and pill bar (.uma-library-sticky-container,
   .shop-sticky-bar) carries uma-chrome-sticks-to-top and sticks to the very top of the screen. Scrolling up, the bar
   comes back and the class comes off, so the search bar sits under it again (UMA.css: top: var(--fixed-header-height)). */
.uma-chrome-sticks-to-top { top: 0; }

/* L157: NO NAVY HEARTS. One rule for every favourite heart: white on a dark, coloured or picture background (video
   thumbnails, podcast players, covers, the yellow saved corner), solid charcoal on a light one. Which one a heart on a
   picture takes is decided only by /uma-heart-contrast.js (build 95: charcoal on white, cream, beige, pale grey or a
   very pale tint; white on anything else), which now runs on every page with the chrome (uma-chrome.js loads it where a
   page does not), and its class uma-wishlist-earmark--on-light-image is honoured on every page, not only the library
   and the marketplace. NEW TOKENS: --heart-on-light (charcoal, a heart on a light surface), --heart-on-dark (white, a
   heart on a dark, coloured or picture surface), --heart-on-page (a heart on the page or a panel itself: charcoal in
   light mode, white in dark mode). The places that were navy, each now one of these: */
:root { --heart-on-light: var(--mid-charcoal); --heart-on-dark: var(--bright-white); --heart-on-page: var(--mid-charcoal); }
:root[data-theme="dark"] { --heart-on-page: var(--bright-white); }

/* 1. A heart on a light cover, on any page (was: only the library and the marketplace had this rule, so in the wish
   list drawer elsewhere a grey outline heart stayed white on a light cover, L135). */
.uma-wishlist-earmark--on-light-image .uma-wishlist-earmark-icon { color: var(--heart-on-light); }

/* 2. Touch screens, library and marketplace cards: the unsaved heart in its small pale circle (--dark-white in both
   modes) was navy (UMA.css @media (hover: none) .uma-wishlist-earmark-icon, and its copy in uma-learn-media.css). Now
   charcoal. The library's podcast episode pill (library-episode-heart) is left to rule 4. */
@media (hover: none) {
  :where(.page-uma-library, .page-uma-marketplace) .uma-wishlist-earmark:not(.uma-wishlist-earmark--added):not(.library-episode-heart) .uma-wishlist-earmark-icon { color: var(--heart-on-light); }
  /* the same small circle on the app and tool cards (canvases, Access to Work, challenges pages: .earmark-icon) */
  .earmark:not(.uma-wishlist-earmark--added) .earmark-icon { color: var(--heart-on-light); }
}

/* 3. The podcast and video drawers' episode heart once saved sits on the yellow corner: it was navy (UMA.css and
   uma-learn-media.css .drawer-show-episode-earmark[aria-pressed="true"] .episode-earmark-icon). Now white, like every
   other saved heart on its yellow corner. Same selector, so it wins by coming later. */
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-earmark[aria-pressed="true"] .episode-earmark-icon { color: var(--heart-on-dark); }

/* 4. The library's podcast episode heart pill (library-episode-heart, a btn-secondary-navy-on-white button): its heart
   and outline were navy on the light page, and navy-dark on hover. Now charcoal in light mode; dark mode keeps its own
   light rule (UMA.css, .library-episode-actions .btn-secondary-navy-on-white) and white on hover. */
.library-episode-heart.uma-wishlist-earmark { color: var(--heart-on-page); border-color: var(--heart-on-page); }
.library-episode-heart.uma-wishlist-earmark:hover { color: var(--heart-on-page); border-color: var(--heart-on-page); }

/* 5. The web app's top bar heart (a signed-in member on a phone): the header icon colour is navy in light mode
   (--chrome-header-icon-text). The heart now takes charcoal in light mode and the page text (light) in dark mode;
   the bell and the other icons are unchanged. Hover keeps UMA.css's white heart on the dark circle. */
.uma-chrome-top-bar-heart { color: var(--heart-on-page); }

/* 6. The feedback panel's Post review rating hearts turned navy on hover (UMA.css .uma-chrome-feedback-heart:hover i,
   and its library copy in uma-learn-media.css); in dark mode that was navy on the navy panel. Now charcoal in light
   mode and white in dark mode. A filled (chosen) heart stays yellow. The numbers inside the hearts are words, not
   hearts, and keep their colour. */
.uma-chrome-feedback-heart:hover:not(.is-filled) i { color: var(--heart-on-page); }

/* ===== coordinator: search bar spacing, library and marketplace (her ruling, 8 Oct 2026) =====
   The space above the search bar and the space between it and the pills are the same, on both pages: 24px on
   desktop, 16px below 600. What was here (UMA.css): library 24 above, 32 to 40 below (both widths); marketplace
   24 above, 35 below on desktop (search 3px + the pill row's own 32px top padding), 16 above and 21 below on a phone.
   The marketplace pill row keeps 8px of its top padding so a pill's focus ring is not cut off (the row hides
   anything outside it); its search box gives 8px less to make up for it. */
.uma-library-search-controls { margin-bottom: var(--app-default-top-bottom-margin-lg); }
.shop-search-controls { margin-bottom: calc(var(--app-default-top-bottom-margin-lg) - var(--app-default-top-bottom-margin-xxs)); }
.shop-pill-carousel { padding-top: var(--app-default-top-bottom-margin-xxs); }
@media (max-width: 600px) {
  .uma-library-nav-wrapper { padding-top: var(--app-default-top-bottom-margin-sm); }
  .uma-library-search-controls { margin-bottom: var(--app-default-top-bottom-margin-sm); }
  .shop-search-controls { margin-bottom: calc(var(--app-default-top-bottom-margin-sm) - var(--app-default-top-bottom-margin-xxs)); }
}

/* ===== coordinator: hero: words first, then the film at its ratio (her spec, 9 Oct 2026, later) =====
   Before play: the hero is as tall as the words need (UMA.css's 16:9 and 1:1 minimum shapes are off); the poster picture
   fills it (UMA.css .hero-launch-poster, cover) and the words and the play mark sit over it. At 375 and under the
   shorter words show (see "hero words at 375 and under").
   While the film plays (the page script adds hero-film-playing to the hero and hero-content-mark-space to the words'
   box on play, and takes both off on pause and at the end): the words are off (release build 93) and their box lies
   over the hero instead of giving it height, and the hero is the film's shape: 16:9 above 900, 4:3 at 900 and under,
   with no top padding. The film fills it (cover): her 16:9 file shows whole above 900, and at 900 and under cover cuts
   off exactly its black side bars.
   What was here (the "always its ratio" version, earlier on 9 Oct): the hero 16:9 / 4:3 at all times with the words as
   an overlay, which overflowed at 375 (by 386px with the shorter words). */
:root {
  --hero-ratio-wide: 16 / 9;
  --hero-ratio-cover: 4 / 3;
}
/* Replaced (hero final, 9 Oct 2026; see "homepage hero final" at the end, the only rules that set the hero's height now).
   What was here: .hero-section-with-video { aspect-ratio: auto; }
   .hero-film-playing { aspect-ratio: var(--hero-ratio-wide); padding-top: 0; }
   .hero-launch-video--visible { object-fit: cover; object-position: center; }
   @media (max-width: 56.25rem) { .hero-film-playing { aspect-ratio: var(--hero-ratio-cover); } } */
.hero-content-mark-space { position: absolute; inset: 0; }

/* ===== coordinator: hero words at 375 and under (her copy, 9 Oct 2026) =====
   At 375px (23.4375rem) and under, the hero's second paragraph is her shorter line, "This isn't fair. That's why we
   built Uma." (hero-intro-short); above that, the full paragraph (hero-intro-full). */
.hero-intro-short { display: none; }
@media (max-width: 23.4375rem) {
  .hero-intro-full { display: none; }
  .hero-intro-short { display: block; }
}

/* ===== fix-small (9 Oct 2026): light mode contrast, footer links and BETA =====
   The footer's Terms of Use, Privacy Policy and Cookies links were her orange (#EA7100) on the footer's light grounds,
   2.6 to 2.9 : 1. Inside the footer --orange is a darker orange (her --orange-dark with 35% of her --navy), 5.2 : 1 on
   the marketplace's warm grey and 5.75 : 1 on white, so the links stay orange. Light mode only: in dark mode the
   footer keeps her bright orange. The BETA tag's white words on her yellow were 1.8 : 1; they are her navy (7 : 1),
   as on the tag over a hero (uma-chrome-beta-tag-dark) and in dark mode already. */
/* 9 Oct 2026, her answer "3 yes": the footer links are her --orange again in light mode; the darker footer orange
   that was here is taken out. The dark mode rule below (her bright orange) is unchanged. */
:root[data-theme="dark"] .internal-footer { --orange: var(--bright-orange); }
.uma-chrome-beta-tag { color: var(--navy); }

/* ===== fix-market 09 Oct 2026 (marketplace and discounts minor bugs). No new tokens. ===== */
/* Fix 1: product drawer at phone width. The close X is fixed in the top right corner (UMA.css, .drawer-close-plain),
   so the wish-list heart sits just under it, inside the right edge, each with its own space. */
@media (max-width: 599px) {
  .uma-product-drawer-earmark { top: calc(var(--gap-regular) * 2 + var(--button-size-sm)); right: var(--gap-regular); }
}
/* Fix 4: the filter drawer's Currency label lines up with the other rows' labels, which sit after their + icon. */
@media (max-width: 899px) {
  .uma-filter-currency-label { padding-left: calc(var(--button-icon-xxl) + var(--gap-md)); }
}

/* ===== fix-selfreport (9 Oct 2026): health-self-report orange buttons, light mode contrast =====
   "Preview self-report", "Get self-report" and "Add your health history" had white words on her orange, under 3 : 1.
   On these buttons only, --orange is her orange with 35% of her navy (about 5 : 1 with white) and the hover
   (--orange-dark) is her orange with 45% of her navy (about 5.8 : 1). Same mix as the footer links above. */
/* Removed 10 Oct 2026 (her rule: Uma has one style of orange button; remove all deviants). Was: .uma-orange-strong,
   her orange mixed with navy on three health-self-report buttons. */

/* ===== fix-small (9 Oct 2026): reset-pin and set-pin end after their content =====
   .first-screen-clear (L34, L35, above) made the page's wrapper a whole screen tall so the footer started below the
   first screen. These pages now have no footer (data-uma-no-footer on <html>), so that screen was only empty space,
   and with the chrome's top margin the page scrolled past its content. With no footer the wrapper is as tall as its
   content. :where() weighs nothing, so this is a single class rule placed after the L34 one. */
:where([data-uma-no-footer]) .first-screen-clear { min-height: 0; }

/* Masking, RSD and stimming screenings (09 Oct 2026). The question heading stays in view: only the answer list scrolls, so a long
   list (stimming Q14) never pushes "Q14 of 14" and the question off the top. The question text wraps in full. */
.mrs-q-pinned { overflow-y: hidden; }
.mrs-options-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* At phone width the intro uses the whole width, sits higher and can scroll, so "Takes N mins" is never cut and Start is in view. */
@media (max-width: 37.5rem) {
  .mrs-title-inner { margin-top: var(--app-default-top-bottom-margin-sm); width: 100%; max-width: 100%; padding-right: 0; }
  .mrs-title-page { overflow-y: auto; }
  .mrs-page-content { padding-left: var(--gap-xs); padding-right: var(--gap-xs); padding-top: var(--app-default-top-bottom-margin-sm); }
  .mrs-title-cta { width: 100%; margin-bottom: var(--app-default-top-bottom-margin-sm); }
}

/* ===== fix-atw (9 Oct 2026): the Access to Work tool sits beside the chrome, not over it =====
   .assistant-tool-split (UMA.css) pins the tool to the whole window (position: fixed, inset 0) at --z-chrome + 1 (1002),
   which painted it over the chrome's top bar (1000) and SOS button (1001). On this page it now starts below the top bar
   and right of the sidebar, as the canvases' own-layout screen does, and stacks one step under the top bar (999, the
   section-nav level; it follows the page's own Tools bar in the page, so it still covers that bar). The chrome's
   panels, drawers, menu, toast and crisis pane all stack higher, so they open over it as before. */
.assistant-tool-split-beside-chrome { top: var(--fixed-header-height); left: var(--sidebar-width); z-index: calc(var(--z-chrome) - 2); }
/* a phone has no sidebar, so no room is kept for it (as .uma-chrome-own-layout in UMA.css) */
@media (max-width: 37.5rem) {
  .assistant-tool-split-beside-chrome { left: 0; }
}

/* ===== fix-menu (9 Oct 2026): the upgrade panel's "Upgrade" heading in dark mode =====
   The heading (#upgradeHeading, drawn by uma-chrome.js) had no colour of its own (UMA.css .upgrade-page-heading-h1), so
   in dark mode it kept the light theme's navy on the panel's dark band (--t-band-alt, navy-40) and could hardly be read
   (profile, 375 and 1440). In dark mode it takes the page's text colour, her light text on dark. Light mode unchanged. */
:root[data-theme="dark"] .upgrade-page-heading-h1 { color: var(--t-page-text); }

/* ===== homepage hero end screen (her ask, 9 Oct 2026) =====
   When the launch film is paused or ends, the #StopMakingWomenWait card's share block (UMA.css .campaign-share-block,
   its label, row and icons, shown by campaign-share-block--visible) comes up over the hero film with her words "Share this
   video" and "Watch again". On the card it sits at --campaign-share-top (66%) under the centred play mark; in the hero the
   play mark is in the flow under the words, so the block sits just above it, in the words' place (the page script steps
   the words back, keeping their space, while the block shows). Position only: the hero's size is not touched.
   Bottom = the play mark's size and its gap above (UMA.css .circular-play-button-on-dark, .hero-launch-play margin-top). */
.hero-end-screen {
  top: auto;
  bottom: calc(var(--button-size-xxl) + var(--app-default-top-bottom-margin-lg));
}
/* "Watch again": a plain white underlined link in the card label's size, over the darkened film in both themes */
/* Replaced (hero final, 9 Oct 2026: "Watch again" taken out of the markup). What was here: .hero-watch-again {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--bright-white);
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  transition: opacity var(--transition-base) ease;
}
.hero-watch-again:hover {
  opacity: var(--opacity-moderate);
} */

/* ===== fix-selfreport (9 Oct 2026): self-report pages (/self-report-adhd, -autism, -cptsd, -health) =====
   1. "Please complete the following screenings" (ADHD and autism). The results pages' example banner (UMA.css,
      .example-state-banner) is a wrapping flex row: at 1440 the label pill, the paragraph and the two buttons fell
      on different lines at different starts, and at 375 the label (flex 0 0 auto, one line) ran to the right edge.
      Here it is a grid: label, then paragraph, then the two buttons side by side, all on one left edge; the label
      wraps inside the screen. On a phone the buttons stack, full width. The banner sits inside the preview stage,
      which already has the page's side padding, so its own padding is the smaller inner gap. */
.self-report-first-banner { box-sizing: border-box; display: grid; grid-template-columns: max-content max-content 1fr; align-items: center; gap: var(--gap-sm); padding: var(--gap-md); margin-bottom: var(--gap-md); }
.self-report-first-banner-label { grid-column: 1 / -1; justify-self: start; max-width: 100%; white-space: normal; }
.self-report-first-banner-text { grid-column: 1 / -1; }
.self-report-first-banner-action { justify-self: start; }
@media (max-width: 37.5rem) {
  .self-report-first-banner { grid-template-columns: 1fr; }
  .self-report-first-banner-action { justify-self: stretch; justify-content: center; }
}
/* 2. The section nav strip fades at the edge where more of it is hidden, so a phone shows it scrolls
      (the classes are set by the page's own script from the strip's scroll position). */
.self-report-nav-fade-right { -webkit-mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent); }
.self-report-nav-fade-left { -webkit-mask-image: linear-gradient(to left, black calc(100% - 3rem), transparent); mask-image: linear-gradient(to left, black calc(100% - 3rem), transparent); }
.self-report-nav-fade-both { -webkit-mask-image: linear-gradient(to right, transparent, black 3rem, black calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, transparent, black 3rem, black calc(100% - 3rem), transparent); }

/* ===== screenings-all (9 Oct 2026): every screening card is full width at phone width =====
   At 375 the card measured about 247px: the shared content wrapper kept the desktop side padding (4rem each side) on
   the CPTSD and RSD screenings (.screening-page-cptsd / .screening-page-rsd .uma-chrome-inner-content-wrapper in UMA.css,
   no media query, two classes), plus its top margin and a bottom gap that showed as a pale band. On the seven screening
   pages only (page-screening on <html>), at phone width the wrapper has no side or bottom padding and no top margin, so
   the card uses the whole width; the card's own padding keeps the words off the edge. Two classes, placed after UMA.css,
   so it is above those two-class rules; desktop unchanged. */
@media (max-width: 37.5rem) {
  .page-screening .uma-chrome-inner-content-wrapper { max-width: 100%; padding-left: 0; padding-right: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }
}

/* ===== fix canvases (9 Oct 2026): canvas words that could hardly be read in dark mode. Light mode unchanged. =====
   1. Post-its that are navy in light turn orange in dark (UMA.css .canvas-note, her design), but kept their light words:
      light on orange is about 2.6 : 1. In dark their words are her dark navy (about 5.3 : 1 on the orange). The canvases
      put canvas-note-navy on the navy post-its only (job crafting: every tray post-it; sensory needs and how to work with
      me: the navy groups and her own navy post-its); the teal, blue, green and red post-its keep their light words. */
:root[data-theme="dark"] .canvas-note-navy { --text-on-colour: var(--navy-dark); }
/* 2. Job crafting grid, "Forced performance" and its line: in dark the zone is a light beige tint and her mustard words
      on it are about 2.7 : 1. In dark they take her dark sage green, the nearest deep gold-olive in her palette
      (about 6.2 : 1). The other three zones already pass (4.7 : 1 and up). */
:root[data-theme="dark"] .canvas-quad-forced { --quad-colour: var(--dark-sage-green); }

/* ===== screenings-all (9 Oct 2026): "Just checking in" (CPTSD, and now health) at phone width =====
   At 375 the screen was taller than the window (UMA.css .screening-safeguard-page: min-height 100vh - 114px, padding
   2rem 0 4rem) and the inner column was 61.8% wide, so the page scrolled and the words ran under the back and close
   buttons while the heading scrolled away. Here the screen fits the space below the buttons, the column is full width,
   the heading, the crisis buttons and "I'm safe to continue" stay put, and only the words between them scroll (on a very short
   window the whole screen scrolls, below the buttons, so nothing is ever cut off). */
@media (max-width: 37.5rem) {
  .screening-safeguard-page { min-height: 0; justify-content: flex-start; padding-top: var(--gap-xs); padding-bottom: var(--app-default-top-bottom-margin-sm); overflow-y: auto; }
  .screening-safeguard-inner { max-width: 100%; min-height: 0; max-height: 100%; gap: var(--gap-regular); }
  .screening-safeguard-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}

/* ===== results reason (9 Oct 2026): one short line where the results gate sends her =====
   A results page opened before its screening is finished sends her to that screening's opening screen (or, for the
   brain-body profile, the screenings home) with ?from=results. The screening hooks / screenings home show one line:
   "Finish this screening to see your results." / "Finish a screening to see your results."
   On a screening it also carries the opening screen's own intro text classes (its colour and size); on the screenings
   home it sits under the heading in the sub-heading's colour and size. */
.uma-results-reason { font-weight: var(--font-weight-bold); }
.uma-results-reason-home { color: var(--mid-charcoal); font-size: var(--body-text-sm); line-height: var(--default-line-height-small); margin-top: var(--app-default-top-bottom-margin-xs); max-width: 40ch; }

/* ===== hero cloud test fixes (9 Oct 2026, bugs 3 and 4) =====
   Bug 3: on pause and at the end, "Share this video", the icons and "Watch again" sit a gap above the play mark, never
   behind it. The page script measures the distance from the hero's bottom to the top of the mark when the block shows
   (--hero-end-screen-above-mark); the block's bottom is that plus a gap. Without the measurement it falls back to the
   value above (the mark's size and margin). Position only: the hero's size is not touched.
   Bug 4: while the film plays the words' box lies over the whole film (hero-content-mark-space, inset 0), so it took
   the clicks meant for the browser's control bar. While playing it lets clicks through to the film; the centred pause
   mark takes them again (hero-launch-play-on-film), except while it is hidden (the hidden rule is restated after it so
   a hidden mark still lets clicks through, as in UMA.css). The captions button row has its own pointer-events. */
.hero-end-screen {
  bottom: calc(var(--hero-end-screen-above-mark, calc(var(--button-size-xxl) + var(--app-default-top-bottom-margin-lg))) + var(--gap-md));
}
.hero-content-mark-space { pointer-events: none; }
.hero-launch-play-on-film { pointer-events: auto; }
.circular-play-button-on-dark--hidden { pointer-events: none; }

/* ===== brain-body profile: a stack whose screening is not finished (9 Oct 2026, her ruling) =====
   The stack stays empty under its heading and rule and says "Screening incomplete" in the stack rows' size, in the
   secondary text colour the percentages use (light and dark come from the page's tokens). */
.brain-body-stack-incomplete { font-size: var(--body-text-xs); line-height: var(--default-line-height-small); color: var(--t-text-secondary); margin: 0; }

/* ===== screenings-all (9 Oct 2026, her ruling): SOS just under the close X at phone width =====
   "Screenings at 600px and below: keep the SOS button visible at all times, because someone may need it during a
   screening. Move it from the bottom corner to just under the close X at the top, so it never covers Start, Continue or
   any answer. Above 600px it stays where it is. The Feedback tab overlap is fine, leave it."
   At 375 the chrome's SOS (UMA.css .uma-chrome-sos, fixed bottom right, 50px at phone width) sat over the Start button and
   could sit over answers. On the seven screening pages (page-screening on <html>) at phone width it is fixed just under the
   close X (#exitBtn, .screening-nav-icon-button, 35px). The X is in the page's flow, so its place is added up from the rules
   that put it there: the content wrapper's hairline top border (the chrome's top bar is fixed over it), the card's top
   padding (UMA.css .screening-page-content at 600: 3rem), the progress bar (.5rem), the control bar's top margin
   (.screening-control-bar: 1rem) and top padding (.page-control-bar: 1rem), then the X itself, then a small gap.
   Its right edge is the card's side padding, the same as the X's. ADHD, autism, CPTSD, health at 375x812: X 88.5 to
   123.5px from the top, SOS 131.5 to 181.5px, right edge 32px in (x 293 to 343), above "Q1 of N" and the intro heading.
   Masking, RSD and stimming use .mrs-page-content (this file, phone width: 1rem top, .5rem sides), so the X is 56.5 to
   91.5px and 8px in; SOS 99.5 to 149.5px, 8px in. If that padding changes (bug list: their X sits under the top bar),
   change the second rule with it. Size, colours, z-index (above the screening) and the crisis pane are unchanged; it is
   not hidden anywhere it was shown. Above 600px nothing changes. :where() weighs nothing, so each rule is one class,
   equal to UMA.css's phone rule and after it.
   Replaced (9 Oct 2026, her mobile SOS design): the two phone rules that put the SOS under the X are taken out. At 600
   and below the SOS now sits at the right edge just above the Feedback tab on every page, screenings included (see
   "mobile SOS at the right edge" at the end of this file). */

/* ===== onboarding and PIN pages: one background, no second block (9 Oct 2026, cloud test) =====
   1. Onboarding's own top bar (.uma-head: progress bar, back, section label, Log out) is painted --onb-head-bg. On the
      first screen ("Security setup finished", and the take-you-back screens drawn like it) that was --navy on a
      --navy-60 page, so the bar showed as a separate navy block. On the full-colour screens the bar now takes the
      page's own colour token (--onb-body-bg), so it is the page. Intro and completion were already navy on navy; they
      follow the same token so they cannot drift apart. Question screens already use --t-page-bg for both. */
.onb-screen-type-onboarding-start { --onb-head-bg: var(--onb-body-bg); }
.onb-screen-type-intro { --onb-head-bg: var(--onb-body-bg); }
.onb-screen-type-completion { --onb-head-bg: var(--onb-body-bg); }
/* 2. Security set-up, Set PIN, Reset PIN and the other sign-up and security pages without a footer: the chrome's
      content band (UMA.css .uma-chrome-content-band, --t-band-alt) ends under the form now these pages end after their
      content, and the page below it is --t-page-bg, so the form sat on a box of a second colour. On these pages the
      band has no colour of its own and the whole screen is the page's --t-page-bg, light and dark. :where() weighs
      nothing, as the fix-small rule above. */
:where(.page-auth[data-uma-no-footer]) .uma-chrome-content-band { background: none; }

/* ===== library and marketplace cloud bugs (cloud test list v4, 9 Oct 2026) ===== */
/* Item 1: the definition block (Bibliosmia. on /library, Self-care. on /marketplace) is charcoal type on a photo of
   light paper (UMA.css .uma-bibliosmia-panel), in both themes. Its background shorthand left no colour under the photo,
   so whenever the photo had not loaded (slow or blocked image host) the charcoal type sat on the dark page (1.45:1 in
   dark mode). The paper's own colour token now sits under the photo, as on the paper fact cards (.fact-card--paper):
   --mid-charcoal on --dark-white is 8.7:1 in either theme. Light mode with the photo is unchanged. */
.uma-bibliosmia-panel { background-color: var(--dark-white); }
/* Item 4 (the marketplace wish list's X on the scope bar, white on the navy Library half): now in WISHLIST TABS ONE
   DEFINITION (10 Oct 2026), near the end of this file. */

/* ===== video controls (her design, 9 Oct 2026): the hero's captions and sound buttons, bottom left =====
   The hero script puts the launch film's sound button in the page's corner row (UMA.css .video-controls-row, top right
   by default) with this class, and the captions script adds CC beside it, so the two sit side by side. Here the row
   goes to the bottom left corner of the film, just above the browser's own control bar (on while the film plays), so
   it never covers that bar. The row shows only on hover, a touch or keyboard focus while the film plays (page script);
   the film and the hero are one box while it plays (hero-film-playing), so the corner is the film's corner. */
.hero-film-controls {
  --hero-native-controls-room: 3.5rem;
  top: auto;
  right: auto;
  bottom: calc(var(--hero-native-controls-room) + var(--app-default-top-bottom-margin-lg));
  left: var(--app-default-top-bottom-margin-lg);
  align-items: center;
}

/* ===== check-in layout (9 Oct 2026, "Screening tests across devices bug list v3"): "Just checking in", health and CPTSD =====
   1. 60px shift (health only). UMA.css .screening-page-health .uma-chrome-all-content-wrapper (two classes) keeps the
      sidebar's 60px margin at every width, so it beats UMA.css's phone rule (.uma-chrome-all-content-wrapper, one class,
      margin-left 0 at 600) and the whole health page sat 60px right at 375. The CPTSD page has no such rule. Here the
      wrapper's own --sidebar-width is 0 at phone width, so its margin is 0 and its width 100%; the sidebar is outside
      the wrapper and keeps its own width. Above 600 nothing changes.
   2. Last line cut off. The screen was one fixed window tall with overflow hidden (UMA.css .screening-screen) and centred,
      so anything taller than the space was cut at the top and bottom with no way to reach it. The screen now scrolls;
      the column sits in the middle when it fits (auto margins) and starts at the top when it does not. Bottom padding
      clears the SOS (UMA.css .uma-chrome-sos above 600: 3rem from the bottom, 50px tall) and the phone's home bar.
   3. SOS. At phone width the whole screen scrolls (the earlier phone rule above kept only the words scrolling, which
      cut their last line off). The top room this block kept for the SOS under the X is taken out (her mobile SOS
      design, 9 Oct 2026: the SOS is at the right edge, and hidden on check-in screens anyway); the screen's top padding
      is the 1rem set in the screenings-375 block below. */
.screening-safeguard-page { justify-content: flex-start; overflow-y: auto; padding-bottom: calc(var(--app-default-top-bottom-margin-xxxl) + var(--button-size-lg) + var(--gap-regular) + env(safe-area-inset-bottom, 0rem)); }
.screening-safeguard-inner { margin-top: auto; margin-bottom: auto; }
@media (max-width: 37.5rem) {
  :where(.screening-page-health) .uma-chrome-all-content-wrapper { --sidebar-width: 0rem; }
  .screening-safeguard-page { padding-bottom: calc(var(--app-default-top-bottom-margin-xl) + env(safe-area-inset-bottom, 0rem)); }
  .screening-safeguard-inner { margin-top: 0; max-height: none; flex: none; }
  .screening-safeguard-text { flex: none; overflow-y: visible; }
}

/* ===== screenings-375 (9 Oct 2026, "Screening tests across devices bug list v3" items 3 and 4, v4 item 4, her SOS ruling) =====
   1. Masking, RSD and stimming: back and close buttons under the top bar (v3 item 3). Their card has the extra class
      .mrs-page-content, whose phone rule above (masking, RSD and stimming, 09 Oct) set its top padding to 1rem; ADHD,
      autism, CPTSD and health keep UMA.css's phone padding for .screening-page-content (3rem). So their buttons started
      at 57px, under the chrome's top bar (ends at 61px), and "Q1 of" ran into them. The top padding now matches ADHD
      (3rem), so the buttons sit at 89px. The side padding is unchanged (her ruling: the Feedback tab overlap is fine).
      Her mobile SOS design (9 Oct 2026) took out the SOS under the X here and the room their intro (.mrs-title-inner)
      kept below it, so the intro starts 1rem under the X row again (the phone rule for .mrs-title-inner above).
   2. The coloured screens stopped 60px short of the bottom (v3 item 4, CPTSD section results; every screening at phone
      width). UMA.css body.screening-fixed-height .uma-chrome-all-content-wrapper is the window less the top bar's
      height (60px), but the wrapper starts at the top of the window (the top bar is fixed over it), so the coloured
      panel ended 60px above the bottom and cut off Continue. At phone width the wrapper's own --fixed-header-height is
      0 (the screening inside already sets its own to 0), so it is the full height, and the page is the window's live
      height (dvh), so it reaches the bottom on phones whose toolbars come and go. The results screen already scrolls
      (UMA.css .screening-resultsPage); its words and Continue get bottom room for the phone's home bar, so Continue is
      fully visible or reached by scrolling. The SOS is at the right edge above the Feedback tab, never over Continue.
   3. Her ruling: the SOS hides on the check-in screens only ("Just checking in" on health and CPTSD, "You are not
      alone" on CPTSD), which show their own crisis buttons. The pages put screening-hide-sos on <body> there, but
      UMA.css only hid old SOS classes (.sos-btn, .sos-button); this names the chrome's .uma-chrome-sos. CPTSD sets the
      class on each screen change (on for check-in screens only); health takes it off on "I'm safe to continue" and,
      now, on Back (page script). With the SOS hidden, the room kept for it at the top of "Just checking in" goes; the
      close X is above the screen in the page's flow, so the words stay clear of it. */
:where(.screening-hide-sos) .uma-chrome-sos { display: none; }
@media (max-width: 37.5rem) {
  .mrs-page-content { padding-top: var(--app-default-top-bottom-margin-xxxl); }
  .screening-fixed-height { height: 100dvh; }
  :where(.screening-fixed-height) .uma-chrome-all-content-wrapper { --fixed-header-height: 0rem; }
  :where(.screening-resultsPage) .screening-reg-content { padding-bottom: calc(var(--app-default-top-bottom-margin-sm) + env(safe-area-inset-bottom, 0rem)); }
  .screening-safeguard-page { padding-top: var(--app-default-top-bottom-margin-sm); }
}

/* ===== library and marketplace cloud bugs (cloud test list v8, 9 Oct 2026): wish list and book drawer ===== */
/* Item 3: on /library in dark mode the wish list's "Get 10% off" and "Get VAT back" tags read the catalogue chip tokens
   (UMA.css :root:where(.page-catalogue), navy), which only /marketplace and /discounts turn light for dark mode, so on
   /library they were navy on the navy tile (1:1). The same two tokens, as /marketplace sets them. */
:root[data-theme="dark"]:where(.page-uma-library) { --t-chip-text: var(--bright-white); --t-chip-line: rgba(var(--bright-white-rgb), var(--opacity-moderate)); }
/* Item 7 (second part, the marketplace wish list's X colour on each half): now in WISHLIST TABS ONE DEFINITION
   (10 Oct 2026), near the end of this file. */
/* Item 8: the wish list's product tile also has .product-card, which the catalogue pages (/library, /discounts) draw as
   a fixed 380px column (UMA.css :where(.page-catalogue) .product-card and .card-front). The marketplace undoes that for
   its own wish list; these do the same for the shared one: picture left, words right, full width.
   .uma-wishlist-tile-front is given by /uma-wishlist-saved-items.js. */
.uma-wishlist-tile-product { flex-direction: row; flex: 0 1 auto; width: 100%; min-width: 0; max-width: none; scroll-snap-align: none; }
.uma-wishlist-tile-front { flex: 1 1 0%; width: auto; height: auto; overflow: visible; }

/* ===== screenings full bleed (9 Oct 2026, her words: "the background colour must be full bleed") =====
   All seven screenings, every screen (intro, question, check-in, section results), every width, light and dark.
   Cause: the screen's colour was painted only by the page's own wrapper (UMA.css .screening-page-wrapper, background
   var(--screen-background)), which sits inside the chrome's content slot (UMA.css .uma-chrome-inner-content-wrapper:
   a max-width, 4rem side padding and a 2.5rem top margin), so above 600 the colour was a column the slot's width with
   the chrome's content band (UMA.css .uma-chrome-content-band, --t-band-alt, cream in light) showing either side.
   Below it, the band was the window less the top bar's height (UMA.css body.screening-fixed-height
   .uma-chrome-all-content-wrapper, 100% less 60px) although it starts at the top of the window under the fixed top bar,
   so the last 60px were the body: a separate strip (navy on health, whose body paints the flood colour; cream on the
   others). The screenings-375 block above fixed the height at phone width only.
   Fix: the band, which is the whole area right of the sidebar, takes the current screen's colour from the same token
   the page scripts set on <body> for each screen (--screen-background: the flood colour on intro, check-in and coloured
   results screens, --t-page-bg on question screens, light or dark), with the same fade as the wrapper. Its height is the
   whole window at every width now, so it reaches the bottom. The slot and the screening card are unchanged, so the
   content keeps its width and stays centred, and the screens keep their own inner scrolling; the page does not scroll
   (the screenings keep overflow hidden on the page). */
:where(.page-screening) .uma-chrome-content-band { background: var(--screen-background, var(--t-band-alt)); transition: background var(--transition-card) ease; }
:where(.screening-fixed-height) .uma-chrome-all-content-wrapper { --fixed-header-height: 0rem; }

/* ---------- release build 95 (VAT relief from data, 9 Oct 2026): the discounts page's "Get VAT relief" list is now
   built from marketplace_products by /uma-vat-products.js, each tag a link to that product on the marketplace. The
   tag's own rule turns pointer events off (it was a label); a linked tag can be clicked and keeps the tag's look. ---------- */
.uma-vat-tag-link { pointer-events: auto; cursor: pointer; text-decoration: none; }
.uma-vat-tag-link:focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); }

/* ---------- library "Search results" pill in dark mode (Chrome and account cloud test, 9 Oct 2026). Its own rule (UMA.css:26457)
   painted the words --bright-white, which dark mode makes the same colour as the selected highlight, so the selected pill
   could not be read. It now takes the same selected-pill text token as every other library pill (UMA.css:24849). ---------- */
.uma-library-search-results-tab.selected { color: var(--t-pill-selected-text, var(--white-text-default)); }

/* ===== check-in fits at 375 (9 Oct 2026, her ruling: "I'm safe to continue" fully visible on arrival, without scrolling) =====
   "Just checking in" on health and CPTSD (.screening-safeguard-page). At 600 and below the heading, her words, the three
   crisis buttons and "I'm safe to continue" now fit below the close X and above the home bar at 375x812 and 375x667.
   Sums (375 wide: column 295px = 375 less the card's 2rem sides and the screen's .5rem sides):
     Above the screen: X bottom 123.5px (see the screenings-all block above) + the screen's top padding 1rem (16) = 139.5.
     Before: heading 2rem x 1.3 = 41.6 + its margin 16; words 8 lines x 16px x 1.6 = 204.8 + paragraph margins 17.6 + 24;
       crisis buttons 3 x 52 + 2 x 12 = 180; continue 60; three column gaps 3 x 16 = 48; total 592.
       With 139.5 above and 32 below: 763.5, plus a 34px home bar 797.5. Fitted only at 812 with no room; at 667 it ran
       about 97px (131px with a home bar) past the bottom, so "I'm safe to continue" was off screen.
     After: heading 1.7rem x 1.3 = 35.4, no margin; words .9rem x 1.5 = 21.6 a line, 8 lines (about 39 characters a line
       at 295px) = 172.8 + 8 between paragraphs = 180.8; crisis buttons 3 x 40 + 2 x 8 = 136; continue 50; three gaps
       3 x 9.6 = 28.8; total 431.
       Page: 139.5 + 431 + 16 below = 586.5, plus the home bar (safe area) 620.5.
       375x812: 225.5px spare (191.5 with a home bar). 375x667: 80.5px spare (46.5 with a home bar). If the words wrap to
       10 lines (a wider face), add 43.2: still fits at 667 (37.3 spare, 3.3 with a home bar).
   The screen still scrolls (check-in layout block above) as a fallback only, for windows shorter than 667 or very large
   text. Her words are unchanged. Colours (light and dark) are unchanged. Above 600 nothing changes, so 1440 is as before.
   "You are not alone" (CPTSD, .screening-checkinPage) is not changed: it has the SHOUT picture (a full-width square at
   phone width) and about six times the words, so it cannot fit at 375 on arrival and keeps scrolling. */
@media (max-width: 37.5rem) {
  .screening-safeguard-page { padding-bottom: calc(var(--app-default-top-bottom-margin-sm) + env(safe-area-inset-bottom, 0rem)); }
  .screening-safeguard-inner { gap: var(--gap-sm); }
  :where(.screening-safeguard-inner) .screening-page-heading-h1 { font-size: var(--heading-size-md); margin-bottom: 0; }
  :where(.screening-safeguard-inner) .screening-intro-para-text { font-size: var(--body-text-xs); line-height: var(--default-line-height-small); margin-bottom: var(--gap-xs); }
  :where(.screening-safeguard-inner) .screening-intro-para-text:last-of-type { margin-bottom: 0; }
  :where(.screening-safeguard-inner) .screening-buttons { gap: var(--gap-xs); }
  :where(.screening-safeguard-inner) .screening-secondary-btn { height: var(--button-size-md); padding-top: 0; padding-bottom: 0; }
  :where(.screening-safeguard-inner) .screening-slide-btn { height: var(--button-size-md); padding-top: 0; padding-bottom: 0; }
  :where(.screening-safeguard-inner) .screening-slide-thumb { width: var(--button-size-sm); height: var(--button-size-sm); }
  :where(.screening-safeguard-inner) .screening-continue-button { height: var(--button-size-lg); }
}

/* Retake warning buttons gap (build 95, 9 Oct 2026, screenings bug list v4 item 5).
   On any completed screening, "You have already completed this screening" shows "Wipe my answers and start again" and
   "Keep my answers" in .screening-title-cta, which had no gap, so the two buttons touched (seen at 1440 dark).
   uma-screening-hooks.js now adds screening-retake-cta to that row (the retake warning only; the title pages' own
   Start rows are unchanged). The gap is the standard button-row gap and applies both ways, so it holds at every width,
   stacked or wrapped. Colours unchanged in light and dark. */
.screening-retake-cta { gap: var(--gap-regular); }

/* ===== hero video controls re-test fixes (9 Oct 2026, V1 and V3) =====
   V1. While the film plays its words' box (hero-content-mark-space, inset 0) lets clicks through (bug 4 fix above), but the
   film sits inside that box and inherited its pointer-events: none, so the pointer never reached it: Chrome never drew its
   own control bar on rollover and its timeline could not be clicked. The film takes the pointer itself again. Nothing else
   in the box takes it while the film plays: the words are hidden, the end screen and Uma's sound and CC row are off until
   shown (UMA.css), the hidden pause mark lets clicks through, and the box's kept place (::after) inherits none. A click on
   the film itself (not on the bar or the pause mark) does what the browser does with its own controls (Chrome on a computer
   pauses or plays; on a phone a tap shows the bar); the page adds no click of its own on the film, and the pause event
   brings the play mark, the words' place and the end screen back as before.
   V3. Once the film has played (the script adds hero-film-whole to the hero then and keeps it), on pause and at the end
   the browser's bar stays on the film. At 900 and under the big play mark ended 3rem above the film's bottom (the
   section's bottom padding), inside the bar's band (about 3.5rem, as in hero-film-controls), so the mark is lifted to sit a
   gap above the band. Only the mark moves (relative top), so the hero keeps its height; the end screen script measures
   the mark's offsetTop, which includes the lift, so "Share this video" and "Watch again" stay a gap above it. Before
   the first play there is no bar and no lift. While playing the mark is centred on the film (its top is restated). */
.hero-launch-video { pointer-events: auto; }
.hero-launch-play { top: calc(-1 * var(--hero-mark-lift, 0rem)); }
.hero-launch-play-on-film { top: 50%; }
@media (max-width: 56.25rem) {
  .hero-film-whole { --hero-mark-lift: calc(3.5rem + var(--gap-md) - var(--app-default-top-bottom-margin-xxxl)); }
}

/* ===== check-in at 375, round 2 (9 Oct 2026, her answers) =====
   1. Crisis buttons: "keep them 40px ... make the tap area bigger around the button instead, without changing how it
      looks." At 600 and below the crisis buttons on "Just checking in" (health and CPTSD) and "You are not alone" (CPTSD)
      are 40px tall with .5rem between them. Each one (Text SHOUT, Call 116-123, and "Slide to call NHS 111" with its
      phone circle, which is one link) gets an invisible layer reaching half the gap above and below it: 40 + 4 + 4 = 48px
      tall and the button's full width (at least 260px), so neighbouring tap areas meet in the middle of the gap and never
      overlap. No background, border or outline, so the look is unchanged; the layer is part of the link, so a tap on it
      is a tap on the link. The slide control has no drag script (it is a tel: link), so nothing is hijacked. Above 600
      the buttons are 52px, so nothing changes there.
   2. "You are not alone" (CPTSD, after section 1): "I'm safe to continue" shows on arrival at 375x812. Her words are
      unchanged. The SHOUT picture is a 50px square beside the heading (it was a full-width 295px square above it); the
      words are .8rem; the crisis buttons and "I'm safe to continue" are as on "Just checking in". The column still
      scrolls as a fallback (shorter windows, very large text).
      Sums (375 wide, column 295px as in the round 1 block; screen starts under the X at 123.5px):
        Before: picture 295; heading 41.6 + 16; words 22 lines x 25.6 = 563.2 + paragraph margins about 100; h2 1.7rem
          x 1.3 = 35.4 + 16; crisis 3 x 52 + 2 x 16 = 188; gap 12; continue 60; bottom 32. Total about 1360 against
          688.5 available: "I'm safe to continue" was about 670px below the bottom of the window.
        After: heading row 50 (picture 50, heading 1.7rem x 1.3 = 35.4 centred beside it) + .5rem 8; words .8rem x 1.5 =
          19.2 a line, 17 lines at 295px (estimated from Inter widths; 19 allowed for) = 326.4 (364.8); h2 1.12rem x 1.3 =
          23.3 + .2rem 3.2; paragraph gaps 5 x 6.4 = 32; crisis 3 x 40 + 2 x 8 = 136; gap 8; continue 50; bottom 8.
          Total 644.9 (683.3 at 19 lines).
        375x812: 688.5 available, 43.6 spare (5.2 at 19 lines); with a 34px home bar 9.6 spare (bottom room grows by
          the safe area). 375x667: 543.5 available, so it scrolls; on arrival the heading, picture and all her words
          show, the crisis buttons start 442.9px into the screen (Text SHOUT and Call 116-123 show in full) and "I'm safe
          to continue" ends 93.4px below the bottom, reached by scrolling. If the heading wraps to two lines (a wider fallback face) add 20.7.
      The picture is placed with position absolute in the scrolling column (it scrolls with the words) and the heading
      keeps room for it on the right. .screening-checkin-visual is given by uma-cptsd-screening.html (mkCheckin); it is
      named with .screening-reg-visual to weigh the same as UMA.css .screening-regulationPage .screening-reg-visual and
      win by coming later. Colours, light and dark, are unchanged. Above 600 nothing changes, so 1440 is as before.
   3. Round 3 (9 Oct 2026, her ruling: "choose what keeps it readable and gets "I'm safe to continue" on screen at 375").
      .8rem (12.8px) was too small to read, so "You are not alone" words are .9rem (14.4px) at line height 1.4; the room
      comes from the layout, not the type. Her words are unchanged.
      - Column 311px, not 295: at 600 and below the screen's own .5rem insets each side are 0 on this screen only, so the
        words run between the card's 2rem sides (375 - 2 x 32), the same edges as the back arrow and the X. The scroller
        (.screening-reg-split) clipped at the column edge before too, so nothing that showed is cut now.
      - Heading row 40px: the SHOUT picture is 40px (was 50) under the X's right edge; the heading stays 1.7rem (35.4px
        tall, 227px wide, fits beside the picture's 49.6px of room in 261px); .5rem below it.
      - "Feeling trapped or suicidal?" is body size (.9rem) bold, line height 1.4, .2rem below.
      - Paragraph gaps .5rem. Crisis buttons stay 40px stacked with .5rem between (48px tap areas meeting mid-gap):
        side by side does not fit, as "Call 116-123 to talk to a Samaritan" is 228px of text at .9rem plus 48px padding
        against a 151.5px half column, and the labels are hers.
      - "I'm safe to continue" 48px (40 + .5rem); the slide button's tap area ends 4px into the 8px gap above it, so no
        overlap. Screen top padding under the X was already 0 (UMA.css .screening-pause-screen), nothing left to trim.
      - line height 1.4 is UMA.css's --default-line-height-compact, which :root does not give screening pages, so it is
        set on this screen.
      Sums (375 wide; X bottom re-derived: hairline .5 + card top 3rem 48 + progress .5rem 8 + control bar margin 1rem 16
      + its padding 1rem 16 + X 35 = 123.5; the control bar's margin-bottom token is undefined, so 0; the screen's top
      padding 0; available 812 - 123.5 = 688.5, 667 - 123.5 = 543.5). Lines measured from Inter 400 advance widths at
      14.4px in 311px: 4 + 4 + 4 + 3 + 3 = 18 (18 holds down to a 300px column; at 295 it would be 20):
        heading row 40 + 8; P1 4 x 20.16 = 80.64 + 8; h2 20.16 + 3.2; P2 80.64 + 8; P3 80.64 + 8; P4 60.48 + 8;
        P5 60.48 + 8; crisis 3 x 40 + 2 x 8 = 136; gap 8; continue 48; bottom 8. Total 674.24.
        375x812: "I'm safe to continue" 618.2 to 666.2 into the screen, ends 789.7px from the top, 22.3 above the bottom
          of the window (14.3 spare overall). No viewport-fit=cover on the page, so the home bar adds nothing.
        375x667: scrolls; on arrival the heading, picture, all her words and Text SHOUT (474.2 to 514.2) show in full;
          Call 116-123 is cut 18.7px; "I'm safe to continue" ends 122.7px below, reached by scrolling.
        If a wider fallback face wraps to 20 lines, add 40.3: at 812 "I'm safe to continue" is then 18px short (30 of
        its 48px show). Above 600 nothing changes, so 1440 is as before. */
@media (max-width: 37.5rem) {
  :where(.screening-safeguard-inner, .screening-checkinPage) .screening-secondary-btn { position: relative; }
  :where(.screening-safeguard-inner, .screening-checkinPage) .screening-slide-btn { position: relative; }
  :where(.screening-safeguard-inner, .screening-checkinPage) .screening-secondary-btn::after { content: ""; position: absolute; top: calc(var(--gap-xs) / -2); bottom: calc(var(--gap-xs) / -2); left: 0; right: 0; }
  :where(.screening-safeguard-inner, .screening-checkinPage) .screening-slide-btn::after { content: ""; position: absolute; top: calc(var(--gap-xs) / -2); bottom: calc(var(--gap-xs) / -2); left: 0; right: 0; }

  .screening-checkinPage { --default-line-height-compact: 1.4; padding-left: 0; padding-right: 0; }
  :where(.screening-checkinPage) .screening-reg-split { position: relative; }
  .screening-reg-visual.screening-checkin-visual { position: absolute; top: 0; right: 0; width: var(--button-size-md); height: var(--button-size-md); aspect-ratio: auto; }
  :where(.screening-checkinPage) .screening-page-heading-h1 { display: flex; align-items: center; min-height: var(--button-size-md); padding-right: calc(var(--button-size-md) + var(--gap-sm)); font-size: var(--heading-size-md); margin-bottom: var(--gap-xs); }
  :where(.screening-checkinPage) .screening-intro-para-text { font-size: var(--body-text-xs); line-height: var(--default-line-height-compact); margin-bottom: var(--gap-xs); }
  :where(.screening-checkinPage) .screening-intro-para-text:last-of-type { margin-bottom: var(--gap-xs); }
  :where(.screening-checkinPage) .screening-sos-heading-h2 { font-size: var(--body-text-xs); font-weight: var(--font-weight-bold); line-height: var(--default-line-height-compact); margin-bottom: var(--app-default-top-bottom-margin-xxxxs); }
  :where(.screening-checkinPage) .screening-buttons { gap: var(--gap-xs); }
  :where(.screening-checkinPage) .screening-checkin-crisis-btns { gap: var(--gap-xs); }
  :where(.screening-checkinPage) .screening-secondary-btn { height: var(--button-size-md); padding-top: 0; padding-bottom: 0; }
  :where(.screening-checkinPage) .screening-slide-btn { height: var(--button-size-md); padding-top: 0; padding-bottom: 0; }
  :where(.screening-checkinPage) .screening-slide-thumb { width: var(--button-size-sm); height: var(--button-size-sm); }
  :where(.screening-checkinPage) .screening-continue-button { height: calc(var(--button-size-md) + var(--gap-xs)); }
  :where(.screening-checkinPage) .pseudo-bottom-margin { height: calc(var(--gap-xs) + env(safe-area-inset-bottom, 0rem)); }
}

/* ---------- screenings full bleed, part 2 (9 Oct 2026, her words: "no cream anywhere"). The page body behind the chrome
   still painted the light page colour on six of the seven screenings (only health's body takes the screen colour, UMA.css
   28044), so anywhere the band does not reach (the strip under the frosted top bar, the bottom edge while the band settles,
   overscroll) could show cream. The body now takes the current screen's colour from the same token as the band. ---------- */
.screening-fixed-height { background-color: var(--screen-background, var(--t-page-bg)); transition: background-color var(--transition-card) ease; }

/* ===== first tap on a playing film (her ruling, 9 Oct 2026: "Make the first tap on a playing video only show the controls, never pause.") =====
   The hero and the Leanne, Catherine and Laura cards. The page script (umaFilmTapCatcher, index.html) lays a clear layer
   over each film. While the film plays and Uma's controls are hidden the layer is armed (film-tap-catcher--armed) and, on
   a touch screen only, takes the tap: it sits above the film, the browser's own bar, Uma's pause mark (z-index 3), its
   sound and captions row (4) and the card's social icons (5), so the first tap reaches none of them and only shows the
   controls. A moment after that tap it steps aside (pointer-events none) so the next tap reaches the pause mark, the row
   and the browser's bar; it is armed again when the controls hide. With a fine pointer only (a computer at 1440) it never
   takes a pointer, so hover, clicks on the browser's bar and keyboard focus are as before. It has no colour of its own. */
:root { --z-film-tap-catcher: 6; }
.film-tap-catcher {
  position: absolute;
  inset: 0;
  z-index: var(--z-film-tap-catcher);
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
@media (any-pointer: coarse) {
  .film-tap-catcher--armed { pointer-events: auto; }
}

/* ===== canvas fronts: the page preview is a sheet of paper, square corners (9 Oct 2026, cloud test) =====
   /job-crafting-canvas-front, /sensory-needs-canvas-front, /how-to-work-with-me-canvas-front. UMA.css
   .canvas-front-preview-image rounds the A4 preview with --app-default-radius-lg. A sheet of paper has square
   corners, so the radius comes off; its paper shadow (--canvas-sheet-shadow) stays. Same single class, later file. */
.canvas-front-preview-image { border-radius: 0; }

/* ===== stimming success screen (9 Oct 2026, her words: space between the heading and "What's next?", and between
   "Autism" or "ADHD" and its arrow; bug list v6: close X partly under the top bar at 375) =====
   Built by uma-screening-hooks.js showAddedToReports.
   1. "What's next?" (.uma-stimming-added-next) sat 1rem under the heading (the heading's own bottom margin). It now has
      a 2rem top margin, which takes the place of that 1rem (the two margins meet), so the gap is 2rem at every width.
   2. The buttons are .btn (UMA.css: inline-flex, no gap), so the space between the name and the arrow was dropped
      (a flex row draws no plain space between items). They get the gap the profile pages' explore buttons use
      (--gap-xs), as their text and arrow are laid out the same way. The arrow is aria-hidden in the script.
   3. The close X: the screen's heading was focused with a plain focus(), which scrolled the page (body overflow hidden)
      so the whole card, X included, slid up under the top bar at 375. The script now focuses without scrolling, as the
      stimming page's own screens do. The words take .mrs-title-inner, so at 375 they start 1rem under the X row (the SOS is at the right edge now). */
.uma-stimming-added-next { margin-top: var(--app-default-top-bottom-margin-xl); }
.uma-stimming-added-btn { gap: var(--gap-xs); }

/* ===== her design put back (9 Oct 2026): BETA tag, Feedback tab, new-service line =====
   Her words: "The BETA tag and the Feedback tab: the same yellow, with white text, in light mode." In her design (UMA.css
   .uma-chrome-beta-tag and .uma-feedback-tab) both are her --yellow with --chrome-beta-text / --chrome-feedback-tab-text,
   which are --white-text-default in light and --navy in dark. fix-small (070eed68, line 937 above) made the BETA words
   navy; this puts her token back, so light is white and dark stays navy. The Feedback tab was not changed and needs
   nothing. Over a hero BETA keeps its white tag with navy words (UMA.css .uma-chrome-beta-tag-dark), restated after.
   The new-service line (.beta-text, back in the top bar's markup) reads in the page's text colour (charcoal in light,
   white in dark) and white over a hero picture. UMA.css still hides it below 600 and on the website chrome.
   9 Oct 2026, her words: the line reads "Uma is a new service in testing - please report any bugs" and stays visible
   above the hero video while the bar is see-through (homepage, library, marketplace), white there; after scrolling,
   when the bar frosts, it is in the page text colour. */
.uma-chrome-beta-tag { color: var(--chrome-beta-text); }
.uma-chrome-beta-tag-dark { color: var(--navy); }
.beta-text { color: var(--t-page-text); }
.uma-chrome-beta-text-on-hero { color: var(--bright-white); }

/* ===== top bar and sidebar circles: heart, bell and power like the profile circle (9 Oct 2026) =====
   Her words: the heart (wish list) icon is too big, make it the same size as the other top bar icons; the heart, bell
   and power circles and icons use the same colour treatment as the profile circle.
   1. Size. Top bar (phones): the heart now takes the bell's glyph class (uma-chrome-header-icon-glyph-small, in
      uma-chrome.js MARKUP), so nothing is needed here. Sidebar (web app, above 600): the heart had its own size
      (UMA.css .uma-chrome-sidebar-circle-heart, --button-icon-xxl); it now takes the size every other sidebar icon has.
   2. Colour, top bar. The profile letter (UMA.css .uma-chrome-header-profile) is a navy circle with white text in light
      and dark mode, navy-dark on hover, and the same over a hero. The heart, bell and power (.uma-chrome-header-icon)
      take exactly that: the same tokens. Hover is already navy-dark with white (UMA.css .uma-chrome-header-icon:hover).
      This also replaces section 5 of the NO NAVY HEARTS block above for the top bar heart (charcoal or page text),
      as the heart now sits on the navy circle.
   3. Colour, sidebar. The profile letter (UMA.css .uma-chrome-sidebar-initial) is a white circle with a navy letter.
      The heart, bell and power circles (power has the new modifier class uma-chrome-sidebar-circle-power in the
      MARKUP) take the same tokens. Hover keeps UMA.css's near-white circle, navy icon and small scale.
   The mode (sun and moon) circle is not one of the three and is unchanged. The badges keep their tomato. */
.uma-chrome-header-icon { background: var(--navy); color: var(--bright-white); }
.uma-chrome-top-bar-heart { color: var(--bright-white); }
.uma-chrome-sidebar-circle-heart { font-size: var(--chrome-sidebar-icon-size); background: var(--bright-white); color: var(--navy); }
.uma-chrome-sidebar-circle-bell { background: var(--bright-white); color: var(--navy); }
.uma-chrome-sidebar-circle-power { background: var(--bright-white); color: var(--navy); }

/* ===== RESULTS PAGE DISCLAIMERS (9 Oct 2026, her words) =====
   The results, profile and scoring pages have no footer (data-uma-no-footer), so the footer's three disclaimers
   (childhood evidence, "Please consult a medical professional", Medicine safety) show inside the page, under the
   results, word for word as in the shared footer. Markup: section.uma-results-disclaimer-section, last child of
   <main> on the 11 results pages. Not on the self-report previews. Flat classes, so the profile pages' scoped
   footer rules do not touch it. Same box as the footer's (UMA.css .footer-text-content and
   .content-box-stroked-mushroom, plus the L117 edge token --chrome-footer-edge above): hairline edge, mushroom in
   light mode, the chrome's dark edge in dark mode; the text takes the page's own text colour. No new tokens. */
.uma-results-disclaimer-section {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--max-body-wrapper-width);
  margin-left: auto;
  margin-right: auto;
  padding: var(--app-default-top-bottom-margin-xxxl) var(--default-left-right-desk-body-padding) var(--app-default-top-bottom-margin-xxxxl);
}
.uma-results-disclaimer {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--app-default-top-bottom-margin-xl);
  border: 0.5px solid var(--chrome-footer-edge);
  border-radius: var(--app-default-radius-md);
  background-color: transparent;
  color: inherit;
  text-align: left;
}
.uma-results-disclaimer-text {
  margin: 0 0 var(--app-default-top-bottom-margin-sm);
  padding: 0;
  line-height: var(--default-line-height-small);
  color: inherit;
}
.uma-results-disclaimer-text:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .uma-results-disclaimer-section {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }
  .uma-results-disclaimer { padding: var(--app-default-top-bottom-margin-lg); }
}

/* ---------- Profile result cards never clip their words (9 Oct 2026, cloud retest bug 2: on /autism-profile at 375 the
   "High social interaction and communication differences" card cut its last line by 3px). Cause: UMA.css 5425 and 4845
   give .donut-card a fixed aspect-ratio 9 / 16 with overflow hidden, and 5449 and 4869 let .donut-card-panel shrink to
   min-height 0, so a long description ran past the bottom padding and out of the card. Cards on all five profiles
   (ADHD, autism, CPTSD, masking, RSD) now keep the 9 / 16 shape as their smallest size and grow when the words need
   more room. The panel keeps its full padding below the text. Cards in a row stretch to the tallest, so they line up. */
.donut-card { min-height: min-content; }
.donut-card-panel { min-height: auto; padding-bottom: var(--default-card-left-right-padding); }

/* ---------- testing line for signed-out visitors (9 Oct 2026, her ruling): "signed-out visitors see the testing line
   too, at 1440, above the hero on the homepage, workplace adjustments, library and marketplace. Phones stay as UMA.css
   has it." UMA.css 29398 hid .beta-text on the website chrome; above 600 it now shows there too (white over a hero, as
   the chrome already toggles uma-chrome-beta-text-on-hero for visitors). UMA.css 14356 still hides it at 600 and below. ---------- */
@media (min-width: 37.5625rem) {
  .beta-text { display: block; }
}

/* ===== HEALTH AND TRAUMA HISTORY: PAGE BOTTOM (cloud no-footer re-test 9 Oct 2026, bugs 1 and 3) =====
   Cause, bug 1 (1440): the cards band (UMA.css .scroll-stop-section, min-height 200vh, no bottom padding) ends
   with the sticky cards box, and the arrows' bottom margin (UMA.css .health-history-carousel-nav and
   .trauma-history-carousel-nav, --app-default-top-bottom-margin-xl) collapsed out through the box and the band, so
   at the end of the band the arrow circles sat flush on its bottom edge and were cut at the screen's edge.
   A bottom padding on the band stops the collapse and keeps the margin plus this padding below the circles.
   Cause, bug 3 (375): the band is --t-band, but what follows it is not: the chrome's inner wrapper has a phone foot
   padding (UMA.css .uma-chrome-content-inner, 600px and below, --app-default-top-bottom-margin-xxxl) over the
   chrome's --t-band-alt content band, and the results disclaimers (RESULTS PAGE DISCLAIMERS above) sit on <main>
   (health: .page-bg-new-white, --t-band-alt; trauma: the band shows through). So the page ended in a second shade.
   On these two pages the disclaimer section runs full width in the cards band's own --t-band (its box keeps the
   centred column through its side padding, the same sum the arrows use: UMA.css .health-history-carousel-nav at
   wide screens), its top gap is the band padding above, and the chrome's phone foot padding is dropped, as the
   disclaimer section's own bottom padding (--app-default-top-bottom-margin-xxxxl) already gives that room.
   The heroes keep their --t-band-alt. :where() weighs nothing, so each rule is a single class. */
:where(.page-health-history, .page-trauma-history) .scroll-stop-section {
  padding-bottom: var(--app-default-top-bottom-margin-xl);
}
:where(.page-health-history, .page-trauma-history) .uma-results-disclaimer-section {
  max-width: none;
  background: var(--t-band);
  padding-top: 0;
  padding-left: max(var(--default-left-right-desk-body-padding), calc(((100% - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding)));
  padding-right: max(var(--default-left-right-desk-body-padding), calc(((100% - var(--max-body-wrapper-width)) / 2) + var(--default-left-right-desk-body-padding)));
}
:where(.page-health-history, .page-trauma-history) .uma-chrome-content-inner {
  padding-bottom: 0;
}
@media (max-width: 600px) {
  :where(.page-health-history, .page-trauma-history) .uma-results-disclaimer-section {
    padding-left: var(--default-left-right-mob-body-padding);
    padding-right: var(--default-left-right-mob-body-padding);
  }
}

/* ===== top bar icons, phones: heart, bell and power as plain icons, the circle only while touched (9 Oct 2026) =====
   Her words: the heart, bell and power icons show as icons only, with no circle, so they draw less attention. The
   circle appears behind an icon only while it is being touched. The profile initial keeps its circle as it is.
   This replaces the top bar half of the "heart, bell and power like the profile circle" block above (its two
   .uma-chrome-header-icon and .uma-chrome-top-bar-heart lines). Its sidebar lines (1440) are not touched.
   1. Ink. The bar sets --chrome-top-icon-ink: the page text colour (the menu button's colour, UMA.css
      .uma-chrome-hamburger: charcoal in light mode, light in dark mode), and white while the bar is see-through over
      a hero (uma-chrome-main-header-over-hero, as the menu button's uma-chrome-hamburger-over-hero).
   2. No circle: transparent background, no border, no shadow. Size, tap area (uma-chrome-header-hit) and the tomato
      badge positions are unchanged (nothing here moves or sizes them).
   3. While pressed (:active) or focused from the keyboard (:focus-visible): the profile circle's navy with a white
      icon. UMA.css's hover circle (navy-dark) would stay stuck after a tap on a phone, so hover is plain here and the
      hover circle comes back only for a real mouse (@media (hover: hover)).
   The header icons only show at 600 and below (UMA.css .uma-chrome-header-icons). */
.uma-chrome-top-bar { --chrome-top-icon-ink: var(--t-page-text); }
.uma-chrome-main-header-over-hero { --chrome-top-icon-ink: var(--bright-white); }
.uma-chrome-header-icon { background: transparent; color: var(--chrome-top-icon-ink); border: none; box-shadow: none; }
.uma-chrome-top-bar-heart { color: var(--chrome-top-icon-ink); }
.uma-chrome-header-icon:hover { background: transparent; color: var(--chrome-top-icon-ink); }
@media (hover: hover) {
  .uma-chrome-header-icon:hover { background: var(--navy-dark); color: var(--bright-white); }
}
.uma-chrome-header-icon:active { background: var(--navy); color: var(--bright-white); }
.uma-chrome-header-icon:focus-visible { background: var(--navy); color: var(--bright-white); }

/* ===== mobile SOS at the right edge (9 Oct 2026, her design; matched to the Feedback tab 9 Oct 2026) =====
   Her words: "Mobile (600px and below): move the SOS button to the right edge, directly above the Feedback tab, tucked
   close to the edge so it never sits over page content. Do this on every page, including the screenings (replacing the
   "under the close X" position). Keep its tap area at least 44px. Check at 375, light and dark."
   Then: "the SOS tab is for mobile only, at 600px and below. Above 600px, SOS stays the round button where it was.
   Below 600px, the tab matches the Feedback tab exactly: same width, same shape, same animation."
   Every page at 600 and below, screenings included (the "under the close X" phone rules in the screenings-all and
   screenings-375 blocks above are taken out). Everything here is inside the 37.5rem (600px) query, so above 600 the SOS
   is UMA.css's round button (.uma-chrome-sos, 3rem up and 2rem in at 1440) with its scale-up on hover, as before.
   Box: the Feedback tab (UMA.css .uma-feedback-tab) is a plain button with no set width: padding --chrome-feedback-tab-pad-y
   (1.25rem) by --chrome-feedback-tab-pad-x (0.5rem), --button-font-size bold, --chrome-tab-letter-spacing, the page's font
   (inherited) at the browser's normal line height, label turned with writing-mode vertical-rl. Its width is 2 x pad-x plus
   one line of that text (about 35px at 1rem in Inter). The SOS takes the same padding, font size, weight, letter spacing,
   font and line height, and drops UMA.css's fixed 50px height, square ratio and condensed font, so its width is the same
   width by the same sum, not a copied number. Only its length differs ("SOS" is shorter than "Feedback").
   Shape: right 0, the tab's radius on the left corners only (--app-default-radius-md, right corners square), no border,
   the tab's shadow (--chrome-tab-shadow). Colours stay the SOS's (--tomato, --mid-white).
   Animation: the Feedback tab has no keyframes and no script class; it moves by transition only: background and padding
   over --transition-base with --button-transition-ease, and on hover padding-right grows to --chrome-feedback-tab-pad-hover
   (0.75rem), so it slides out from the edge by 4px. The SOS takes the same transition and the same hover, and loses its
   round-button scale-up here. Under reduced motion both use --chrome-reduced, as UMA.css does for the tab.
   Place: the Feedback tab is centred on the window (top 50%, translateY(-50%)); its length is 2 x pad-y plus the word
   "Feedback" (about 5em at --button-font-size, bold; 5.5em is allowed). So its top edge is at most 50% less half of that,
   and the SOS's bottom sits --gap-xs above it: bottom = 50% + pad-y + 2.75 x button-font-size + gap-xs (72px above the
   middle at 1rem), so the two never overlap. The SOS is anchored by its bottom, so its own length does not move the gap.
   Tap area: an invisible ::after layer the SOS's full length and --touch-target-min (44px) wide, from the right edge,
   makes the tap area 44px wide; the visible tab is about 35px, inside the 2rem phone gutter.
   The SOS stays hidden on the check-in screens (screening-hide-sos, screenings-375 block). Single classes, after
   UMA.css's phone rule, so they win by order. */
@media (max-width: 37.5rem) {
  .uma-chrome-sos {
    --uma-sos-edge-label-room: calc(var(--button-font-size) * 2.75);
    display: inline-block;
    top: auto;
    right: 0;
    bottom: calc(50% + var(--chrome-feedback-tab-pad-y) + var(--uma-sos-edge-label-room) + var(--gap-xs));
    width: auto;
    height: auto;
    aspect-ratio: auto;
    padding: var(--chrome-feedback-tab-pad-y) var(--chrome-feedback-tab-pad-x);
    border: none;
    border-radius: var(--app-default-radius-md) 0 0 var(--app-default-radius-md);
    box-shadow: var(--chrome-tab-shadow);
    font-family: inherit;
    font-size: var(--button-font-size);
    font-weight: var(--font-weight-bold);
    line-height: normal;
    letter-spacing: var(--chrome-tab-letter-spacing);
    writing-mode: vertical-rl;
    transform: none;
    transform-origin: center;
    transition: background var(--transition-base) var(--button-transition-ease), padding var(--transition-base) var(--button-transition-ease);
  }
  .uma-chrome-sos:hover { transform: none; padding-right: var(--chrome-feedback-tab-pad-hover); }
  .uma-chrome-sos::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: var(--touch-target-min); }
}
@media (max-width: 37.5rem) and (prefers-reduced-motion: reduce) {
  .uma-chrome-sos { transition-duration: var(--chrome-reduced); }
}

/* ---------- website chrome (signed-out visitors), phone header (9 Oct 2026, her ruling): the favourites heart shows in
   the header with the same mobile treatment as the members' icons: icon only, no circle, the circle only while touched
   (the "mobile top bar icons" block above already styles every .uma-chrome-header-icon this way, with the straight
   heart and the 44px tap layer of .uma-chrome-header-hit). UMA.css 29403 hid the heart on website pages at 600 and
   below; it shows again there. The bell, Log out and profile letter stay off for a visitor (uma-chrome.js ACCOUNT). ---------- */
@media (max-width: 37.5rem) {
  .uma-chrome-top-bar-heart { display: flex; }
}

/* ---------- website chrome (signed-out visitors), phone header: the mode button (9 Oct 2026, her design) ----------
   Her words: on phones (600px and below) the sidebar's two controls, the mode button (sun/moon) and the wish list heart,
   must still be reachable, so they go in the header on the right as plain icons in the new style (icon only, circle only
   while touched, tap area at least 44px). Log in and Try Uma stay at the foot of the menu flyout.
   The button (.uma-chrome-header-mode, uma-chrome.js MARKUP) sits before the heart, as in her website sidebar (mode, then
   heart). It is a .uma-chrome-header-icon with .uma-chrome-header-hit, so the "mobile top bar icons" block above gives it
   the ink (white over a hero), no circle, the navy circle only while pressed and the 44px tap layer; the header icons
   only show at 600 and below (UMA.css .uma-chrome-header-icons). A signed-in member never sees it (uma-chrome.js gives it
   uma-chrome-part-off). The mode script fills its glyph holder with the sidebar's icon (sun, sunset or the moon SVG,
   which is 1em, so the holder's --button-icon-lg sizes all three alike); this centres it.
   At 375: bar padding 2 x gap-md, menu button and 35px logo on the left; on the right two 35px icons with gap-lg between,
   about 90px, so the bar does not overflow. ---------- */
.uma-chrome-header-mode-glyph { display: flex; align-items: center; justify-content: center; }

/* ===== BETA over a hero, BETA and Feedback in dark mode, working-with-audhd hero under the top bar (9 Oct 2026) =====
   Her words: "Light mode: yellow with white text. Dark mode: yellow with navy text. Undo the change (a31b644d) that made
   it white in dark mode. Over a video or hero image: a white BETA tag with clear (see-through) text. Apply the same light
   and dark rule to the Feedback tab."
   1. Dark mode: the a31b644d rule (a :root[data-theme="dark"] block that set --chrome-beta-text and
      --chrome-feedback-tab-text to white) is taken out of this file. UMA.css's own tokens apply again: white words in
      light (UMA.css 14186, 14188), navy in dark (UMA.css 14239, 14241; uma-learn-media.css 234 and 235 say the same).
   2. Over a hero the chrome gives the tag uma-chrome-beta-tag-dark (uma-chrome.js, PAGE KINDS part 3 and the round 3
      first-paint block). The tag is now a white tag with the letters cut out, so the video or picture shows through
      them. The top bar is position fixed with a z-index and a backdrop-filter, which makes it its own isolated group,
      so mix-blend-mode on the tag would only blend with the bar, never the video. The cut-out is an inline SVG inside
      the tag instead (uma-chrome.js MARKUP): a white rect masked by an SVG mask that is white with the word BETA in
      black, so the rect is painted everywhere except the letters, which are fully transparent. SVG masks work over
      anything behind, including a playing <video>, in Chrome and Safari. The SVG text takes the tag's own font, size
      and weight (font: inherit), and the tag's own word (uma-chrome-beta-word) stays in place with clear colour, so the
      tag keeps its size, and screen readers still read BETA (the SVG is aria-hidden). The tag clips the SVG to its
      rounded corners. Away from a hero, and after scrolling once the bar frosts (the chrome takes the class off), the
      SVG is hidden and the tag is her yellow with the token words again. */
.uma-chrome-beta-tag { position: relative; overflow: hidden; }
.uma-chrome-beta-knockout { display: var(--chrome-beta-knockout-display, none); position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.uma-chrome-beta-knockout-text { font: inherit; letter-spacing: inherit; }
.uma-chrome-beta-knockout-fill { fill: var(--bright-white); }
.uma-chrome-beta-tag-dark { --chrome-beta-knockout-display: block; background-color: transparent; color: transparent; }

/* 3. working-with-audhd: the testing line sat on a pale band, not over the hero. Cause: the page's wrapper is
      .tools-content (UMA.css 19109), whose margin-top is the top bar plus the Tools sub nav row
      (--fixed-header-height + --subnav-row-height). The chrome's .uma-chrome-hero-under-bar (line 256 above) only
      pulls a hero up by the top bar, so the hero began one sub nav row down and the see-through top bar sat over the
      page's pale ground. Library and marketplace have no sub nav (their wrapper is only tools-content-in-chrome), so
      line 256 is enough there. Now a hero can say how much more it sits under (--hero-under-bar-extra, 0 by default):
      the work hero adds the sub nav row, so it runs up under the top bar and the fixed Tools bar, and its words keep
      the same room below both. The Tools bar itself is unchanged (fixed under the top bar, raised when the bar scrolls
      away, its tab scroller as in 1a31a97c). */
.work-hero { --hero-under-bar-extra: var(--subnav-row-height); }
.uma-chrome-hero-under-bar { margin-top: calc(-1 * (var(--fixed-header-height) + var(--hero-under-bar-extra, 0px) + 2 * var(--stroke-thin))); padding-top: calc(var(--app-default-top-bottom-margin-xxxxl) + var(--fixed-header-height) + var(--hero-under-bar-extra, 0px)); }

/* ===== hero 16:9 above 900 (her cloud test, 9 Oct 2026) =====
   Her words: above 900px the hero is exactly 16:9, before play and while playing, showing the whole frame; at 900 and
   under it changes, as designed.
   What zoomed it at 1440: "hero: words first, then the film at its ratio" above set .hero-section-with-video to
   aspect-ratio auto, so before play (and on pause) the hero's height came from the words, not 16:9; the poster
   (UMA.css .hero-launch-poster, object-fit cover) was v3, a 4:3 crop, so cover blew it up to the hero's width and cut
   the top and bottom off; and the film (.hero-launch-video--visible, cover, above) filled whatever shape the hero had.
   Here, above 56.25rem only: the hero is 16:9 at all times (16:9 is its shortest height; it is taller only where her words
   need more room before play, see below), and the poster and the film are drawn whole (contain). The film and the new
   poster (v4, index.html) are both 16:9, so in the 16:9 hero contain and cover are the same picture: nothing cut off.
   While playing the words' box lies over the hero (hero-content-mark-space), so the hero is exactly 16:9 then.
   Before play the words are in the flow: at 1440 they fit inside 1380 x 776; between 901 and about 1300 wide they are
   taller than 16:9 (title 4rem on two lines, 8rem room above), and there the hero grows to fit them (the frame stays
   whole, with navy above and below it) rather than the words spilling out of it.
   At 900 and under nothing here applies: words first, then 4:3 cover while playing, poster v3, as before. */
/* Replaced (hero final, 9 Oct 2026; restated in "homepage hero final" below). What was here:
@media not all and (max-width: 56.25rem) {
  .hero-section-with-video { aspect-ratio: var(--hero-ratio-wide); }
  .hero-launch-poster { object-fit: contain; object-position: center; }
  .hero-launch-video { object-fit: contain; object-position: center; }
  .hero-launch-video--visible { object-fit: contain; }
} */

/* ===== homepage hero final (her ruling, 9 Oct 2026: "this video is the most important thing on the site") =====
   The only rules that set the hero's height (earlier ones are commented out where they stood).
   Above 900 (56.3125rem and up): the hero (.hero-section-with-video) is exactly 16:9 before play, playing, paused and
     ended (min-height 0, so nothing can stretch it); poster v4 and the film drawn whole (contain). Her words sit inside
     the box over the poster before play; on pause and at the end they step back (as before) and the play mark sits in
     the centre of the box with "Share this video" and its icons a gap above it.
   900 and under: before play the box is at least 4:3 and grows to fit her words (words first, as before). Once the film
     has started (hero-film-whole, kept) the box is exactly 4:3 playing, paused and ended, the poster v3 and the film fill
     it (cover: the 16:9 film shows its centre 1440 of 1920 px, so only its baked-in black side bars are trimmed), the
     words' box lies over it (hero-content-mark-space, kept once played) and the play mark is in its centre.
   Copy (no text scaling, her rule): the title is 4rem above 900, 3rem at 900 and under, 2.75rem at 600 and under; the
   paragraphs stay 1.2rem. Sums above 900 (rem 16px; title 2 lines x 64 x 1.3 = 166.4; paragraph lines 28.8 at a 675px
   measure: first paragraph 4 lines = 115.2, full second paragraph 3 lines = 86.4, short line 1 line = 28.8; mark 70):
     full copy, spacing as before: 128 + 166.4 + 16 + 115.2 + 16 + 86.4 + 16 + 24 + 70 + 48 = 686.0, fits 16:9 from
       1220 wide (1220 x 9/16 = 686.25): full copy at 76.25rem and up.
     short copy, spacing as before: 128 + 166.4 + 16 + 115.2 + 16 + 28.8 + 32 + 24 + 70 + 48 = 644.4, fits from 1146.
     1024 to 1145, room reduced: 96 + 166.4 + 16 + 115.2 + 16 + 28.8 + 16 + 16 + 70 + 32 = 572.4 (1024: 576).
     901 to 1023, room reduced further (the title still clears the 60px top bar by 1rem):
       76 + 166.4 + 8 + 115.2 + 8 + 28.8 + 0 + 16 + 70 + 16 = 504.4 (901: 506.8).
   The room and gaps are tokens (below), so only spacing changes between the bands, never a type size. */
:root {
  --hero-room-above: var(--hero-video-space-above);
  --hero-room-below: var(--app-default-top-bottom-margin-xxxl);
  --hero-title-gap: var(--app-default-top-bottom-margin-sm);
  --hero-para-gap: var(--app-default-top-bottom-margin-sm);
  --hero-short-gap: var(--app-default-top-bottom-margin-xl);
  --hero-mark-gap: var(--app-default-top-bottom-margin-lg);
}
.hero-h1 { margin-bottom: var(--hero-title-gap); }
.hero-intro-para-text { margin-bottom: var(--hero-para-gap); }
.hero-intro-short { margin-bottom: var(--hero-short-gap); }
.hero-launch-play { margin-top: var(--hero-mark-gap); }

/* once the film has started: the mark in the centre of the box (the words' box lies over the whole box) */
.hero-launch-play-on-film {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 0;
  translate: -50% -50%;
}
.hero-film-whole { --hero-mark-lift: 0rem; }

/* "Share this video" in sentence case, its icons in a row under it, the whole block a gap above the centred mark */
.hero-end-screen-label { text-transform: none; }
.hero-end-screen {
  top: calc(50% - var(--button-size-xxl) / 2 - var(--gap-md));
  bottom: auto;
  translate: 0 -100%;
}

@media (min-width: 56.3125rem) {
  .hero-section-with-video {
    aspect-ratio: var(--hero-ratio-wide);
    min-height: 0;
    padding-top: var(--hero-room-above);
    padding-bottom: var(--hero-room-below);
  }
  .hero-launch-poster { object-fit: contain; object-position: center; }
  .hero-launch-video { object-fit: contain; object-position: center; }
  .hero-launch-video--visible { object-fit: contain; }
}
/* above 900, below 1220: her shortened copy (the first paragraph and "This isn't fair. That's why we built Uma.") */
@media (min-width: 56.3125rem) and (max-width: 76.1875rem) {
  .hero-intro-full { display: none; }
  .hero-intro-short { display: block; }
}
@media (min-width: 56.3125rem) and (max-width: 71.5625rem) {
  :root {
    --hero-room-above: var(--app-default-top-bottom-margin-xxxxxl);
    --hero-room-below: var(--app-default-top-bottom-margin-xl);
    --hero-short-gap: var(--app-default-top-bottom-margin-sm);
    --hero-mark-gap: var(--app-default-top-bottom-margin-sm);
  }
}
@media (min-width: 56.3125rem) and (max-width: 63.9375rem) {
  :root {
    --hero-room-above: calc(var(--fixed-header-height) + var(--app-default-top-bottom-margin-sm));
    --hero-room-below: var(--app-default-top-bottom-margin-sm);
    --hero-title-gap: var(--app-default-top-bottom-margin-xxs);
    --hero-para-gap: var(--app-default-top-bottom-margin-xxs);
    --hero-short-gap: 0rem;
  }
}

@media (max-width: 56.25rem) {
  .hero-h1 { font-size: var(--heading-size-xxxl); }
  .hero-section-with-video { aspect-ratio: var(--hero-ratio-cover); }
  .hero-film-whole { min-height: 0; }
  .hero-launch-poster { object-fit: cover; object-position: center; }
  .hero-launch-video { object-fit: cover; object-position: center; }
  .hero-launch-video--visible { object-fit: cover; }
}
@media (max-width: 37.5rem) {
  .hero-h1 { font-size: var(--heading-size-xxl); }
}

/* ---------- hero end screen spacing (9 Oct 2026, her words: "the social media icons are too far from share this video and
   too close to the play button"). The label keeps no margin of its own (paragraph-spacing-compact added one), the icons sit
   a small gap under it, and the whole block sits a larger gap above the centred play mark. At 600 and below the 4:3 box is
   only 281px tall at 375, so "Share this video" and its icons sit on one line above the mark, below the 60px top bar
   (measured: a stacked block reached 18px down, under the bar). ---------- */
.hero-end-screen-label { margin: 0; }
.hero-end-screen {
  gap: var(--gap-md);   /* her ruling (9 Oct 2026): "Share this video" a little further from its icons */
  top: calc(50% - var(--button-size-xxl) / 2 - var(--app-default-top-bottom-margin-xxl));   /* and more room above the play mark */
}
@media (max-width: 37.5rem) {
  /* measured at 375 (7c3295ae): above the mark the line reached up under the 60px top bar, so at 600 and below it sits
     a gap BELOW the centred mark: "Share this video" centred, its icons in a centred row under it (her ruling, 9 Oct 2026);
     the browser's own bar is off while paused or ended on a phone, so the block has the bottom of the 4:3 box */
  .hero-end-screen {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-md);
    top: calc(50% + var(--button-size-xxl) / 2 + var(--app-default-top-bottom-margin-lg));
    translate: none;
  }
}

/* ---------- hero share line at 600 and below (9 Oct 2026, measured at 375 on 05adc80a): with the card's icon size
   (heading-size-xl) the line ran into the browser's own bar at the bottom of the 281px 4:3 box. On a phone the hero's
   share icons are the button icon size, closer together, so the line sits between the play mark and the bar. Each
   icon keeps a 44px tap area (invisible layer), as every other icon control. ---------- */
@media (max-width: 37.5rem) {
  :where(.hero-end-screen) .card-social-icon { font-size: var(--button-icon-lg); position: relative; }
  :where(.hero-end-screen) .card-social-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  :where(.hero-end-screen) .campaign-share-row { gap: var(--gap-md); }
}

/* ---------- hero poster: her rocket image (9 Oct 2026). homepage_videos/hero_poster.jpg (2000 x 1333) fills the hero behind
   "The waiting. Oh, the waiting." at every width, cropped around the rocket (centre), before play. The film keeps its own
   fit once it plays (16:9 contain above 900, 4:3 cover at 900 and under). ---------- */
.hero-launch-poster { object-fit: cover; object-position: 50% 50%; }

/* ---------- workplace adjustment cards without their image yet (9 Oct 2026, her request). Every card starts like this:
   its words in the page text colour on the plain card surface, so dark words on the light card and light words on the
   dark card in dark mode. When the card's image (Storage workplace_adjustments/<unique_id>.jpg) loads, the page swaps
   these for the photo style (adjustment-card-with-image, adjustment-words-on-image); a card whose file is not uploaded
   stays as it is. The image waits invisibly until it has loaded, so there is no flash. ---------- */
.adjustment-card-no-image { background-color: var(--t-flip-card-bg); color: var(--t-page-text); }
.adjustment-words-no-image { position: relative; z-index: 1; color: var(--t-page-text); }
.adjustment-card-image-waiting { visibility: hidden; }

/* ---------- hero captions and sound buttons top right (her ruling, 9 Oct 2026): "the same as the Leanne, Catherine and
   Laura films". The row goes back to the corner row's own place (UMA.css .video-controls-row: top right, margin-lg in);
   the top bar is off while the film plays (chromeOffFilm), so nothing sits over that corner. ---------- */
.hero-film-controls {
  top: var(--app-default-top-bottom-margin-lg);
  right: var(--app-default-top-bottom-margin-lg);
  bottom: auto;
  left: auto;
}

/* ---------- hero dark layer behind the words (9 Oct 2026): UMA.css drew it only while the film had a poster attribute
   (.hero-launch-video[poster]); the film no longer carries one (the rocket is the cover <img> behind it), so the layer
   is drawn on the hero itself: the same black at 70% (--hero-film-scrim) over the rocket before play and on pause, and
   see-through while the film plays (.hero-film-playing sets the token to transparent, as before). ---------- */
.hero-section-with-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-film-scrim);
  pointer-events: none;
}

/* ---------- sign-up, set-up and log-in forms centred beside the sidebar (her words, 9 Oct 2026): "Centre them in the
   space beside the sidebar on every sign-up, setup and log-in page." Above 600px the chrome's content band
   (.uma-chrome-all-content-wrapper) already starts after the sidebar (margin-left: var(--sidebar-width)), but each page's
   own .wrapper-for-all-sections (UMA.css SIGN UP FORM) added the sidebar's width again inside it, so the form sat
   half a sidebar right of centre on the website pages (sign-up, log-in, reset-pin, contact). On the set-up pages
   (create-passkey, verify-email, email-action, set-pin, security-setup, no data-uma-site) the chrome's inner wrapper
   also kept its max width and side padding, so the column was pinned to the left of a 1220px box (left of centre on
   wide windows). Now: no second sidebar margin on the auth pages, and above 600px the set-up pages' inner wrapper has
   no width cap or side padding of its own, as the website auth pages already have (UMA.css Bug 62); the centred column
   keeps its own padding and width. At 600px and below UMA.css already gives this wrapper no margin and full width, and
   the set-up pages keep their phone padding, so phones are unchanged. Vertical spacing is unchanged. The log-out lock
   screen is a full-window overlay over the chrome (Bug 62), so it stays centred on the window. ---------- */
:where(.page-auth) .wrapper-for-all-sections {
  width: 100%;
  margin-left: 0;
}
@media (min-width: 600.02px) {
  :where(.page-auth-app) .uma-chrome-inner-content-wrapper {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ===== screenings final test (RESULTS-screenings-d835e095, 9 Oct 2026), items 1 to 4 =====
   1. SOS on the check-in screens at 375. The mobile SOS tab rule (max-width 37.5rem, .uma-chrome-sos display inline-block)
      comes after the hide rule (:where(.screening-hide-sos) .uma-chrome-sos, display none) with the same weight, so it won
      at phone width and the SOS showed on "Just checking in" and "You are not alone". The hide rule is restated here, after
      it, so the SOS stays hidden on those screens at every width.
   2. Screening content 50px left of centre at 1440 (all seven). The chrome's inner wrapper kept its 1220px cap and 64px
      side padding, left-aligned (CPTSD and RSD also by UMA.css .screening-page-cptsd / .screening-page-rsd, two classes),
      and the page's .wrapper-for-all-sections (UMA.css SIGN UP FORM) added the sidebar's 60px again inside the chrome's
      band, which already starts after the sidebar. Centre was 700, the space beside the sidebar centres at 750. Above
      600px the inner wrapper has no cap or side padding on the screenings (two classes, after UMA.css, so it beats the
      CPTSD and RSD rules) and the wrapper no second sidebar margin; the screening's own content box (max 1220px, 4rem
      padding, auto margins) then centres in the space. Measured in a copy of the layout: centre 750, 80px each side.
      Vertical spacing unchanged. At 600 and below UMA.css already sets the same values.
   3. SOS tab over words and answer A at 375 (masking, RSD, stimming: 8px side padding). On the seven screenings at phone
      width the content keeps the SOS tab's tap width (--touch-target-min, 44px; the visible tab is about 36px) clear on
      both sides, so the tab, at the right edge, never covers words or answers, and the column stays centred.
   4. CPTSD "You are not alone" at 1440x900: the words, crisis buttons and "I'm safe to continue" were 1024px tall in an
      819px pane, so the button started at 949, below the window. Above 600px the pane is a column: heading and buttons
      keep their size and the words between them scroll, so "I'm safe to continue" is in view on arrival (measured: 744
      to 804 at 1440x900). Phones are unchanged: there the whole screen scrolls (check-in layout block above). */
@media (max-width: 37.5rem) {
  :where(.screening-hide-sos) .uma-chrome-sos { display: none; }
  :where(.page-screening) .screening-page-content { padding-left: var(--touch-target-min); padding-right: var(--touch-target-min); }
}
:where(.page-screening) .wrapper-for-all-sections { width: 100%; margin-left: 0; }
@media (min-width: 37.5625rem) {
  .page-screening .uma-chrome-inner-content-wrapper { max-width: none; padding-left: 0; padding-right: 0; }
  :where(.screening-checkinPage) .screening-pause-content { display: flex; flex-direction: column; }
  :where(.screening-checkinPage) .screening-reg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  :where(.screening-checkinPage) .screening-buttons { flex: none; }
  :where(.screening-checkinPage) .pseudo-bottom-margin { flex: none; }
}

/* ---------- hero background black (her words, 9 Oct 2026: "there should not be navy either side, change the background
   of the hero to be black"). The launch film has black bars baked in at its sides; behind it the hero showed the section's
   navy (section-panel-dark-navy), so navy showed beside and around the film while it loaded and played. The hero box is
   now black, so the film's own black and the hero's are one colour. Before play the rocket poster (cover) fills the box,
   so nothing changes there. ---------- */
.hero-section-with-video { background-color: rgb(var(--black-rgb)); }

/* ===== CHROME AND ACCOUNT CLOUD TEST FIXES (9 Oct 2026, NO-FOOTER-RETEST-09oct2026-v1.md bugs 1 and 2) ===== */
/* Bug 1: health history and trauma history above 900 px. While the cards are pinned (UMA.css .sticky-cards-container,
   top 0) the pinned block was 936 px tall at 1440 (title band, pills, the 455 px wide 7/10 card at 650 px, carousel
   padding, the Previous and Next arrows), so on a 900 px screen the arrows sat on the bottom edge with their circles
   cut off. The card's width is now capped by the screen's height, so the whole block plus the arrows' own 2rem
   (--card-nav-margin-bottom) fits: the card keeps its 7/10 shape and only gets smaller on a short screen; on a
   1080 px screen it is 455 px as before. Two new tokens (flag):
     --cond-card-pinned-room       everything in the pinned block except the card, plus the 2rem under the arrows
                                   (title band 102 px, pills 80 px, carousel padding 64 px, arrows 40 px, 32 px):
                                   318 px = 19.875rem
     --cond-card-width-per-height  the 7/10 card shape as a width for each unit of height (UMA.css aspect-ratio 7/10)
   At 900 px and under the cards are 9/16 (UMA.css) and the block already fits, so this stays above 900. */
@media (min-width: 901px) {
  :root:where(.page-health-history, .page-trauma-history) {
    --cond-card-pinned-room: 19.875rem;
    --cond-card-width-per-height: 0.7;
  }
  :where(.page-health-history, .page-trauma-history) .cond-card {
    max-width: min(var(--cond-card-max-width), calc((100dvh - var(--cond-card-pinned-room)) * var(--cond-card-width-per-height)));
  }
}
/* The same from 601 to 900 px, where the cards are 9/16 (UMA.css, --cond-card-max-width-md and -mob): at 800 x 900 the
   pinned block was 926 px with the arrows 26 px below the screen. The room around the card is the same 318 px there;
   the width for each unit of height is 9/16. At 600 and below the block already fits (375: the arrows 15 px above
   the bottom while pinned), so phones are unchanged. */
@media (min-width: 601px) and (max-width: 900px) {
  :root:where(.page-health-history, .page-trauma-history) {
    --cond-card-pinned-room: 19.875rem;
    --cond-card-width-per-height: 0.5625;
  }
  :where(.page-health-history, .page-trauma-history) .cond-card {
    max-width: min(var(--cond-card-max-width-md), calc((100dvh - var(--cond-card-pinned-room)) * var(--cond-card-width-per-height)));
  }
}
/* Bug 2: ADHD, autism and CPTSD profiles, the results cards (UMA.css .donut-card, a 9/16 box with overflow hidden).
   A long description was taller than the 9/16 shape allows, so it ran through the panel's 2rem bottom padding
   (--default-card-left-right-padding) and was cut off at the card's edge (autism at 375: "disinterest." by 3 px).
   overflow: clip keeps the rounded corners clipping the picture and panel, but does not stop the box growing to
   fit its words as overflow hidden did, so the card is only ever as much taller as its words need and the 2rem
   padding always shows under the last line. The cards in a row stay the same height as each other. */
/* Merged with "Profile result cards never clip their words" above (5f8eaa6): that rule's min-height: min-content takes
   the place of the box's automatic minimum, which is what lets a 9/16 box grow to fit its words once it is not
   overflow hidden, so on its own the card stayed 551 px at 375 and still cut the line. min-height goes back to auto
   here, so the card grows; the panel's padding from that rule stays. */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .donut-card { overflow: clip; min-height: auto; }

/* ===== PHONE TOP BAR: POWER THE SAME SIZE AS THE HEART AND BELL (9 Oct 2026, final cloud test) =====
   At 375 the power glyph was 26 px (UMA.css .uma-chrome-header-icon-glyph-power, --button-icon-xxl) and the heart and
   bell 22 px (.uma-chrome-header-icon-glyph-small, --button-icon-lg). It now takes the heart and bell's size token.
   Its small downward nudge (--chrome-power-nudge) stays, as the power mark sits a little high in its own box. */
.uma-chrome-header-icon-glyph-power { font-size: var(--button-icon-lg); }

/* ---------- set-up pages without the chrome, form centred on the full screen (her ruling, 9 Oct 2026): sign-up,
   verify-email, create-passkey, set-pin and security-setup no longer load /uma-chrome.js, so they have no top bar,
   sidebar, menu, footer, SOS or Feedback. Those pages carry page-auth-full-screen on <html>. The wrapper fills the
   window (100svh, as .first-screen-clear) and centres the form down the page; the column's top and bottom padding are
   made equal so the centre is true; min-height, not height, so a form taller than the window grows and scrolls. Across,
   the column is already centred (max-width with auto margins inside equal side padding, no sidebar). :where() keeps
   each rule at one class, so these win over UMA.css and the rules above by order. log-in, reset-pin, contact and
   uma-onboarding do not carry the class and are unchanged. ---------- */
:where(.page-auth-full-screen) .wrapper-for-all-sections {
  width: 100%;
  margin-left: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
:where(.page-auth-full-screen) .full-screen-inner-wrapper { height: auto; }
:where(.page-auth-full-screen) .small-centred-column-centred-text {
  padding-top: var(--app-default-top-bottom-margin-xxl);
  padding-bottom: var(--app-default-top-bottom-margin-xxl);
}
@media (orientation: landscape) and (pointer: coarse) {
  :where(.page-auth-full-screen) .phone-sideways-top-space { padding-top: var(--app-default-top-bottom-margin-xxl); }
}

/* ---------- email-action (bug fixes batch 1, 9 Oct 2026, her words: "Remove the two Firebase screens"): the page every
   Uma email link opens. It is part of the full-screen set-up flow, so it loads no chrome and carries
   page-auth-full-screen (the block above centres it across and down). Here only: the heading takes focus on every
   screen change (no ring on a heading that cannot be clicked), and the send button and the "Log in" line sit a set gap
   under the words. ---------- */
:where(.page-email-action) h1:focus {
  outline: none;
}
.email-action-buttons,
.email-action-extra {
  margin-top: var(--app-default-top-bottom-margin-lg);
}

/* ===== glossary search (9 Oct 2026, her ruling): Uma clear button, results under the bar =====
   1. The browser drew its own blue clear button in the search field (type="search"). It is turned off, so only the Uma
      close icon shows: ph-bold ph-x in the page's text colour (charcoal in light), on a ghost circular button inside the
      field on the right, with room kept for it so typed words never run under it. It shows only while there is text.
   2. While searching, the matches are listed in .glossary-results, best match first (glossary script). Its scroll margin
      is the same as the letter groups' (UMA.css), so when the page goes back to the first result it stops just under the
      top bar, sub nav, search bar and letters, never under them. */
.search-field::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.glossary-tools .search-field { padding-right: calc(var(--button-size-sm) + var(--gap-xs) * 2); }
.glossary-search-clear {
  position: absolute;
  top: 50%;
  right: var(--gap-xs);
  translate: 0 -50%;
  background: transparent;
  border: none;
  color: var(--t-page-text);
  font-size: var(--button-icon-md);
}
.glossary-search-clear[hidden] { display: none; }
.glossary-results {
  padding-top: var(--app-default-top-bottom-margin-xl);
  scroll-margin-top: calc(var(--subnav-row-height) + var(--glossary-tools-height, 0px));
}

/* ---------- Learn sub nav "Uma library" (9 Oct 2026, her bug: on the glossary it went nowhere). On every Learn page it
   is now a link to /library (it was a button with a page script, and the glossary's had none). UMA.css underlines every
   link on hover (a:hover) and turns it orange; this button-shaped link keeps no underline and keeps its own words' colour
   (UMA.css .btn-primary-orange, --text-on-colour) on its darker orange hover. ---------- */
.section-nav-action:hover { text-decoration: none; color: var(--text-on-colour); }

/* ---------- Header first paint (9 Oct 2026, her bug: moving between Learn pages the header went clear and blurred with
   nothing in it, then its contents popped in). L81 (above) gave the top bar its own view-transition-name, so during a
   page change the browser draws it as a separate picture over the two pages. A named element is drawn on its own, so its
   frosted background (backdrop-filter) has nothing behind it to blur: for the length of the change the bar was see-through
   and unblurred, and on a page whose bar had not been built yet it was carried over an empty top. The bar is now part of
   the page picture, so it is drawn with its frost on both pages; the two bars are the same, so the cross-fade between them
   leaves it still. The chrome itself is now built before the page's first paint (uma-chrome.js, HEADER FIRST PAINT).
   The sidebar keeps its name (it has no frost). What was here: nothing; this undoes .uma-chrome-top-bar's
   view-transition-name from L81. ---------- */
.uma-chrome-top-bar { view-transition-name: none; }

/* ===== Uma website bug fixes batch 1 (9 Oct 2026): podcast players fill their card, no black band =====
   Her bug: an Apple Podcasts player filled only the top of its Just-dropped episode tile, with black below it.
   Why: the tile is the video cards' 16:9 box (L164) on her black, and the player frame was stretched to the whole
   tile. Apple's episode player (embed.podcasts.apple.com, checked in its own code 9 Oct 2026) draws its card at
   the frame's height but never taller than 175 px (never shorter than 150) and leaves the rest of a taller frame
   empty, so the black tile showed through below it. Spotify's players are drawn at fixed heights (152, 232, 352).
   Now the tile's media area is the player's own height and the frame fills it exactly: an Apple player's tile is
   175 px high, a Spotify player's 152 px (its compact player), at the video cards' widths. Nothing is left over to
   show black, and the tile is transparent behind the player's rounded corners. The drawer's player box does the
   same for an Apple player (it was a 16:9 box with a 352 px frame: 175 px of player over dark grey). */
.library-episode-tile-media:has(iframe[src*="podcasts.apple.com"]) { aspect-ratio: auto; height: var(--platform-apple-height-compact); background: transparent; }
.library-episode-tile-media:has(iframe[src*="open.spotify.com"]) { aspect-ratio: auto; height: var(--platform-spotify-height-compact); background: transparent; }
.library-episode-tile-media .library-episode-player-centred { min-height: 0; }
.drawer-podcast-player-full:has(iframe[src*="podcasts.apple.com"]) { aspect-ratio: auto; height: var(--platform-apple-height-compact); }
.drawer-podcast-player-full .drawer-media-embed[src*="podcasts.apple.com"] { height: var(--platform-apple-height-compact); }
/* On the Learn pages' podcast cards the frame is 152 px (Spotify's compact height): Apple's player fits itself to
   any frame from 150 to 175 px, so it fills that frame too. */

/* ---------- marketplace Filters tab at the top of the shop (9 Oct 2026, her bug): once the search bar is glass
   (.shop-sticky-bar.is-sticky) the yellow tab hangs from the glass's bottom edge (UMA.css top: 100%). At rest, over the
   header picture, it hung from the bar too, but the bar ends above the picture (the picture's band runs on under it by
   its nav room), so the tab overlapped the picture's bottom edge. The bar is pulled up into the band by exactly
   --intervention-nav-height (UMA.css margin-top), so at rest the picture's bottom edge is that far below the bar's top:
   the tab hangs from there, the same way it hangs from the glass. ---------- */
.shop-sticky-bar:not(.is-sticky) .uma-marketplace-filters-tab { top: var(--intervention-nav-height); }

/* ---------- marketplace product cards grow when the + is reached for (9 Oct 2026, her ruling): the same as the
   homepage "Much more than screening" cards. The homepage rule (UMA.css .card-hover-grow:has(...:hover)) scales the
   card by --card-hover-scale (1.015, also set for this page) over --transition-card-scale (0.35s) with --ease-card,
   from its centre. --ease-card is set only for the homepage, so this page gets the same token with the same value.
   On a phone a tap on the + gives it :hover, as on the homepage. The homepage cards have no reduced motion rule of
   their own, so neither do these. The + still opens the product drawer (its onclick is unchanged). ---------- */
:root:where(.page-uma-marketplace) { --ease-card: cubic-bezier(0.4, 0, 0.2, 1); }
:where(.market-place-grid-to-carouselle) .product-card {
  transform-origin: center center;
  transition: transform var(--transition-card-scale) var(--ease-card);
}
:where(.market-place-grid-to-carouselle) .product-card:has(.card-add-btn:hover) { transform: scale(var(--card-hover-scale)); }


/* ===== cookie consent (release build 95, her rule 9 Oct 2026) ===== */
/* 1. Embedded players held until marketing cookies are allowed. /uma-cookie-consent.js keeps a YouTube, Spotify or
   Apple Podcasts player's address in data-uma-consent-src (no src) until the person allows marketing cookies in the
   Uma cookie checker. Every rule that sizes or colours a player box by its address (UMA.css, uma-build-95.css and
   uma-learn-media.css, matched on [src*=...]) is repeated here for the held address, so a held player keeps exactly
   the box it will play in, and nothing moves when it loads. No new tokens. */
:where(.page-uma-library) .drawer-podcast-player-full:has(iframe[data-uma-consent-src*="podcasts.apple.com"]) { background: var(--platform-apple); }
:where(.page-uma-library) .uma-product-drawer-video-full:has(iframe[data-uma-consent-src*="podcasts.apple.com"]) { background: var(--platform-apple); }
:where(.page-uma-library) .drawer-media-embed[data-uma-consent-src*="spotify"] { height: var(--platform-spotify-height); }
:where(.page-uma-library) .drawer-media-embed[data-uma-consent-src*="podcasts.apple.com"] { height: var(--platform-apple-height); background: var(--platform-apple); }
:where(.page-uma-library) .drawer-media-embed[data-uma-consent-src*="youtube.com"] { top: 0; bottom: 0; height: 100%; }
:where(.page-uma-library) .drawer-media-embed[data-uma-consent-src*="youtube-nocookie.com"] { top: 0; bottom: 0; height: 100%; }
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode:has(iframe[data-uma-consent-src*="podcasts.apple.com"]) { background: var(--platform-apple); }
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-player:has(iframe[data-uma-consent-src*="podcasts.apple.com"]) { background: var(--platform-apple); }
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-frame[data-uma-consent-src*="podcasts.apple.com"] { height: var(--platform-apple-height-compact); }
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-frame[data-uma-consent-src*="youtube.com"] { height: auto; aspect-ratio: var(--carouselle-card-ratio-video); }
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-frame[data-uma-consent-src*="youtube-nocookie.com"] { height: auto; aspect-ratio: var(--carouselle-card-ratio-video); }
:where(.page-uma-library) .drawer-show-episode:has(iframe[data-uma-consent-src*="podcasts.apple.com"]) .drawer-show-episode-corner-mask { background: var(--platform-apple); }
:where(.page-uma-library) .library-episode-media:has(iframe[data-uma-consent-src*="podcasts.apple.com"]) { max-height: var(--platform-apple-height-compact); }
:where(.page-uma-library) .library-episode-player:has(iframe[data-uma-consent-src*="podcasts.apple.com"]) .drawer-show-episode-corner-mask { background: var(--platform-apple); }
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode:has(iframe[data-uma-consent-src*="podcasts.apple.com"]) { background: transparent; }
:where(.page-uma-library, .page-uma-marketplace) .drawer-show-episode-player:has(iframe[data-uma-consent-src*="podcasts.apple.com"]) { background: transparent; }
.library-episode-tile-media:has(iframe[data-uma-consent-src*="podcasts.apple.com"]) { aspect-ratio: auto; height: var(--platform-apple-height-compact); background: transparent; }
.library-episode-tile-media:has(iframe[data-uma-consent-src*="open.spotify.com"]) { aspect-ratio: auto; height: var(--platform-spotify-height-compact); background: transparent; }
.drawer-podcast-player-full:has(iframe[data-uma-consent-src*="podcasts.apple.com"]) { aspect-ratio: auto; height: var(--platform-apple-height-compact); }
.drawer-podcast-player-full .drawer-media-embed[data-uma-consent-src*="podcasts.apple.com"] { height: var(--platform-apple-height-compact); }
@media (max-width: 599px) {
  :where(.page-uma-library) .drawer-media-embed[data-uma-consent-src*="spotify"] ~ .drawer-podcast-spotify-mask { display: block; }
}
/* 2. Cookies page: "Change my cookie choice" (cookies.html, section 4) reopens the cookie checker. It is the UMA.css
   navy pill button (btn btn-pill btn-md btn-primary-navy); this adds its space above and, in dark mode, the white
   fill with navy words that navy buttons take on the dark page. No new tokens. */
.uma-cookie-choice-button { margin-top: var(--gap-sm); }
:root[data-theme="dark"] .uma-cookie-choice-button { background: var(--bright-white); color: var(--navy); }
:root[data-theme="dark"] .uma-cookie-choice-button:hover { background: var(--bright-white); color: var(--navy-dark); }

/* ── 9 Oct 2026 (her bug: no glass behind the marketplace's search and pills bar after closing a drawer) ──
   The marketplace's product and wish list drawers hold the page still on the html element, not with overflow: hidden
   on the body. The html element hides its sideways overflow, so the body's overflow was never handed to the window:
   the body became a scroll box of its own and the sticky bar (.shop-sticky-bar) stopped sticking while a drawer was
   open, then kept a see-through look over the product photos once it closed. The html element's overflow is the
   window's, so the bar keeps sticking and the page cannot move behind the drawer. Class set by marketplace.html. */
.uma-drawer-page-locked { overflow: hidden; }

/* ===== reviews: no reviews yet (release build 95, Uma website bug fixes batch 1, 9 Oct 2026) ===== */
/* The reviews page (reviews.html). Its script marks .reviews-layout reviews-none while there are no reviews at all
   (either thumb), reviews-some once there is one. With none: the thumbs and the sort menu are hidden, so is the row
   under the carousel (its arrows and right-aligned Post review), and her words "No review yet, leave the first review"
   stand under "Why people love Uma", above the Post review by the heading, at every width (below 850 that Post review
   is shown again in place of the one under the carousel). The drawers (library, marketplace, Learn pages) already do
   the same with uma-drawer-reviews-is-empty (UMA.css, release build 91); the discounts drawer follows it below. */
.reviews-empty-lead {
  display: none;
}

.reviews-none .reviews-sort-bar,
.reviews-none .reviews-bottom-row {
  display: none;
}

.reviews-none .reviews-heading {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-bottom: var(--app-default-top-bottom-margin-xl);
}

.reviews-none .reviews-title {
  margin-bottom: var(--app-default-top-bottom-margin-md);
}

.reviews-none .reviews-empty-lead {
  display: block;
  flex: 0 0 auto;
  padding: 0;
  margin: 0 0 var(--app-default-top-bottom-margin-lg);
  text-align: left;
}

.reviews-none .reviews-post-btn-heading {
  display: inline-flex;
}

/* The discounts drawer (discounts.html): with no reviews its script marks the section uma-drawer-reviews-is-empty, as
   the other drawers; its own switch and sort row (drawer-reviews-controls) and the cards are hidden, and the empty
   line it writes stands under "Community reviews", above the Read reviews / Post review tabs. */
.uma-drawer-reviews-is-empty .drawer-reviews-controls,
.uma-drawer-reviews-is-empty .uma-product-drawer-reviews-carousel {
  display: none;
}

/* ---------- "Share this video" icons (9 Oct 2026, her ruling): the same hover, touch and focus as the icons on the
   Catherine and Laura cards. Those are <button class="card-social-icon"> (index.html): white, and their only hover is
   UMA.css .card-social-icon:hover, opacity --opacity-high. The share icons (homepage hero end screen and the
   #StopMakingWomenWait card, the only share rows on the site) were <a href="#"> links, so UMA.css a:hover turned them
   orange and underlined, and .campaign-share-link:hover faded them further (--opacity-moderate). They are now
   <button type="button"> with the same class (index.html; the share script reads data-share, not the address), so no
   link rule reaches them, and their hover takes the Catherine and Laura value. Icons aria-hidden; each button carries
   "Share on Instagram / TikTok / Facebook / LinkedIn". ---------- */
.campaign-share-row .card-social-icon:hover { opacity: var(--opacity-high); }

/* ---------- FAQs and footer on one white (9 Oct 2026, bug fixes batch 1). Her screenshot, bottom of a Learn page at
   1440, light: the FAQs sat on the darker white and the footer under them ("Designed with love…" and the disclaimer
   box) on the lighter one, with a visible join. Cause: the FAQs are .section-panel-mid-white (UMA.css), which paints
   --t-page-bg (--mid-white #F2EDEA in light, --navy-60 #0E131E in dark). The footer, .footer-override, had no colour
   of its own, so the chrome's content band showed through it (.uma-chrome-content-band, --t-band-alt: --new-white
   #F6F3F1 in light, --navy-40 #151C2D in dark). This was the same on every page that carries the chrome's footer
   (homepage, Learn pages, legal pages, contact, glossary, reviews, and the members' pages with a footer); the
   library and marketplace already painted --t-page-bg behind theirs, so they do not change. The footer now paints the
   FAQs' own token, so the two run on as one colour. Dark mode follows (the token flips to --navy-60, as the FAQs do);
   sunset is light under the warm filter, so it follows light. No footer is added anywhere: pages without one keep
   none.
   At 600px and below the chrome's inner wrapper also has a phone foot padding (UMA.css .uma-chrome-content-inner,
   --app-default-top-bottom-margin-xxxl) over the --t-band-alt content band, so on phones a 48px strip of the lighter
   white sat between the FAQs and the footer. On pages with the FAQs (they end the page's content) that padding is
   dropped: the FAQ section's own bottom padding and the footer's top padding already give the room. ---------- */
.footer-override { background-color: var(--t-page-bg); }
@media (max-width: 600px) {
  .uma-chrome-content-inner:has(.faqs-accordion) { padding-bottom: 0; }
}

/* ---------- Wish list bugs (9 Oct 2026, bug fixes batch 1) ----------
   1. Sidebar heart stuck in its hover look. Her words: the heart button in the sidebar stays in its hover look (white
      circle, navy heart) when the pointer is not on it. Cause: the "top bar and sidebar circles" block above
      (565e0a08, .uma-chrome-sidebar-circle-heart { ... background: var(--bright-white); color: var(--navy); }) gave
      the heart's resting circle the profile letter's white circle and navy icon, which is the sidebar's hover look
      (UMA.css :where(.uma-chrome-sidebar-icon:hover) .uma-chrome-sidebar-circle, near-white circle, navy icon). It is
      not an open-wish-list state: the chrome puts no open class on the heart, and the look stayed with the drawer
      closed. The heart's circle now rests like the sun and moon circle (UMA.css .uma-chrome-sidebar-circle: no fill,
      white icon) and takes the hover look only while hovered or touched (:active). On a touch screen a tap leaves
      :hover behind; there it is undone unless the finger is down. The heart keeps the size from that block. */
.uma-chrome-sidebar-circle-heart { background: transparent; color: var(--bright-white); }
.uma-chrome-sidebar-icon-heart:is(:hover, :active) .uma-chrome-sidebar-circle-heart { background: rgba(var(--bright-white-rgb), var(--opacity-near-full)); color: var(--navy); }
@media (hover: none) {
  .uma-chrome-sidebar-icon-heart:hover:not(:active) .uma-chrome-sidebar-circle-heart { background: transparent; color: var(--bright-white); transform: none; }
}

/* 2. The Wishlist / Library tabs at the top of the wish list (from 600px up: the centred switch with its header
      padding): superseded by her straight split at every width, which now lives in one block, WISHLIST TABS ONE
      DEFINITION (10 Oct 2026), near the end of this file. Its lines here were taken out (git history keeps them). */

/* ---------- "Sign up or Log in" box, one design everywhere (9 Oct 2026, bug fixes batch 1). Search: REVIEW SIGN-IN BOX
   Her words, for the "Sign up or Log in to leave a review" box that Post review opens on /reviews: the heading at line
   height 1.3 and centred, and the Sign up and Log in buttons sharing the full width of the box, 50/50, with the gap they
   already had (.review-sign-in-actions, UMA.css: --gap-sm). Line height: UMA.css's token whose value is 1.3,
   --default-line-height-x-small. One shared pair of classes carries it: .review-sign-in-notice on the box and
   .review-sign-in-actions on the button row (both already on the reviews page's box). They are now on every box of
   this kind:
     /reviews Post review (reviews.html); the library, marketplace and Learn pages' drawers: Post review, Post comment
     and the comment box (uma-media-reviews.js); the chrome's Feedback tab, review option, signed out (in the panel,
     .review-sign-in-notice-panel) and the pop-up the homepage's "Why people love Uma" Post review and the discounts
     drawer's Post review tab open (uma-chrome.js, umaReviewSignInBox); save this / follow (uma-wishlist-sync.js);
     I'm interested (uma-role-panels.js); Add your video (homepage, library, Learn pages: its buttons now in the same
     order and colours as the others, Sign up outlined, Log in orange).
   Add your video keeps its X in the top right corner; its heading takes the X's room on both sides so it stays in
   the middle. No new tokens. */
.review-sign-in-notice .idle-notice-heading { line-height: var(--default-line-height-x-small); text-align: center; }
.review-sign-in-notice .review-sign-in-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); }
.review-sign-in-notice .review-sign-in-actions > .btn { width: 100%; min-width: 0; margin: 0; }
.review-sign-in-notice .video-bio-notice-heading { padding-left: calc(var(--back-next-button-diameter) + var(--gap-md)); }
/* In the Feedback panel the box sits in the review tab, in the panel's own colours, with the tab's top gap */
.review-sign-in-notice-panel { padding-top: var(--gap-md); }

/* ---------- Sending and sent screens (9 Oct 2026, bug fixes batch 1). Her design for the Contact us page, used also by
   the feedback tab's bug report. After Send the whole form is hidden and this screen sits in the centre: while sending,
   Send's own paper plane (ph-bold ph-paper-plane-tilt) and "Sending your message"; once sent, the feedback tab's thanks
   tick (UMA.css .uma-feedback-thanks-icon: ph-fill ph-check-circle in --bright-green, sized by .uma-feedback-thanks-glyph)
   and her words. If it does not send, the form comes back with everything typed and the site's error line
   (.field-error-message). The plane drifts gently only when motion is allowed: Uma's switch (data-motion="still")
   and the operating system's reduced motion setting each stop it, and it then sits still. Words take the page's
   text colour, so light, dark and sunset follow. ---------- */
.uma-send-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--app-default-top-bottom-margin-sm);
  min-height: calc(100svh - var(--fixed-header-height) - var(--app-default-top-bottom-margin-lg));
  text-align: center;
}
.uma-send-screen .uma-feedback-thanks-icon { margin-bottom: 0; }
.uma-send-screen .uma-send-screen-plane { display: inline-flex; align-items: center; justify-content: center; }
.uma-send-screen-words { margin: 0; font-size: var(--body-text-lg); max-width: var(--max-content-width-golden-section-small); }
.uma-send-screen-words:focus { outline: none; }
.uma-send-screen-words:focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-ring-offset); }
@keyframes uma-send-plane-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(var(--gap-sm), calc(-1 * var(--gap-sm))); }
}
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="still"]) .uma-send-screen-plane { animation: uma-send-plane-drift var(--wave-duration) ease-in-out infinite alternate; }
}
/* The feedback tab's sending screen: the panel's thanks block, holding the plane and the sending words */
.uma-feedback-thanks-sending .uma-feedback-thanks-title { margin-bottom: 0; }
.uma-feedback-thanks .uma-send-screen-plane { margin-bottom: var(--app-default-top-bottom-margin-sm); }

/* ---------- Disabled buttons: one look everywhere (9 Oct 2026, bug fixes batch 1). Her rule: a disabled button is washed
   white, never dark grey or navy. The rule already in UMA.css is .btn-disabled-on-white:disabled (--dark-white fill,
   --light-charcoal words, no edge), the same as the screenings' "Shared DISABLED state". These were dark grey or navy
   and now take it, in every colour mode:
   - Contact Send, sign-up, log-in and the other sign-in pages in dark: :where(:root[data-theme="dark"].page-auth)
     .btn-disabled-on-white:disabled (UMA.css, --t-disabled-fill = soft white at --opacity-low over navy-60: dark grey).
   - .btn-disabled-on-dark:disabled (UMA.css, uma-learn-media.css, the self-report pages' and uma-screenings' own
     copies): soft white at 0.2 over navy or red, which reads dark grey (Add your video bio Continue buttons, the library's
     red panel Continue, onboarding).
   - Feedback tab Report bug / Post review: .uma-feedback-button-primary:disabled (UMA.css; light --hover-overlay-dark,
     a navy tint; dark soft white at --opacity-low: grey) and the older .uma-chrome-feedback-btn-primary:disabled.
   - Screenings' confirm button in dark (.screening-confirm-selection-button:disabled, --t-disabled-fill).
   - Onboarding Continue in dark (.onb-continue:disabled, --onb-continue-disabled-bg) and its textarea send
     (.onb-textarea-submit:disabled, black at --opacity-low: grey).
   - Access to Work assistant start (.assistant-start-button:disabled, --lightest-charcoal: grey).
   - Library comments (.uma-comment-submit:disabled, --t-border: grey in dark).
   - Library red panels (.red-panel-btn:disabled, --navy: navy).
   - Profile buttons (.uma-profile-primary-btn:disabled: words --t-text-secondary, soft white on the pale fill in dark).
   - Any primary button disabled without one of the classes above (.btn-primary-orange, -navy, -green, .btn-danger,
     .btn-inverted) kept its full colour; it now takes the look as well.
   Left alone: .screening-finish-stays-orange (stays orange on purpose), field arrows and fields (already the look),
   carousel arrows (they fade), Clear all (hidden). :root raises the weight so this wins over the page copies without
   !important. ---------- */
:root :is(.btn-disabled-on-white, .btn-disabled-on-dark, .btn-primary-orange, .btn-primary-navy, .btn-primary-green, .btn-danger, .btn-inverted, .uma-feedback-button-primary, .uma-chrome-feedback-btn-primary, .screening-confirm-selection-button, .onb-continue, .onb-textarea-submit, .uma-profile-primary-btn, .assistant-start-button, .drawer-review-submit, .uma-comment-submit, .red-panel-btn):disabled:not(.screening-finish-stays-orange) {
  background: var(--dark-white);
  color: var(--light-charcoal);
  border-color: transparent;
  filter: none;
  opacity: 1;
  cursor: not-allowed;
}

/* ---------- top voices empty state (9 Oct 2026, library Top voices fix) ----------
   When Top voices has nobody to show, /uma-library-additions.js paint() writes the mic, her words (DRAFT COPY) and
   the Add your video bio button (the page's own video bio flow) into the Top voices shelf, in place of one small grey
   line in a tall empty shelf. Centred, one column, tokens only; light and dark through --t-text-strong. */
.uma-top-voices-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
  padding: var(--app-default-top-bottom-margin-xl) var(--gap-md);
  color: var(--t-text-strong);
}

.uma-top-voices-empty-emoji {
  margin: 0;
}

.uma-top-voices-empty-title {
  margin: 0;
  font-size: var(--heading-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--default-line-height-compact);
}

.uma-top-voices-empty-text {
  margin: 0;
  max-width: var(--max-stack-width);
  font-size: var(--body-text-md);
  line-height: var(--default-line-height-compact);
}

/* ===== mobile header icons: navy in light mode, white in dark mode (9 Oct 2026, bug fixes batch 1) =====
   Her words: on phones (600px and below) the menu (hamburger) icon and every icon in the header (heart, bell, power,
   the website header's sun/moon mode button) are navy, to match Uma; in dark mode they are white. The profile letter
   keeps its navy circle with the white letter in light and dark (UMA.css .uma-chrome-header-profile, not touched here).
   1. Ink. The "top bar icons, phones" block above set the bar's --chrome-top-icon-ink to the page text (charcoal in
      light, light in dark). At 600 and below it is now --chrome-top-icon-ink-rest: --navy (#232F4B) in light and sunset
      (sunset is light under the warm filter), --bright-white in dark (UMA.css dark blocks: var(--mid-white), #F2EDEA,
      the same white as --white-text-default and --t-page-text there). No new colour: an alias of two UMA.css tokens.
   2. The menu button (UMA.css .uma-chrome-hamburger, var(--t-page-text)) takes the same ink, so it matches the icons.
   3. Over a hero (the see-through bar, uma-chrome-main-header-over-hero on the bar, the chrome's
      uma-chrome-hamburger-over-hero on the menu button) all of them stay white, as before, for readability on the dark
      film; once the bar frosts on scroll the chrome takes the class off and they turn navy (light) or white (dark).
   4. States are unchanged: no circle at rest; while pressed (:active) or keyboard-focused (:focus-visible) the navy
      circle with a white icon, and the navy-dark circle on a real mouse hover (the "top bar icons, phones" block). The
      menu button keeps UMA.css's transparent hover and its focus ring. Icons keep aria-hidden, buttons their labels
      (markup untouched). Above 600 nothing changes. */
:root { --chrome-top-icon-ink-rest: var(--navy); }
:root[data-theme="dark"] { --chrome-top-icon-ink-rest: var(--bright-white); }
@media (max-width: 37.5rem) {
  .uma-chrome-top-bar { --chrome-top-icon-ink: var(--chrome-top-icon-ink-rest); }
  .uma-chrome-main-header-over-hero { --chrome-top-icon-ink: var(--bright-white); }
  .uma-chrome-hamburger { color: var(--chrome-top-icon-ink); }
}


/* ===== STUCK BAR TO THE VERY BOTTOM (bug fixes batch 1, 9 Oct 2026): library and marketplace ===== */
/* Bug: at the very bottom of the library (worst on a short tab such as Top voices) the stuck bar lost its
   "Search the library" field; only the pills and the Filters tab stayed. The marketplace bar did the same.
   Cause: a position: sticky box cannot leave its containing block. The library's sticky search and pill bar
   (.uma-library-sticky-container, library.html line 1361) sits in the chrome's page wrapper
   (.tools-content-in-chrome, role main), and the marketplace's (.shop-sticky-bar) in .shop-sticky-scope
   (marketplace.html line 1015). Both end where the footer (.footer-override) begins: the chrome puts the footer
   after the inner wrapper (.uma-chrome-content-inner), as the last child of the content band (#uma-main). Once the
   footer scrolls into view, the end of that wrapper rises above the bar's bottom and pushes the whole bar up (at
   1440 on Top voices: bar -61 to 82, search -37 to 13, under the top bar or off screen; pills 37 to 82 and the
   Filters tab 82 to 118 still showing). The search goes first because it is at the top of the bar.
   Fix: on these two pages the two chrome wrappers and the marketplace's scope give no box of their own
   (display: contents), so the bar's containing block is the content band, which runs to the end of the page,
   footer included. The bar now stays at its sticky top at every scroll position, over the footer as well.
   The wrappers' only spacing was the inner wrapper's top gap (UMA.css :where(.page-uma-library,
   .page-uma-marketplace) .uma-chrome-content-inner, --fixed-header-height) and the page wrapper's hairline top
   border (UMA.css .uma-chrome-all-content-wrapper, --stroke-hairline, drawn 1px wide); the band takes both as its
   top padding, so every section and the footer sit exactly where they did (measured at 375, 768 and 1440).
   The wrapper keeps role main in the accessibility tree. */
:where(.page-uma-library, .page-uma-marketplace) :is(.uma-chrome-content-inner, .tools-content-in-chrome, .shop-sticky-scope) { display: contents; }
:where(.page-uma-library, .page-uma-marketplace) .uma-chrome-content-band { padding-top: calc(var(--fixed-header-height) + var(--stroke-thin)); }

/* ===== NEXT ROUND (10 Oct 2026, her rule, Uma website bug fixes batch 1): FILM CONTROLS AFTER PLAY =====
   Pressing play never brings a film's captions, sound and pause buttons up by itself: they come back only once the
   cursor has left the film and come over it again (on a touch screen, the next tap after play; with keyboard focus,
   at once). The homepage hero and cards do this with their existing classes (video-controls-row--visible and
   circular-play-button-on-dark--hidden). The video drawer's CC row of its own (UMA.css .video-controls-row--own,
   always on) is taken off while the film plays by /uma-video-captions.js with this class, and comes back as above.
   Keyboard focus inside the row always shows it. */
.uma-video-drawer .video-controls-row--own.video-controls-row--own-off {
  opacity: var(--opacity-hidden);
  pointer-events: none;
  transition: opacity var(--transition-base) ease;
}
.uma-video-drawer .video-controls-row--own.video-controls-row--own-off:focus-within {
  opacity: var(--opacity-visible);
  pointer-events: auto;
}

/* ---------- every film's share block matches the hero's (next round, her ruling 9 Oct 2026). The #StopMakingWomenWait card
   said "SHARE" in capitals (UMA.css .campaign-share-label, uppercase) with the label's paragraph margin and the block's
   smaller gap above the icons. The card now uses the hero's label (index.html: "Share this video", class
   hero-end-screen-label: sentence case, no margin; same size, weight and colour from .campaign-share-label), the hero's
   gap between the words and the icons (--gap-md, as .hero-end-screen), and at 600 and below the hero's phone icon size
   and 44px tap layer. Hover, touch and focus are the Catherine and Laura icons' (be84c94d). ---------- */
.campaign-share-block { gap: var(--gap-md); }
@media (max-width: 37.5rem) {
  :where(.campaign-share-block) .card-social-icon { font-size: var(--button-icon-lg); position: relative; }
  :where(.campaign-share-block) .card-social-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  :where(.campaign-share-block) .campaign-share-row { gap: var(--gap-md); }
}

/* ===== NEXT ROUND (10 Oct 2026, her design): SPOTLIGHT ON PLAY =====
   While Catherine's or Laura's film plays on the homepage, the Self-care marketplace and Aurora community cards take the
   library card's own darken (UMA.css .flippable-9-16-card-media--dimmed and .card-hover-brighten, added and taken off by
   the index.html script "spotlight on play"). The dimmed class carries its filter transition only while it is on, so the
   darken would vanish at once when it lifts; these cards carry the same transition all the time, so it lifts as gently
   as it falls. Reduced motion: as the library card (the site's own still rules apply to both). */
.flippable-9-16-card-media--spotlight {
  transition: filter var(--transition-base) ease;
}

/* ===== THREE ITEMS (9 Oct 2026): INGREDIENT CARDS WITH NO PICTURE =====
   Marketplace filter drawer, Pick nutrients and ingredients. An ingredient whose picture is missing in her sheet, or
   whose picture will not load, shows its circle empty with a leaf in the middle (marketplace.html umaIngCircleHtml and
   umaIngPictureMissing) instead of the browser's broken-picture icon. Same circle, same size, its own light and dark
   colours (--t-ing-circle, --t-ing-text). */
:where(.page-catalogue) .ing-visual-circle--empty { display: flex; align-items: center; justify-content: center; color: var(--t-ing-text); }
:where(.page-catalogue) .ing-visual-empty-icon { font-size: var(--button-icon-lg); opacity: var(--opacity-muted); }

/* ===== NEXT ROUND (10 Oct 2026, her decisions): HOMEPAGE FILMS FINAL =====
   1. Spotlight: no new CSS. The Free screening card and Catherine's and Laura's films carry card-hover-brighten and
      flippable-9-16-card-media--spotlight (index.html), so they take the library card's darken by the rules above.
   2. Hidden controls are not Tab stops (index.html script of that name, inert while hidden). While a card film plays the film
      itself is the Tab stop (film-keyboard-stop, added by the card script with tabindex 0); it gets the page's orange ring
      on keyboard focus only, drawn inside the card's rounded edge so the card does not clip it. */
.film-keyboard-stop:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: calc(-1 * var(--focus-outline-width));
}

/* 3. Hero share block at 600 and below: a gap ABOVE the centred play mark, as at 1440 (her ruling, 10 Oct 2026).
      Measured at 375 (4:3 box 281px tall, scrolled to the top on play): the 60px top bar ends at 61, the mark runs 106 to
      176, so there are 45px above the mark. Stacked as at 1440 ("Share this video" 20px, gap 12.8px, icons 23px = 56px)
      the block would run up under the bar, so on a phone the words and the icons sit side by side on one line (23px), a
      gap-sm (9.6px) above the mark: 73 to 96, clear of the bar. Restates the 37.5rem rule above ("a gap BELOW the centred
      mark"), which this replaces. */
@media (max-width: 37.5rem) {
  .hero-end-screen {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--gap-md);
    top: calc(50% - var(--button-size-xxl) / 2 - var(--gap-sm));
    translate: 0 -100%;
  }
}

/* 4. Catherine's and Laura's scrub bar (index.html card script, film-scrub). A native range input (role slider) over a
      progress element for the played part, along the bottom of the card where the social icons sit (they step back while the
      film plays, so the two never show together), in white over the darkened film in both themes. It fades with the sound,
      captions and pause controls (film-scrub--visible), above the film and its scrim, under the first-tap layer. The bar is
      the hit-area height (44px) so it is easy to take on a phone; the track is 4px (the cycle slider's track tokens are set
      only inside the cycle pages, not on :root, so the bar has its own). */
:root {
  --z-film-scrub: 5;
  --film-scrub-thumb: var(--gap-md);
  --film-scrub-track: 0.25rem;
}
.film-scrub {
  position: absolute;
  left: var(--gap-md);
  right: var(--gap-md);
  bottom: var(--gap-md);
  z-index: var(--z-film-scrub);
  height: var(--hit-area-comfort);
  opacity: var(--opacity-hidden);
  pointer-events: none;
  transition: opacity var(--transition-base) ease;
}
.film-scrub--visible,
.film-scrub:focus-within {
  opacity: var(--opacity-visible);
  pointer-events: auto;
}
.film-scrub-fill {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--film-scrub-track);
  margin: 0;
  translate: 0 -50%;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(var(--bright-white-rgb), var(--opacity-moderate));
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}
.film-scrub-fill::-webkit-progress-bar {
  background: transparent;
  border-radius: var(--radius-pill);
}
.film-scrub-fill::-webkit-progress-value {
  background: var(--bright-white);
  border-radius: var(--radius-pill);
}
.film-scrub-fill::-moz-progress-bar {
  background: var(--bright-white);
  border-radius: var(--radius-pill);
}
.film-scrub-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  appearance: none;
  -webkit-appearance: none;
}
.film-scrub-input::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}
.film-scrub-input::-moz-range-track {
  height: 100%;
  background: transparent;
}
.film-scrub-input::-webkit-slider-thumb {
  width: var(--film-scrub-thumb);
  height: var(--film-scrub-thumb);
  margin-top: calc((var(--hit-area-comfort) - var(--film-scrub-thumb)) / 2);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--bright-white);
  -webkit-appearance: none;
  appearance: none;
}
.film-scrub-input::-moz-range-thumb {
  width: var(--film-scrub-thumb);
  height: var(--film-scrub-thumb);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--bright-white);
}
.film-scrub-input:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-pill);
}
/* On a touch screen the card's social icons stay on while the film plays (UMA.css (hover: none) .card-socials-overlay), so
   there the bar sits just above them: measured at 375, the icons run 12px to 48px up from the card's bottom; the bar's 44px
   box sits 57px to 101px up (its track 79px up), clear of them. */
@media (hover: none) {
  .film-scrub { bottom: calc(var(--gap-md) + var(--hit-area-comfort)); }
}

/* ---------- contact sent screen: "Return to homepage" under the words (10 Oct 2026, her ruling), the site's orange button
   (btn btn-pill btn-lg btn-primary-orange add-on-press-animation in contact.html); a gap above it from the screen's own
   spacing token. ---------- */
.uma-send-screen-home { margin-top: var(--app-default-top-bottom-margin-lg); }

/* ---------- WISHLIST TABS ONE DEFINITION: the profile's ADHD | Autism split tab (her ruling, 10 Oct 2026) ----------
   Search: WISHLIST TABS ONE DEFINITION. The only definition of the Wishlist / Library tabs in this file, for the chrome's
   wish list (uma-chrome.js MARKUP: homepage, library and every chrome page) and the marketplace's own drawer
   (marketplace.html), which carry the same classes. Her ruling replaces her earlier "straight split at every width":
   the tabs are the profile page's ADHD | Autism split tab (profile.html AuDHD tab bar), reusing its classes, not a copy.
   Markup: the switch also carries .uma-profile-tab-bar and each half .uma-profile-tab-segment, so UMA.css's own profile
   rules draw them: one rounded box, --stroke-thin border, --app-default-radius-md corners, height --button-size-lg
   (--button-size-md at 600 and below), max width --max-content-width-golden-section-small, two equal halves with the
   profile's divider, --body-text-sm words (--body-text-xs at 600 and below), weight normal.
   The profile's colour tokens (--t-profile-tab-*) are set only on the profile page (UMA.css :root:where(.page-user-profile)),
   so they are set here on the switch, with the profile's own values (light and dark), as the catalogue's currency tab does
   (UMA.css :where(.page-catalogue) .currency-tab-bar).
   Selected half: the scripts already mark it with aria-pressed="true" (and .uma-wishlist-scope-btn-active in the chrome,
   .is-active in the marketplace), so the profile's selected colours follow aria-pressed; no script changes.
   The older wish list rules in UMA.css (left as they are) come after the profile rules or are scoped to the marketplace,
   so they would win: .uma-wishlist-scope-toggle / .uma-wishlist-scope-btn and their :where(.page-uma-marketplace)
   copies (inline-flex or grid, hairline border, the 44px --wishlist-scope-height, gap-lg side padding, medium weight),
   and their @media (max-width: 599px) phone lines. The two-class selectors below put the profile's values back.
   The hover is NAVY HOVER WISHLIST, further down (unchanged).
   Breakpoint: 599px, the one the filter pills (All products, Supplements ...) use for their overflow, where they drop
   their side room and run full width, edge to edge (UMA.css @media (max-width: 599px) .uma-wishlist-pill-wrapper /
   .uma-wishlist-pill-bar, and the marketplace's .pill-filter-bar-wrapper / .pill-filter-bar). Above it the tabs are the
   profile's box, centred in the header's own padding (UMA.css .uma-wishlist-drawer-header: --app-default-top-bottom-margin-lg
   top, --gap-lg sides). At 599 and below they change with the pills: no gaps, full width, edge to edge, square corners,
   no side borders (UMA.css's phone lines already take the header's padding away).
   The filter pills sit the profile's own gap below the tabs (.uma-profile-tab-bar margin-bottom,
   --app-default-top-bottom-margin-lg, 1.5rem) at every width, so the header keeps no bottom padding of its own.
   The X (both drawers' close buttons keep their aria-label "Close wishlist") never takes room from either half: both
   halves keep the profile's equal padding, so each label sits centred in its own half. It stays in the top right corner,
   as earlier today, centred on the tabs' height. Above 599 the box is at most 417px wide and centred in a drawer at least
   600px wide, so the X sits in the corner beside it, clear of the Library half, in the drawer's own colour (navy in
   light, white in dark). At 599 and below it sits over the Library half's top right corner, and its colour follows that
   half: navy on the dark white half, white on the navy half (light); the reverse in dark. The chrome and the marketplace
   script give it .uma-wishlist-close-on-favourites while Library is chosen. */
.uma-wishlist-scope-toggle.uma-profile-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);
  display: flex;
  margin: 0 auto var(--app-default-top-bottom-margin-lg);
  border: var(--stroke-thin) solid var(--t-profile-tab-border);
  border-radius: var(--app-default-radius-md);
  background: var(--t-profile-tab-bg);
}
:root[data-theme="dark"] .uma-wishlist-scope-toggle.uma-profile-tab-bar {
  --t-profile-tab-bg: rgba(var(--bright-white-rgb), var(--opacity-very-low));
  --t-profile-tab-border: rgba(var(--bright-white-rgb), var(--opacity-low));
  --t-profile-tab-text: var(--bright-white);
  --t-profile-tab-divider: rgba(var(--bright-white-rgb), var(--opacity-low));
  --t-profile-tab-selected-bg: var(--bright-white);
  --t-profile-tab-selected-text: var(--navy);
}
.uma-wishlist-scope-btn.uma-profile-tab-segment {
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0 var(--gap-xs);
  color: var(--t-profile-tab-text);
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-normal);
}
.uma-wishlist-scope-btn.uma-profile-tab-segment[aria-pressed="true"] { background: var(--t-profile-tab-selected-bg); color: var(--t-profile-tab-selected-text); }
.uma-wishlist-drawer-header { padding-bottom: 0; }
.uma-wishlist-close, .uma-wishlist-close.uma-wishlist-close-on-favourites,
.wishlist-drawer-close, .wishlist-drawer-close.uma-wishlist-close-on-favourites { top: calc(var(--app-default-top-bottom-margin-lg) + (var(--button-size-lg) - var(--button-size-sm)) / 2); right: var(--gap-regular); }
.uma-wishlist-close { color: var(--navy); --wishlist-close-text: var(--navy); --wishlist-close-icon: var(--navy); }
.wishlist-drawer-close { color: var(--t-drawer-close); --t-drawer-close: var(--navy); }
.uma-wishlist-drawer[data-scope="favourites"] ~ .wishlist-drawer-close .drawer-close-plain-icon { color: var(--t-drawer-close); }
:root[data-theme="dark"] .uma-wishlist-close { color: var(--white-text-default); --wishlist-close-text: var(--white-text-default); --wishlist-close-icon: var(--white-text-default); }
:root[data-theme="dark"] .wishlist-drawer-close { --t-drawer-close: var(--white-text-default); }
@media (max-width: 600px) {
  /* the profile's own phone line (UMA.css .uma-profile-tab-segment, --body-text-xs), which the marketplace's later
     :where(.page-uma-marketplace) .uma-wishlist-scope-btn font size would otherwise override */
  .uma-wishlist-scope-btn.uma-profile-tab-segment { font-size: var(--body-text-xs); }
}
@media (max-width: 599px) {
  /* bug fixes batch 1 (10 Oct 2026, her items 38 and 39), changed in this one definition, no second rule:
     38: when the pills go full width with square corners, the tabs sit straight on the pill bar, with no gap
         (the bottom margin was --app-default-top-bottom-margin-lg). Above 599 the profile's gap stays.
     39 (her ruling, 10 Oct 2026, late: "the X in the top corner", no row of its own): the X stays in the top right
         corner over the Library half, and the Library half keeps the X's footprint as its own end padding (the X's
         --button-size-sm, its icon gap --gap-xs and its --gap-regular from the edge), so "Library" is centred in the
         rest of the half and the X only ever covers that empty end. The two halves stay exactly equal (two equal grid
         columns, as UMA.css's own phone line drew them), so the divider stays in the middle and Wishlist is unchanged.
         The words are "Wishlist" | "Library" at every width (the short labels are the same words). The X's colour
         follows the half under it: white on the navy Library half (light), navy on it in dark.
     What was here (earlier today): an extra row above the tabs for the X (header padding-top --button-size-sm +
     2 x --gap-xs, X top --gap-xs) and the X in the drawer's colour. */
  .uma-wishlist-scope-toggle.uma-profile-tab-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: none;
    margin: 0;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .uma-wishlist-scope-btn-favourites.uma-profile-tab-segment { padding-right: calc(var(--button-size-sm) + var(--gap-xs) + var(--gap-regular)); }
  .uma-wishlist-close, .uma-wishlist-close.uma-wishlist-close-on-favourites,
  .wishlist-drawer-close, .wishlist-drawer-close.uma-wishlist-close-on-favourites { top: calc((var(--button-size-md) - var(--button-size-sm)) / 2); }
  .uma-wishlist-close.uma-wishlist-close-on-favourites { color: var(--white-text-default); --wishlist-close-text: var(--white-text-default); --wishlist-close-icon: var(--white-text-default); }
  .wishlist-drawer-close.uma-wishlist-close-on-favourites { --t-drawer-close: var(--white-text-default); }
  :root[data-theme="dark"] .uma-wishlist-close.uma-wishlist-close-on-favourites { color: var(--navy); --wishlist-close-text: var(--navy); --wishlist-close-icon: var(--navy); }
  :root[data-theme="dark"] .wishlist-drawer-close.uma-wishlist-close-on-favourites { --t-drawer-close: var(--navy); }
}

/* ===== Library next round (10 Oct 2026): her decisions 1, 5 and 7 (library.html) ===== */

/* Her decision 1: the library page's H1 ("Your next research rabbit hole starts here") starts 10rem (160px) from the top
   of the page at widths above 900. There is no 10rem spacing token on this page (--blue-box-space-below and
   --default-section-whitespace-bottom are 10rem but are set for the homepage and Learn pages only), so the hero's top
   padding is the two existing spacing tokens that make 10rem: --app-default-top-bottom-margin-xxxxl (4rem) +
   --app-default-top-bottom-margin-xxxxxl (6rem). The hero runs up under the see-through top bar (.uma-chrome-hero-under-bar,
   L11), so its top edge is the top of the page. Its words start at the top of the hero rather than in its middle, so on
   a tall screen the H1 does not move further down than 10rem. Measured: H1 top edge 124px before, 160px after. */
@media (min-width: 901px) {
  .page-uma-library .uma-hero.uma-chrome-hero-under-bar {
    padding-top: calc(var(--app-default-top-bottom-margin-xxxxl) + var(--app-default-top-bottom-margin-xxxxxl));
    align-items: flex-start;
  }
}

/* Her decision 5: library cards (books, audiobooks, podcast shows, new episodes, videos, apps) no longer load on teal
   (podcast artwork, UMA.css --bright-teal), black (video and episode tiles) or the pale card surface. While a card is
   loading and behind its picture, its picture box is dark white in light mode (UMA.css --dark-white) and, in dark mode,
   the page's dark-mode surface navy (--t-surface, which is --navy, #232F4B, in dark mode on this page; the same colour
   the book, audiobook and app boxes already loaded on in dark mode). A portrait video keeps her black either side of
   its picture once the picture has arrived (her ruling of 8 Oct 2026, UMA.css .library-video-vertical); it too loads
   on dark white or navy. Existing tokens only. */
.page-uma-library .uma-library-book-card-media,
.page-uma-library .uma-library-audiobook-card-media,
.page-uma-library .uma-library-app-card-media,
.page-uma-library .uma-library-video-card-media:not(.library-video-vertical.library-picture-loaded),
.page-uma-library .uma-library-podcast-card-artwork,
.page-uma-library .library-episode-tile-media.library-image-and-media-container { background: var(--dark-white); }
:root[data-theme="dark"].page-uma-library .uma-library-book-card-media,
:root[data-theme="dark"].page-uma-library .uma-library-audiobook-card-media,
:root[data-theme="dark"].page-uma-library .uma-library-app-card-media,
:root[data-theme="dark"].page-uma-library .uma-library-video-card-media:not(.library-video-vertical.library-picture-loaded),
:root[data-theme="dark"].page-uma-library .uma-library-podcast-card-artwork,
:root[data-theme="dark"].page-uma-library .library-episode-tile-media.library-image-and-media-container { background: var(--t-surface); }

/* Her decision 7: a New episodes tile is the same height as the video cards beside it where the player allows it.
   Spotify's player is drawn at whatever height its frame is given (Spotify's iframe API: "height, the height in pixels
   of the Embed"; its own stylesheet switches layout at 152, 232 and 352 px and fills the frame), so a Spotify tile is
   the video cards' 16:9 again and the frame (UMA.css .library-episode-frame, height 100%) fills it. Apple's episode
   player has a fixed height: Apple's guide gives it a minimum height of 175 (https://podcasters.apple.com/support/
   apple-podcasts-embed-player) and its own stylesheet never draws it taller than 175 px (--embed-legacy-max-height),
   so a taller frame would leave an empty band. An Apple tile therefore stays the player's own 175 px high with
   nothing left over (bug fixes batch 1, 9 Oct 2026, above). The same for a player held until cookies are allowed. */
.library-episode-tile-media:has(iframe[src*="open.spotify.com"]),
.library-episode-tile-media:has(iframe[data-uma-consent-src*="open.spotify.com"]) { aspect-ratio: var(--carouselle-card-ratio-video); height: auto; }

/* ===== drawer reviews: no reviews yet, Post review under her line (release build 95, 10 Oct 2026) ===== */
/* "Uma community reviews" in the library, Learn page and marketplace drawers. With no reviews uma-media-reviews.js marks
   the section uma-drawer-reviews-is-empty (the thumbs and the sort menu are already hidden, UMA.css release build 91)
   and writes "No review yet, leave the first review". Post review was still pushed to the far right: in the library and
   Learn drawers by margin-left: auto in the arrows bar (UMA.css .uma-carousel-nav--with-post .uma-drawer-post-btn), in
   the marketplace drawer by justify-content: flex-end on the row under the carousel (UMA.css .drawer-reviews-bottom-row
   and .uma-drawer-reviews-header). While empty it now starts on the same left edge as her line, as on the reviews page
   (reviews-none). Once there is one review the class comes off and the layout is as before. Existing tokens only. */
.uma-drawer-reviews-is-empty .uma-carousel-nav--with-post .uma-drawer-post-btn {
  margin-left: 0;
}

.uma-drawer-reviews-is-empty .drawer-reviews-bottom-row,
.uma-drawer-reviews-is-empty .drawer-reviews-bottom-row .uma-drawer-reviews-header {
  justify-content: flex-start;
}

.uma-drawer-reviews-is-empty .drawer-reviews-bottom-row {
  padding-left: var(--drawer-media-padding);
}

/* ---------- Page held still while a drawer or panel is open (10 Oct 2026, her wish list bug) ----------
   Her words: with the wish list open the page behind still scrolls; it must not, and must come back at the same place.
   Cause: html hides its sideways overflow, so a lock on the body (the chrome's uma-chrome-scroll-locked,
   crisis-pane-scroll-lock, the library's and discounts' body overflow) only makes the body its own box and the page
   (html) keeps scrolling. 5bdcc4f5 fixed this for the marketplace's two drawers by holding html instead
   (.uma-drawer-page-locked above). The same one mechanism, overflow: hidden on html, now follows every drawer and panel
   that is open, read from the classes they already carry, so no script changes: the chrome's wish list, menu, feedback
   panel, alerts panel (open when not hidden), crisis pane and upgrade modal; the library's and marketplace's Filters panel
   (below); the product, show and video
   drawers on the library, marketplace and discounts. html keeps its scrollbar-gutter: stable (UMA.css html, body), so
   the content does not move sideways when the scrollbar goes; overflow: hidden leaves scrollY where it was, so closing
   puts the page back exactly. The lists inside keep their own scrolling (overflow-y: auto, as before) and no longer
   hand a scroll on to the page at their ends (overscroll-behavior: contain). */
html:is(.drawer-scroll-lock, .uma-chrome-scroll-locked),
html:has(> body:is(.uma-chrome-scroll-locked, .crisis-pane-scroll-lock, .uma-upgrade-modal-open, .drawer-scroll-lock)),
html:has(:is(.uma-wishlist-drawer-open, .uma-wishlist-drawer.is-open, .uma-product-drawer.is-open, .uma-video-drawer.is-open, .uma-feedback-panel-open, .uma-alerts-panel:not([hidden]))) { overflow: hidden; }
.uma-wishlist-drawer-body, .uma-product-drawer { overscroll-behavior: contain; }
/* The Filters panel (body.uma-filter-drawer-open) is the screen's height less the bars and scrolls its own options
   (UMA.css bug 116), so the page is held while it is open; but where the panel takes its natural height and the page
   is meant to scroll to reach its end (a browser without dvh, UMA.css bug 116; the library on screens 500px tall or
   less, QA content 3 Oct), the page is left free, as before. */
@supports (height: 1dvh) {
  html:not(.page-uma-library):has(> body.uma-filter-drawer-open) { overflow: hidden; }
  @media (min-height: 501px) {
    html.page-uma-library:has(> body.uma-filter-drawer-open) { overflow: hidden; }
  }
}

/* ===== Video bio blank card (10 Oct 2026, her design): authors and podcast hosts without a video bio ===== */
/* A "Meet the author / host / guest" panel in a drawer and a Top voices card whose person has no video bio show a blank
   card with "<first name> has not uploaded a video bio yet" (/uma-library-additions.js noVideoCard, library.html
   renderVoices), in the Top voices card's own no-video box (UMA.css .voice-card-no-video, .voice-card-no-video-text).
   The blank card is dark white in light mode (--dark-white) and the dark-mode surface navy in dark mode (--t-surface,
   --navy on the library page), the same colours as the library cards while they load. The drawers also open on the
   Learn pages, inside the drawers' own .page-uma-library box, hence the second dark selector. Existing tokens only. */
.page-uma-library .uma-library-voice-card-media:has(.voice-card-no-video),
.page-uma-library .drawer-meet-author-video:has(.voice-card-no-video) { background: var(--dark-white); }
:root[data-theme="dark"].page-uma-library .uma-library-voice-card-media:has(.voice-card-no-video),
:root[data-theme="dark"].page-uma-library .drawer-meet-author-video:has(.voice-card-no-video),
:root[data-theme="dark"] .page-uma-library .drawer-meet-author-video:has(.voice-card-no-video) { background: var(--t-surface); }

/* ---------- "Sign up or Log in" box: her split design (10 Oct 2026). Search: SIGN-IN BOX SPLIT ----------
   Her design, replacing the 50/50 pill buttons of the 9 Oct block (c140b95a, REVIEW SIGN-IN BOX above), on every
   "Sign up or Log in to ..." box (.review-sign-in-notice / .review-sign-in-actions): /reviews Post review (reviews.html);
   the library, marketplace and Learn drawers' Post review / Post comment (uma-media-reviews.js); the chrome's pop-up
   (window.umaReviewSignInBox: homepage "Why people love Uma", discounts, the library's Add) and the Feedback tab's review
   option (.review-sign-in-notice-panel) (uma-chrome.js); follow / save this (uma-wishlist-sync.js); I'm interested
   (uma-role-panels.js); Add your video (index.html, library.html, uma-library-cards.js).
   Top half: the heading, centred, line height 1.3 (--default-line-height-x-small), with the box's own card padding.
   Bottom half: Sign up and Log in side by side, each exactly half, edge to edge, no gap, no pill; both white with navy
   text (--white-text-default, --navy), neither orange; dark mode flips them (navy, white text). A thin divider
   (--stroke-thin, --t-divider) runs across the top of the buttons and between them. The box keeps its corners
   (--default-radius) and the buttons follow them at the bottom. Hover: the light hover overlay (--hover-overlay-light)
   laid over the button, the same on both; press: UMA.css add-on-press-animation (added to the buttons' markup).
   The Feedback tab's box had no surface of its own; it now takes the idle notice's card surface and corners so it is
   the same box. Add your video keeps its X in the top right corner, with the heading keeping the X's room.
   Button words stay centred (justify-content, which btn-pill gave before), and the keyboard ring is drawn just inside
   each button (--focus-ring-offset set to minus --focus-outline-width) so the box's edge (dialogs scroll, overflow
   auto) does not cut it off. */
.review-sign-in-notice.idle-notice,
.review-sign-in-notice.review-sign-in-notice-panel { padding: 0; border-radius: var(--default-radius); }
.review-sign-in-notice.review-sign-in-notice-panel {
  margin-top: var(--gap-md);
  background: var(--t-card-surface, var(--card-default-background));
  color: var(--t-card-text, var(--dark-charcoal));
}
:root[data-theme="dark"] .review-sign-in-notice.review-sign-in-notice-panel {
  background: var(--t-card-surface, var(--chrome-wishlist-panel-bg));
  color: var(--t-card-text, var(--chrome-wishlist-panel-text));
}
.review-sign-in-notice .idle-notice-heading {
  margin: 0;
  padding: var(--default-card-top-padding) var(--default-card-left-right-padding);
  line-height: var(--default-line-height-x-small);
  text-align: center;
}
.review-sign-in-notice .video-bio-notice-heading {
  padding-left: calc(var(--default-card-left-right-padding) + var(--back-next-button-diameter) + var(--gap-md));
  padding-right: calc(var(--default-card-left-right-padding) + var(--back-next-button-diameter) + var(--gap-md));
}
.review-sign-in-notice .review-sign-in-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: var(--stroke-thin) solid var(--t-divider);
}
.review-sign-in-notice .review-sign-in-actions > .btn {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  justify-content: center;
  border: none;
  border-radius: 0;
  --focus-ring-offset: calc(-1 * var(--focus-outline-width));
  background-color: var(--white-text-default);
  background-image: none;
  color: var(--navy);
}
.review-sign-in-notice .review-sign-in-actions > .btn:first-child { border-bottom-left-radius: var(--default-radius); }
.review-sign-in-notice .review-sign-in-actions > .btn:last-child { border-bottom-right-radius: var(--default-radius); }
.review-sign-in-notice .review-sign-in-actions > .btn + .btn { border-left: var(--stroke-thin) solid var(--t-divider); }
.review-sign-in-notice .review-sign-in-actions > .btn:hover {
  background-color: var(--white-text-default);
  background-image: linear-gradient(var(--hover-overlay-light), var(--hover-overlay-light));
  color: var(--navy);
}
:root[data-theme="dark"] .review-sign-in-notice .review-sign-in-actions > .btn,
:root[data-theme="dark"] .review-sign-in-notice .review-sign-in-actions > .btn:hover { background-color: var(--navy); color: var(--white-text-default); }

/* ---------- Feedback tab, "Post review" signed out: a smaller "Sign up or Log in" box (10 Oct 2026, her brief).
   Search: FEEDBACK SIGN-IN SIZE. Only the size changes, only in the Feedback panel's box (.review-sign-in-notice-panel):
   the heading one step down the UMA.css heading scale, --heading-size-lg (2rem) to --heading-size-md (1.7rem), still
   centred at line height 1.3 (SIGN-IN BOX SPLIT above); the two buttons take UMA.css btn-sm instead of btn-md in the
   chrome's markup (uma-chrome.js). Colours, dividers, the 50/50 split and the other boxes are unchanged. */
.review-sign-in-notice-panel .idle-notice-heading { font-size: var(--heading-size-md); }

/* ---------- Wish list Buy buttons: hover and press as the other orange buttons (10 Oct 2026, her bug) ----------
   Her words: the Buy buttons in the wish list have no hover; they should go dark orange like the other orange buttons
   and have the pressed animation when clicked. The pressed animation is the site's own class, add-on-press-animation
   (UMA.css; its reduced-motion rule comes with it), now on the Buy button and on both halves of a book's Buy pill
   (uma-chrome.js panel, marketplace.html drawer). Hover: a book's Buy pill only washed its halves with 8% orange over
   the orange (UMA.css .uma-wishlist-split-main:hover, :where(.page-uma-marketplace .drawer-split-pill--tile)
   .drawer-split-pill-main:hover), so nothing showed; each half now takes .btn-primary-orange's hover, --orange-dark.
   The single Buy button already did (UMA.css .uma-wishlist-tile-buy-mobile:hover, .btn-primary-orange:hover).
   The chrome's Buy button has its own background transition (UMA.css .uma-wishlist-tile-buy-mobile), which took the
   place of the class's transform transition; the class's transition is given back to it at one class's weight, so
   the class's quicker press-down (.add-on-press-animation:active) still wins while pressed. */
.uma-wishlist-split-main:hover, .uma-wishlist-split-arrow:hover,
.drawer-split-pill--tile .drawer-split-pill-main:hover, .drawer-split-pill--tile .drawer-split-pill-arrow:hover { background: var(--orange-dark); }
:where(.uma-wishlist-tile-buy-mobile).add-on-press-animation { transition: transform var(--chrome-fade-slow) var(--chrome-spring), background-color var(--transition-fast) ease, background var(--transition-fast) ease; }

/* ===== SUPERJUICES (10 Oct 2026, her ruling): A RECIPE WITH NO PICTURE =====
   Marketplace recipe card (marketplace.html juiceCard). A recipe whose row has no background_image (SUPERJUICE_9 today)
   shows its picture box empty, on the card's own colour, with the ingredient cards' leaf in the middle
   (.ing-visual-empty-icon, the same size and fade) instead of a picture that cannot load. */
:where(.page-uma-marketplace) .juice-card-picture--empty { display: flex; align-items: center; justify-content: center; color: var(--bright-white); }

/* ---------- NAVY HOVER: navy buttons, pills and tabs hover to dark navy, white text; no orange (10 Oct 2026, her rule) ----------
   Search: NAVY HOVER. Her words: every navy button on the site hovers to dark navy with the text staying white, as the
   sidebar does (UMA.css .uma-chrome-side-bar-strip:hover and .btn-primary-navy:hover both use --navy-dark). Pill switches
   and tabs are buttons, not links: no orange and no underline on hover. Only hover changes here; each item's own pressed
   animation and transitions are kept.
   Dark mode: every selected pill or tab below is white in dark mode (each page's dark --t-selected-bg, --chrome-pill-indicator,
   --t-tab-selected-bg and so on are --bright-white). The site's existing dark pattern for a white "navy" button is that it
   stays white on hover (UMA.css dark --chrome-feedback-primary-hover and --t-navy-pill-hover-bg are --bright-white), so the
   dark navy is light mode only. The tabs that stay navy in both modes (.uma-chrome-feedback-tab-btn, part 4's discounts
   drawer tabs) darken in both.
   Touch: the new hover fills sit inside @media (hover: hover), so a tapped pill on a phone does not keep a dark or tinted
   fill after the tap (the site does the same for the header icons, ~line 1609). The "no orange" colour lines are outside
   it, so a tap never leaves orange text either.
   NEW TOKEN: --uma-unselected-tab-hover-bg, the existing hover for an unselected tab: light --hover-overlay-dark (as
   UMA.css .uma-wishlist-scope-btn:hover and the canvases' .tools-pill-outline:hover); dark white at --opacity-extra-low
   (as the canvases' dark --t-outline-pill-hover-bg, so it shows on the navy track). */
:root { --uma-unselected-tab-hover-bg: var(--hover-overlay-dark); }
:root[data-theme="dark"] { --uma-unselected-tab-hover-bg: rgba(var(--bright-white-rgb), var(--opacity-extra-low)); }

/* 1. Sliding pill switches that are tabs, not pill bars: the Feedback panel's Report bug / Post review (chrome) and the
      review tabs, Read reviews / Post review (.reviews-tabs: the discounts drawer, part 4 below, and the library's).
      Text: the selected item keeps its selected colour (white on navy). On the library and the marketplace UMA.css's
      :where(.page-catalogue) .pill-filter-item:not(.selected):hover turned the Feedback panel's selected tab orange
      (its selected class is .uma-chrome-pill-item-selected, not .selected). Unselected tabs keep their own text
      colour, no orange, no underline.
      PILL BARS are no longer here (10 Oct 2026, her new ruling for pill bars: orange text on hover, no background; see
      PILL BAR HOVER below): the wish list's filter pills, the library and marketplace category bars and the marketplace
      wish list's pills, the results pages' pill bars and the challenges / strengths / Access to Work chart pills. Their
      "no orange" colour lines and their --uma-unselected-tab-hover-bg tint were taken out here, so UMA.css's own pill
      hover (orange text, no underline, its color transition) shows again. The selected pill's line below stays. */
.pill-filter-item.uma-chrome-pill-item.uma-chrome-pill-item-selected:hover,
.uma-chrome-pill-item.uma-chrome-pill-item-selected:hover { color: var(--chrome-pill-selected-text); text-decoration: none; }
.uma-feedback-pill-item.uma-chrome-pill-item:not(.uma-chrome-pill-item-selected):hover { color: var(--chrome-pill-text); text-decoration: none; }
:where(.page-catalogue) .reviews-tabs .pill-filter-item:not(.selected):hover { color: var(--t-pill-text, inherit); text-decoration: none; }

@media (hover: hover) {
  /* The selected pill is the indicator behind the selected item, so hovering the selected item darkens the indicator. */
  :root:not([data-theme="dark"]) .uma-chrome-pill-bar:has(> .uma-chrome-pill-item-selected:hover) > .uma-chrome-pill-indicator,
  :root:not([data-theme="dark"]) .pill-filter-bar:has(> .pill-filter-item.selected:hover) > :is(.selected-pill-in-tab-filter, .selected-pill-in-filter) { background-color: var(--navy-dark); }
  /* Unselected tabs (not pill bars): the existing unselected tab hover. */
  .uma-feedback-pill-item.uma-chrome-pill-item:not(.uma-chrome-pill-item-selected):hover,
  :where(.page-catalogue) .reviews-tabs .pill-filter-item:not(.selected):hover { background-color: var(--uma-unselected-tab-hover-bg); }

  /* 2. Navy selected tabs and segments that did nothing on hover: dark navy, text unchanged (white). Light mode only
        (see dark mode above). Reviews thumbs (.verdict-tab--selected: /reviews and the product drawers), the episodes
        switch (.uma-segmented-toggle-option, active by -active or .is-active), the currency switch and the profile's
        mode tabs (.mode-tab-segment-selected), the profile's option pills (.uma-profile-opt-pill-selected), the results
        pages' chart and view tabs (.radar-graph-tab, .results-view-tab), and the statistics page's tabs (.swipe-tab.on,
        .mt-btn.on). */
  :root:not([data-theme="dark"]) :is(.verdict-tab--selected, .uma-segmented-toggle-option-active, .uma-segmented-toggle-option.is-active, .mode-tab-segment-selected, .uma-profile-opt-pill-selected, .radar-graph-tab.is-active, .results-view-tab.is-active, .swipe-tab.on, .mt-btn.on):hover { background-color: var(--navy-dark); }
  :root:not([data-theme="dark"]) :is(.swipe-tab.on, .uma-profile-opt-pill-selected):hover { border-color: var(--navy-dark); }

  /* The screenings' older feedback tabs: the active tab is plain --navy in both modes, so it darkens in both. */
  .uma-chrome-feedback-tab-btn.is-active:hover { background: var(--navy-dark); color: var(--bright-white); }
}

/* 4. The discounts page's product drawer, Read reviews / Post review: the drawer stays light in dark mode and its
      selected pill stays --navy (the discounts page has no dark pill colours), so it takes the light hover in both modes. */
:root[data-theme="dark"].page-uma-discounts .reviews-tabs { --uma-unselected-tab-hover-bg: var(--hover-overlay-dark); }
@media (hover: hover) {
  :root[data-theme="dark"].page-uma-discounts .reviews-tabs:has(> .pill-filter-item.selected:hover) > .selected-pill-in-tab-filter { background-color: var(--navy-dark); }
}

/* 3. A navy button written as a link (<a class="btn btn-primary-navy">, the onboarding's authenticator app buttons):
      UMA.css a:hover gave it orange underlined text. The text stays white, no underline; the background is
      .btn-primary-navy:hover's --navy-dark. */
a.btn-primary-navy:hover { color: var(--bright-white); text-decoration: none; }

/* ==========================================================================
   Filters, Currency (£ $ €): the chosen currency in dark teal (her brief, bug fixes batch 1, 10 Oct 2026)
   The Currency row's tabs in the Filters panel (marketplace, and the library's identical Currency row: the same
   .uma-filter-currency-row and .filter-currency-tabs markup) match the other filter controls (the price slider's
   --dark-teal handles). Selected: --dark-teal with --mid-white text (her rule for white text on colour), in light,
   sunset and dark alike (solid colours stay coloured). Unselected tabs unchanged. Hover on the chosen tab follows the
   price slider handle (--dark-teal to --bright-teal); the keyboard ring is unchanged (the same orange ring as the
   price handles). Only the profile tab colour tokens the tabs already use are set, so nothing else on them changes.
   ========================================================================== */
.uma-filter-currency-row .mode-tab-bar.currency-tab-bar.filter-currency-tabs { --t-profile-tab-selected-bg: var(--dark-teal); --t-profile-tab-selected-text: var(--mid-white); }
@media (hover: hover) {
  .uma-filter-currency-row .currency-tab-bar.filter-currency-tabs .filter-currency-tab.mode-tab-segment-selected:hover { background-color: var(--bright-teal); }
}

/* ---------- NAVY HOVER, part 2: the Wishlist / Library tabs (10 Oct 2026, her rule) ----------
   Search: NAVY HOVER WISHLIST. The straight split (Wishlist / Library at the top of the chrome's wish list panel,
   .uma-wishlist-scope-btn-active, and the marketplace's own drawer, .uma-wishlist-scope-btn.is-active). Whichever half
   is navy hovers to --navy-dark with the text staying white (--white-text-default, the split's own white text token).
   Light: the selected half is navy (UMA.css .uma-wishlist-scope-btn-active / .is-active did nothing on hover).
   Dark: the unselected half is navy (its UMA.css hover was a navy 8% tint on navy, which could not be seen); the white
   selected half stays white, the site's existing pattern for a white "navy" button. Light unselected keeps its tint.
   Only for a real mouse, as in part 1, so a tapped half on a phone does not stay dark. */
@media (hover: hover) {
  :root:not([data-theme="dark"]) :is(.uma-wishlist-scope-btn.uma-wishlist-scope-btn-active, .uma-wishlist-scope-btn.is-active):hover,
  :root[data-theme="dark"] .uma-wishlist-scope-btn:not(.uma-wishlist-scope-btn-active, .is-active):hover { background-color: var(--navy-dark); color: var(--white-text-default); }
}

/* ---------- SIDEBAR SHORTCUTS: Library and Marketplace below the heart (her brief, bug fixes batch 1, 10 Oct 2026) ----------
   Search: SIDEBAR SHORTCUTS. Markup in uma-chrome.js MARKUP: two links (.uma-chrome-sidebar-icon-library, /library, and
   .uma-chrome-sidebar-icon-marketplace, /marketplace) straight after the heart. Their circles take the heart's own classes
   (.uma-chrome-sidebar-circle .uma-chrome-sidebar-circle-heart), so size, fill and resting colour are the heart's, in light,
   sunset and dark. Sidebar only: .uma-chrome-sidebar-icon already hides below 601px and wherever the sidebar is off.
   1. Places. The stack is placed from the bottom (UMA.css, one --chrome-sidebar-icon-step per place), so to sit directly
      below the heart the two shortcuts take the heart's place and the one above it, and the heart moves up two places.
      Website chrome (mode 1, heart 2) and web app (initial 0 ... bell 3, heart 4) alike; nothing below the heart moves.
   2. Hover and pressed: the heart's (Wish list bugs block above): near-white circle, navy icon, small scale; undone on
      a touch screen unless the finger is down.
   3. Keyboard: the tooltip shows on focus too (the sidebar's existing tooltip; UMA.css shows it on hover only).
   4. Selected (aria-current="page" on her library and marketplace pages, set by uma-chrome.js): the sidebar has no
      selected state of its own, so the selected circle keeps the heart's pressed look (near-white circle, navy icon).
   5. Links: no underline on the tooltip text. */
.uma-chrome-sidebar-icon-heart { bottom: calc(var(--flyout-padding-bottom-desktop) + var(--chrome-sidebar-icon-step) * (var(--chrome-sidebar-heart-slot) + 2)); }
.uma-chrome-sidebar-icon-library { bottom: calc(var(--flyout-padding-bottom-desktop) + var(--chrome-sidebar-icon-step) * (var(--chrome-sidebar-heart-slot) + 1)); }
.uma-chrome-sidebar-icon-marketplace { bottom: calc(var(--flyout-padding-bottom-desktop) + var(--chrome-sidebar-icon-step) * var(--chrome-sidebar-heart-slot)); }
.uma-chrome-sidebar-shortcut,
.uma-chrome-sidebar-shortcut:hover { text-decoration: none; }
.uma-chrome-sidebar-shortcut:is(:hover, :active) .uma-chrome-sidebar-circle-heart,
.uma-chrome-sidebar-icon-selected .uma-chrome-sidebar-circle-heart { background: rgba(var(--bright-white-rgb), var(--opacity-near-full)); color: var(--navy); }
@media (hover: none) {
  .uma-chrome-sidebar-shortcut:hover:not(:active, .uma-chrome-sidebar-icon-selected) .uma-chrome-sidebar-circle-heart { background: transparent; color: var(--bright-white); transform: none; }
  .uma-chrome-sidebar-icon-selected:hover:not(:active) .uma-chrome-sidebar-circle-heart { transform: none; }
}
.uma-chrome-sidebar-shortcut:focus-visible .uma-chrome-sidebar-tooltip { opacity: 1; visibility: visible; }

/* ---------- SIDEBAR CIRCLES ON HOVER ONLY (her ruling, bug fixes batch 1, 10 Oct 2026). Search: SIDEBAR CIRCLES ----------
   Her words: only the Log out button and the Profile button have permanent circles. Every other sidebar icon (wish list
   heart, bell, Library, Marketplace basket, mode switch) has no circle and shows the circle only on hover.
   Already so at rest: the heart (Wish list bugs, part 1), the bell (SIDEBAR FIRST PAINT), the mode switch (UMA.css
   .uma-chrome-sidebar-circle, transparent). The one permanent circle left was the selected shortcut: SIDEBAR SHORTCUTS
   part 4 gave Library on /library and Marketplace on /marketplace (aria-current="page", uma-chrome-sidebar-icon-selected)
   the white circle at all times. Here the selected shortcut rests with no circle and takes the hover circle only while
   hovered or pressed, as the others do; on a touch screen a tap's leftover :hover is undone unless the finger is down
   (the same rule as the heart and bell). aria-current="page" stays in the markup for screen readers; there is no visible
   selected cue now (her call whether she wants one). The bell keeps the circle while its alerts list is open
   (aria-expanded="true", SIDEBAR FIRST PAINT), which goes as soon as the list closes. Log out (.uma-chrome-sidebar-circle-power)
   and the profile letter (.uma-chrome-sidebar-initial) keep their white circles. No theme rule touches these circles, so
   this is the same in light, sunset and dark; the sidebar is not shown at 600px and below (phones use the top bar, unchanged). */
.uma-chrome-sidebar-icon-selected:not(:hover, :active) .uma-chrome-sidebar-circle-heart { background: transparent; color: var(--bright-white); }
@media (hover: none) {
  .uma-chrome-sidebar-icon-selected:hover:not(:active) .uma-chrome-sidebar-circle-heart { background: transparent; color: var(--bright-white); transform: none; }
}

/* ---------- LINK-STYLED BUTTONS (her rule, bug fixes batch 1, 10 Oct 2026: "links must never be styled to look like
   buttons"). Every link that looked like a button is now a real <button type="button">; /uma-button-links.js takes it
   where the link went (data-uma-href). Each keeps its own classes, so its own hover and pressed look
   (add-on-press-animation) apply, and UMA.css's a:hover (orange text, underline) no longer reaches it. Two of them had
   no padding or border rule of their own, so the browser's button padding and border would show:
   1. The VAT relief tags on the discounts page (uma-vat-products.js): no border, as the tag had none.
   2. The crisis pane's pills (uma-chrome.js) and the discounts page's "Get in touch with Leanne": no padding, as the
      link had none. ---------- */
.uma-vat-tag-link { border: none; }
.crisis-pane-button,
.info-card-btn-primary { padding: 0; }

/* ---------- NAVY HOVER, part 3: references, filter navigation and the marketplace filter picker (her brief, bug fixes
   batch 1, 10 Oct 2026: "every button that turns orange or underlines on hover"; her ruling: pill switches and tabs
   never turn orange on hover). Search: NAVY HOVER REFERENCES. The pattern of parts 1 and 2 above: an unselected tab or
   toggle takes the --uma-unselected-tab-hover-bg tint with its text keeping its own colour; nothing turns orange or
   underlines; resting looks unchanged. The tint is for a real mouse only; the colour lines sit outside the media query
   so a tap never leaves orange text either.
   1. The References toggles (the strategies pages' .references-button and its + toggle, the condition, CPTSD, masking,
      RSD, ADHD and autism profiles' references buttons). Their UMA.css hover was orange text; each keeps its resting
      colour token instead.
   2. The library's and marketplace's Filters navigation (.uma-filter-nav-btn, Category, Price ...). Its hover was orange
      text, the chosen row too. The unselected rows keep their own fill and take the tint over it (a layered image, so
      the fill underneath stays); the chosen row (.is-active, open into its panel) keeps its look.
   3. The marketplace's filter picker pills (.uma-filter-picker-pill). The chosen pill (bright teal, white text) turned
      its text orange; it now keeps white text. (The unselected pills' hover is now PILL BAR HOVER below, her 10 Oct
      ruling for pill bars: their colour line and tint here were taken out.) On a wide screen the same picker is a list (.uma-filter-picker-option): an
      unselected row turned orange; it keeps its colour and takes the tint. The chosen row's orange is its resting look
      (selected), so it stays, with no change on hover. ---------- */
.references-button:hover { color: var(--dark-charcoal); text-decoration: none; }
.intervention-references-button.references-button:hover { color: var(--t-references-button); }
.references-button-toggle.references-button-toggle-hover:hover { color: var(--dark-charcoal); }
:where(.page-condition) .condition-references-button.condition-references-button:hover,
:where(.page-masking-profile, .page-rsd-profile, .page-cptsd-profile) .profile-references-button.profile-references-button:hover,
:where(.page-adhd-profile, .page-autism-profile) .adhd-autism-profile-references-button.adhd-autism-profile-references-button:hover { color: var(--t-text-strong); text-decoration: none; }
.uma-filter-nav-btn:hover,
.uma-filter-nav-btn.is-active:hover { color: var(--filter-text); text-decoration: none; }
.uma-filter-picker-pill.is-selected-category:hover { color: var(--bright-white); }
.uma-filter-picker-option:not(.is-selected-category):hover { color: var(--filter-text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .references-button:hover,
  :where(.page-condition) .condition-references-button:hover,
  :where(.page-masking-profile, .page-rsd-profile, .page-cptsd-profile) .profile-references-button:hover,
  :where(.page-adhd-profile, .page-autism-profile) .adhd-autism-profile-references-button:hover { background-color: var(--uma-unselected-tab-hover-bg); }
  .uma-filter-nav-btn:not(.is-active):hover { background-image: linear-gradient(var(--uma-unselected-tab-hover-bg), var(--uma-unselected-tab-hover-bg)); }
  .uma-filter-picker-option:not(.is-selected-category):hover { background-color: var(--uma-unselected-tab-hover-bg); }
}

/* ---------- PILL BAR HOVER: orange text, no background, as the top bar's links (her ruling, bug fixes batch 1, 10 Oct 2026) ----------
   Search: PILL BAR HOVER. Her words: rolling over a pill showed a grey pill background (Supplements in the wish list,
   Must-read eBooks on the library). The hover is now the top bar's links' hover (the section bar's .section-nav-link,
   UMA.css: color var(--orange), text-decoration none, no background, transition color var(--transition-base) ease):
   no grey fill and no pill shape, orange text, no underline. Selected pills keep their look (navy, and the darker
   navy on hover from NAVY HOVER part 1). Keyboard focus is untouched (the orange ring: UMA.css catalogue
   :is(button, ...):focus-visible, .keyboard-focus:focus-visible, uma-a11y-sweep.css section 2).
   Where the grey came from:
   - NAVY HOVER part 1 and part 3 above (today): --uma-unselected-tab-hover-bg and "no orange" colour lines on the wish
     list's filter pills, the library / marketplace / marketplace wish list category pills, the results pages' pill bars,
     the chart pills and the marketplace filter picker pills. Taken out at the source (part 1 and part 3), so UMA.css's
     own pill hover shows again: orange text, no underline, a color transition of --transition-base (0.3s, ease), the
     top bar's. Nothing for those is needed here.
   - UMA.css itself (left as it is) for three pill bars, put back to their resting fill and edge here with orange text:
     the profile's option pills (.uma-profile-opt-pill: --t-profile-pill-hover-bg and -border; the danger pill is not a
     choice and keeps its tomato), the marketplace filter picker pills (.uma-filter-picker-pill: --t-picker-pill-hover-bg),
     and the challenges / strengths category pills (.challenges-category-pills .tools-pill-outline: --t-outline-pill-hover-bg,
     with .btn-secondary-navy-on-white's --hover-overlay-dark). The profile pills' colour change also takes the top bar's
     transition (their fill and edge keep theirs); the other two already change colour over --transition-base. */
.uma-profile-opt-pill { transition: border-color var(--button-transition-duration) var(--button-transition-ease), background var(--button-transition-duration) var(--button-transition-ease), color var(--transition-base) ease; }
.uma-profile-opt-pill:not(.uma-profile-opt-pill-selected, .uma-profile-opt-pill-danger):hover { background: var(--t-profile-pill-bg); border-color: var(--t-profile-pill-border); color: var(--orange); text-decoration: none; }
.uma-filter-picker-pill:not(.is-selected-category):hover { background: transparent; border-color: var(--filter-text); color: var(--orange); text-decoration: none; }
.challenges-category-pills .tools-pill-outline:hover { background: transparent; border-color: var(--t-outline-pill-edge); color: var(--orange); text-decoration: none; }

/* ===== pricing ticks in dark mode (her ask, 10 Oct 2026) =====
   The green pricing ticks (--bright-green) were hard to read on the dark theme. In dark mode they are white
   (--mid-white). Light mode keeps the green; sunset is light under the warm filter, so it keeps the green too.
   1. Homepage pricing section: index.html .pricing-feature .icon-check-stroke (UMA.css .icon-check-stroke).
   2. Upgrade panel drawn by uma-chrome.js (heading .upgrade-page-heading-h1): .uma-upgrade-list-icon-green
      (UMA.css). Its red report icons (.uma-upgrade-list-icon-red) are not ticks and are left as they are.
   The canvas ticks (.support-tile-list .icon-check-stroke) are not pricing ticks and are not touched. */
:root[data-theme="dark"] .pricing-feature .icon-check-stroke,
:root[data-theme="dark"] .uma-upgrade-list-icon-green { color: var(--mid-white); }

/* ---------- "Sign up or Log in" box: taller buttons (10 Oct 2026, her brief). Search: SIGN-IN BOX 60PX ----------
   The split Sign up / Log in buttons are 3.75rem (60px) tall on every one of these boxes (.review-sign-in-notice:
   add to library, follow, save this, review, comment, I'm interested, Add your video, the chrome's pop-up and the
   Feedback tab's box, whose btn-sm from this morning is overridden here; its smaller heading stays). Token: UMA.css
   --button-size-xl (60px on every page that sets it). The words stay centred (SIGN-IN BOX SPLIT). Nothing else changes. */
.review-sign-in-notice .review-sign-in-actions > .btn { height: var(--button-size-xl); }

/* ===== CAMPAIGN FILM: NO DARK WASH (her ruling, 10 Oct 2026) =====
   The #StopMakingWomenWait card shows the film's first frame with nothing on top before play.
   What was here: the shared .video-scrim (45% dark wash) showed over it while its play mark showed. */
.campaign-video-card .video-scrim.video-scrim--visible {
  opacity: var(--opacity-hidden);
}

/* ---------- FEATURE FILM NAVY, dark mode (her bug, bug fixes batch 1, 10 Oct 2026). Search: FEATURE FILM NAVY ----------
   "Never get locked out again" (the phone film) and "Uma says goodbye respectfully" (the tablet film) on the homepage.
   Their dark cuts (media/uma-iphone-navy-v1.mp4, uma-ipad-navy-v1.mp4) carry --navy in the file (Y 56, Cb 142, Cr 122,
   limited range, tagged BT.709 primaries, transfer and matrix = #232E4B), but Chrome on the Mac draws a BT.709 film a
   little lighter on screen: its flat background shows as #283556, so the tile's --navy (#232F4B, release build 93,
   UMA.css "bug 53") left a visible edge round the film. In dark mode the two tiles now take the colour the film is
   drawn in, measured from Chrome screenshots (headless and windowed, 375 and 1440). The films are not changed.
   New token: --security-film-navy: #283556 (homepage only). Light mode is unchanged: there the film draws #FBF9F7 on a
   --light-white (#FAF8F7) tile, one step apart, no visible edge.
   What was here: the tile took var(--navy). */
:root:where(.page-home) {
  --security-film-navy: #283556;
}
:root[data-theme="dark"]:where(.page-home) .security-film-tile {
  background-color: var(--security-film-navy);
}

/* ---------- SIDEBAR SHORTCUTS, member sidebar (her brief, bug fixes batch 1, 10 Oct 2026) ----------
   Search: SIDEBAR SHORTCUTS MEMBER. For a signed-in member (the web app's sidebar: the chrome takes
   .page-uma-website-chrome off <html> when she is signed in) Library and Marketplace sit directly below the heart AND
   the bell. From the top: heart 6, bell 5, Library 4, Marketplace 3, mode 2, Log out 1, profile letter 0 (places
   counted from the bottom, as in UMA.css). The bell moves up two places (UMA.css had it at 3); the heart stays where the
   SIDEBAR SHORTCUTS block above put it; mode, Log out and the letter do not move. The visitor's sidebar (no bell) is
   unchanged: heart, Library, Marketplace, mode. Markup order in uma-chrome.js matches, so Tab follows the screen. */
:root:not(.page-uma-website-chrome) .uma-chrome-sidebar-icon-bell { bottom: calc(var(--flyout-padding-bottom-desktop) + var(--chrome-sidebar-icon-step) * (var(--chrome-sidebar-heart-slot) + 1)); }
:root:not(.page-uma-website-chrome) .uma-chrome-sidebar-icon-library { bottom: calc(var(--flyout-padding-bottom-desktop) + var(--chrome-sidebar-icon-step) * var(--chrome-sidebar-heart-slot)); }
:root:not(.page-uma-website-chrome) .uma-chrome-sidebar-icon-marketplace { bottom: calc(var(--flyout-padding-bottom-desktop) + var(--chrome-sidebar-icon-step) * (var(--chrome-sidebar-heart-slot) - 1)); }

/* ===== SUPERJUICES: HERO INGREDIENTS AND THE THREE-CARD DOWNLOAD (her brief, bug fixes batch 1, 10 Oct 2026) =====
   Search: JUICE HERO. Marketplace recipe cards (marketplace.html heroSection, heroSheet, frontSheet).
   1. The foot of each recipe's back: "Hero ingredients" and "Optional boosts", each a list of the marketplace ingredient
      cards, with their own classes and markup as in the filter picker (.uma-filter-picker-ingredient-list,
      .ing-visual-item.uma-filter-picker-ingredient, .ing-visual-circle, .ing-visual-name, .ing-visual-benefits,
      .ing-badge). Here they only show; there is nothing to add or press, so the card and its pills take no pointer
      (no hand, no hover change), as a plain .ing-visual-item does in UMA.css. Space above the section as above the
      recipe's own "Optional boosts".
      FOR HER OK (the one change to the cards' layout): the recipe's back is much narrower than the filter picker. Side by
      side with the round picture, the words had about 67px at 375 and 127px at 1440, so "Potassium" and
      "Beta-cryptoxanthin" were cut off at the card's edge. In the back only, the round picture sits above the name and
      pills (same picture, name, pills, colours and spacing); a word longer than the card still wraps rather than being
      cut off. The printed card (page 3) has room and keeps the picker's side-by-side layout. To go back to side by side,
      remove the rule ".juice-hero .juice-hero-ingredient" below.
   2. The download is three A4 pages of one PDF. Each sheet starts a new page. Page 1 is the card's front: her picture
      over the whole page, darkened as on the card (--video-rest-brightness), on navy dark, her eyebrow and title in
      white at the top as on the card; with no picture, the plain navy page with the ingredient cards' leaf.
      Page 3 shows the same ingredient cards on the recipe's paper; where a recipe has many, the cards are drawn smaller
      as a whole (zoom 0.9 down to 0.5, the smallest that is needed, measured off screen before printing) so they keep
      their design and fit the one page. The paper always prints light, so the cards take their light colours there in
      either theme (the light values of UMA.css's --t-ing-* and --t-picker-card). */
:where(.page-uma-marketplace) .juice-hero { display: flex; flex-direction: column; margin-top: var(--app-default-top-bottom-margin-sm); }
:where(.page-uma-marketplace) .juice-hero-list { margin-bottom: var(--app-default-top-bottom-margin-sm); }
:where(.page-uma-marketplace) .juice-hero-ingredient { cursor: default; pointer-events: none; }
:where(.page-uma-marketplace) .juice-hero .juice-hero-ingredient { flex-direction: column; align-items: flex-start; }
:where(.page-uma-marketplace) .juice-hero .ing-visual-text { width: 100%; min-width: 0; }
:where(.page-uma-marketplace) .juice-hero .ing-visual-name,
:where(.page-uma-marketplace) .juice-hero .ing-badge { max-width: 100%; overflow-wrap: break-word; }

:root:where(.page-uma-marketplace) {
  --recipe-sheet-front-ground: var(--navy-dark);
  --recipe-sheet-front-ink: var(--pure-white);
  --recipe-sheet-front-gutter: 14mm;
  --recipe-sheet-front-eyebrow-size: 4.2mm;
  --recipe-sheet-front-title-size: 13mm;
  --recipe-sheet-front-leaf-size: 30mm;
  --recipe-sheet-measure-offset: 400mm;
}
:where(.page-uma-marketplace) .recipe-sheet {
  --t-ing-text: var(--mid-charcoal);
  --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);
  --t-picker-card: var(--pure-white);
  --t-picker-card-hover: var(--pure-white);
}
:where(.page-uma-marketplace) .recipe-sheet--hero .juice-hero-list { margin-bottom: 6mm; }
:where(.page-uma-marketplace) .recipe-sheet--measuring { display: flex; flex-direction: column; position: absolute; top: 0; left: calc(-1 * var(--recipe-sheet-measure-offset)); visibility: hidden; }
:where(.page-uma-marketplace) .recipe-sheet--fit-90 .juice-hero-list { zoom: 0.9; }
:where(.page-uma-marketplace) .recipe-sheet--fit-80 .juice-hero-list { zoom: 0.8; }
:where(.page-uma-marketplace) .recipe-sheet--fit-70 .juice-hero-list { zoom: 0.7; }
:where(.page-uma-marketplace) .recipe-sheet--fit-60 .juice-hero-list { zoom: 0.6; }
:where(.page-uma-marketplace) .recipe-sheet--fit-50 .juice-hero-list { zoom: 0.5; }
:where(.page-uma-marketplace) .recipe-sheet--front { position: relative; overflow: hidden; background: var(--recipe-sheet-front-ground); color: var(--recipe-sheet-front-ink); }
:where(.page-uma-marketplace) .recipe-sheet-front-picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(var(--video-rest-brightness)); }
:where(.page-uma-marketplace) .recipe-sheet-front-picture--empty { display: flex; align-items: center; justify-content: center; filter: none; color: var(--recipe-sheet-front-ink); }
:where(.page-uma-marketplace) .recipe-sheet-front-picture--empty .ing-visual-empty-icon { font-size: var(--recipe-sheet-front-leaf-size); }
:where(.page-uma-marketplace) .recipe-sheet-front-words { position: relative; padding: var(--recipe-sheet-front-gutter); }
:where(.page-uma-marketplace) .recipe-sheet-front-eyebrow { margin: 0 0 3mm; font-size: var(--recipe-sheet-front-eyebrow-size); font-weight: var(--font-weight-medium); color: var(--recipe-sheet-front-ink); }
:where(.page-uma-marketplace) .recipe-sheet-front-title { margin: 0; font-size: var(--recipe-sheet-front-title-size); font-weight: var(--font-weight-light); line-height: var(--line-height-title-wrap); color: var(--recipe-sheet-front-ink); text-align: left; }
@media print {
  :where(.page-uma-marketplace .is-printing-recipe) > .recipe-sheet { break-after: page; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  :where(.page-uma-marketplace .is-printing-recipe) > .recipe-sheet:not(:has(~ .recipe-sheet)) { break-after: auto; }
  :where(.page-uma-marketplace .is-printing-recipe) > .recipe-sheet--front { height: 297mm; }
}

/* ---------- MEMBERS-ONLY BOX (her bug, bug fixes batch 1, 10 Oct 2026). Search: MEMBERS-ONLY BOX ----------
   Signed out, a members-only page (Community discounts, the profile, statistics, the canvases, the results pages ...)
   painted its empty content first and then jumped to log-in. Each of those pages now carries uma-members-only on its
   html tag in its own markup, so from the very first paint its content is not shown; the chrome (top bar, sidebar) is.
   The page's access gate takes the class off only when it has seen a signed-in member. Signed out, the shared
   "Sign up or log in to ..." box opens over this blank page (uma-chrome.js, window.umaMembersOnlyBox).
   1. before the chrome is built (the body has no uma-chrome-page yet): everything in the body;
   2. the chrome's content slot, where the page's content goes;
   3. a page with its own layout (no slot): its own elements, marked uma-members-only-content by the chrome;
   4. the chrome's footer, which would otherwise sit at the top of the blank page. */
:root.uma-members-only body:not(.uma-chrome-page) > *,
:root.uma-members-only .uma-chrome-inner-content-wrapper,
:root.uma-members-only .uma-members-only-content,
:root.uma-members-only .footer-override { display: none; }

/* ---------- STEP LOADING (urgent passkey fix and her loading rule, 10 Oct 2026). Search: STEP LOADING ----------
   Her rule: once the person has done their part (pressed Create passkey, finished the PIN, sent the code ...), the
   fields and buttons go at once and only the loading state shows until it finishes. The loading state is her Contact
   us sending screen ("Sending and sent screens" above): .uma-send-screen with the icon in .uma-send-screen-plane (the
   same gentle drift, stopped by Uma's still switch and by reduced motion, as there) and the words in
   .uma-send-screen-words. Built by /uma-step-loading.js. On the set-up pages it sits in the page's own centred column
   under the logo, so it does not take the Contact page's full-screen height. No new tokens. */
.uma-send-screen.uma-step-loading {
  min-height: 0;
  padding-top: var(--app-default-top-bottom-margin-lg);
  padding-bottom: var(--app-default-top-bottom-margin-lg);
}

/* ---------- STATISTICS "SHOWING DATA OF" LINE (her ask, bug fixes batch 1, 10 Oct 2026). Search: SHOWING DATA OF ----------
   statistics.html puts "Showing data of [number] people screened" under each figure (the bubbles or bars, the list, the
   map, each demographics question), in the page's own small text style (.statistics-footnote, UMA.css: --body-text-xs,
   --t-text-secondary). Two things only:
   1. At 760 and below UMA.css hides every .statistics-footnote on /statistics; this line stays (unless it is hidden
      because the figure says "Not enough answers yet").
   2. Under the bubbles or bars the line sits inside the rounded canvas, below its body, so it takes the body's side and
      bottom padding (--app-default-top-bottom-margin-lg) in place of the footnote's top margin.
   No new tokens, colours or sizes. */
@media (max-width: 760px) {
  :where(.page-statistics) .statistics-showing-data:not([hidden]) { display: block; }
}
:where(.page-statistics) .statistics-showing-data-canvas {
  margin-top: 0;
  padding: 0 var(--app-default-top-bottom-margin-lg) var(--app-default-top-bottom-margin-lg);
}

/* ---------- CREATOR LIBRARY PROFILE (her new feature, bug fixes batch 1, 10 Oct 2026). Search: CREATOR PROFILE 10 OCT ----------
   The profile's "Library profile" tile is drawn with the profile's own row, switch and button classes
   (/uma-creator-profile-10oct2026-v1.js). Only these small things are new:
   1. .uma-creator-choices / .uma-creator-choice: the list of names and of ways to prove it is you, one button per line,
      left-aligned so a long name wraps inside the existing pill button.
   2. .uma-creator-thumb: the live profile photo (square, round like the library's pictures) and
      .uma-creator-thumb-poster: the live video bio's first frame (portrait 9:16), shown small above the row's words.
   3. .uma-creator-wrap: on her decision page and dashboard, long record ids and addresses wrap instead of widening.
   New tokens: --creator-thumb-size (the existing --button-size-xxl, 70px) and --creator-poster-ratio (9 / 16, the
   shape every Uma video is made in). No colours, no IDs, no !important. */
:root {
  --creator-thumb-size: var(--button-size-xxl);
  --creator-poster-ratio: 9 / 16;
}
.uma-creator-choices {
  gap: var(--gap-sm);
  padding-bottom: var(--gap-regular);
}
.uma-creator-choice {
  height: auto;
  min-height: var(--button-size-md);
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  padding-top: var(--gap-xs);
  padding-bottom: var(--gap-xs);
}
.uma-creator-thumb {
  display: block;
  width: var(--creator-thumb-size);
  height: var(--creator-thumb-size);
  margin-bottom: var(--gap-xs);
  object-fit: cover;
  border-radius: var(--radius-circle);
}
.uma-creator-thumb-poster {
  height: auto;
  aspect-ratio: var(--creator-poster-ratio);
  border-radius: var(--app-default-radius-md);
}
/* Her decision page and dashboard lines for creator requests: long People record ids and addresses wrap on a phone. */
.uma-creator-wrap {
  overflow-wrap: anywhere;
}

/* ---------- RESEND COUNTDOWN (her brief, bug fixes batch 1, 10 Oct 2026). Search: RESEND COUNTDOWN ----------
   The text code steps (security-setup, reset-pin): the "Resend code" half of the split button stays off, showing its
   own countdown ("Resend in 0:32"), until the server allows another text (60 seconds). /uma-resend-countdown.js adds
   .timer-resend-button-waiting and aria-disabled="true"; it is not the disabled attribute, so it keeps its place in
   the Tab order and its name (with the time left) is read out. It looks like the existing disabled button: UMA.css
   .btn-disabled-on-white:disabled and .field-action-button-looks-disabled (--dark-white fill, --light-charcoal words,
   not-allowed), and in Uma's dark mode the sign-in pages' disabled tokens (--t-disabled-fill, --t-disabled-text, UMA.css
   :root[data-theme="dark"]:where(.page-auth)). No hover change while it is off. The green "Code resent" moment
   (.timer-resend-button-done) is not touched. No new tokens. */
.timer-resend-button.timer-resend-button-waiting:not(.timer-resend-button-done),
.timer-resend-button.timer-resend-button-waiting:not(.timer-resend-button-done):hover {
  background: var(--dark-white);
  color: var(--light-charcoal);
  border-left-color: rgba(var(--black-rgb), var(--opacity-low));   /* the divider as it is when on (UMA.css) */
  cursor: not-allowed;
}
:root[data-theme="dark"] .timer-resend-button.timer-resend-button-waiting:not(.timer-resend-button-done),
:root[data-theme="dark"] .timer-resend-button.timer-resend-button-waiting:not(.timer-resend-button-done):hover {
  background: var(--t-disabled-fill);
  color: var(--t-disabled-text);
  border-left-color: rgba(var(--bright-white-rgb), var(--opacity-low));
}

/* ---------- STEP LOADING HEADING AND SPINNER (her brief, bug fixes batch 1, 10 Oct 2026). Search: STEP LOADING HEADING ----------
   Every loading state in sign-up, log-in and reset (/uma-step-loading.js): the step's heading changes to the loading
   words (same place, size and style; nothing jumps), the rest of the step keeps its space but cannot be seen, and the
   Uma face logo above is swapped for a spinning donut of the logo's size (UMA.css .small-centred-column-centred-text svg:
   --uma-md, --uma-lg from 600px, --app-default-top-bottom-margin-xxl below). Navy in light mode, white in Uma's dark mode
   (its own switch, :root[data-theme="dark"]; the device setting does not change it). Only while an email or a text is
   being sent does the logo's place take the paper plane (with the gentle drift of the Contact us sending screen, which
   still stops under reduced motion). The donut turns with the Web Animations API (UMA.css stops CSS animations under
   reduced motion with !important); it keeps turning under reduced motion or Uma's still switch, three times slower.
   New tokens: --step-loading-ring-width (the donut's thickness), --step-loading-spin-duration (one turn),
   --step-loading-spin-duration-reduced (one turn when motion is reduced, 3x slower). */
:root {
  --step-loading-ring-width: 6px;
  --step-loading-spin-duration: 1s;
  --step-loading-spin-duration-reduced: 3s;
}
/* Held: keeps its space, not seen, not in the Tab order, not read. Every child too: some (the sign-up terms concertina,
   UMA.css .terms-concertina-body) set their own visibility, which would show through. */
.uma-step-loading-held,
.uma-step-loading-held * {
  visibility: hidden;
}
.uma-step-loading-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-grow: 0;
  flex-shrink: 0;
  align-self: center;
  box-sizing: border-box;
  width: var(--uma-md);
  height: var(--uma-md);
  margin-bottom: var(--app-default-top-bottom-margin-xxl);
}
@media (min-width: 600px) {
  .uma-step-loading-mark {
    width: var(--uma-lg);
    height: var(--uma-lg);
  }
}
/* The donut: a ring (--dark-white track) with a navy quarter that turns. Longhands, so one value never voids the rest. */
.uma-step-loading-spinner {
  border-radius: var(--radius-circle);
  border-style: solid;
  border-width: var(--step-loading-ring-width);
  border-color: var(--dark-white);
  border-top-color: var(--navy);
}
:root[data-theme="dark"] .uma-step-loading-spinner {
  border-color: rgba(var(--bright-white-rgb), var(--opacity-low));
  border-top-color: var(--bright-white);
}
.uma-step-loading-plane-glyph {
  font-size: var(--uma-md);
  color: var(--navy);
}
@media (min-width: 600px) {
  .uma-step-loading-plane-glyph {
    font-size: var(--uma-lg);
  }
}
:root[data-theme="dark"] .uma-step-loading-plane-glyph {
  color: var(--bright-white);
}
/* The heading while it shows the loading words: its own words stay in it, held (kept, not seen, not read), so its box
   does not change; the loading words sit over them from its top, in its own style. Longer words (more lines) run on
   over the held step below, which cannot be seen while it loads, so nothing moves. */
.uma-step-loading-heading {
  position: relative;
}
.uma-step-loading-heading > .uma-step-loading-heading-words {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* ---------- NUMBER SCREEN ARROW COUNTDOWN (her brief, bug fixes batch 1, 10 Oct 2026). Search: ARROW COUNTDOWN ----------
   security-setup and reset-pin, the mobile number screen: while a text is not allowed yet, the send arrow (a square icon
   button, already in its existing off look, .field-action-button-looks-disabled) shows the time left ("0:32") in place
   of its arrow, in the Resend button's text size. /uma-resend-countdown.js (umaResendCountdown.arrow). No new tokens. */
.field-action-button-countdown {
  font-size: var(--body-text-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

/* ===== PASSKEY HEADING LINE HEIGHT (her ask, 10 Oct 2026) =====
   "Email verified – create your passkey" and "Launching passkey creator..." wrap on a phone; at 1.3 like her other
   headings. The loading words sit inside the same heading. What was here: the auth h1's own line height. */
.auth-heading-wraps,
.auth-heading-wraps * {
  line-height: var(--default-line-height-x-small);
}


/* ---------- MARKETPLACE SECTION WHITES (her bug, bug fixes batch 1, 10 Oct 2026). Search: MARKETPLACE SECTION WHITES ----------
   "Warm fuzzies" (with the Self-care definition beside it, .uma-library-voices) and "Science-backed products. No wellness
   BS." (.panel-section-white, --t-section-white: --bright-white #F9F9F9) take turns between the site's two section whites.
   What was here in the light theme: the Warm fuzzies section was --bright-white (#F9F9F9) with its text column in
   --light-white (#FAF8F7), so it ran into the Science-backed section below. It now takes --t-band-alt (--new-white
   #F6F3F1), with its text column see-through so the section's shade shows behind it, as the library's mic section does
   (Bug 125, UMA.css). Light and sunset only: the dark theme already alternates (UMA.css :root[data-theme="dark"] block,
   --t-band #0E131E then --t-section-white #151C2D) and its higher-weighted tokens still apply. The Self-care paper
   panel keeps its own photo. */
:root:where(.page-uma-marketplace) { --t-voices-bg: var(--t-band-alt); --t-voices-left-bg: transparent; }

/* ---------- SET YOUR PIN STARTS AT THE TOP (bug fixes batch 1, 10 Oct 2026). Search: SET PIN TOP ----------
   set-pin no longer carries page-auth-full-screen on <html>, so its form is not centred down the window (it sat about
   300px down at 1440, as its one row of PIN boxes is short) and starts at the top, as log-in and reset-pin do, with the
   same column classes and padding. log-in sits inside the chrome's content band, which starts its content a hairline
   border (--stroke-hairline) and the inner wrapper's top margin (--inner-wrapper-margin-top-desktop, -mobile at 600px
   and below; UMA.css .uma-chrome-all-content-wrapper / .uma-chrome-inner-content-wrapper) down the window. set-pin has
   no chrome (her ruling, 9 Oct 2026), so its wrapper takes that same border and top space here, from the same tokens
   (the border is drawn the same way, so it rounds to the same pixel as log-in's), and the Uma face
   lands where it does on log-in. Only set-pin matches (page-auth-app without page-auth-full-screen). Top only; the
   text, design and PIN boxes are unchanged. */
:where(.page-auth-app:not(.page-auth-full-screen)) .wrapper-for-all-sections {
  border-top: var(--stroke-hairline) solid transparent;
  padding-top: var(--inner-wrapper-margin-top-desktop);
}
@media (max-width: 600px) {
  :where(.page-auth-app:not(.page-auth-full-screen)) .wrapper-for-all-sections {
    padding-top: var(--inner-wrapper-margin-top-mobile);
  }
}

/* ---------- MEMBERSHIP CARD SCREEN (her brief, bug fixes batch 1, 10 Oct 2026). Search: CARD SCREEN 10 Oct ----------
   FOR HER APPROVAL. The end of onboarding and the profile's Membership card (/uma-wallet.js v4).
   1. One wallet button (Google Wallet switched off): it keeps the size it has beside Google's, centred. On a narrow
      onboarding card it is full width, as the pair already is there (its pill has a fixed height); the profile's
      badge scales with its width, so there it stays at half.
   2. On a computer: "- OR -", "Scan the QR code with your phone to download" (in the page's own text style:
      onb-community-count, or the profile's uma-profile-page-subheading, here centred and without its bottom margin)
      and the QR code, navy on bright white in every theme so any phone camera reads it (a code needs dark on light).
   3. Her two lines under the download options take the sentence's own style (onb-community-count).
   New token: --wallet-qr-size. Everything else is existing tokens. */
:root {
  --wallet-qr-size: 12.5rem;   /* CARD SCREEN FOLLOW-UP 10 Oct: 200 x 200 px (was 10rem) */
}
.membership-card-wallet-buttons.membership-card-wallet-buttons-one {
  grid-template-columns: minmax(0, calc((100% - var(--gap-md)) / 2));
  justify-content: center;
}
@container (max-width: 22.55rem) {
  .membership-card-section .membership-card-wallet-buttons.membership-card-wallet-buttons-one {
    grid-template-columns: minmax(0, 1fr);
  }
}
.uma-wallet-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  width: 100%;
  text-align: center;
}
.uma-wallet-qr > p {
  margin: 0;
  max-width: none;
  text-align: center;
}
.uma-wallet-qr-tile {
  width: var(--wallet-qr-size);
  height: var(--wallet-qr-size);
  padding: var(--gap-xxs);
  border-radius: var(--radius-tooltip-large);
  background: var(--bright-white);
  color: var(--navy);
}
.uma-wallet-qr-code {
  display: block;
  width: 100%;
  height: 100%;
}
.membership-card-after-line {
  margin: 0;
}

/* ===== UPGRADE PANEL AND PROFILE TAB LOCKS (her brief, bug fixes batch 1, 10 Oct 2026). FOR HER APPROVAL =====
   Search: BATCH1 UPGRADE PANEL. Tokens only. Parts 1, 2, 3 and 5 (code as on discounts). */

/* 1. PROFILE TAB LOCKS. The lock after Strengths, Challenges, Strategies, Diagnostic thresholds (the results tabs,
   .section-nav-link) and on the Preview self-report button (.section-nav-action) was too small. Now --button-icon-md
   (UMA.css, 1.2rem = 19.2px). What was here: the link's own size, 1em (14.4px at 1440, 16px at 375) on the tabs,
   and 12.8px on the button. The same tabs on the strengths, challenges, strategies and scoring pages get the same lock.
   New token: --paid-lock-line-height (0), so the bigger lock takes no line height of its own and the tab row stays
   60px tall at 1440 and 375 (the 1em lock made it 61px before; a lock with line height 1 would make it 63px). */
:root {
  --paid-lock-line-height: 0;
}
.section-nav-link .paid-feature-lock,
.section-nav-action .paid-feature-lock {
  font-size: var(--button-icon-md);
  line-height: var(--paid-lock-line-height);
}

/* 2b. CODE LABEL. Her words "Use this code for 50% off (single use)" beside the code and its copy button, in the
   panel's small text (as the feedback line under the box); the row wraps on a narrow phone. */
.uma-upgrade-code-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm);
}
.uma-upgrade-code-label {
  font-size: var(--body-text-xs);
  line-height: var(--default-line-height-small);
}

/* 2e. VALID BOX. A valid code shows the box's existing valid look (UMA.css .field-action.is-valid: the plain hairline
   edge) beside the green VALID button, with no orange ring, even while the box has focus (typed, then Enter). */
.field-action.is-valid:focus-within {
  border-color: rgba(var(--black-rgb), var(--opacity-low));
  border-width: var(--stroke-hairline);
}

/* 2f. Her consent sentence ("By proceeding with payment, ...") at line height 1.5: --default-line-height-small. */
.uma-upgrade-consent-text {
  line-height: var(--default-line-height-small);
}

/* 3. UPGRADE REPORT PREVIEW. The panel now holds the homepage's report preview (.portrait-tile-report-preview,
   .report-preview-frame, .report-preview-img, .report-preview-dots, .swipe-dot--*, all UMA.css). The homepage's four tokens
   for it are set only on the homepage in UMA.css (:root:where(.page-home)), so the panel takes the same values here
   (--swipe-dot-size from the panel's own --upgrade-swipe-dot-size, also 14px); the dots' colour is the homepage's
   --t-emphasis (navy, white in dark). The card fills the panel's preview space (the wrapper keeps its width and place)
   instead of the homepage's half-row widths, with the dots under the page, and its shadow is not cut off. */
.uma-upgrade-preview-track-wrap {
  --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: var(--upgrade-swipe-dot-size);
  --t-emphasis: var(--navy);
  overflow: visible;
}
:root[data-theme="dark"] .uma-upgrade-preview-track-wrap {
  --t-emphasis: var(--bright-white);
}
.uma-upgrade-preview-track-wrap .portrait-tile-report-preview {
  width: 100%;
  max-width: 100%;
  aspect-ratio: auto;
  overflow: visible;
}
.uma-upgrade-preview-track-wrap .report-preview-frame {
  padding: 0;
}
.uma-upgrade-preview-track-wrap .report-preview-dots {
  position: static;
}

/* 5. CODE AS ON DISCOUNTS (2c, her ruling, 10 Oct 2026: not option A or B, the same as the code on the discounts page).
   The code is the discounts page's copy-code button (.uma-product-drawer-copy-btn, .uma-product-drawer-copy-code):
   a pill with a thin solid edge, the code and a copy icon; navy fill and white words on hover; bright green with
   "Copied!" and a tick once copied. UMA.css sets those rules only on catalogue pages (:where(.page-catalogue)), so the
   same declarations are given here for the panel, word for word, with the same --t-shop-ink (navy; in dark the
   catalogue's --t-text-strong, white). Left out: the drawer's flex: 0 0 50% (its half of the drawer's row), so here
   the button is as wide as the code. What was here: options A (outline) and B (dashed) for her pick, not used. */
.uma-upgrade-code-pill-row {
  --t-shop-ink: var(--navy);
}
:root[data-theme="dark"] .uma-upgrade-code-pill-row {
  --t-shop-ink: var(--bright-white);
}
.uma-upgrade-code-pill-row .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; transition: background var(--transition-fast), color var(--transition-fast); }
.uma-upgrade-code-pill-row .uma-product-drawer-copy-btn:hover { background: var(--navy); color: var(--bright-white); }
.uma-upgrade-code-pill-row .uma-product-drawer-copy-btn.is-copied { background: var(--bright-green); border-color: var(--bright-green); color: var(--bright-white); }
.uma-upgrade-code-pill-row .uma-product-drawer-copy-code { font-weight: var(--font-weight-medium); font-size: var(--body-text-xxs); }

/* CARD SCREEN FOLLOW-UP 10 Oct (her ask), FOR HER APPROVAL:
   - "- OR -" centred across the full width, whatever the page's own text class says.
   - Profile: Add to Apple Wallet and Add to Google Wallet side by side at the same height (--wallet-button-height,
     the onboarding pill's height), each at its own width, the pair centred; stacked on a narrow screen. What was
     here: each badge filled half the row, so Google's (a wider shape) came out shorter than Apple's. */
.uma-wallet-qr > .uma-wallet-qr-or {
  align-self: stretch;
  width: 100%;
  text-align: center;
}
.profile-membership-card-section > .membership-card-wallet-buttons {
  grid-template-columns: repeat(2, auto);
  justify-content: center;
}
.profile-membership-card-section .profile-wallet-button {
  width: auto;
}
.profile-membership-card-section .profile-wallet-badge {
  width: auto;
  height: var(--wallet-button-height);
}
@container (max-width: 22.55rem) {
  .profile-membership-card-section > .membership-card-wallet-buttons {
    grid-template-columns: auto;
  }
}

/* ---------- RESULTS CALCULATING (her brief, bug fixes batch 1, 10 Oct 2026). Search: RESULTS CALCULATING ----------
   FOR HER APPROVAL. No new tokens. The loading screen from the press on Finish screening until her results page has
   painted (/uma-screening-hooks.js on the screening, /uma-results-gate.js on the results page, the same markup on both):
   the whole window in the screenings' opening colour (--bright-blue, the colour-screen tokens of UMA.css
   .screening-colour-screen, as the screenings' own loading screen above), the step loading ring, the heading in the
   title screens' style (.screening-title-heading) and the subheading in their paragraph style, centred. It sits under
   the SOS button and the Feedback tab (--z-chrome-header). On the results page, uma-results-arriving lets it be seen while
   the results gate still hides the page (the gate's own rule hides <html> with visibility and opacity). */
.uma-results-calculating {
  --flood-color: var(--bright-blue);
  --screen-background: var(--flood-color);
  --bright-white: var(--mid-white);
  --bright-white-rgb: var(--panel-text-white-rgb);
  position: fixed;
  inset: 0;
  z-index: var(--z-chrome-header);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-left: var(--default-left-right-mob-body-padding);
  padding-right: var(--default-left-right-mob-body-padding);
  text-align: center;
  background-color: var(--flood-color);
  color: var(--bright-white);
  visibility: visible;
}
.uma-results-calculating .uma-step-loading-spinner {
  border-color: rgba(var(--bright-white-rgb), var(--opacity-low));
  border-top-color: var(--bright-white);
}
.uma-results-calculating .uma-results-calculating-line {
  color: rgba(var(--bright-white-rgb), var(--opacity-very-high));
  max-width: 40rem;
}
.uma-results-calculating .uma-results-calculating-again {
  align-self: center;
  margin-top: var(--app-default-top-bottom-margin-lg);
}
.uma-results-wait.uma-results-arriving {
  opacity: 1;
}

/* ---------- SIDEBAR FIRST PAINT (her bug, bug fixes batch 1, 10 Oct 2026). Search: SIDEBAR FIRST PAINT ----------
   FOR HER APPROVAL. Her words: getting into Uma the sidebar loads in visibly, more icons appear one after another, and
   the bell shows as pressed or selected although she is not on notifications.
   1. Waiting. uma-chrome.js puts uma-chrome-sidebar-waiting on <html> while it does not yet know whether to draw the
      member's sidebar or the visitor's (just through set-up, or on an app page with no kept "member"), and takes it off
      in the same step that draws the right set. Until then the icons are hidden but keep their places, so the whole set
      appears in one frame and nothing moves. The sidebar strip and its menu button show as before.
   2. The bell. Its resting circle was the profile letter's white circle with a navy bell (the "top bar and sidebar
      circles" block, 9 Oct), which is the sidebar's hover and pressed look, and since this morning also the look of a
      selected Library or Marketplace shortcut (SIDEBAR SHORTCUTS, aria-current="page"). So the bell looked selected on
      every page. The heart had the same cause and was fixed the same way on 9 Oct (Wish list bugs, part 1). The bell
      now rests like the heart and the sun (no fill, white bell) and takes the white circle only while hovered, pressed,
      or while its alerts list is open (aria-expanded="true"). On a touch screen a tap leaves :hover behind; there it is
      undone unless the finger is down or the list is open. The red count badge is unchanged. Log out and the profile
      letter keep their white circles (not part of her report). */
:root.uma-chrome-sidebar-waiting .uma-chrome-sidebar-icon { visibility: hidden; }
.uma-chrome-sidebar-circle-bell { background: transparent; color: var(--bright-white); }
.uma-chrome-sidebar-icon-bell:is(:hover, :active, [aria-expanded="true"]) .uma-chrome-sidebar-circle-bell { background: rgba(var(--bright-white-rgb), var(--opacity-near-full)); color: var(--navy); }
@media (hover: none) {
  .uma-chrome-sidebar-icon-bell:hover:not(:active, [aria-expanded="true"]) .uma-chrome-sidebar-circle-bell { background: transparent; color: var(--bright-white); transform: none; }
}

/* ---------- SCREENING LOAD (her brief, bug fixes batch 1, 10 Oct 2026). Search: SCREENING LOAD ----------
   FOR HER APPROVAL. The seven screenings (ADHD, autism, masking, RSD, stimming, CPTSD, health). No new tokens.
   1. The loading screen (.uma-screening-loading, first thing in each screening's body): the whole window in the first
      screen's own colour (--bright-blue, the colour of every screening's opening screen; the colour-screen words and
      tokens of UMA.css .screening-colour-screen), the heading in the title screens' own style (.screening-title-heading)
      with the step loading ring above it (/uma-step-loading.js, STEP LOADING HEADING above), centred. It sits under the
      SOS button and the Feedback tab (--z-chrome-header, below --z-chrome and --z-feedback-tab), so both stay.
   2. While the access gate checks (uma-members-only, MEMBERS-ONLY BOX above), the loading screen shows, before and after
      the chrome is built: on the screenings the chrome's content slot stays laid out, the loading screen and its
      spoken words are seen, and the rest of the slot cannot be seen or read until the gate has seen a member.
   3. A section results screen while its score comes (uma-score-calculating, /uma-screening-hooks.js calculating()): the
      donut's box is kept but not seen, and the step loading ring sits in its centre, white on the screen's colour like
      the rest of that screen. The heading's loading words are the step loading heading.
   4. If the chart cannot be drawn (uma-chart-failed), the message sits where the donut would be, in the screen's own
      paragraph style (.screening-intro-para-text), centred. */
:root.page-screening .uma-screening-loading {
  --flood-color: var(--bright-blue);
  --screen-background: var(--flood-color);
  --bright-white: var(--mid-white);
  --bright-white-rgb: var(--panel-text-white-rgb);
  position: fixed;
  inset: 0;
  z-index: var(--z-chrome-header);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-left: var(--default-left-right-mob-body-padding);
  padding-right: var(--default-left-right-mob-body-padding);
  text-align: center;
  background-color: var(--flood-color);
}
:root.page-screening .uma-screening-loading .uma-step-loading-spinner,
.screening-reg-visual.uma-score-calculating .uma-step-loading-spinner {
  border-color: rgba(var(--bright-white-rgb), var(--opacity-low));
  border-top-color: var(--bright-white);
}
:root.uma-members-only.page-screening body:not(.uma-chrome-page) > .uma-screening-loading {
  display: flex;
}
:root.uma-members-only.page-screening body.screening-fixed-height .uma-chrome-inner-content-wrapper {
  display: flex;
}
:root.uma-members-only.page-screening .uma-chrome-inner-content-wrapper > :not(.uma-screening-loading):not(.uma-step-loading-status) {
  visibility: hidden;
}
.screening-reg-visual.uma-score-calculating .screening-donutWrap > :not(.uma-step-loading-mark) {
  visibility: hidden;
}
.screening-reg-visual.uma-score-calculating .uma-step-loading-mark,
.screening-reg-visual.uma-chart-failed .uma-chart-failed-words {
  position: absolute;
  inset: 0;
  margin: auto;
}
.screening-reg-visual.uma-chart-failed .screening-donutWrap > :not(.uma-chart-failed-words) {
  visibility: hidden;
}
.screening-reg-visual.uma-chart-failed .uma-chart-failed-words {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* ==========================================================================
   1-PAGER PRINT (bug fixes batch 1, 10 Oct 2026)
   The chrome moves the page into its content wrapper and adds its own top bar,
   sidebar and BETA bar to body, so her print rules (UMA.css, body > .one-pager
   and the body > ... hides) stopped matching and the browser printed the page.
   Download 1-page now puts the sheet back as a direct child of body; while
   printing, everything else in body is hidden. Her 1-pager styles are unchanged.
   ========================================================================== */
@media print {
  :where(.page-profile, .page-brain-body) body > :not(.one-pager) {
    display: none;
  }
}

/* ---------- GOOD-FOR PILLS SELECTABLE (her bug, bug fixes batch 1, 10 Oct 2026). Search: GOOD-FOR SELECTABLE ----------
   The "good for" pills on the marketplace and library cards and in the product drawer could not be selected or copied:
   UMA.css (:where(.page-uma-library, .page-uma-marketplace) .good-for-tag) gave them pointer-events: none and
   user-select: none. They are plain text pills (not buttons, no overlay); the card's drawer still opens only from its
   own + button. What was here: pointer-events none and user-select none on .good-for-tag. */
:where(.page-uma-library, .page-uma-marketplace) .good-for-tag {
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}

/* ---------- SIGN-IN HEADINGS 1.3 (her ask, 10 Oct 2026). Search: SIGN-IN HEADINGS 1.3 ----------
   Every heading through sign-up, verify email, passkey, PIN, security set-up, log in and reset wraps on a phone, so all
   take her 1.3 (--default-line-height-x-small), including the loading words that sit inside them. */
:root.page-auth h1,
:root.page-auth h1 * {
  line-height: var(--default-line-height-x-small);
}

/* ---------- SIGN-UP LOADING CENTRED (bug fixes batch 1, 10 Oct 2026, her ask). Search: SIGN-UP LOADING CENTRED ----------
   Every loading state built by /uma-step-loading.js in a page's centred column (sign-up, log-in, verify-email,
   create-passkey, set-pin, reset-pin, security-setup; her ask 10 Oct 2026, "all pages"): the donut or paper plane and
   the loading words sit in the middle of the screen, top to bottom, at every screen size. Only while it loads: the
   column holding the loading heading fills the screen and centres its contents; the held parts of the step, which
   cannot be seen while it loads, take no space (the heading's own held words stay, so the heading keeps its size).
   The donut, the words, their sizes and the gap between them are unchanged. done() takes the classes away, so the
   step comes back exactly as it was. The screenings have their own centred loading screen (SCREENING LOADING). */
.small-centred-column-centred-text:has(.uma-step-loading-heading) {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: 0;
  padding-bottom: 0;
  justify-content: center;
}
.small-centred-column-centred-text:has(.uma-step-loading-heading) .uma-step-loading-held:not(.uma-step-loading-heading-was) {
  display: none;
}

/* ---------- HOMEPAGE HERO SHARE ICONS DOUBLED (her bug, bug fixes batch 1, 10 Oct 2026) ----------
   Search: HERO SHARE ICONS DOUBLED. Her words: the social media icons on the homepage hero video are far too small.
   They are twice the size, on the homepage hero's share block only (index.html .campaign-share-block.hero-end-screen,
   "Share this video"): not the #StopMakingWomenWait campaign card's share block (no .hero-end-screen) and no other film.
   Twice the UMA.css size tokens they had: above 600, --heading-size-xl (UMA.css .card-social-icon, 2.2rem, 35.2px) to
   2 x --heading-size-xl (70.4px); at 600 and below, --button-icon-lg (hero share line at 600 and below, above, 1.4rem,
   22.4px) to 2 x --button-icon-lg (44.8px). The 44px tap layer and the gaps are unchanged. */
.page-home .hero-end-screen .card-social-icon { font-size: calc(2 * var(--heading-size-xl)); }
@media (max-width: 37.5rem) {
  .page-home .hero-end-screen .card-social-icon { font-size: calc(2 * var(--button-icon-lg)); }
}

/* ---------- LOG-IN UNLOCK SCREEN NAVY (bug fixes batch 1, 10 Oct 2026, item 12). Search: LOG-IN UNLOCK SCREEN NAVY ----------
   Her words: the log-in success screen is black; make it Uma navy. log-in.html's unlock screen ("You are logged in", and
   "You have not finished ..." on the same screen) carries animation-overlay-login; it was UMA.css .animation-overlay's
   --navy-60 (#0E131E, near black). Now the UMA.css --navy token, in light and dark mode alike. The fade to cream before Uma
   opens is unchanged (animation-overlay-cream is left out here). The log-out screen is not touched (group C, item 42). */
.animation-overlay.animation-overlay-login:not(.animation-overlay-cream) { background: var(--navy); }

/* ---------- AUTH FULL SCREEN (bug fixes batch 1, 10 Oct 2026, items 14-15). Search: AUTH FULL SCREEN ----------
   Log in, sign-up, "Check your email", the email link page, passkey, security set-up, set PIN and reset PIN are full
   screen (no top bar, menu, SOS or Feedback: log-in and reset-pin through the chrome's own data-uma-chrome="bare", the
   others load no chrome). Each has a way out:
   - the X, top right: the canvases' and screenings' X (btn btn-circular btn-md btn-secondary-gray-on-white), in the
     page's top right corner, the screenings' bar's top space (--app-default-top-bottom-margin-sm) from the top and the
     side, clear of the phone's notch and rounded corners (safe areas). It scrolls with the page (absolute, not fixed),
     so on a long form (sign-up at 320) the see-through X never sits over a field.
   - the Uma face above the heading is a link to the home page. The link sits inside the face's own svg, so the face
     stays the svg the step loading spinner swaps out (/uma-step-loading.js findLogo). A see-through square the size of
     the face takes the tap, so a tap between its lines still counts. The face looks exactly as before. */
/* Her ruling (10 Oct 2026, evening): "every X: always fixed, never scrolling". Was: position: absolute. Her later
   ruling: no solid fill; the X is UMA.css's own round button (btn-secondary-gray-on-white) as it is. The fill that
   was here: background-color: var(--t-page-bg, var(--mid-white)). */
.uma-auth-close {
  position: fixed;
  top: calc(var(--app-default-top-bottom-margin-sm) + env(safe-area-inset-top, 0px));
  right: calc(var(--app-default-top-bottom-margin-sm) + env(safe-area-inset-right, 0px));
  z-index: var(--z-panel-close);
}
.uma-auth-logo-hit { fill: transparent; }
.uma-auth-logo-link { cursor: pointer; }
/* AUTH FULL SCREEN, SOS: the phone SOS tab rule above (@media max-width 37.5rem, .uma-chrome-sos display inline-block)
   came after UMA.css's off switch (.uma-chrome-part-off, display none) with the same weight, so at 600px and below the
   SOS still showed on a page that turns it off (data-uma-chrome="bare", data-uma-no-sos, umaChrome.hide('sos') or
   umaChrome.fullScreen()). The off switches are restated here, after it, for the SOS. */
@media (max-width: 37.5rem) {
  .uma-chrome-sos.uma-chrome-part-off,
  .uma-chrome-sos.uma-chrome-part-full-screen { display: none; }
}

/* ---------- CODE BOXES AS LOG-IN PIN (bug fixes batch 1, 10 Oct 2026, item 62; replaces item 3). Search: CODE BOXES AS LOG-IN PIN ----------
   Her words: log-in's "Enter your PIN" boxes are the design for every PIN and code entry. Every PIN row (set-pin,
   reset-pin's new PIN and repeat, profile) is already that exact component: .form-group--pin, .pin-field
   .pin-field--tiles .pin-field-masked, .pin-field-digit, the same box size, gap, focus and wiring (measured equal to
   log-in at 320 and 375: 40.1px and 51.1px boxes, 12.8px gaps). The 6-digit text codes (security-setup, reset-pin,
   the profile, .pin-field--six-digits) use the same classes, but 6 log-in-sized boxes and gaps do not fit across a
   phone (at 320: 311px needed, 256px there). So each code box takes the log-in PIN box's height, gap, text, border,
   radius and focus, and only its width is narrower to fit. The height is worked out from the same tokens as the PIN
   row: (80% of the form, less the row's edge padding both sides, less 3 gaps) / 4. The code row is its own size
   container, so 100cqi is its width inside its edge padding (the form's width is that plus the padding both sides).
   New token: --pin-field-width-ratio, the same 80% as UMA.css --pin-field-width written as a number (a percentage
   cannot be multiplied by a width inside calc() for a height). */
:root { --pin-field-width-ratio: 0.8; }
.pin-field--six-digits { container-type: inline-size; }
.pin-field--six-digits .pin-field-digit {
  aspect-ratio: auto;
  height: calc((var(--pin-field-width-ratio) * (100cqi + 2 * var(--pin-tile-edge-padding)) - 2 * var(--pin-tile-edge-padding) - 3 * var(--gap-md)) / 4);
}

/* ---------- SET PIN LESS SPACE ABOVE (bug fixes batch 1, 10 Oct 2026, item 4). Search: SET PIN LESS SPACE ABOVE ----------
   Her words: PIN and repeat PIN sit too far down; reduce the space above the heading on the onboarding security
   screens. On a phone held upright, set-pin's column (UMA.css .small-centred-column-centred-text, 3rem top padding at
   600px and below) has no top padding of its own; the wrapper's top space from SET PIN TOP above
   (--inner-wrapper-margin-top-mobile) stays, so the Uma face sits that far from the top. The heading, the PIN and the
   repeat PIN move up by 3rem (48px). Only set-pin matches (page-auth-app without page-auth-full-screen, as SET PIN TOP);
   computers and phones held sideways (UMA.css keeps 3rem there so the field stays above the keyboard) are unchanged. */
@media (max-width: 600px) and (orientation: portrait) {
  :where(.page-auth-app:not(.page-auth-full-screen)) .small-centred-column-centred-text {
    padding-top: 0;
  }
}

/* ---------- SECURITY SETUP FINISHED AT THE TOP (bug fixes batch 1, 10 Oct 2026, item 6). Search: SETUP FINISHED TOP ----------
   Her words: "Security setup finished" is vertically centred, so "Start onboarding" falls off the bottom; align it to
   the top. Onboarding's first screen (uma-onboarding.html renderOnboardingStart, UMA.css .onb-start-screen
   justify-content: center) now starts at the top of its area, under onboarding's own top bar. The take-you-back screens
   drawn like it (same class) start at the top too. Sizes, gaps and words are unchanged. */
.onb-start-screen { justify-content: flex-start; }

/* ---------- SIGNING YOU UP TRULY CENTRED (bug fixes batch 1, 10 Oct 2026, item 7). Search: LOADING TRULY CENTRED ----------
   Her words: centre the spinning ring and "Signing you up" vertically and horizontally. SIGN-UP LOADING CENTRED above
   centres the column's contents, but the heading kept its bottom margin (UMA.css .small-centred-column-centred-text h1,
   --app-default-top-bottom-margin-xxl) and the box of its own held words, so the ring and words sat about 24px above the
   middle (320: 182px above, 231px below; 375: 231px above, 281px below). While it loads and is centred, the heading has
   no bottom margin, its held words take no space and the loading words sit in it in the normal flow, so the ring, the
   gap under it and the words are the middle of the screen. Every page that block covers gets the same (log-in,
   verify-email, create-passkey, set-pin, reset-pin, security-setup); done() takes the class away, so the step comes back
   exactly as it was. */
.small-centred-column-centred-text:has(.uma-step-loading-heading) .uma-step-loading-heading {
  margin-bottom: 0;
}
.small-centred-column-centred-text:has(.uma-step-loading-heading) .uma-step-loading-heading > .uma-step-loading-heading-words {
  position: static;
}
.small-centred-column-centred-text:has(.uma-step-loading-heading) .uma-step-loading-heading > .uma-step-loading-heading-was {
  display: none;
}

/* ---------- MOBILE FLYOUT TITLE (bug fixes batch 1, 10 Oct 2026, items 33 and 34). Search: MOBILE FLYOUT TITLE ----------
   Her items: on a phone the menu's "Uma" was too small, with too little room before BETA, and BETA was far too big.
   Why: on short phone screens UMA.css shrinks the title (2rem at 700px tall and below, 1.6rem at 600 and below; a small
   iPhone's visible height is under 600), while BETA stayed --body-text-xs (0.9rem) with a 2px gap, so BETA was more than
   half the height of "Uma". The desktop top bar has no "Uma" word (only the logo), so the title takes the menu's own full
   title size, --uma-title-flyout-font-size (3rem, what it already is on taller screens). The gap before BETA is --gap-xs,
   the same gap the top bar's BETA tag keeps from the logo. BETA is --body-text-xxs (0.8rem). Colours unchanged.
   Phones only (600 and below); the submenu titles (.uma-chrome-menu-title-small) are unchanged. */
@media (max-width: 600px) {
  .uma-chrome-menu-title:not(.uma-chrome-menu-title-small) { font-size: var(--uma-title-flyout-font-size); }
  .uma-chrome-menu-title .uma-chrome-menu-title-tag { margin-left: var(--gap-xs); font-size: var(--body-text-xxs); }
}

/* ---------- COOKIE BUTTON OFF WHILE THE MENU IS OPEN (bug fixes batch 1, 10 Oct 2026, item 36). Search: COOKIE BUTTON OFF WHILE THE MENU IS OPEN ----------
   Her item: on the website menu (logged out) a round floating button with a link-like icon covered Log in, bottom left.
   It is Cookiebot's own cookie settings button (its widget: a round navy button, 48px, 10px from the bottom left, the
   Cookiebot logo, which looks like a chain link). UMA.css (Bug 40) shows it on the homepage only, so it sat over the
   menu's Log in there. While the menu is open (the chrome puts uma-flyout-open on the body) it is hidden, so nothing
   covers Log in or Try Uma; it comes back when the menu closes. Found the same way as Bug 40 (its box has no class, so
   by the button inside it), no ID selector. */
.uma-flyout-open div:has(> .CookiebotWidget-logo) { display: none; }

/* ---------- ALERTS X (bug fixes batch 1, 10 Oct 2026, item 37). Search: ALERTS X ----------
   Her item: the bell opened a huge "No alerts" bubble with no close button. The panel now has an X (the chrome wishlist
   panel's own X: btn btn-circular btn-sm with its --chrome-wishlist-close colour, mid charcoal in light, white in dark),
   in the top right, level with "No alerts" or above the list. With no alerts the bubble is as wide as its words and the X.
   The bubble was tall because UMA.css's p:last-of-type rule gave "No alerts" a large bottom margin
   (--app-default-top-bottom-margin-xl); that token is set to 0 on it, as .beta-text does. With alerts, the list keeps
   the panel's own width (--alerts-panel-width). Closing on a tap outside and on Esc is in uma-chrome.js (ALERTS X). */
.uma-alerts-panel:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.uma-alerts-panel:has(.uma-alerts-empty) { width: max-content; }
.uma-alerts-close { grid-column: 2; grid-row: 1; margin: var(--gap-xs); }
.uma-alerts-list { grid-column: 1 / -1; grid-row: 2; }
.uma-alerts-empty { grid-column: 1; grid-row: 1; --app-default-top-bottom-margin-xl: 0; }

/* ---------- WISHLIST PILLS REACH THE LAST ONE (bug fixes batch 1, 10 Oct 2026, item 39). Search: WISHLIST PILLS REACH THE LAST ONE ----------
   Her item: on a phone the last filter pill ran off the right edge and could not be reached. Below 599 (where the pills go
   full width, edge to edge) the pill bar scrolls sideways. Two things could hide its end: the bar centres its pills with
   "safe center", which older iPhone Safari does not know (it then falls back to plain centre, which pushes pills past
   the edges where scrolling cannot reach), and Safari leaves the bar's end padding out of what can be scrolled. So below
   599 the pills start at the left and are centred with automatic side margins (which drop to nothing once they
   overflow), and the room after the last pill is a spacer the same width as the start padding (--gap-md), which every
   browser scrolls to. Looks the same when the pills fit. Chrome wish list and the marketplace's own wish list drawer.
   Not a tab rule (the tabs stay in WISHLIST TABS ONE DEFINITION). */
@media (max-width: 599px) {
  .uma-wishlist-pill-bar, .uma-wishlist-drawer .pill-filter-bar { justify-content: flex-start; padding-right: 0; }
  .uma-wishlist-pill-bar > button:first-of-type, .uma-wishlist-drawer .pill-filter-bar > button:first-of-type { margin-left: auto; }
  .uma-wishlist-pill-bar > button:last-of-type, .uma-wishlist-drawer .pill-filter-bar > button:last-of-type { margin-right: auto; }
  .uma-wishlist-pill-bar::after, .uma-wishlist-drawer .pill-filter-bar::after { content: ""; flex: 0 0 var(--gap-md); align-self: stretch; }
}

/* ---------- LOGGED OUT NAVY (bug fixes batch 1, 10 Oct 2026, item 42). Search: LOGGED OUT NAVY ----------
   "You've been logged out" (log-out.html) was UMA.css .animation-overlay's --navy-60 (#0E131E), which reads as black.
   Her words: make it Uma navy. Only the log-out screen carries animation-overlay-logout (the log-in unlock screen is
   the LOG-IN UNLOCK SCREEN NAVY block above, its own class). Uma's dark mode keeps the same navy. "Log back in" is
   centred under the heading: the overlay is a centred column, and the button is held to its centre on its own too
   (align-self), whatever else is on the line. */
.animation-overlay.animation-overlay-logout { background: var(--navy); }
.animation-overlay-logout .animation-overlay-button { align-self: center; }

/* ---------- APP-LIKE ON PHONES (bug fixes batch 1, 10 Oct 2026, item 32). Search: APP-LIKE ON PHONES ---------- */
/* Added to the iPhone home screen, Uma now opens full screen with a see-through status bar (every page's head has
   apple-mobile-web-app-status-bar-style black-translucent and viewport-fit=cover), so the page runs under the notch and
   the home bar. These rules keep the chrome and the full-screen pages clear of them. env(safe-area-inset-*) is 0 on a
   desktop, on Android and in an ordinary browser tab, so nothing moves there.
   - Tokens: the four insets, and the top bar's own row height (60px, the value UMA.css gives --fixed-header-height).
     --fixed-header-height becomes the row plus the notch, so everything that already sits below the bar (content
     wrappers, canvases, sticky bars) moves down with it. :root:root so it also outranks the per-page copies of the
     token (all 60px); a wrapper that sets it to 0 (the screenings, which have no top bar) still wins inside itself.
   - Top bar: padded down by the notch and in from the sides (landscape); its row stays 60px tall.
   - Full-screen pages without the top bar (sign-up, verify-email, create-passkey, security-setup): padded top and bottom.
     The onboarding and screening progress bar top is set by group D (1rem + safe-area-inset-top), not here.
   - Screenings: the title page's Start button and the scrolling question list end above the home bar.
   - Canvases: the fixed canvas ends above the home bar. */
:root:root {
  --uma-safe-top: env(safe-area-inset-top, 0px);
  --uma-safe-bottom: env(safe-area-inset-bottom, 0px);
  --uma-safe-left: env(safe-area-inset-left, 0px);
  --uma-safe-right: env(safe-area-inset-right, 0px);
  --fixed-header-row-height: 60px; /* new token: the top bar's row, without the notch */
  --fixed-header-height: calc(var(--fixed-header-row-height) + var(--uma-safe-top));
}
.uma-chrome-top-bar { padding-top: var(--uma-safe-top); padding-left: var(--uma-safe-left); padding-right: var(--uma-safe-right); }
.uma-chrome-top-bar .app-main-nav { height: var(--fixed-header-row-height); }
:where(.page-auth-full-screen) .wrapper-for-all-sections { padding-top: var(--uma-safe-top); padding-bottom: var(--uma-safe-bottom); }
.screening-title-page .screening-title-cta { margin-bottom: calc(var(--app-default-top-bottom-margin-lg) + var(--uma-safe-bottom)); }
.screening-q-content-wrap { padding-bottom: var(--uma-safe-bottom); }
.uma-canvas-wrapper { padding-bottom: var(--uma-safe-bottom); }

/* ---------- PROFILE FULL SCREEN (bug fixes batch 1, 10 Oct 2026, item 40). Search: PROFILE FULL SCREEN ----------
   My profile opens over the page in the chrome's own layer (uma-chrome.js "PROFILE OPENS OVER THE PAGE",
   .uma-chrome-profile-overlay, --z-chrome-profile). The Feedback tab sits above that layer (--z-chrome-feedback-raised)
   and the SOS tab showed with it, so both showed over the profile. While the profile is open (the chrome puts
   uma-chrome-profile-open on <html>) the page behind's SOS and Feedback are hidden, as the chrome's off switch hides
   them; closing the profile brings them back as they were. Inside the profile, profile.html is data-uma-chrome="bare".
   Two classes, so this wins over the phone SOS tab rule above. */
.uma-chrome-profile-open .uma-feedback-tab,
.uma-chrome-profile-open .uma-chrome-sos { display: none; }
/* PROFILE FULL SCREEN: UMA.css (.uma-chrome-own-layout .uma-navy-root) starts the profile below the top bar and beside
   the sidebar (--fixed-header-height, --sidebar-width). With the top bar and sidebar off, it starts at the top and the
   left edge, so it fills the screen. */
.uma-chrome-own-layout.uma-chrome-off-topbar .uma-navy-root { top: 0; }
.uma-chrome-own-layout.uma-chrome-off-sidebar .uma-navy-root { left: 0; }

/* ---------- WELCOME ABOARD CENTRED (bug fixes batch 1, 10 Oct 2026, item 28). Search: WELCOME ABOARD CENTRED ----------
   Onboarding's card screen, "Welcome aboard Uma, [name]" (uma-onboarding.html renderCommunityName). Her ask:
   1. The waving hand on the same line as the title: the page now puts the hand inside the title, before its words
      (it was above them: UMA.css .onb-community-greeting-row wraps, so the long title dropped under the hand on a
      phone). It keeps its size (--heading-size-xxl) and sits on the first line, in the middle of it, with the row's
      own gap (--gap-md) before the words.
   2. The title centred (on a phone, below 600px): the row spans the column (the body lines its children up on the
      left) and the title, hand and words, is centred.
   3. The sentence above the card ("Here is your membership card ...") centred (on a phone). Only that sentence (the
      body's own direct child); her two lines under the download options are unchanged.
   4. The wave respects Uma's own still switch (data-motion="still") as well as the device's reduced motion (UMA.css
      already stops every animation for that). The wave itself (UMA.css .onb-waving-hand, wave-animation twice after
      half a second, turning round --wave-pivot) is unchanged. No new tokens. */
.onb-community-greeting > .onb-waving-hand {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--gap-md);
}
/* Centred on a phone only (her ask is for her phone; onboarding's phone breakpoint). On a computer the card and the
   lines under it stay on the left, so the title and sentence stay on the left with them, as before. */
@media (max-width: 599px) {
  .onb-community-greeting-row {
    align-self: stretch;
  }
  .onb-community-greeting {
    text-align: center;
  }
  .onb-community-body > .onb-community-count {
    align-self: center;
    text-align: center;
  }
}
:root[data-motion="still"] .onb-waving-hand {
  animation: none;
}

/* ---------- CARD SCREEN FULL LOADING (bug fixes batch 1, 10 Oct 2026, item 29). Search: CARD SCREEN FULL LOADING ----------
   Her report: after Add to Apple Wallet / Google Wallet the loading ring and "Adding to your wallet" sat in the middle
   of the page with the card still showing. Now, as on sign-up and log-in (SIGN-UP LOADING CENTRED above), the loading
   state takes the whole screen while it lasts: the card screen fills the window in the page's own background
   (--t-page-bg, light and dark), the ring and the words sit in the middle top to bottom, and the card, the sentence,
   the buttons, the QR code, the two lines and Continue take no space. It sits under the SOS button
   (--z-chrome-header, below --z-chrome), as the screenings' loading screen does. /uma-step-loading.js and
   /uma-wallet.js are unchanged: done() takes the loading heading away and the screen comes back exactly as it was.
   No new tokens. */
.onb-community-centred:has(.uma-step-loading-heading) {
  position: fixed;
  inset: 0;
  z-index: var(--z-chrome-header);
  justify-content: center;
  box-sizing: border-box;
  min-height: 0;
  padding-left: var(--default-left-right-mob-body-padding);
  padding-right: var(--default-left-right-mob-body-padding);
  background-color: var(--t-page-bg);
}
.onb-community-centred:has(.uma-step-loading-heading) .onb-community-body {
  flex: 0 0 auto;
  min-height: 0;
  justify-content: center;
  align-items: center;
}
.onb-community-centred:has(.uma-step-loading-heading) .onb-community-body > :not(.onb-community-greeting-row),
.onb-community-centred:has(.uma-step-loading-heading) .onb-continue-area {
  display: none;
}
.onb-community-centred:has(.uma-step-loading-heading) .onb-community-greeting-row {
  flex-direction: column;
}

/* ---------- HOME HEADING SPACE (bug fixes batch 1, 10 Oct 2026, item 31; her new brief the same evening). Search: HOME HEADING SPACE ----------
   The screenings home (uma-screenings.html), logged in, on a phone (the page's own 600px breakpoint).
   1. "Your self-discovery journey starts here." sits 2rem (--app-default-top-bottom-margin-xl) below the top of the
      content area under the top bar. It was 72px: the chrome's 40px content margin (.uma-chrome-inner-content-wrapper)
      plus the header's 2rem padding (.uma-app-home-header-text). On this page, on a phone, both are 0 and the heading
      carries the 2rem itself. (Replaces this evening's first version, which added 2rem to the 72px.)
   2. Below 450px the heading's size is fluid: --home-heading-fluid (7vw) between --heading-size-sm and --heading-size-xl
      (2.2rem, its size until now, reached at about 503, so all phones below 450 are smaller): 22.4px at 320, 26.25px
      at 375. (First version: 8.5vw with --heading-size-md as the floor; made smaller after her bubble answer.)
   3. "A – G to select, Esc to close" is hidden on touch screens ((hover: none) and (pointer: coarse)): the letter keys
      are for a keyboard. It stays on a computer. It was already aria-hidden.
   The computer layout is unchanged. New token: --home-heading-fluid. */
:root {
  /* HOME HEADING SPACE: the phone heading's fluid size, clamped by UMA.css tokens. Her answer on the overlapping bubbles
     (10 Oct, evening: smaller heading, not smaller bubbles): 7vw, was 8.5vw. 22.4px at 320, 26.25px at 375. */
  --home-heading-fluid: 7vw;
}
@media (max-width: 600px) {
  html.page-uma-screenings .uma-chrome-inner-content-wrapper {
    margin-top: 0;
  }
  html.page-uma-screenings .uma-app-home-header-text {
    padding-top: 0;
  }
  html.page-uma-screenings .home-welcome-heading-h1 {
    margin-top: var(--app-default-top-bottom-margin-xl);
  }
}
@media (max-width: 449px) {
  html.page-uma-screenings .home-welcome-heading-h1 {
    /* min was --heading-size-md (1.7rem); --heading-size-sm (1.2rem) lets 7vw through at 320 */
    font-size: clamp(var(--heading-size-sm), var(--home-heading-fluid), var(--heading-size-xl));
  }
}
/* Her answer on the overlapping bubbles: "the next var" below the heading is tighter on a phone. The gap between the
   heading and "Welcome to the Uma ecosystem." is --app-default-top-bottom-margin-xxs (0.5rem), was
   --app-default-top-bottom-margin-xs (0.8rem, uma-screenings.html .uma-app-home-h1-sub-heading). */
@media (max-width: 600px) {
  html.page-uma-screenings .uma-app-home-h1-sub-heading {
    margin-top: var(--app-default-top-bottom-margin-xxs);
  }
}
@media (hover: none) and (pointer: coarse) {
  html.page-uma-screenings .uma-app-home-h1-sub-instructions {
    display: none;
  }
}

/* ---------- ONBOARDING PHONE FRAME (bug fixes batch 1, 10 Oct 2026, items 16, 17, 18, 19). Search: ONBOARDING PHONE FRAME ----------
   16. Content cut off about 2rem above the bottom. At 600 and below the frame (.full-screen-wrapper-inner-wrapper) had
       1.5rem top padding and 2rem bottom padding around a scroll area of 100dvh less 1.5rem, so the page was 100dvh + 2rem
       tall inside a 100dvh body. iPhones scroll an overflow-hidden body (a finger reaching the end of the list, a focused
       field), so the whole page rose by that 2rem and the empty bottom padding showed under the cards, the wake-up
       picker and Next. The frame now has no top or bottom padding and the scroll area is the full 100dvh: nothing left
       over to scroll. (Measured: body 699 tall in a 667 window before, 667 after.)
   17. Titles cut off early when scrolling: the sticky top bar (.uma-head) had a 1.5rem band under the Back / Log out row
       (--chrome-control-bar-margin-bottom-mask), painted the page colour, so the question title vanished 1.5rem below
       the buttons. That band is gone; the same space now sits at the top of the scrolling area, so the screen looks the
       same at rest and the title scrolls right up to the buttons.
   18. Progress bar 1rem from the top of the screen (--app-default-top-bottom-margin-sm), plus the top safe area, so in the
       installed home-screen app it is 1rem below Apple's top bar. env() is 0 without viewport-fit=cover, so it works
       with and without it.
   19. "Faster ways to answer": the top bar is empty on this screen (no progress bar, no buttons), so its bar row and the
       space above the scroll area go, and the title starts 1rem from the top (plus the safe area). On short phones the
       Next row stays pinned to the bottom of the screen so Next shows without scrolling. */
@media (max-width: 600px) {
  :where(.page-onboarding) .full-screen-wrapper-inner-wrapper { padding-top: 0; padding-bottom: 0; }
  :where(.page-onboarding) .uma-onboard-screen { height: var(--onb-viewport-height-dynamic); max-height: var(--onb-viewport-height-dynamic); }
  :where(.page-onboarding) .uma-head { padding-top: calc(var(--app-default-top-bottom-margin-sm) + env(safe-area-inset-top, 0px)); padding-bottom: 0; }
  :where(.page-onboarding) .fixed-progress-bar-scrollable-body-area { padding-top: var(--chrome-control-bar-margin-bottom-mask); }
  :where(.onb-screen-type-faster) .fixed-progress-bar-scrollable-body-area { padding-top: 0; }
  :where(.onb-screen-type-faster) .uma-head .page-control-bar { padding-top: 0; }
  :where(.onb-screen-type-faster) .faster-nav { position: sticky; bottom: 0; }
}

/* ---------- ONBOARDING NO SOS (bug fixes batch 1, 10 Oct 2026, item 20). Search: ONBOARDING NO SOS ----------
   Onboarding turns the SOS off (the chrome gives it uma-chrome-part-off, UMA.css display none), but the phone SOS tab
   rule ("mobile SOS at the right edge", max-width 37.5rem, display inline-block) comes later with the same weight, so
   the tab showed at phone width. Hidden on every onboarding screen at every width. */
:where(.page-onboarding) .uma-chrome-sos { display: none; }

/* ---------- ONBOARDING PICKER PILLS (bug fixes batch 1, 10 Oct 2026, items 22 and 23). Search: ONBOARDING PICKER PILLS ----------
   Country, colour and animal pills collapsed to one line of text (about 17px) at 400px and below: UMA.css's phone rule
   for every .onb-pill sets --onb-picker-option-height to auto, and the picker pill has no top or bottom padding, so
   the colour dots overflowed the squashed pill. They keep the button height (--button-size-lg) as a minimum; a long name
   can still wrap. While the phone keyboard is open over a picker (body.onb-keyboard-open, set by the page script
   KEYBOARD ROOM), the list is sized to the space left above the keyboard and its toolbar (--onb-kb-list-height), and
   the screen gets room at the bottom to scroll the search box up under the top bar (--onb-kb-room). */
:where(.page-onboarding) .onb-picker-option { min-height: var(--button-size-lg); }
.onb-keyboard-open .onb-picker-grid { max-height: var(--onb-kb-list-height); }
.onb-keyboard-open .screen-host { padding-bottom: var(--onb-kb-room); }

/* ---------- ONBOARDING ANSWER CARDS (bug fixes batch 1, 10 Oct 2026, item 24). Search: ONBOARDING ANSWER CARDS ----------
   At phone width the letter squares (sex at birth and the other squares questions, .onb-square) and the lifestyle
   answer tiles (the period question and the other tile questions, .onb-answer-tile) were 147px squares in one narrow
   column, with the letter placed absolutely in the corner, so on longer answers ("I have irregular periods because...")
   the letter sat on the words. They now match the other onboarding cards (the rect list, .onb-rect-list .onb-pill):
   full width of the column, the rect padding and radius, the letter box (--marker-size) on the left with the rect gap
   (--onb-circle-gap), and the words beside it. Colours and the selected state are unchanged. Above 599px unchanged. */
@media (max-width: 599px) {
  :where(.page-onboarding) :is(.onb-squares, .onb-answer-tile-grid) {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    max-width: var(--golden-width-small);
    gap: var(--onb-answer-gap);
  }
  :where(.page-onboarding) :is(.onb-square, .onb-answer-tile) {
    aspect-ratio: auto;
    width: 100%;
    max-width: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: var(--pill-rect-padding);
    border-radius: var(--button-radius);
    font-size: var(--body-text-sm);
    line-height: var(--default-line-height-single);
    --onb-marker-position: static;
    --onb-marker-gap: var(--onb-circle-gap);
  }
  :where(.page-onboarding) .onb-square-letter {
    position: static;
    flex-shrink: 0;
    width: var(--marker-size);
    height: var(--marker-size);
    margin-right: var(--onb-circle-gap);
  }
  :where(.page-onboarding) .onb-square-label { flex: 1; }
}

/* ---------- ONBOARDING CYCLE SLIDERS (bug fixes batch 1, 10 Oct 2026, item 25). Search: ONBOARDING CYCLE SLIDERS ----------
   The menstrual chart's two sliders (cycle length, period length) were 6px tall: a finger had to land on that 6px strip,
   and the 32px thumb drawn outside it could not be grabbed. The slider's own box is now the touch target height
   (--touch-target-min, 44px) with negative margins, so the layout does not move; the 6px track is drawn by the track
   pseudo-element, the same colour and radius, and the thumb is centred on it. touch-action none so a drag along the
   slider is not taken as a page scroll. /uma-range-touch.js (RANGE TOUCH) makes a touch anywhere on it move the
   thumb there and follow the finger. */
/* Her answer (10 Oct 2026): ALL sliders. This now covers every onboarding slider (.cycle-slider: cycle and period length,
   water, caffeine, alcohol), and the finger-following is the shared /uma-range-touch.js (RANGE TOUCH block below). */
:where(.page-onboarding) .cycle-slider {
  --uma-range-thumb-width: var(--cycle-slider-thumb-width);
  height: var(--touch-target-min);
  margin: calc((var(--cycle-slider-track-height) - var(--touch-target-min)) / 2) 0;
  background: transparent;
  touch-action: none;
}
:where(.page-onboarding) .cycle-slider::-webkit-slider-runnable-track {
  height: var(--cycle-slider-track-height);
  border-radius: var(--cycle-slider-track-radius);
  background: var(--onb-slider-track);
}
:where(.page-onboarding) .cycle-slider::-webkit-slider-thumb {
  margin-top: calc((var(--cycle-slider-track-height) - var(--cycle-slider-thumb-height)) / 2);
}
:where(.page-onboarding) .cycle-slider::-moz-range-track {
  height: var(--cycle-slider-track-height);
  border-radius: var(--cycle-slider-track-radius);
  background: var(--onb-slider-track);
}

/* ---------- ONBOARDING INTRO TITLE LINE HEIGHT (bug fixes batch 1, 10 Oct 2026, item 26). Search: ONBOARDING INTRO TITLE ----------
   Section intro titles ("Diversity and inclusion" and the others, one definition) were line height 1, so a title that
   wraps had its lines touching. Line height 1.3 (--default-line-height-x-small). */
:where(.page-onboarding) .onb-section-intro-heading { line-height: var(--default-line-height-x-small); }

/* ---------- SCREENING PHONE SPACING (bug fixes batch 1, 10 Oct 2026, items 18, 46, 51). Search: SCREENING PHONE SPACING ----------
   The seven screenings (body.screening-fixed-height), 600px and below, every screen:
   18/46. Progress bar 1rem from the top of the screen (--app-default-top-bottom-margin-sm; was 3rem), plus the top safe
          area so in the installed home-screen app it is 1rem below Apple's top bar (env() is 0 without
          viewport-fit=cover). Masking, RSD and stimming's .mrs-page-content is the same element and gets the same.
   46.    Progress bar to the Back / X buttons 1rem: the bar row keeps its 1rem top margin (UMA.css
          .screening-control-bar) and loses its own extra 1rem top padding (UMA.css .page-control-bar). Was 2rem.
   51.    Back / X buttons to the question number ("Q1 of 29") 2rem (--app-default-top-bottom-margin-xl; was 4rem). */
@media (max-width: 37.5rem) {
  .screening-fixed-height .screening-page-content { padding-top: calc(var(--app-default-top-bottom-margin-sm) + env(safe-area-inset-top, 0px)); }
  .screening-fixed-height .screening-control-bar { padding-top: 0; }
  .screening-fixed-height .screening-question-number { margin-top: var(--app-default-top-bottom-margin-xl); }
}
/* APP-LIKE ON PHONES, continued: the home page's video hero runs under the see-through top bar and sets its own room
   above the headline (UMA.css phone rule), so at phone width that room grows by the notch too; the gap between the bar
   and "The waiting." stays as she designed it. 0 everywhere except an iPhone home-screen app. Search: APP-LIKE ON PHONES */
@media (max-width: 600px) {
  .hero-section-with-video { padding-top: calc(var(--app-default-top-bottom-margin-xxxxl) + var(--app-default-top-bottom-margin-xl) + var(--uma-safe-top)); }
}

/* ---------- JOIN NUMBER (bug fixes batch 1, 10 Oct 2026, item 27). Search: JOIN NUMBER ----------
   Onboarding's last screen: "You are the Nth person to join mission late-discovery" now waits for her real joining
   number (umaJoinNumber). While it comes, the sentence keeps its place but is not seen, so nothing moves when it
   appears; if it cannot be read it stays unseen rather than show a wrong number. No new tokens. */
.onb-completion-joined-waiting {
  visibility: hidden;
}

/* ---------- UPGRADE PANEL ON PHONES (bug fixes batch 1, 10 Oct 2026, items 55, 56, 57, 58, 59). Search: UPGRADE PANEL ON PHONES ----------
   The chrome's upgrade panel (uma-chrome.js, .uma-upgrade-overlay). Each part is marked with its item number. */

/* 55. PREVIEW 75DVW. Her words: the swipeable report preview filled the whole screen width; limit it to 75dvw, centred.
   At 900px and below UMA.css gives it the full width (width 100%, up to --max-content-width-golden-section-small, which
   stays). New token: --upgrade-preview-phone-width (75dvw, her value). */
:root { --upgrade-preview-phone-width: 75dvw; }
@media (max-width: 900px) {
  .uma-upgrade-preview-track-wrap {
    width: var(--upgrade-preview-phone-width);
    margin-left: auto;
    margin-right: auto;
  }
}

/* 56. CLOSE CLEAR OF THE PREVIEW. Her words: the X sat on top of the Uma logo on the report cover. At 951px and below
   UMA.css fixes the X to the screen (position fixed), so everything scrolled under it, the report cover too. It now
   sits in the same place at the top of the panel and scrolls with it (absolute, not fixed: the same as the sign-in
   pages' X, AUTH FULL SCREEN), above "Upgrade", so it can never be over the preview. Place, size and look unchanged. */
/* Her ruling, later the same evening ("X and back buttons don't move, generally across the app"): the X is fixed to
   the screen again (UMA.css's place), and it is filled with the panel's own colour (--new-white, UMA.css
   .uma-upgrade-overlay), so the report cover scrolls cleanly under it and never shows through it. Was: position absolute. */
@media (max-width: 951px) {
  .uma-upgrade-close-button-wrap { position: fixed; }
  .uma-upgrade-close-button { background-color: var(--new-white); }
}

/* 57. REPORT COVER DATE. The cover picture (ADHD_report_1.jpg) has "19 May 2026" printed in it. .uma-upgrade-report-date
   sits exactly over that date, in the cover's navy, with the cover's own small grey-white words, and shows her report
   date or today's (written by uma-chrome.js umaUpgradeReportDate). Only on the cover: it shows while the first dot is
   the current one. Placed and sized from the picture (445 x 631): the date starts 38px from the left (8.54%) and its
   line sits from 350px down (55.44%); the words are 2.22% of the page's width (cqi, the frame is its size container),
   measured so "19 May 2026" written here covers the printed one to the pixel.
   The colour is --bright-white at --opacity-moderate over navy, which matches the picture's softer printed lines
   (--opacity-high came out brighter than "Created with Uma" above it). New token: --report-cover-date-size. */
:root { --report-cover-date-size: 2.22cqi; }
.uma-upgrade-preview-track-wrap .report-preview-frame {
  position: relative;
  container-type: inline-size;
}
.uma-upgrade-report-date {
  display: none;
  position: absolute;
  left: 8.54%;
  top: 55.44%;
  min-width: 16%;
  padding-right: 1%;
  background: var(--navy);
  color: rgba(var(--bright-white-rgb), var(--opacity-moderate));
  font-size: var(--report-cover-date-size);
  line-height: var(--default-line-height-small);
  white-space: nowrap;
  pointer-events: none;
}
.uma-upgrade-preview-track-wrap .portrait-tile-report-preview:has(.report-preview-dots > button:first-child.swipe-dot--current) .uma-upgrade-report-date:not(:empty) {
  display: block;
}

/* 58. CODE LABEL ABOVE. Her words: "Use this code for 50% off (single use)" above the code, not below it. The words now
   come first in the markup (uma-chrome.js, CODE LABEL ABOVE) and take the row's whole width, so the code always sits
   under them, at every width. */
.uma-upgrade-code-pill-row .uma-upgrade-code-label {
  flex-basis: 100%;
}

/* 59. GOING TO STRIPE. Pay clears the page: this layer covers everything in the panel's own colour (--t-band-alt, light
   and dark), and the sign-up loading state (/uma-step-loading.js: the spinning ring and "Going to Stripe…") sits in its
   centred column, in the middle top to bottom (SIGN-UP LOADING CENTRED and LOADING TRULY CENTRED above), until Stripe
   opens. Built and taken away by uma-chrome.js (GOING TO STRIPE). The words are the panel heading's colour.
   New token: --z-upgrade-going (one above the panel's X). */
:root { --z-upgrade-going: calc(var(--z-chrome-upgrade-close) + 1); }
.uma-upgrade-going {
  position: fixed;
  inset: 0;
  z-index: var(--z-upgrade-going);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding-left: var(--default-left-right-mob-body-padding);
  padding-right: var(--default-left-right-mob-body-padding);
  background: var(--t-band-alt);
}
/* light: navy, as the panel's "Upgrade"; dark: the page's text colour, as the panel's "Upgrade" (fix-menu, 9 Oct) */
.uma-upgrade-going-heading { color: var(--navy); }
:root[data-theme="dark"] .uma-upgrade-going-heading { color: var(--t-page-text); }

/* ---------- FULL SCREEN CLOSE UNDER THE NOTCH (bug fixes batch 1, 10 Oct 2026, items 40 and 42, with group G's
   home-screen app). Search: FULL SCREEN NOTCH ----------
   In the installed iPhone app (viewport-fit=cover) the screen runs up under the notch. The profile's X and Back sat
   in its header 2rem (--app-default-top-bottom-margin-xl, UMA.css .uma-profile-header) from the top, so under the
   notch; the header now adds the notch's height (--uma-safe-top, G's token: env(safe-area-inset-top), 0 without a
   notch, so nothing moves on a desktop, Android or a browser tab). The logged-out screen's column is padded down by
   the same amount, so the lock never sits under it. The auth pages' X (AUTH FULL SCREEN block) already adds it. */
.uma-profile-header { padding-top: calc(var(--app-default-top-bottom-margin-xl) + var(--uma-safe-top, 0px)); }
.animation-overlay.animation-overlay-logout { padding-top: var(--uma-safe-top, 0px); }

/* ---------- MENU CLEAR OF THE NOTCH (bug fixes batch 1, 10 Oct 2026, follow-up to item 32). Search: MENU CLEAR OF THE NOTCH ----------
   With the home-screen app (APP-LIKE ON PHONES: viewport-fit=cover, see-through status bar) the menu's X and logo sat
   about 36px from the top, partly under the iPhone notch. The menu's top room now adds the top safe area to its own
   value (env(safe-area-inset-top), 0 everywhere without a notch, so nothing moves there). Same values as UMA.css:
   .uma-chrome-menu-pane --gap-lg (--gap-xs at 600px tall and below), .uma-chrome-flyout-pane 1.25rem (UMA.css's own
   number, no token). The flyout pane also gets 100dvh after its 100vh (100vh stays as the fallback); the menu pane
   already follows the visible screen (UMA.css Bug 66, 100dvh), so it gets no height line here. */
.uma-chrome-menu-pane { padding-top: calc(var(--gap-lg) + env(safe-area-inset-top, 0px)); }
@media (max-height: 600px) {
  .uma-chrome-menu-pane { padding-top: calc(var(--gap-xs) + env(safe-area-inset-top, 0px)); }
}
.uma-chrome-flyout-pane { padding-top: calc(1.25rem + env(safe-area-inset-top, 0px)); height: 100vh; height: 100dvh; }
/* CARD SCREEN FULL LOADING (item 29), continued: the loading words centred under the ring at every width (on a
   computer the title is otherwise on the left). */
.onb-community-centred:has(.uma-step-loading-heading) .onb-community-greeting {
  text-align: center;
}
/* MENU CLEAR OF THE NOTCH, continued: the menu's X sits in its own header row (UMA.css .uma-chrome-menu-header, absolute
   at the pane's top, --fixed-header-height tall, X centred). With a notch that row is already the notch taller (G's
   --fixed-header-height), so the X was centred across the notch and still half under it. The row's top padding is the
   notch's height, so the X is centred in the part below the notch. 0 without a notch, so nothing moves there. */
.uma-chrome-menu-header { padding-top: env(safe-area-inset-top, 0px); }

/* ---------- ONBOARDING PICKER PILLS, keyboard open (bug fixes batch 1, 10 Oct 2026, item 23, with the block above).
   Search: ONBOARDING PICKER PILLS. While the keyboard is open over a picker, the Continue row has no top or bottom
   padding, so Continue fits above the keyboard on the smallest phones. */
.onb-keyboard-open .onb-bottom-nav { padding-top: 0; padding-bottom: 0; }

/* ---------- LOADING PROFILE (bug fixes batch 1, 10 Oct 2026, item 50). Search: LOADING PROFILE ----------
   Her words: never show an error while loading; show "Loading profile" with the spinning ring. /uma-results-gate.js puts
   this box up while a results page is hidden waiting for her results (unless the screening's RESULTS CALCULATING screen
   above is already up), and takes it away when the page shows. The window in the page's own colour, the step loading ring
   (STEP LOADING HEADING above: navy, white in Uma's dark mode) and the words in the Contact us sending screen's style
   (.uma-send-screen-words), centred top to bottom and side to side. uma-results-loading-on lets it be seen while the
   gate still hides the page (the gate hides <html> with visibility and opacity). No new tokens. */
.uma-results-loading {
  position: fixed;
  inset: 0;
  z-index: var(--z-chrome-header);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-left: var(--default-left-right-mob-body-padding);
  padding-right: var(--default-left-right-mob-body-padding);
  text-align: center;
  background-color: var(--t-page-bg, var(--mid-white));
  color: var(--t-page-text, var(--mid-charcoal));
  font-family: "Inter", system-ui, sans-serif;   /* it sits on <html>, outside <body>, so it takes the body's typeface (UMA.css body) by name */
  visibility: visible;
}
:root[data-theme="dark"] .uma-results-loading {
  background-color: var(--t-page-bg, var(--navy-60));
  color: var(--t-page-text, var(--bright-white));
}
.uma-results-wait.uma-results-loading-on {
  opacity: 1;
}

/* ---------- SCREENING HOME PANEL (bug fixes batch 1, 10 Oct 2026, item 45). Search: SCREENING HOME PANEL ----------
   The panel that opens over the screenings home (uma-screenings.html, .uma-app-home-screening-detail-panel).
   1. The X was a square whenever it had focus: the panel puts focus on it when it opens, and on a "Resume screening"
      panel (back from a screening, ?saved=) nothing has been tapped first, so the browser counts that focus as
      keyboard focus. The page's own :focus-visible rule (uma-screenings.html, "border-radius:
      var(--default-focus-ring-radius)", 4px) then squared off every focused control, the X included. The X keeps its
      round shape (.btn-circular, --radius-pill) while focused; its orange focus ring stays.
   2. Phones (600px and below): the heading sits 3rem (--app-default-top-bottom-margin-xxxl) from the top of the
      screen. Measured from the top of the panel, which is the top of the screen: the panel's own top padding
      (--default-left-right-mob-body-padding, 2rem) plus this margin. Was 20% of the width (62px at 375).
   3. Phones, her second brief (10 Oct, evening; replaces the timing line held above the button): the whole panel
      scrolls as one page. The heading, description, parts, timing and "Take a break" lines scroll normally, nothing
      overlaps, and the Start / Resume button sits after the last line, 2rem (--app-default-top-bottom-margin-xl)
      below it, and scrolls with it (it was pinned over the bottom of the text: page CSS, "Start screening is pinned").
      On a short panel (autism) the button now sits 2rem under the last line, not at the foot of the screen.
      The X stays fixed in the top right corner and never scrolls (its row is fixed to the window; the panel already
      covers the whole window at this width). The heading keeps clear of the X: its right side leaves room for the
      X (--button-size-md) plus the panel's side padding, so a long heading ("Health history") wraps before it.
      The selectors start :root.page-uma-screenings (not html.) so they outweigh the page's own rules of the same
      shape, which come later in the page. */
.uma-app-home-close-btn-icon:focus-visible { border-radius: var(--radius-pill); }
@media (max-width: 600px) {
  :root.page-uma-screenings .uma-app-home-screening-detail-panel.is-open {
    overflow-y: auto;
    overflow-x: hidden;
  }
  :root.page-uma-screenings .uma-app-home-screening-detail-panel.is-open .uma-app-home-close-btn-icon-wrap {
    position: fixed;
  }
  :root.page-uma-screenings .uma-app-home-screening-detail-panel.is-open .uma-app-home-screening-detail-text-wrap {
    margin-top: calc(var(--app-default-top-bottom-margin-xxxl) - var(--default-left-right-mob-body-padding));
    flex: 1 0 auto;
    overflow: visible;
    padding-bottom: 0;
  }
  :root.page-uma-screenings .uma-app-home-screening-detail-panel.is-open .uma-app-section-page-h1-title {
    padding-right: calc(var(--button-size-md) + var(--default-left-right-mob-body-padding));
  }
  :root.page-uma-screenings .uma-app-home-screening-detail-panel.is-open .uma-app-home-screening-detail-cta-wrap {
    position: static;
    flex: 0 0 auto;
    margin-top: var(--app-default-top-bottom-margin-xl);
  }
}

/* ---------- SECTION INTRO TOP (bug fixes batch 1, 10 Oct 2026, item 46). Search: SECTION INTRO TOP ----------
   A section's intro screen in the seven screenings ("Sensory differences", "Hyperfocus and flow", ...), phones (600px
   and below): the heading sits 3rem (--app-default-top-bottom-margin-xxxl) from the top of the screen's own area,
   which starts under the progress bar and the Back / X buttons (group D sets those: SCREENING PHONE SPACING).
   Was 20% of the width (UMA.css, the 600px rules for .screening-title-inner and .health-screening-title-page
   .screening-title-inner), 54px to 62px. */
@media (max-width: 600px) {
  .screening-title-page .screening-title-inner,
  .health-screening-title-page .screening-title-inner { margin-top: var(--app-default-top-bottom-margin-xxxl); }
}

/* ---------- UMA IS CALCULATING (bug fixes batch 1, 10 Oct 2026, item 49). Search: UMA IS CALCULATING ----------
   The "Uma is calculating" screen (RESULTS CALCULATING above).
   1. Font: on the results page /uma-results-gate.js puts the screen on <html>, outside <body>, so it got none of the
      page's Inter and fell back to the browser's serif (Times). It now names Inter itself through UMA.css's
      Inter stack token (--chrome-drawer-font: "Inter" then the system sans fonts).
   2. The coloured band at the bottom: the screen covers the window, but on an iPhone the strip behind Safari's bottom
      bar and the home bar shows the page behind it (the screening's last section colour, or the results page's
      cream). While the screen is up, the page behind it is the same colour (--bright-blue, the screenings' own
      opening colour that the screen already uses), so only the spinning ring and the words show, on one colour. */
.uma-results-calculating { font-family: var(--chrome-drawer-font); }
:root:has(.uma-results-calculating),
:root:has(.uma-results-calculating) body { background-color: var(--bright-blue); }

/* ---------- PHONE BOTTOM ROOM (bug fixes batch 1, 10 Oct 2026, her item 48, was items 16 and 50). Search: PHONE BOTTOM ROOM ----------
   Her words: the bottom 2rem to 4rem cut off the last content and buttons on onboarding, the screenings, their section
   pages and section results. The shared cause: these pages hold the page still (body overflow hidden, one screen
   tall) and scroll a box inside it whose end is the very bottom of the screen, with no room after the last card or
   button. Whatever sits over the bottom of the screen on an iPhone (Safari's bottom bar, 2rem to 4rem tall depending
   on whether it is collapsed, and the home bar in the home-screen app) then covers the last thing, and the box cannot
   be scrolled any further to bring it out. (Onboarding also had a 2rem frame overhang, fixed in ONBOARDING PHONE FRAME
   above.) Fix, once for all of them: at phone width each of those scrolling boxes ends with an empty space of 4rem
   (--app-default-top-bottom-margin-xxxxl) plus the phone's bottom safe area, so the last card or button can always be
   scrolled clear. It is empty space inside the box, so the screen colour still runs to the bottom edge (full bleed).
   On a screen that fits, the bottom button sits that much higher (Start on section pages).
   The boxes: onboarding's screen (.uma-onboard-screen); in the seven screenings the section page (.screening-title-page,
   .health-screening-title-page), the section results (.screening-resultsPage), the question area
   (.screening-q-content-wrap) and the check-in words (.screening-reg-content). */
@media (max-width: 37.5rem) {
  :where(.page-onboarding) .uma-onboard-screen::after,
  :where(.screening-fixed-height) :is(.screening-title-page.screening-active, .health-screening-title-page, .screening-resultsPage.screening-active, .screening-q-content-wrap, .screening-reg-content)::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    height: calc(var(--app-default-top-bottom-margin-xxxxl) + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- COOKIE BUTTON NOT IN THE APP (bug fixes batch 1, 10 Oct 2026, her item 63). Search: COOKIE BUTTON NOT IN THE APP ----------
   Her rule: Cookiebot's round cookie settings button belongs to the public website only, never inside the app. The app
   pages no longer load Cookiebot at all (its script tag is taken out of their heads). On a public website page someone
   signed in is in the app too (the marketplace or library when logged in): the chrome takes page-uma-website-chrome off
   <html> for a signed-in member (uma-chrome.js), so the button is hidden then. Found as Bug 40 does (by the button
   inside its box), no ID selector. The consent banner itself is not touched. */
html:not(.page-uma-website-chrome) div:has(> .CookiebotWidget-logo) { display: none; }

/* ---------- PROFILE TITLE ABOVE CHART (bug fixes batch 1, 10 Oct 2026, item 52). Search: PROFILE TITLE ABOVE CHART ----------
   Her words: put the title ("Your ADHD profile") above the polar area chart, on every screening profile. At 900px and
   below the five dot profiles (adhd, autism, cptsd, masking, rsd) already have that title in .hero-text-mobile, at the
   top of the chart's section, straight above the chart; UMA.css (qa-screenings 5 Oct, "the page heading stays invisible
   as she chose") kept it for screen readers only, 1px wide. This lets it be seen again, in its own UMA.css style and
   place (centred, --app-default-top-bottom-margin-lg under it). Above 900 the hero carries the title, unchanged. */
@media (max-width: 900px) {
  :root:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-masking-profile, .page-rsd-profile) .hero-text-mobile.hero-text-mobile {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 var(--app-default-top-bottom-margin-lg);
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

/* ---------- SELF-REPORT BUTTON ON PHONES (bug fixes batch 1, 10 Oct 2026, item 51). Search: SELF-REPORT BUTTON ON PHONES ----------
   Her words: the "Get self-report" button is too tall on mobile; match the standard uma.css button height; its dropdown
   is cut off by the bottom of the section and must open fully visible.
   1. Height: the phone copy (.mobile-explore) was 50px (UMA.css .export-split-pill min-height and its arrow square,
      --button-size-lg). Now the standard button height, --button-size-md (40px, UMA.css .btn-md), the main part and
      the arrow alike. The words, colours and shape are unchanged.
   2. The menu: the hero band it sits in clips anything outside it (overflow hidden, for the dot animation), and the
      menu opened downwards past the band's bottom edge. On phones it now opens upwards, above the button, into the
      band's own space, so it is always fully visible.
   Pages: adhd, autism and cptsd profiles and the health history results (the pages with "Get self-report"). */
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-health-history) .export-split-pill:is(.mobile-explore, .health-history-hero-pill) {
  min-height: var(--button-size-md);
}
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-health-history) .export-split-pill:is(.mobile-explore, .health-history-hero-pill) .export-split-pill-arrow {
  width: var(--button-size-md);
  height: var(--button-size-md);
  min-height: var(--button-size-md);
  max-height: var(--button-size-md);
}
:where(.page-adhd-profile, .page-autism-profile, .page-cptsd-profile, .page-health-history) .export-split-pill:is(.mobile-explore, .health-history-hero-pill) .drawer-split-pill-menu {
  top: auto;
  bottom: calc(100% + var(--gap-xs));
}

/* ---------- AVATAR WHITE OVER THE HERO (bug fixes batch 1, 10 Oct 2026, her item 65). Search: AVATAR WHITE OVER THE HERO ----------
   Her words: over the hero video the profile letter in the phone top bar is a white circle with navy text, not navy.
   While the bar is see-through over a hero (the chrome's uma-chrome-main-header-over-hero on the bar) the letter takes the
   sidebar letter's colours (UMA.css .uma-chrome-sidebar-initial: --bright-white circle, --navy letter); on hover it stays
   so (UMA.css's navy-dark hover would put a navy letter on navy). Once the bar frosts on scroll the class comes off and
   it is the navy circle again. (Her real first letter instead of "U": uma-chrome.js, search "her item 65".) */
.uma-chrome-main-header-over-hero .uma-chrome-header-profile,
.uma-chrome-main-header-over-hero .uma-chrome-header-profile:hover { background: var(--bright-white); color: var(--navy); }

/* ---------- HERO SHARE UNDER THE PLAY BUTTON (bug fixes batch 1, 10 Oct 2026, her item 66). Search: HERO SHARE UNDER THE PLAY BUTTON ----------
   Her words: on a phone the homepage hero's share block ("Share this video" and its icons) goes UNDER the play button,
   with "Share this video" centred above the icons. At 600 and below, on the homepage hero only, the block is a centred
   column a --gap-xs below the centred play mark (--button-size-xxl), the words a --gap-xs above the icons. Replaces, for
   the homepage hero, the phone line in "HOMEPAGE FILMS FINAL" 3 (words and icons on one line above the mark). Measured
   fit in the 4:3 box: at 320 (240px tall) the block runs 163 to 236; at 375 (281px) 184 to 257. The icons keep the
   doubled size (HOMEPAGE HERO SHARE ICONS DOUBLED, 2 x --button-icon-lg at 600 and below) and their 44px tap layer.
   The browser's own play bar is already off while paused or ended on a phone (index.html phoneBarOff). */
@media (max-width: 37.5rem) {
  .page-home .hero-end-screen {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-xs);
    top: calc(50% + var(--button-size-xxl) / 2 + var(--gap-xs));
    bottom: auto;
    translate: none;
  }
  .page-home .hero-end-screen .hero-end-screen-label { text-align: center; }
}

/* ---------- CAROUSEL SWIPE HINT (bug fixes batch 1, 10 Oct 2026, item 67). Search: CAROUSEL SWIPE HINT ---------- */
/* Her item 67: a hand-swipe icon on the FIRST card of six carousels (campaign, free screening, what Uma is not,
   mini-screens, workplace adjustments, the results pages' donut cards), so it is clear they can be swiped.
   Shown only where the carousels are swipe-only: on a touch screen (pointer: coarse), the same rule that hides
   their arrow buttons (UMA.css). 1.5rem (--gap-xl) from the card's top and right edges.
   White on coloured cards; charcoal (--mid-charcoal) on white cards; in dark mode those cards turn navy, so white.
   The icon is decoration (aria-hidden); it takes no taps. */
.carousel-swipe-hint {
  display: none;
}
@media (pointer: coarse) {
  .carousel-swipe-hint {
    display: block;
    position: absolute;
    top: var(--gap-xl);
    right: var(--gap-xl);
    z-index: 1;
    font-size: var(--button-icon-xl);
    line-height: 1;
    color: var(--white-text-default);
    pointer-events: none;
  }
  .uma-not-carousel-card > .carousel-swipe-hint,
  .donut-card > .carousel-swipe-hint,
  .adjustment-card-no-image .carousel-swipe-hint {
    color: var(--mid-charcoal);
  }
  :root[data-theme="dark"] .uma-not-carousel-card > .carousel-swipe-hint,
  :root[data-theme="dark"] .donut-card > .carousel-swipe-hint,
  :root[data-theme="dark"] .adjustment-card-no-image .carousel-swipe-hint {
    color: var(--white-text-default);
  }
}

/* ---------- CAMPAIGN CARD WORDS FIT (bug fixes batch 1, 10 Oct 2026, item 68). Search: CAMPAIGN CARD WORDS FIT ---------- */
/* Her item 68: below 450px the centred capitalised words on the #StopMakingWomenWait cards (.stat-narrative, e.g.
   "MISDIAGNOSED", "SKYROCKETED") ran past the card's padding. Below 450px the card is a fixed 310px
   (--carouselle-card-width-mobile), so the words get a fluid size that tops out at 1.8rem (--heading-size-md-plus).
   1.8rem fits the longest word with room to spare even when the phone has no condensed font and shows plain
   Helvetica (an iPhone has neither 'Helvetica Neue Condensed' nor 'Arial Narrow'). Was 2.5rem (--heading-size-xxl-narrow). */
@media (max-width: 449px) {
  .stat-narrative {
    font-size: clamp(var(--heading-size-lg), 10vw, var(--heading-size-xl));   /* her ask (10 Oct 2026, late): a bit bigger now iPhones show the condensed font. Was clamp(var(--heading-size-sm), 8vw, var(--heading-size-md-plus)) */
  }
}

/* ---------- CAROUSEL SWIPE HINT, OUT OF THE WAY (bug fixes batch 1, 10 Oct 2026, item 67). Search: CAROUSEL SWIPE HINT ---------- */
/* Two of the first cards already use that top-right corner for a control, so the hint steps aside while it shows:
   the free screening card's film pause button (.video-controls-row--visible, while the film plays) and the
   workplace adjustment card's wand corner (once the adjustment is added, or while the wand has keyboard focus). */
@media (pointer: coarse) {
  .flippable-9-16-card:has(.video-controls-row--visible) .carousel-swipe-hint,
  .flippable-9-16-card:has(.video-controls-row:focus-within) .carousel-swipe-hint,
  .flippable-9-16-card:has(.uma-disc-wand-earmark--added) .carousel-swipe-hint,
  .flippable-9-16-card:has(.uma-disc-wand-earmark:focus-visible) .carousel-swipe-hint {
    display: none;
  }
}

/* ---------- CAMPAIGN CARD IPHONE FONT (bug fixes batch 1, 10 Oct 2026, her decision 5). Search: CAMPAIGN CARD IPHONE FONT ----------
   The centred capitalised campaign cards (.stat-narrative, UMA.css --stat-narrative-font) ask for 'Helvetica Neue
   Condensed', a name iPhones don't know, so iPhones fell back to plain Helvetica. "HelveticaNeue-CondensedBold" (the
   iPhone's built-in name for Helvetica Neue Condensed Bold) now comes first; Macs keep 'Helvetica Neue Condensed' as set.
   No new fonts. */
:root {
  --stat-narrative-font: "HelveticaNeue-CondensedBold", 'Helvetica Neue Condensed', 'Arial Narrow', sans-serif;
}

/* ---------- TURN ON COOKIES TO PLAY (bug fixes batch 1, 10 Oct 2026, her decision on item 63). Search: TURN ON COOKIES TO PLAY ----------
   App pages (no Cookiebot): a player held back for want of marketing consent is hidden, and in its box her words "Turn on
   cookies to play" sit centred over the button (uma-cookie-consent.js adds both; the button is the Cookies page's own,
   btn-primary-navy with uma-cookie-choice-button, so white with navy words in dark mode, as there). Words in the page's
   text colour and body size. */
.uma-consent-held { display: none; }
.uma-consent-notice { box-sizing: border-box; height: 100%; min-height: var(--button-size-xxl); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-xs); padding: var(--gap-regular); text-align: center; }
.uma-consent-notice-text { margin: 0; font-size: var(--body-text-sm); --app-default-top-bottom-margin-xl: 0; }
.uma-consent-notice .uma-cookie-choice-button { margin-top: 0; }

/* ---------- COOKIE BUTTON OFF OVER THE CAMPAIGN CARDS (bug fixes batch 1, 10 Oct 2026, her decision). Search: COOKIE BUTTON OFF OVER THE CAMPAIGN CARDS ----------
   Homepage: Cookiebot's round button is hidden while the #StopMakingWomenWait card carousel is on screen
   (uma-cookie-consent.js puts uma-cookie-button-off on <html> then) and shows again once scrolled past. Found as Bug 40
   does, no ID selector. */
.uma-cookie-button-off div:has(> .CookiebotWidget-logo) { display: none; }

/* ---------- UMA LOCK FILM ON THE NAVY SCREENS (bug fixes batch 1, 10 Oct 2026, her brief "UMA LOCK AND UNLOCK
   ANIMATIONS"). Search: UMA LOCK FILM NAVY ----------
   - The film is shown the way the homepage's red security tile shows it (UMA.css bug 32, .uma-lock-media
     mix-blend-mode: screen): where a phone plays the WebM copy without its see-through parts they come out black, and
     screen blending lets the navy through, so the white Uma is all that shows. Log-in's unlock screen and the
     logged-out screen only.
   - "You are logged in" had a white band at the bottom: on an iPhone the fixed navy layer covers the small window
     only, and the page's own background showed below it as Safari's bars moved. The layer is now at least the tallest
     window (100lvh), and while a navy screen is open the page behind is navy too (:has). The cream fade before Uma
     opens is left as it was. */
.animation-overlay-login .animation-overlay-video,
.animation-overlay-logout .animation-overlay-video { mix-blend-mode: screen; }
.animation-overlay.animation-overlay-login,
.animation-overlay.animation-overlay-logout { min-height: 100lvh; }
html:has(.animation-overlay-login:not(.animation-overlay-cream)),
html:has(.animation-overlay-login:not(.animation-overlay-cream)) body,
html:has(.animation-overlay-logout),
html:has(.animation-overlay-logout) body { background-color: var(--navy); }

/* ---------- HEALTH CATEGORY HEADING LINE HEIGHT (bug fixes batch 1, 10 Oct 2026, her ask). Search: HEALTH CATEGORY HEADING LINE HEIGHT ----------
   Health screening question screens: the coloured category heading under the question number wraps, so line height
   1.3 (--default-line-height-x-small). Only that heading, only in the health screening. */
:root.page-screening .screening-page-health .screening-subcategory-heading-h3,
.screening-page-health .screening-subcategory-heading-h3 {
  line-height: var(--default-line-height-x-small);
}

/* ---------- RANGE TOUCH (bug fixes batch 1, 10 Oct 2026, her answer to item 25: "ALL sliders including pricing need
   fixing to work with touch and drag"). Search: RANGE TOUCH ----------
   Native sliders follow a finger through /uma-range-touch.js (onboarding, profile, home page). It reads the thumb's
   width from --uma-range-thumb-width, so the value under the finger is the thumb's centre.
   1. Onboarding sliders: ONBOARDING CYCLE SLIDERS above (all .cycle-slider).
   2. Profile edit panel sliders (.profile-range: drinks, water, cycle and period length). Same as onboarding: the box is
      the touch height (--touch-target-min) with negative margins so nothing moves, the 6px track is drawn by the track
      pseudo-element in the same colour and radius, the thumb centred on it, touch-action none.
   3. The home page film scrub bar (.film-scrub-input) is already the 44px touch height; it only gets its thumb width.
   4. Marketplace price range (two handles, marketplace.html price scrub, its own pointer code): each 24px handle gets an
      invisible 44px square to touch (::before), and the 6px track an invisible 44px band (::before), so a touch on the
      bar takes the nearest handle (page script PRICE SCRUB TOUCH). touch-action none on the bar so the drag is not taken
      as a scroll of the filter drawer. */
:where(.page-user-profile) .profile-range {
  --uma-range-thumb-width: var(--profile-range-thumb-width);
  height: var(--touch-target-min);
  margin: calc((var(--profile-range-track-height) - var(--touch-target-min)) / 2) 0;
  background: transparent;
  touch-action: none;
}
:where(.page-user-profile) .profile-range::-webkit-slider-runnable-track {
  height: var(--profile-range-track-height);
  border-radius: var(--profile-range-track-radius);
  background: var(--t-profile-range-track);
}
:where(.page-user-profile) .profile-range::-webkit-slider-thumb {
  margin-top: calc((var(--profile-range-track-height) - var(--profile-range-thumb-height)) / 2);
}
:where(.page-user-profile) .profile-range::-moz-range-track {
  height: var(--profile-range-track-height);
  border-radius: var(--profile-range-track-radius);
  background: var(--t-profile-range-track);
}
.film-scrub-input { --uma-range-thumb-width: var(--film-scrub-thumb); }
:where(.page-uma-marketplace) .uma-price-scrub-track { touch-action: none; }
:where(.page-uma-marketplace) .uma-price-scrub-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--touch-target-min);
  transform: translateY(-50%);
}
:where(.page-uma-marketplace) .uma-price-scrub-handle { touch-action: none; }
:where(.page-uma-marketplace) .uma-price-scrub-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  transform: translate(-50%, -50%);
}

/* ---------- SCREENING LISTS NO SCROLLBAR (bug fixes batch 1, 10 Oct 2026, her ask). Search: SCREENING LISTS NO SCROLLBAR ----------
   On phones (touch screens) the scroll bars are hidden on the screenings' scrolling lists (the health conditions list,
   the trauma checklist and the other answer lists): it's obvious they scroll. Scrolling still works; only the bar goes.
   Applies inside the screening pages only (:root.page-screening), touch screens only, so desktop keeps its bars. */
@media (hover: none) and (pointer: coarse) {
  :root.page-screening body * { scrollbar-width: none; }
  :root.page-screening body *::-webkit-scrollbar { display: none; }
}

/* ---------- STILL UMA THE FILM'S SIZE, AND THE LOCK ON SHORT PHONES (bug fixes batch 1, 10 Oct 2026, her words: "Uma
   is massive in reduced motion on the screen without the animation" and, on "Security setup finished", "Uma is
   massive and needs to be smaller"). Search: STILL UMA SIZE ----------
   1. Still Uma = the film's Uma. On log in's unlock screen and "You've been logged out" the still Uma IS the film
      (held on a frame, /uma-lock-film.js), so it is the same size. On "Security setup finished", when the film cannot
      be shown its place is taken by the still Uma drawing (uma-onboarding.html, svg.onb-start-lock), which filled the
      whole film box: in the film, Uma's face is 58% of the film's width and sits at the foot of the frame. The
      drawing now keeps the film's box and is inset by the film's own margins round the face (measured on the film:
      21% each side, 15.9% above, 2.3% below, all of the film's width), so it is exactly the film's Uma.
   2. Short phones: the lock film (--onb-start-lock-width, UMA.css 16rem) takes less room so "Start onboarding" is on
      screen without scrolling: 11rem on windows up to 740px tall (375x667), 3rem with a smaller gap below it
      (--app-default-top-bottom-margin-xxs) up to 600px tall (320x568). New tokens: the three still-drawing insets
      (fractions of the film's width; padding % would be of the screen's width, so they multiply the width token). */
:root {
  --onb-start-still-inset-top: 0.159;
  --onb-start-still-inset-side: 0.21;
  --onb-start-still-inset-bottom: 0.023;
}
svg.onb-start-lock {
  box-sizing: border-box;
  padding: calc(var(--onb-start-lock-width) * var(--onb-start-still-inset-top))
           calc(var(--onb-start-lock-width) * var(--onb-start-still-inset-side))
           calc(var(--onb-start-lock-width) * var(--onb-start-still-inset-bottom));
}
/* (the short-phone sizes that were here, 11rem up to 740px tall and 3rem up to 600px, are taken out by her ruling:
   one size on every phone, UMA FACE SCREENS) */

/* ---------- HEALTH SCREENING FIXES (bug fixes batch 1, 10 Oct 2026, her health brief, items 1, 2, 3, 4). Search: HEALTH SCREENING FIXES ----------
   1. TOOLTIPS ON TOP: on phones the (i) explanation shows in one box on top of everything (z-index from UMA.css
      .tooltip-more-info), fixed to the screen, the screen's width less the page's side padding
      (--default-left-right-mob-body-padding) each side, just under the (i) or just above it when there is no room
      below (uma-health-screening.html, TOOLTIPS ON TOP, passes the (i)'s place as --uma-tip-top / --uma-tip-bottom).
      Its look is the pill tooltip's own (.tooltip-more-info .screening-tooltip). The tooltip inside the pill box is
      not drawn on phones any more (its words stay for screen readers through aria-describedby).
   2. The category heading under the question number ("Neurodegenerative") wraps, a long single word breaking where
      it must, at line height 1.3 (--default-line-height-x-small), on every screening's question pages (it was cut off
      at the right edge). Extends HEALTH CATEGORY HEADING LINE HEIGHT above.
   3. Answer pills: a long press no longer selects (highlights) their words or opens the iPhone callout; a tap still
      answers. Only the answer pills (.lozenge, .screening-likert-single-choice-option).
   4. "Just checking in" (health), phones: 1rem (--app-default-top-bottom-margin-sm) more room between her words and
      the first button; the three support buttons are the height of "I'm safe to continue" (--button-size-lg, 50px;
      were --button-size-md, 40px); nothing in the column shrinks, the page scrolls, and "I'm safe to continue" sits
      after the support buttons at the end of the page. CPTSD's "Just checking in" is unchanged. */
@media (max-width: 600px) {
  .screening-page-health .lozenge-info .tooltip-more-info { display: none; }
  .tooltip-more-info.uma-tooltip-float {
    position: fixed;
    top: var(--uma-tip-top);
    bottom: auto;
    left: var(--default-left-right-mob-body-padding);
    right: var(--default-left-right-mob-body-padding);
    width: auto;
    transform: none;
  }
  .tooltip-more-info.uma-tooltip-float.uma-tooltip-float-above { top: auto; bottom: var(--uma-tip-bottom); }
  .tooltip-more-info.uma-tooltip-float.uma-tooltip-float-on { opacity: 1; visibility: visible; }

  /* (4, continued) Her ruling the same evening: CPTSD's "Just checking in" gets the same (.screening-page-cptsd). */
  :is(.screening-page-health, .screening-page-cptsd) .screening-safeguard-inner > * { flex-shrink: 0; }
  :is(.screening-page-health, .screening-page-cptsd) .screening-safeguard-inner .screening-safeguard-text { margin-bottom: var(--app-default-top-bottom-margin-sm); }
  :is(.screening-page-health, .screening-page-cptsd) .screening-safeguard-inner .screening-secondary-btn,
  :is(.screening-page-health, .screening-page-cptsd) .screening-safeguard-inner .screening-slide-btn { height: var(--button-size-lg); }
}
/* (2, continued) The same heading on CPTSD's and stimming's checklist pages is .multi-choice-list-category-heading-h2;
   ADHD, autism, masking and RSD have no category heading under the question number. */
:root.page-screening .screening-subcategory-heading-h3,
.screening-subcategory-heading-h3,
:root.page-screening .multi-choice-list-category-heading-h2 {
  line-height: var(--default-line-height-x-small);
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  min-width: 0;
  max-width: 100%;
  text-overflow: clip;
}
.lozenge,
.screening-likert-single-choice-option {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- NO CHROME WHILE CALCULATING (bug fixes batch 1, 10 Oct 2026, her ask). Search: NO CHROME WHILE CALCULATING ----------
   The results pages' "Uma is calculating" screen (.uma-results-calculating) and "Loading profile" screen
   (html.uma-results-loading-on), both from /uma-results-gate.js: the chrome loaded in over them. While either shows,
   every chrome part (the chrome's own PART_SELECTORS in uma-chrome.js: top bar, sidebar, section bar, Feedback, SOS,
   footer) is hidden, so these screens stay bare; it all comes back when the results show. */
:root:has(.uma-results-calculating) :is(.uma-chrome-top-bar, .uma-chrome-side-bar, .uma-chrome-sidebar-icon, .section-nav-bar, .uma-feedback-tab, .uma-chrome-sos, .sos-btn, .footer-override),
:root.uma-results-loading-on :is(.uma-chrome-top-bar, .uma-chrome-side-bar, .uma-chrome-sidebar-icon, .section-nav-bar, .uma-feedback-tab, .uma-chrome-sos, .sos-btn, .footer-override) {
  display: none;
}


/* ---------- HEALTH RESULTS FOCUS (her brief, bug fixes batch 1, 10 Oct 2026). Search: HEALTH RESULTS FOCUS ----------
   The health results pages on phones (hypermobility-eds, mcas, pots: .page-condition; health-self-report:
   .page-health-history). Her words: the cards take centre stage and get as much of the screen as possible.
   /uma-health-results-focus.js puts uma-health-scrolled on <html> while the page is scrolled at all, and
   --uma-cards-title-height (the card band heading's height) on each card band. No new tokens.
   1. Scrolled: the top bar and the sub-menu slide up out of sight, and stay out of sight when scrolling up part way
      (this wins over the chrome's and the pages' own show-on-scroll-up), until the page is back at the very top.
      The slide is --transition-card; none under Uma's still switch or the device's reduced motion.
   2. The card band sticks its heading's height above the top of the screen, so the heading scrolls away and the cards
      stop at the top of the screen with only the carousel's own padding above them.
   3. Less space round the heading: its top padding is --app-default-top-bottom-margin-s, and the carousel's padding
      above the cards is --app-default-top-bottom-margin-sm, on the condition pages.
   4. Below 450px the heading size is fluid: --heading-size-sm at the smallest, rising with the screen width to
      --heading-size-lg (its size until now) at 450px. */
@media (max-width: 900px) {
  :root:where(.page-condition, .page-health-history) .uma-chrome-top-bar,
  :root:where(.page-condition, .page-health-history) .section-nav-bar {
    transition: transform var(--transition-card) ease;
  }
  :root.uma-health-scrolled:where(.page-condition, .page-health-history) .uma-chrome-top-bar {
    transform: translateY(-100%);
  }
  :root.uma-health-scrolled:where(.page-condition, .page-health-history) .section-nav-bar {
    transform: translateY(calc(-100% - var(--fixed-header-height)));
  }
  :root:where(.page-condition, .page-health-history) .sticky-cards-container {
    top: calc(-1 * var(--uma-cards-title-height, 0px));
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  :root:where(.page-condition, .page-health-history) .uma-chrome-top-bar,
  :root:where(.page-condition, .page-health-history) .section-nav-bar {
    transition: none;
  }
}
@media (max-width: 900px) {
  :root[data-motion="still"]:where(.page-condition, .page-health-history) .uma-chrome-top-bar,
  :root[data-motion="still"]:where(.page-condition, .page-health-history) .section-nav-bar {
    transition: none;
  }
}
@media (max-width: 600px) {
  :root:where(.page-condition, .page-health-history) h2.cards-band-title {
    padding-top: var(--app-default-top-bottom-margin-s);
  }
  :root:where(.page-condition) .condition-centred-card-carousel {
    padding-top: var(--app-default-top-bottom-margin-sm);
  }
}
@media (max-width: 449.98px) {
  :root:where(.page-condition, .page-health-history) h2.cards-band-title {
    font-size: clamp(var(--heading-size-sm), 7.1vw, var(--heading-size-lg));
  }
}

/* ---------- UMA FACE SCREENS, ONE SIZE AND ONE GAP (bug fixes batch 1, 10 Oct 2026, her words: "the Uma face is too
   big. Make it smaller; reduce the space between the face and 'You've been logged out', and between the heading and
   the 'Log back in' button; keep the whole group centred vertically" and "Make them all match"). Search: UMA FACE
   SCREENS ----------
   One size: Uma's face in the film is --uma-xl (80px, UMA.css's largest Uma logo size). In the lock and unlock films
   the face is 58% of the film's width (--uma-film-face-share, measured on the film), so the film is --uma-xl / 0.58
   (about 138px; it was 16rem, a 149px face). One gap: --app-default-top-bottom-margin-lg (1.5rem) between the face,
   the heading and the button (it was --app-default-top-bottom-margin-xxxl, 3rem).
   Where: every navy Uma screen (UMA.css .animation-overlay: log-in's "Logging you in" / "You are logged in" / "You
   have not finished security", "You've been logged out", security-setup's lock screen) and onboarding's "Security
   setup finished" (.onb-start-lock). The still Uma with reduced motion is the same film (or, on onboarding, the
   drawing inset to the film's face, STILL UMA SIZE), so it is the same size.
   Centred: the navy screens' extra 12rem at the bottom (UMA.css calc(--app-default-top-bottom-margin-xxxxl * 3)),
   which pushed the group up, is gone; only the phone's notch and home bar are kept clear (G's --uma-safe-top and
   --uma-safe-bottom), so the group sits in the middle of the screen. Onboarding keeps its own top-down layout.
   Her ruling: the same size on every phone, even if "Start onboarding" then needs a scroll at 320x568, so the
   short-phone sizes in STILL UMA SIZE are taken out. */
:root {
  --uma-film-face-share: 0.58;
  --auth-animation-width: calc(var(--uma-xl) / var(--uma-film-face-share));
  --onb-start-lock-width: calc(var(--uma-xl) / var(--uma-film-face-share));
}
.animation-overlay {
  gap: var(--app-default-top-bottom-margin-lg);
  padding-top: var(--uma-safe-top, 0px);
  padding-bottom: var(--uma-safe-bottom, 0px);
}
.onb-start-lock { margin-bottom: var(--app-default-top-bottom-margin-lg); }

/* ---------- HOME PHONE INTRO (bug fixes batch 1, 10 Oct 2026, her idea for the phone). Search: HOME PHONE INTRO ----------
   The screenings home on a phone (600px and under). uma-screenings.html (HOME PHONE INTRO) sets the classes on <html>:
   uma-home-intro         "Your self-discovery journey starts here." and its line sit alone in the middle of the
                          screen (over the empty bubble area; no bubbles yet). The 2rem top space (HOME HEADING SPACE)
                          is not used while it is centred.
   uma-home-intro-fading  after --home-intro-hold they fade out over --home-intro-fade.
   uma-home-intro-done    visually hidden (a screen reader still reads them) and the bubbles come in over the whole
                          area. With reduced motion or Uma's still switch the page goes straight to this, no fade.
   On a computer none of this applies. New tokens (aliases of existing ones): --home-intro-hold (--wave-duration, 2s),
   --home-intro-fade (--auth-cream-fade-duration, 0.8s). */
:root {
  --home-intro-hold: var(--wave-duration);
  --home-intro-fade: var(--auth-cream-fade-duration);
}
@media (max-width: 600px) {
  html.page-uma-screenings.uma-home-intro .uma-app-home-header-text {
    position: absolute;
    inset: 0;
    justify-content: center;
    transition: opacity var(--home-intro-fade) ease;
  }
  html.page-uma-screenings.uma-home-intro .home-welcome-heading-h1 {
    margin-top: 0;
  }
  html.page-uma-screenings.uma-home-intro-fading .uma-app-home-header-text {
    opacity: 0;
  }
  html.page-uma-screenings.uma-home-intro-done .uma-app-home-header-text {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    inset: auto;
  }
}

/* ---------- CLOSE ACCOUNT CARDS ON PHONES (bug fixes batch 1, 10 Oct 2026, her words: "on mobile put the A/B letter
   on its own line, heading below it, paragraph below that, all left-aligned and full card width"). Search: CLOSE
   CARDS PHONE ----------
   "Let's close your account" A and B (profile.html .uma-profile-close-choice). At 600px and below the card is a column:
   the letter marker on its own line, then the heading, then the words, left-aligned across the card's full width.
   UMA.css keeps room on the card's right for the marker (padding-right = lg + marker + md); in a column that room is
   not needed, so the right padding matches the left (--app-default-top-bottom-margin-lg).
   Donate (later the same night, her words: the donate page's lettered cards the same): the "Support Uma" tiles
   (.donate-tile, A to D) share this one rule, so both sets of lettered cards are one design on phones. */
@media (max-width: 37.5rem) {
  .uma-profile-close-choice,
  .donate-tile {
    flex-direction: column;
    align-items: stretch;
    padding-right: var(--app-default-top-bottom-margin-lg);
  }
  :is(.uma-profile-close-choice, .donate-tile) .uma-profile-choice-marker { align-self: flex-start; }
  .uma-profile-close-choice .uma-profile-close-choice-content,
  .donate-tile .donate-tile-content { width: 100%; text-align: left; }
}

/* ---------- BETA ALERTS DASHBOARD (bug fixes batch 1, 10 Oct 2026, admin dashboard). Search: BETA ALERTS DASHBOARD ---------- */
/* /admin-feedback, section "BETA alerts": five columns do not fit a phone, so below 600px each person's row stacks,
   each value under its column name (the td's data-label, set by /uma-admin-beta-alerts.js). Wider: the normal table. */
@media (max-width: 37.5rem) {
  .admin-beta-alert-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .admin-beta-alert-table,
  .admin-beta-alert-table tbody,
  .admin-beta-alert-table tr,
  .admin-beta-alert-table td { display: block; width: 100%; }
  .admin-beta-alert-table tr { padding: var(--gap-sm) 0; border-bottom: var(--stroke-hairline) solid var(--mid-mushroom); }
  .admin-beta-alert-table td { border-bottom: 0; padding: var(--gap-xs) 0; }
  .admin-beta-alert-table td::before { content: attr(data-label); display: block; font-weight: var(--font-weight-medium); }
}


/* ---------- SLIDER LABEL GAP (bug fixes batch 1, 10 Oct 2026, her slider item). Search: SLIDER LABEL GAP ----------
   One shared slider style for every native slider with a label row above it: onboarding (.cycle-slider: cycle and
   period length on the menstrual chart, daily water, caffeine, alcohol) and the profile's edit panel (.profile-range).
   The 32px thumb is centred on the 6px track, so it stands 13px above the track; with the 44px touch box (RANGE TOUCH /
   ONBOARDING CYCLE SLIDERS) pulled up by its negative margin, the thumb reached into the label row ("Daily water
   intake ... 0 litres"). The slider's top margin now puts the top of the thumb --gap-xs (0.5rem) below the label row
   (plus the label's own --app-default-top-bottom-margin-xxxs), so the handle never touches the label. The bottom margin
   is unchanged. The screenings have no sliders. */
:where(.page-onboarding) .cycle-slider { --uma-range-thumb-height: var(--cycle-slider-thumb-height); }
:where(.page-user-profile) .profile-range { --uma-range-thumb-height: var(--profile-range-thumb-height); }
:where(.page-onboarding) .cycle-slider,
:where(.page-user-profile) .profile-range {
  margin-top: calc(var(--gap-xs) - (var(--touch-target-min) - var(--uma-range-thumb-height)) / 2);
}

/* ---------- COUNTRY SELECTED MARK (bug fixes batch 1, 10 Oct 2026, item 22). Search: COUNTRY SELECTED MARK ----------
   Country pills have no circle (her design); the selected one now shows the onboarding pills' selected mark, the white
   circle with the navy tick (UMA.css .onb-pill-circle / .onb-pill-tick with .onb-pill.is-selected's colours), whether
   her country was chosen for her or she tapped it. The circle shows only on the selected pill. */
.onb-picker-option:not(.is-selected) > .onb-picker-country-mark { display: none; }
/* COUNTRY SELECTED MARK, continued: the picker pill already spaces its parts (--gap-md, as the colour and animal dots),
   so the circle's own rect-list margin is not added again. */
.onb-picker-option > .onb-picker-country-mark { margin-right: 0; }

/* ---------- JOINING LINE WRAPS (bug fixes batch 1, 10 Oct 2026, her report). Search: JOINING LINE WRAPS ----------
   Onboarding's last screen: "You are the 1st person to join mission late‑discovery" was cut off at the left edge on
   her computer ("ou are"). It can never be wider than the screen's own column now: it and its column may shrink
   (min-width 0, max-width 100%) and a long word breaks rather than spill, so it wraps inside the screen padding.
   (Not reproduced at 320 to 1440 in Chrome here; this holds it in whatever makes it wider on her screen.) No new
   tokens. */
.onb-completion {
  min-width: 0;
  max-width: min(var(--onb-completion-width), 100%);   /* her 560px column (UMA.css), never wider than the screen */
}
.onb-completion-joined {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* ---------- HEADING FADES AS ONE (bug fixes batch 1, 10 Oct 2026, her ask). Search: HEADING FADES AS ONE ----------
   Screenings home, every width: "Your self-discovery journey starts here." fades in whole, as one smooth fade
   (uma-screenings.html animateHeading now sets plain text, no word spans), with the page's own calm-fade keyframes
   over --home-intro-fade (--auth-cream-fade-duration, 0.8s). Reduced motion: UMA.css already cuts every animation to
   nothing, and Uma's still switch shows it at once. The phone intro's timing (HOME PHONE INTRO) is unchanged: the
   fade ends well inside its 2s hold. No new tokens. */
html.page-uma-screenings .home-welcome-heading-h1.uma-app-home-animate-words {
  animation: calm-fade var(--home-intro-fade) ease-in-out both;
}
html.page-uma-screenings[data-motion="still"] .home-welcome-heading-h1.uma-app-home-animate-words {
  animation: none;
}

/* ---------- MILESTONE SCREENS: ONE CENTRED GROUP, UMA NAVY (bug fixes batch 1, 10 Oct 2026, her words: "The gap
   between the text and the button is far too big ... so the face, heading, text and button sit together as one
   centred group", "Make all these screens the same Uma navy", and on "Security setup finished": "Centre everything
   on the same centre line"). Search: MILESTONE SCREENS ----------
   Onboarding's "Security setup finished / Let's onboard you" (and the take-you-back screens drawn like it,
   .onb-start-screen) and "Welcome to the Uma ecosystem" (.onb-completion):
   - One gap, --app-default-top-bottom-margin-lg (1.5rem), between the face, the heading, the words and the button,
     the same gap as the navy log-in and logged-out screens (UMA FACE SCREENS). The other spaces round them are taken
     out: the lock's and the logo's own margin, the heading's and the joined line's bottom margins, the time lines'
     margin, and the button row's top margin and padding (on phones UMA.css pushed the button to the foot of the
     screen with margin-top: auto, which made the big gap).
   - The group sits in the middle of the screen, top to bottom (justify-content: center; this replaces SETUP FINISHED
     TOP's flex-start) and across: every part centred on the same line.
   - Uma navy (--navy) behind both screens; it was the near-black --navy-60. The question screens are unchanged. */
.onb-start-screen,
.onb-completion {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--app-default-top-bottom-margin-lg);
}
.onb-start-screen > *,
.onb-completion > * { align-self: center; margin-left: auto; margin-right: auto; }
.onb-start-screen .onb-start-lock,
.onb-start-screen .onb-start-subheading,
.onb-completion .onb-welcome-logo,
.onb-completion .onboarding-welcome-heading-h1,
.onb-completion .onb-completion-joined,
.onb-completion .onb-completion-joined:last-of-type,
.onb-start-screen .onb-meta { margin-top: 0; margin-bottom: 0; }
.onb-start-screen .onb-bottom-nav,
.onb-completion .onb-bottom-nav {
  margin-top: 0;
  padding-top: 0;
  align-items: center;
}
body[data-screen-type="onboarding-start"],
body[data-screen-type="completion"],
html:has(body[data-screen-type="onboarding-start"]),
html:has(body[data-screen-type="completion"]) { background-color: var(--navy); --onb-head-bg: var(--navy); }
/* (--onb-head-bg: onboarding's top bar, UMA.css .uma-head, was the page's near-black on "Security setup finished") */

/* ---------- REFERENCES HOVER AS THE FAQS (bug fixes batch 1, 10 Oct 2026, her ruling). Search: REFERENCES HOVER AS THE FAQS ----------
   Her words: on hover the References row turns into a grey block; make it hover exactly like the homepage FAQs (no grey
   block; only the "References" words and the + turn orange, with the same transition). The homepage FAQ question
   (UMA.css .faq-question / .faq-question:hover) has a transparent background, turns --orange on hover and moves with
   "color var(--transition-base) ease, background-color var(--transition-base) ease". Every References toggle on the
   site and in the app (the strategies pages' .references-button, the condition pages', the CPTSD, masking, RSD, ADHD
   and autism profiles' buttons, and their + toggles) now does exactly that. This replaces, for these toggles only, the
   earlier tint and the dark text on hover (the block above that set .references-button:hover to color var(--dark-charcoal)
   and its (hover: hover) background); the filter navigation in that block is unchanged. The FAQ classes themselves are
   not put on these buttons: .faq-question also brings the FAQ's own side padding and type size, which would move the
   References rows; only its hover is taken, with its own tokens. */
.references-button,
:where(.page-condition) .condition-references-button,
:where(.page-masking-profile, .page-rsd-profile, .page-cptsd-profile) .profile-references-button,
:where(.page-adhd-profile, .page-autism-profile) .adhd-autism-profile-references-button {
  transition: color var(--transition-base) ease, background-color var(--transition-base) ease;
}
.references-button.references-button:hover,
.intervention-references-button.references-button:hover,
:where(.page-condition) .condition-references-button.condition-references-button:hover,
:where(.page-masking-profile, .page-rsd-profile, .page-cptsd-profile) .profile-references-button.profile-references-button:hover,
:where(.page-adhd-profile, .page-autism-profile) .adhd-autism-profile-references-button.adhd-autism-profile-references-button:hover {
  color: var(--orange);
  background-color: transparent;
}
.references-button:hover .references-button-toggle,
.references-button-toggle.references-button-toggle-hover:hover,
:where(.page-condition) .condition-references-button:hover .references-button-toggle,
:where(.page-masking-profile, .page-rsd-profile, .page-cptsd-profile) .profile-references-button:hover .references-button-toggle,
:where(.page-adhd-profile, .page-autism-profile) .adhd-autism-profile-references-button:hover .references-button-toggle {
  color: var(--orange);
}

/* ---------- STRATEGIES HERO PARAGRAPH MEASURE (bug fixes batch 1, 10 Oct 2026, her item). Search: STRATEGIES HERO PARAGRAPH MEASURE ----------
   Her words: on the strategies pages the hero ("Personalised strategies") paragraph runs the full width of the screen;
   give it the larger golden-section width limit, as the other hero paragraphs. The hero comes with the paid page words
   (section.strategies-header, p.strategies-header-text, the same on all five strategies pages: ADHD, autism, burnout
   recovery, hormonal balance, nervous system). Only its width limit is added; it stays where it is (left-aligned under
   its heading, which keeps its own --strategies-title-measure). */
.page-support-tools .strategies-header-text { max-width: var(--max-content-width-golden-section-large); }

/* ---------- RESULTS ALIGNMENT (bug fixes batch 1, 10 Oct 2026, her results items 1-4 and 7). Search: RESULTS ALIGNMENT ----------
   1. Strengths and challenges: the category pills (.challenges-category-pills) start where the cards below start. From
      1280px they centred on --default-max-width while the card carousel centres on --max-body-wrapper-width, so the
      pills sat 30px left of the cards. They now use the carousel's own measure.
   2. Diagnostic thresholds (adhd, autism, cptsd): from 1280px the card carousel had its padding centred but not its
      scroll padding, so the scroll snap pulled the first card 80px left of the heading, its paragraph and the arrows
      under the cards. The scroll padding now matches, so heading, paragraph, cards and arrows share one left edge.
   3. Every button with an icon (UMA.css .btn, the shared button style): a gap between the words and the icon,
      --gap-xs. The space between them in the markup is dropped in a flex box, so they touched.
   4. "Preparing for a diagnosis" (blue) ends with the same space as the section above it (red): the wrapper's
      --app-default-top-bottom-margin-xxxl plus --app-default-top-bottom-margin-xl under the text, as the red one has
      (its last paragraph's margin). In the blue section's text columns that margin was cut at the column end.
   7. Results sub-menus (.section-nav-bar): from 601px, where the side strip shows, the bar starts after the strip
      (--sidebar-width), so its title lines up with the content below instead of touching the strip's edge. Not where
      the chrome turns the strip off (uma-chrome-off-sidebar), and not below 601px. */
/* PARKED 10 Oct 2026 (the lead: park, nothing half-built live). Not tested yet, so switched off: the rules below are
   inside this comment and do nothing. To use them, take them out of the comment and test at 320, 375, 1280 and 1440.
@media (min-width: 1280px) {
  .challenges-category-pills {
    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));
  }
  :root:where(.page-diagnostic) .diagnostic-centred-card-carousel {
    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));
  }
}
.btn { gap: var(--gap-xs); }
:root:where(.page-diagnostic) .preparing-text-columns { padding-bottom: var(--app-default-top-bottom-margin-xl); }
:root:where(.page-diagnostic) .preparing-text-columns > p:last-of-type { margin-bottom: 0; }
@media (min-width: 601px) {
  :root:not(.uma-chrome-off-sidebar) .section-nav-bar {
    left: var(--sidebar-width);
    width: auto;
    right: 0;
  }
}
END OF PARKED RULES */

/* ---------- SUB-MENU ALLOWS FOR THE SIDEBAR (bug fixes batch 1, 10 Oct 2026, her item A). Search: SUB-MENU SIDEBAR ----------
   Her words: above 600px the sub-menu (.section-nav-bar) must allow for the left sidebar. The chrome already starts the
   bars it watches after the strip (an inline left of --sidebar-width), but the Tools pages' own bars (strengths,
   challenges, strategies, Access to Work and the other .tools-nav-bar pages) ran under the strip, so their title sat
   against its edge. One shared rule now starts every sub-menu after the strip from 601px, the same left as the page
   content below it. Not where the chrome turns the strip off (uma-chrome-off-sidebar); below 601px unchanged. */
@media (min-width: 601px) {
  :root:not(.uma-chrome-off-sidebar) .section-nav-bar {
    left: var(--sidebar-width);
    right: 0;
    width: auto;
  }
}

/* ---------- BRAIN DOTS 10% SMALLER (bug fixes batch 1, 10 Oct 2026, her ask). Search: BRAIN DOTS 10% SMALLER ----------
   Brain-body profile, full desktop width only (above 1200px): the brain dots graphic is about 10% smaller, centred
   where it was. Its stage (UMA.css .brain-stage, inset 0 in the square .right column) is inset 5% on every side, so
   it is 90% of the column and stays centred. Smaller screens unchanged. */
@media (min-width: 75.0625rem) {
  :where(.page-brain-body) .right > .brain-stage { inset: 5%; }
}

/* ---------- BUTTON ICON GAP (bug fixes batch 1, 10 Oct 2026, her item B). Search: BUTTON ICON GAP ----------
   Every button with an icon (UMA.css .btn, the shared button style, a flex box): a gap between the words and the icon,
   --gap-xs. The space between them in the markup is dropped in a flex box, so they touched ("Download results as CSV",
   "Copy results as table", "Copy table", "Download as CSV" and the rest). A button that sets its own gap keeps it. */
.btn { gap: var(--gap-xs); }

/* ---------- DECIDING SPLIT (bug fixes batch 1, 10 Oct 2026, her item C1). Search: DECIDING SPLIT ----------
   Working with AuDHD, "Deciding whether to tell your boss" (UMA.css .deciding-split; its markup is in the page's paid
   words, so this is CSS only). Desktop, from 901px:
   1. The split background stays full bleed; the words sit in the same inner wrapper as the other sections: they start
      at the page content's left edge (--max-body-wrapper-width, centred after the side strip, plus
      --default-left-right-desk-body-padding), as the headings above and below do.
   2. The teal right half was empty: its video slot is not in the seeded markup. It now shows the how to work with me
      canvas preview the canvas's front page shows (/media/how-to-work-with-me-canvas-preview-09oct2026-v3.jpg), over
      the same teal. Phones (900px and below, one column) are unchanged. */
@media (min-width: 901px) {
  .deciding-split-text {
    padding-left: max(var(--default-left-right-desk-body-padding), calc((100vw - var(--sidebar-width) - var(--max-body-wrapper-width)) / 2 + var(--default-left-right-desk-body-padding)));
  }
  .deciding-split-colour {
    /* the whole preview, as the front page shows it (UMA.css .canvas-front-preview: its padding, picture never cut) */
    box-sizing: border-box;
    padding: var(--app-default-top-bottom-margin-xxxxl) var(--default-left-right-desk-body-padding);
    background-image: url("/media/how-to-work-with-me-canvas-preview-09oct2026-v3.jpg");
    background-origin: content-box;
    background-clip: padding-box;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* ---------- WORK TILE BUTTONS (bug fixes batch 1, 10 Oct 2026, her items C2 and C3). Search: WORK TILE BUTTONS ----------
   Working with AuDHD, the support tiles (their markup is in the page's paid words, so this is CSS only).
   C2. The two long tiles side by side (UMA.css .work-tile-row) were each only as tall as their own words
       (align-items: flex-start), so their buttons ("Access to Work", "Apply for PIP", "Apply for ADP") sat at different
       heights. The row now stretches both tiles to the taller one; each tile's buttons were already pinned to its
       bottom (UMA.css .support-tile-buttons margin-top: auto) inside its own padding, so the buttons in a row line up.
   C3. Those tile buttons are uma.css primary navy (the colours of .btn-primary-navy and its hover) in place of orange.
       The external-link icon and the new tab are unchanged. */
.work-tile-row { align-items: stretch; }
/* only the two long tiles' buttons (the ones she named); "Read the report" and the sunflower tile keep their orange */
.work-long-list-area .work-tile-button.btn-primary-orange { --btn-color: var(--navy); background: var(--navy); color: var(--bright-white); }
.work-long-list-area .work-tile-button.btn-primary-orange:hover { background: var(--navy-dark); }

/* ---------- CANVAS FULL SCREEN (bug fixes batch 1, 10 Oct 2026, her words: every canvas opens full screen, no chrome,
   no SOS, no Feedback, only its own X). Search: CANVAS FULL SCREEN ----------
   The three canvases (and the Access to Work assistant) now turn off the chrome's top bar, SOS and Feedback with the
   chrome's own switches (data-uma-no-topbar, -sos, -feedback on <html>). UMA.css (.uma-chrome-own-layout
   .uma-canvas-wrapper) starts the canvas below the top bar (--fixed-header-height); with the top bar off it starts at
   the top of the screen. The left sidebar stays on desktop, as agreed, so the canvas keeps its place beside it. */
.uma-chrome-own-layout.uma-chrome-off-topbar .uma-canvas-wrapper { top: 0; }

/* ---------- CANVAS PDF GUARD (bug fixes batch 1, 10 Oct 2026, her bug: Download PDF spins forever on her phone).
   Search: CANVAS PDF GUARD ----------
   The line /uma-canvas-pdf-guard.js puts under the canvas controls when a PDF could not be made: her canvas card look
   (--t-canvas-close-bg and the canvas sheet shadow, as the canvas X), words and a Try again button side by side. */
.uma-canvas-pdf-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm);
  margin-top: var(--app-default-top-bottom-margin-xs);
  padding: var(--app-default-top-bottom-margin-xs) var(--app-default-top-bottom-margin-sm);
  border-radius: var(--app-default-radius-md);
  background-color: var(--t-canvas-close-bg);
  box-shadow: var(--canvas-sheet-shadow);
  max-width: 100%;
  pointer-events: auto;
}
.uma-canvas-pdf-error-text { margin: 0; color: var(--t-canvas-close-text); font-size: var(--body-text-xs); }

/* ---------- PDF DOWNLOADED PILL (bug fixes batch 1, 10 Oct 2026, her ask: "a green pill with a check at the top of the
   browser" once a canvas PDF has downloaded). Search: PDF DOWNLOADED PILL ----------
   Made by /uma-canvas-pdf-guard.js (umaPdfDownloaded): fixed, centred at the top (clear of the notch), green with
   white words and tick, above the canvas. It fades in; with reduced motion (the device setting or Uma's still switch)
   it just appears. */
.uma-pdf-done-pill {
  position: fixed;
  top: calc(var(--app-default-top-bottom-margin-sm) + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-chrome-close);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--app-default-top-bottom-margin-xxs) var(--app-default-top-bottom-margin-sm);
  border-radius: var(--radius-pill);
  background-color: var(--bright-green);
  color: var(--bright-white);
  font-size: var(--body-text-sm);
  animation: uma-pdf-done-in var(--transition-base) ease;
}
@keyframes uma-pdf-done-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .uma-pdf-done-pill { animation: none; } }
:root[data-motion="still"] .uma-pdf-done-pill { animation: none; }

/* ---------- SELF-REPORT ONE LEFT EDGE (bug fixes batch 1, 10 Oct 2026, her items 1, 2, 5 and 6). Search: SELF-REPORT ONE LEFT EDGE ----------
   1. The page's main box was pushed right by the sidebar's width twice (the page's own copied rule gives
      .wrapper-for-all-sections margin-left: var(--sidebar-width), inside the chrome's content band, which already starts
      after the sidebar), so the grey tab bar started 60px after the sidebar with a white gap. The main box now starts
      at the sidebar's edge, so the bar runs from the sidebar to the right edge.
   2. One left edge: the tabs (Your copy, Clinician copy, 1-pager) sit in the results pages' centred column (UMA.css
      .section-centred-without-carousel: --max-body-wrapper-width, centred, --default-left-right-desk-body-padding each
      side), the same as the sub-menu's "ADHD" and the preview below; the bar itself has no side padding of its own then
      (it had 144px on the left). Phones keep their full-width tabs (UMA.css phone line).
   5. (Replaced by her update, below.) The screening buttons are all one size
      in one row that wraps, on the heading's left edge.
   6. The banner's own box (UMA.css .example-state-banner) drew a line under the buttons from its own, different, left
      edge, and inner padding; both are gone, so the heading and buttons sit on the column's edge. On phones the
      preview stage has no side padding, so the banner takes the phone's page padding (--default-left-right-mob-body-padding).
   (Items 3 and 4, the heading and the list line, are in self-report-adhd.html.) */
.page-self-report-preview .self-report-main { margin-left: 0; width: 100%; }
@media (min-width: 37.5625rem) {
  .page-self-report-preview .self-report-preview-bar { padding-left: 0; padding-right: 0; }
  .page-self-report-preview .self-report-preview-controls {
    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);
  }
}
/* her update (10 Oct 2026) for the screenings-to-finish banner (the one with the buttons row): heading "Your profile is
   not complete" (.panel-h2-heading, the results pages' heading), her line, then the "Take [name] screening" buttons
   (btn-secondary-navy-on-white) in a row that wraps, every button the same width (5 x --button-size-xxl, which the
   longest label, "Take Stimming screening" and its arrow, fits on one line; at most the column's width on a phone),
   on the column's left edge. */
.page-self-report-preview .self-report-first-banner:has(.self-report-first-banner-actions) {
  display: block;
  padding: 0;
  border: none;
}
.page-self-report-preview .self-report-first-banner-heading { margin-bottom: var(--app-default-top-bottom-margin-sm); }
.page-self-report-preview .self-report-first-banner:has(.self-report-first-banner-actions) .self-report-first-banner-text { margin: 0 0 var(--app-default-top-bottom-margin-lg); --app-default-top-bottom-margin-xl: 0; }
.page-self-report-preview .self-report-first-banner-actions { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.page-self-report-preview .self-report-first-banner-actions .self-report-first-banner-action {
  flex: 0 0 auto;
  width: calc(5 * var(--button-size-xxl));
  max-width: 100%;
  justify-content: center;
  white-space: nowrap;
}
@media (max-width: 37.5rem) {
  .page-self-report-preview .self-report-first-banner:has(.self-report-first-banner-actions) { padding-left: var(--default-left-right-mob-body-padding); padding-right: var(--default-left-right-mob-body-padding); }
}


/* ---------- PHONE MENU ITEMS BIGGER AND 44PX TALL (URGENT, 10 Oct 2026, her items 2 and 3). Search: PHONE MENU ITEMS 44PX ----------
   Her words: on mobile the menu item text is too small and the items are too close together; each item at least 44px
   tall to tap. At 600 and below every menu and submenu item takes --body-text-xl (1.2rem, the menu's own size on
   tall screens; UMA.css shrank it to --chrome-menu-link-short, 1.1rem, at 700px tall and below and --body-text-sm,
   1rem, at 600px tall and below) and is at least --chrome-hit-area-touch (44px) tall, its words centred in that
   height (equal padding above and below the single line), with no gap between items (the 44px is the space; it was
   --gap-md or --gap-sm under 18px words). */
@media (max-width: 600px) {
  .uma-chrome-menu-links .uma-chrome-menu-link {
    box-sizing: border-box;
    min-height: var(--chrome-hit-area-touch);
    padding-top: calc((var(--chrome-hit-area-touch) - var(--body-text-xl)) / 2);
    padding-bottom: calc((var(--chrome-hit-area-touch) - var(--body-text-xl)) / 2);
    margin-bottom: 0;
    font-size: var(--body-text-xl);
  }
}
/* PHONE MENU ITEMS 44PX, continued (10 Oct 2026): with 44px items the list is taller than a 320x568 or 375x667 screen,
   and the menu's bottom bar (Upgrade and voice, UMA.css .uma-chrome-menu-bottom) was placed over the bottom of the
   screen as it first opened, so Statistics and User reviews ended up under it and could not be tapped, even scrolled.
   At 600 and below the menu is one column (flex): the bar comes after the list, stays pinned to the bottom of the
   screen while the list scrolls above it (sticky, in the menu's own colour), and on a tall phone where everything fits
   it still sits at the bottom (margin-top: auto). Scrolled to the end, the last item sits fully above the bar. */
@media (max-width: 600px) {
  .uma-chrome-menu-pane { display: flex; flex-direction: column; }
  .uma-chrome-menu-pane > :not(.uma-chrome-menu-header) { flex-shrink: 0; }
  .uma-chrome-menu-pane > .uma-chrome-menu-bottom {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    background-color: inherit;
  }
}

/* ---------- LOG OUT NO CIRCLE (bug fixes batch 1, 11 Oct 2026, her decision). Search: LOG OUT NO CIRCLE ----------
   Only the profile letter keeps a permanent circle. The sidebar's Log out (power) rests with no circle, like the
   heart, bell, library, basket and mode icons, and takes the same hover circle (UMA.css :where(.uma-chrome-sidebar-icon:hover)
   .uma-chrome-sidebar-circle) only while hovered or pressed; on a touch screen a tap's leftover :hover is undone. Was the
   white circle from the COLOUR, sidebar rule above (.uma-chrome-sidebar-circle-power). */
.uma-chrome-sidebar-icon:not(:hover, :active) .uma-chrome-sidebar-circle-power { background: transparent; color: var(--bright-white); }
@media (hover: none) {
  .uma-chrome-sidebar-icon:hover:not(:active) .uma-chrome-sidebar-circle-power { background: transparent; color: var(--bright-white); transform: none; }
}

/* ---------- CHALLENGES FOOTNOTE WIDTH (bug fixes batch 1, 11 Oct 2026, her ask). Search: CHALLENGES FOOTNOTE WIDTH ----------
   The challenges pages footnote at the bottom: the max body width, centred. */
.challenges-footnote.tools-footnote-box { max-width: var(--max-body-wrapper-width); margin-left: auto; margin-right: auto; }

/* ---------- SCREENING HOME BUTTONS FULL WIDTH (bug fixes batch 1, 10 Oct 2026, her ask). Search: SCREENING HOME BUTTONS FULL WIDTH ----------
   The screening home panel (uma-screenings.html), phones (600px and below), every screening: Start screening, Resume
   screening, View results and Retake screening are all full width (100% of the panel's column), the same width and
   the same height (--button-size-lg, as they already were), words centred. Before, a finished screening showed Retake
   223px and View results 191px wide at 375. Retake screening is the standard UMA.css secondary button
   (.btn-secondary-white-on-dark: hairline border, --stroke-hairline, in --bright-white), without the page's own heavy
   2px border (uma-screenings.html "Outline variant (Retake)", --stroke-thick). Its hover is unchanged. */
@media (max-width: 600px) {
  :root.page-uma-screenings .uma-app-home-btn-wrap { align-items: stretch; }
  :root.page-uma-screenings .uma-app-home-btn-wrap :is(.uma-app-home-start-btn, .uma-app-home-results-btn, .uma-app-home-retake-btn) {
    width: 100%;
    height: var(--button-size-lg);
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
  }
  :root.page-uma-screenings .uma-app-home-btn-wrap .uma-app-home-retake-btn {
    border: var(--stroke-hairline) solid var(--bright-white);
    color: var(--bright-white);
  }
}

/* ---------- CARD HEART NO CIRCLE (11 Oct 2026, her rule: hearts never sit on a circle). Search: CARD HEART NO CIRCLE ----------
   Library and marketplace cards: UMA.css (smaller screens) gave the wishlist heart a --dark-white circle. Gone: the heart
   sits straight on the picture. */
:root:where(.page-uma-library, .page-uma-marketplace) .uma-wishlist-earmark:not(.library-episode-heart) { background: transparent; }

/* CARD HEART NO CIRCLE, continued (11 Oct 2026, her rule): with no circle behind it, the heart takes its colour from
   the picture only: white on colour and dark pictures, charcoal on white or light ones (uma-heart-contrast.js marks
   those with uma-wishlist-earmark--on-light-image). A saved (added) heart keeps its own colour. */
:root:where(.page-uma-library, .page-uma-marketplace) .uma-wishlist-earmark:not(.library-episode-heart):not(.uma-wishlist-earmark--on-light-image):not(.uma-wishlist-earmark--added) .uma-wishlist-earmark-icon { color: var(--bright-white); }

/* ---------- RESULTS ALIGNMENT ON (11 Oct 2026, tested live at 1440 and 375: pills and diagnostic cards on the content edge, 204px; phones unchanged). The parked block above stays as the notes. ---------- */
@media (min-width: 1280px) {
  .challenges-category-pills {
    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));
  }
  :root:where(.page-diagnostic) .diagnostic-centred-card-carousel {
    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));
  }
}
:root:where(.page-diagnostic) .preparing-text-columns { padding-bottom: var(--app-default-top-bottom-margin-xl); }
:root:where(.page-diagnostic) .preparing-text-columns > p:last-of-type { margin-bottom: 0; }

/* ---------- CARD HEART TWO MODES (11 Oct 2026, her rule, whole app). Search: CARD HEART TWO MODES ----------
   One shared rule for every card heart (.uma-wishlist-earmark: library, marketplace, Learn page shelves, wishlist):
   no circle ever; white on colour or dark pictures; charcoal on white or pale ones (uma-heart-contrast.js marks those
   uma-wishlist-earmark--on-light-image). A saved heart keeps its own colour. The library episode pill heart and the
   strategies pages' wand earmark (.uma-disc-wand-earmark) are different components and are not touched. */
.uma-wishlist-earmark:not(.library-episode-heart) { background: transparent; }
.uma-wishlist-earmark:not(.library-episode-heart):not(.uma-wishlist-earmark--on-light-image):not(.uma-wishlist-earmark--added) .uma-wishlist-earmark-icon { color: var(--bright-white); }
.uma-wishlist-earmark--on-light-image:not(.library-episode-heart):not(.uma-wishlist-earmark--added) .uma-wishlist-earmark-icon { color: var(--mid-charcoal); }

/* ---------- SCREENINGS FULL BLEED BOTTOM (11 Oct 2026, her ruling). Search: SCREENINGS FULL BLEED BOTTOM ----------
   The screenings scroll right to the bottom edge, full bleed: the 4rem empty space PHONE BOTTOM ROOM added at the end of
   each screening scroll area is taken off (onboarding keeps it). */
@media (max-width: 37.5rem) {
  :where(.screening-fixed-height) :is(.screening-title-page.screening-active, .health-screening-title-page, .screening-resultsPage.screening-active, .screening-q-content-wrap, .screening-reg-content)::after { display: none; }
}