/* Website alignment to BA Design System 2026.10, product UI (Teal).
 * Website profile v1.1 (proposed; change record CR-07, unsigned). Linked last on every page.
 * Colour, type, radius and focus values come from pearl-profile.css (profile.json v1.1).
 * This layer holds three things: the bridge from the Home study names to the profile,
 * the context variables that keep the action colour on clickable parts, and the Teal
 * details of buttons, links, focus, fields, cards and selected controls. Layout, spacing,
 * copy, diagrams and motion are left as they are.
 */

/* 1. Context. The action colour sits on clickable parts; static accents read ink.
 *    scripts/teal_alignment.py points every accent use at these two variables.
 *    The soft surface reads the recessed (inset) tint on static parts and the selected
 *    tint on clickable parts. The Home study names (--po-*) and the older names read the
 *    same roles. */
html[data-palette] body.option-connected.ba-pearl {
  --po-bg: var(--pearl-bg); --po-panel: var(--pearl-panel); --po-alt: var(--pearl-alt);
  --po-footer: var(--pearl-footer); --po-ink: var(--pearl-ink); --po-muted: var(--pearl-muted);
  --po-line: var(--pearl-line); --po-strong: var(--pearl-strong); --po-hover: var(--pearl-hover);
  --po-on: var(--pearl-on); --po-art: var(--pearl-art); --po-soft: var(--pearl-soft);
  --pearl-accent-text: var(--pearl-ink);
  --pearl-accent-mark: var(--pearl-ink);
  --po-accent: var(--pearl-ink);
  --ba-royal: var(--pearl-ink); --ba-violet: var(--pearl-ink); --release-slate: var(--pearl-ink);
  --ba-testnet: var(--pearl-ink);
  --diagram-signal: var(--pearl-art);
}
body.ba-pearl :is(a[href], button, summary, select, input, textarea, [role="button"], [role="tab"], [role="radio"], [role="checkbox"], [role="switch"], [role="option"], [role="menuitem"]) {
  --pearl-accent-text: var(--pearl-link);
  --pearl-accent-mark: var(--pearl-accent);
  --po-accent: var(--pearl-accent);
  --ba-royal: var(--pearl-link); --ba-violet: var(--pearl-link); --release-slate: var(--pearl-link);
  --infra-accent: var(--pearl-accent);
  --pearl-soft: var(--pearl-selected); --po-soft: var(--pearl-selected);
  --ba-wash: var(--pearl-selected); --ba-lavender-soft: var(--pearl-selected);
}

/* 2. Type. Bold in running text takes the profile weight where no rule sets one. */
:where(body.ba-pearl) :where(strong, b, th) { font-weight: var(--pearl-type-strong-weight); }
/* Two mono group labels sit in h3 and inherit the heading tracking: they keep the value they have today. */
body.ba-pearl .cf-estate-group > h3 { letter-spacing: -0.025em; }

/* 3. Buttons: 16 px, weight 600, control radius. Padding and minimum heights stay. */
body.ba-pearl :is(.header-action, .nav-access > a, .pf-button, .pos-button, .cc-button, .ba-submit, .ra-submit__btn, .co-submit__btn, button[data-submit]) {
  font-size: var(--pearl-type-action-size);
  font-weight: var(--pearl-type-action-weight);
  border-radius: var(--pearl-radius-control);
}
/* The control line height keeps each button at the height it has today. */
body.ba-pearl :is(.header-action, .nav-access > a, .pf-button, .pos-button, .cc-button) { line-height: var(--pearl-type-action-leading); }
/* The Home study buttons keep their 21 px line: 49 px on one line and 70 px on two, as today. */
body.ba-pearl .pos-button { line-height: 21px; }
/* The header action keeps its adopted height: 46.4 px under 1200 px and 48.1 px from 1200 px. */
body.ba-pearl .header-action { min-height: 46.4px; }
@media (min-width: 1200px) { body.ba-pearl .header-action { min-height: 48.1px; } }
/* Under 360 px the form buttons take Teal's 24 px button padding, so their label stays on one line. */
@media (max-width: 359px) { body.ba-pearl :is(.ba-submit, .ra-submit__btn, .co-submit__btn, button[data-submit]) { padding-left: 24px; padding-right: 24px; } }
/* The Request Access button in the phone menu is a button: no underline. */
body.ba-pearl .nav-access > a { text-decoration: none; }
/* The menu button keeps its compact phone text: the phone header has no spare width at 320 px. */
body.ba-pearl .menu-toggle { border-radius: var(--pearl-radius-control); }
@media (min-width: 681px) { body.ba-pearl .menu-toggle { font-weight: var(--pearl-type-action-weight); } }
@media (max-width: 680px) { body.ba-pearl .site-header .theme-toggle { border-radius: var(--pearl-radius-control); } }
body.ba-pearl .cr-access-action > span:last-child { font-size: var(--pearl-type-action-size); }

/* 4. Links. Underlines are 1 px at 3 px. Text links read the link colour: links inside a
 *    sentence, breadcrumb links, standalone text links and the role permalink. Menus, footer
 *    lists, contents lists, tabs and card titles keep ink or muted, as product navigation does. */
body.ba-pearl a { text-decoration-thickness: var(--pearl-link-underline); text-underline-offset: var(--pearl-link-underline-offset); }
body.ba-pearl :is(.pf-breadcrumb, .lp-crumb) a,
body.ba-pearl :is(p, .co-check__label, .ra-check__label) > a:not([class]),
body.ba-pearl :is(a.pos-text-link, a.xa-permalink) { color: var(--pearl-link); }
/* A link inside a sentence is underlined at rest. */
body.ba-pearl p > a:not([class]) { text-decoration-line: underline; }
/* The policy contents list reads nav ink, as the article contents list and Teal's side
 * navigation do; the current section keeps ink, weight 600 and the action mark. */
body.ba-pearl .lp-toc__link:not(.is-active):not(:hover) { color: var(--pearl-muted); }
body.ba-pearl .lp-page .lp-toc__link:hover { color: var(--pearl-ink); }
/* Breadcrumb links underline on hover, as Teal breadcrumbs do. */
body.ba-pearl :is(.pf-breadcrumb, .lp-crumb) a:hover { text-decoration-line: underline; }

/* 5. Focus: 2 px ink ring at 2 px, with a 1 px inner line in the surface colour.
 *    The rule below has no specificity: it draws the ring on anything that takes keyboard
 *    focus and styles no ring of its own (for example a scrolling list), and yields to
 *    every rule below and in the page stylesheets. */
:where(body.ba-pearl :focus-visible) { outline: var(--pearl-focus-width) solid var(--pearl-focus); outline-offset: var(--pearl-focus-offset); }
:where(body.ba-pearl) :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { box-shadow: 0 0 0 var(--pearl-focus-inner) var(--pearl-panel); }
body.ba-pearl :where([tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"]):focus-visible { outline: var(--pearl-focus-width) solid var(--pearl-focus); outline-offset: var(--pearl-focus-offset); }
body.ba-pearl a:focus-visible { border-radius: var(--pearl-focus-link-radius); }
/* A ring that meets a clipping or scrolling edge is drawn inside the element edge, so it stays whole.
 * The AI study panel has no clipping edge and its text meets its edge: its ring stays outside. */
body.ba-pearl :is(.pf-record:not(.ai-study-panel), .pos-domain-panel, .wc-panel, .wc-need):focus-visible,
body.ba-pearl .ai-disclosure-group details > summary:focus-visible { outline-offset: calc(0px - var(--pearl-focus-width)); }
/* Inside rings that would meet a drawn mark sit clear of it: the selected bar under a study
 * tab (2 px) and the marker of a contact index row (3 px). The tab offset is Teal's tab bar value. */
body.ba-pearl .ai-study-tab:focus-visible { outline-offset: -4px; }
body.ba-pearl .co-idx__row:focus-visible { outline-offset: -5px; }
/* The article contents list scrolls on wide screens: 4 px of room inside its edge, taken back
 * by the margin, keeps a ring outside each link whole without moving any text. */
@media (min-width: 901px) {
  body.ba-pearl .rs-toc { padding-left: 4px; margin-left: -4px; padding-bottom: 4px; margin-bottom: -4px; }
}
/* Parts that draw a shadow of their own keep it beside the 1 px inner line, as Teal's parts do. */
body.ba-pearl .xa-role[open] > summary:focus-visible { box-shadow: inset 3px 0 var(--pearl-motion-data), 0 0 0 var(--pearl-focus-inner) var(--pearl-panel); }
body.ba-pearl .ai-menu-section .ai-study-tab[aria-selected="true"]:focus-visible { box-shadow: 0 0 0 1px var(--pearl-strong), 0 0 0 calc(1px + var(--pearl-focus-inner)) var(--pearl-panel); }
/* When a contents list scrolls a focused link into view, it stops with room for the ring. */
body.ba-pearl :is(.rs-toc, .lp-toc) { scroll-padding-block: calc(var(--pearl-focus-offset) + var(--pearl-focus-width)); }

/* 6. Fields: control edge, control radius, field surface. Heights stay. */
body.ba-pearl :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  border-color: var(--pearl-strong);
  border-radius: var(--pearl-radius-control);
  background-color: var(--pearl-input);
}

/* 7. Skip link: the Teal part (panel, ink, control edge). */
body.ba-pearl .skip-link { background: var(--pearl-panel); color: var(--pearl-ink); border: 1px solid var(--pearl-strong); border-radius: var(--pearl-radius-control); font-weight: var(--pearl-type-action-weight); }

/* 8. Cards and panels: panel radius and the card shadow, on boxes that are drawn as cards
 *    (a fill or an edge on all four sides). Edges keep their profile roles. Rows under a single
 *    rule, diagram parts and tab strips keep their drawn corners; selectable items take the
 *    control radius. */
body.ba-pearl :is(
  .lp-summary, .lp-toc, .lp-aside__contact,
  .co-idx, .co-security,
  figure.lifecycle, .ref-evidence-object, .xp-secondary, .tf-secondary,
  .cf-purpose-grid article:not(:first-child), .cf-dedication, .cf-testnet-exhibit, .cf-inventory-board,
  .tf-tools:not(.dd-tools), .cr-stage, .xq-boundary--professionals .xq-item, .xw-artifact, .ref-history-fixed,
  .cf-company-description, .xa-role-body, .xw-branch,
  .pos-section--record-purpose .pos-section-intro, .pf-relation--workspaces, .pf-relation--programs-activation,
  :is(.pf-mechanism--programs-activation, .pf-mechanism--evidence-model) .pf-steps li
) { border-radius: var(--pearl-radius-panel); }
body.ba-pearl :is(
  .pf-art, .pf-explorer:not(.ai-study-explorer):not(.wc-explorer), .pf-thread-figure, .gl-art, .ai-study-figure, .ra-plate, .co-formpanel,
  .pos-review, .pos-community-panel, .pos-taxonomy,
  .sec-adoption-path, .sec-source-path, .sec-report-anatomy, .sec-architecture-evidence, .sec-oft-route, .sec-review-docket,
  .lp-summary, .lp-toc, .lp-aside__contact, .co-idx, .co-security,
  figure.lifecycle, .ref-evidence-object, .xp-secondary, .tf-secondary,
  .cf-purpose-grid article:not(:first-child), .cf-dedication, .cf-testnet-exhibit, .cf-inventory-board,
  .tf-tools:not(.dd-tools), .cr-stage, .xq-boundary--professionals .xq-item, .xw-artifact, .ref-history-fixed,
  .cf-company-description, .xa-role-body, .xw-branch,
  .pos-section--record-purpose .pos-section-intro, .pf-relation--workspaces, .pf-relation--programs-activation,
  :is(.pf-mechanism--programs-activation, .pf-mechanism--evidence-model) .pf-steps li
) { box-shadow: var(--pearl-shadow-card); }
/* A card that takes keyboard focus keeps its shadow beside the 1 px inner line (same list as above,
 * so this rule outranks it). */
body.ba-pearl :is(
  .pf-art, .pf-explorer:not(.ai-study-explorer):not(.wc-explorer), .pf-thread-figure, .gl-art, .ai-study-figure, .ra-plate, .co-formpanel,
  .pos-review, .pos-community-panel, .pos-taxonomy,
  .sec-adoption-path, .sec-source-path, .sec-report-anatomy, .sec-architecture-evidence, .sec-oft-route, .sec-review-docket,
  .lp-summary, .lp-toc, .lp-aside__contact, .co-idx, .co-security,
  figure.lifecycle, .ref-evidence-object, .xp-secondary, .tf-secondary,
  .cf-purpose-grid article:not(:first-child), .cf-dedication, .cf-testnet-exhibit, .cf-inventory-board,
  .tf-tools:not(.dd-tools), .cr-stage, .xq-boundary--professionals .xq-item, .xw-artifact, .ref-history-fixed,
  .cf-company-description, .xa-role-body, .xw-branch,
  .pos-section--record-purpose .pos-section-intro, .pf-relation--workspaces, .pf-relation--programs-activation,
  :is(.pf-mechanism--programs-activation, .pf-mechanism--evidence-model) .pf-steps li
):focus-visible { box-shadow: 0 0 0 var(--pearl-focus-inner) var(--pearl-panel), var(--pearl-shadow-card); }
/* Panels whose rows meet the edge: the rounded corner clips them. */
body.ba-pearl :is(.pf-explorer:not(.ai-study-explorer):not(.wc-explorer), .pos-taxonomy, .pos-community-panel, .sec-review-docket, .sec-report-anatomy, .ra-plate) { overflow: clip; }
body.ba-pearl :is(.rs-verify-top, .rs-verify-record, .rs-verify-review, .rs-architecture > div[data-pf-node], .sec-research-lens) { border-radius: var(--pearl-radius-diagram); }
body.ba-pearl :is(.ex-control-key, .wc-need, .ai-study-tab, .dd-category) { border-radius: var(--pearl-radius-control); }
/* Notices (Teal notice part) and the country lists that open under a field take the control radius. */
body.ba-pearl :is(.ba-local-form-notice, .ba-local-receipt, .ra-invnote, .co-audnote, .ra-cb__menu, .co-cb__menu) { border-radius: var(--pearl-radius-control); }
/* Notices take the Teal notice edge (border-subtle). Fill and text stay. */
body.ba-pearl :is(.ba-local-form-notice, .ba-local-receipt, .ra-invnote, .co-audnote) { border-color: var(--pearl-line); }

/* 9. Fit. One long address in the policy contact card is 302 px wide in IBM Plex Sans and
 *    its column is 272 px on a 320 px screen: the address may wrap and the column may shrink. */
body.ba-pearl .lp-aside { min-width: 0; }
body.ba-pearl .lp-aside__contact a { overflow-wrap: anywhere; }
/* Under 360 px the card takes 16 px side padding and the address 15 px (the body floor), so the
 * longest address (252 px at 16 px) stays on one line in its 238 px column. */
@media (max-width: 359px) {
  body.ba-pearl .lp-aside__contact { padding-left: 16px; padding-right: 16px; }
  body.ba-pearl .lp-aside__contact a { font-size: 15px; }
}

/* 10. Selected controls: the Teal selected look (filter and choice parts). The selected surface,
 *     an action edge of 2 px (1 px border and 1 px inside) and the selected text colour. The action
 *     fill stays on buttons. Pill filters also take weight 600, as the Teal filter does; the category
 *     tiles keep their weight, as the Teal choice card does, because a heavier label rewraps inside
 *     the fixed tile and moves the grid when a category is chosen. */
body.ba-pearl :is(.ba-chip[data-on="true"], .dd-category[aria-pressed="true"]) {
  background: var(--pearl-selected);
  border-color: var(--pearl-accent);
  color: var(--pearl-selected-ink);
  box-shadow: inset 0 0 0 1px var(--pearl-accent);
}
body.ba-pearl .ba-chip[data-on="true"] { font-weight: var(--pearl-type-action-weight); }
/* A selected tab or toggle keeps an ink label, as the Teal tab does; its bar, edge or mark stays Teal. */
body.ba-pearl :is([role="tab"][aria-selected="true"], .co-idx__row[aria-pressed="true"], .lifecycle-stage[aria-pressed="true"], .infra-control[aria-pressed="true"]) { --pearl-accent-text: var(--pearl-ink); }
body.ba-pearl .ex-study .ex-control-key[aria-selected="true"] {
  background: var(--pearl-selected);
  border-color: var(--pearl-accent);
  color: var(--pearl-ink);
  box-shadow: inset 0 0 0 1px var(--pearl-accent);
}
body.ba-pearl :is(.ba-chip[data-on="true"], .dd-category[aria-pressed="true"], .ex-study .ex-control-key[aria-selected="true"]):focus-visible {
  box-shadow: inset 0 0 0 1px var(--pearl-accent), 0 0 0 var(--pearl-focus-inner) var(--pearl-panel);
}
/* In forced colours (Windows high contrast) fills are replaced by the system colours, so a
 * selected control is marked with the system highlight outline, as in the Teal parts. */

/* 11. Unavailable controls: the Teal unavailable state (inset fill, subtle edge, muted text). A control
 *     that cannot be used shows no action colour, no selected look and no hover change. */
body.ba-pearl :is(button, input, select, textarea, [role="button"]):is(:disabled, [aria-disabled="true"]),
body.ba-pearl :is(button, input, select, textarea, [role="button"]):is(:disabled, [aria-disabled="true"]):hover {
  background: var(--pearl-alt);
  border-color: var(--pearl-line);
  color: var(--pearl-muted);
  box-shadow: none;
  cursor: not-allowed;
}
body.ba-pearl :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):is(:disabled, [aria-disabled="true"]) {
  background-color: var(--pearl-alt);
  border-color: var(--pearl-line);
}
@media (forced-colors: active) {
  body.ba-pearl :is(.ba-chip[data-on="true"], .dd-category[aria-pressed="true"], .ex-study .ex-control-key[aria-selected="true"]) { outline: 2px solid Highlight; outline-offset: -2px; }
  body.ba-pearl :is(button, input, select, textarea):disabled { color: GrayText; border-color: GrayText; }
}