/* ============================================================================
   BioProfile - the member layer's base (T271, 2026-09-11).

   The pages a customer meets and pays for: the scan, the results, the plan, the
   account and the way in. They run on the design system (tokens.css, base.css,
   components.css) and on their own sheets; this file is loaded LAST by every one
   of them and by nothing else, so a console cannot move because of it. It is the
   member layer's half of what app/admin/console.css is to the consoles: the same
   measured method, the brand's own look kept.

   What it answers, measured on the served pages at 1440, 390 and 375 in NL and
   EN before the pass (app/qa/member-ux/readings-before.json):
     1. the muted text ramp under WCAG AA on every ground a member page draws (the
        five passing values are the design system's own tokens since T273);
     2. the member shell: the logo link and the bell under a thumb's 44 px (the
        pillar words, which T271 drew in ink on lime and olive, are the member
        shell's own sheet since T271b: app/shell/member-shell.css);
     3. one focus ring on everything that can hold the keyboard.
   What it does NOT do: restyle the brand. Teal, the four pillar colours, Poppins,
   the rounded cards and the pill buttons stay exactly the brand's.
   ========================================================================== */

/* ---- 1. the text tokens ------------------------------------------------------
   T271 retuned --ink-2, --ink-3, --ink-4, --ok and --alert here to the values
   app/admin/console.css gave a console page. T273 made those the design system's
   own values (design-system/css/tokens.css), so both retunes are gone and every
   page reads one muted ink. */

/* ---- 2. the member shell -----------------------------------------------------
   T271 drew the words of the lime and olive pillars in ink; T271b moved the whole
   look into app/shell/member-shell.css; T283b-r2 (2026-09-14) reverted that
   design, unconfirmed by Jesse, so the member navigation is the design system's
   own again (components.css). Nothing of it is drawn here. */

/* The language switch's 8 px and the shell frame as a column moved to the standard
   (design-system/css/components.css) with T273: every layer's switch and frame. */

/* The bell is a button, 40 px tall, under a thumb: the target grows, the drawing
   does not. (The logo link's 44 px is the design system's since T273.) */
.bp-bell { width: 44px; height: 44px; }
.bp-bell__all { min-height: 44px; padding: 0 8px; }

/* ---- 3. the design system's pieces the member pages draw ----------------------
   The tabs' 8 px and the trend arrow's word shade are the design system's own
   rules since T273 (components.css `.tabs`, `.delta__arrow`). */

/* ---- 4. the keyboard ---------------------------------------------------------
   One ring, the console base's: 2 px teal, 2 px out. Written with :where() so it
   carries no weight, and any control that draws its own focus keeps it. */
:where(a, button, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--bp-teal); outline-offset: 2px;
}

/* ---- 5. the step chrome on a member page (T271b) ----------------------------
   The step's rail (design-system/css/steps.css) drew a white box across the page;
   on a member page it sits on the page's own ground, so the level step reads as
   the page and not as a card inside it. */
.bp-steps__rail { background: var(--paper-2); }